From 02f90167ac21b415677221121e83f30f90d69322 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 16 Apr 2019 17:20:53 -0500
Subject: [PATCH] New item option `entity_picture`

---
 README.md           |  5 +--
 dist/radial-menu.js | 63 +++++++++++++++++++++++---------
 package.json        |  2 +-
 src/radial-menu.ts  | 87 ++++++++++++++++++++++++++++++++-------------
 src/types.ts        |  5 +--
 5 files changed, 117 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 029660f..6ec54ca 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,8 @@ This element is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home
 | ---- | ---- | ------- | ----------- | -------
 | entity | string | **Optional** | Home Assistant entity ID. | `none`
 | name | string | **Optional** | Tooltip for main menu | `Menu`
-| icon | string | **Optional** | mdi icon for main menu | `mdi:menu`
+| icon | string | **Optional** | mdi icon for main menu | `none`
+| entity_picture | string | **Optional** | picture to display | `none`
 | tap_action | object | **Optional** | Action to take on tap | `action: more-info`
 
 ## Action Options
@@ -93,7 +94,7 @@ items:
       service: timer.start
       service_data:
         entity_id: timer.laundry
-  - icon: 'mdi:headphones'
+  - entity_picture: '/local/headphones.png'
     name: Podcasts
     tap_action:
       action: navigate
diff --git a/dist/radial-menu.js b/dist/radial-menu.js
index 332f91f..c0c2e6b 100644
--- a/dist/radial-menu.js
+++ b/dist/radial-menu.js
@@ -2502,23 +2502,53 @@ let RadialMenu = class RadialMenu extends LitElement {
       <nav class="circular-menu">
         <div class="circle">
           ${this._config.items.map((item, index) => {
-            return html `
-              <ha-icon
-                @click="${this._handleTap}"
-                .config="${item}"
-                .icon="${item.icon}"
-                .title="${item.name}"
-                style="
+            return item.entity_picture
+                ? html `
+                  <hui-image
+                    @click="${this._handleTap}"
+                    .hass="${this.hass}"
+                    .image="${item.entity_picture}"
+                    .title="${item.name}"
+                    style="
                 left:${(50 -
-                35 *
-                    Math.cos(-0.5 * Math.PI -
-                        2 * (1 / this._config.items.length) * index * Math.PI)).toFixed(4) + "%"};
+                    35 *
+                        Math.cos(-0.5 * Math.PI -
+                            2 *
+                                (1 / this._config.items.length) *
+                                index *
+                                Math.PI)).toFixed(4) + "%"};
                 top:${(50 +
-                35 *
-                    Math.sin(-0.5 * Math.PI -
-                        2 * (1 / this._config.items.length) * index * Math.PI)).toFixed(4) + "%"};"
-              ></ha-icon>
-            `;
+                    35 *
+                        Math.sin(-0.5 * Math.PI -
+                            2 *
+                                (1 / this._config.items.length) *
+                                index *
+                                Math.PI)).toFixed(4) + "%"};"
+                  ></hui-image>
+                `
+                : html `
+                  <ha-icon
+                    @click="${this._handleTap}"
+                    .config="${item}"
+                    .icon="${item.icon}"
+                    .title="${item.name}"
+                    style="
+                left:${(50 -
+                    35 *
+                        Math.cos(-0.5 * Math.PI -
+                            2 *
+                                (1 / this._config.items.length) *
+                                index *
+                                Math.PI)).toFixed(4) + "%"};
+                top:${(50 +
+                    35 *
+                        Math.sin(-0.5 * Math.PI -
+                            2 *
+                                (1 / this._config.items.length) *
+                                index *
+                                Math.PI)).toFixed(4) + "%"};"
+                  ></ha-icon>
+                `;
         })}
         </div>
         <ha-icon
@@ -2579,7 +2609,8 @@ let RadialMenu = class RadialMenu extends LitElement {
         transform: scale(1);
       }
 
-      .circle ha-icon {
+      .circle ha-icon,
+      .circle hui-image {
         text-decoration: none;
         display: block;
         height: 40px;
diff --git a/package.json b/package.json
index 57fbd7b..42cb87f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "radial-menu",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Lovelace radial-menu",
     "keywords": [
         "home-assistant",
diff --git a/src/radial-menu.ts b/src/radial-menu.ts
index 92cca47..4af5213 100644
--- a/src/radial-menu.ts
+++ b/src/radial-menu.ts
@@ -43,31 +43,69 @@ class RadialMenu extends LitElement {
       <nav class="circular-menu">
         <div class="circle">
           ${this._config.items.map((item, index) => {
-            return html`
-              <ha-icon
-                @click="${this._handleTap}"
-                .config="${item}"
-                .icon="${item.icon}"
-                .title="${item.name}"
-                style="
+            return item.entity_picture
+              ? html`
+                  <hui-image
+                    @click="${this._handleTap}"
+                    .hass="${this.hass}"
+                    .image="${item.entity_picture}"
+                    .title="${item.name}"
+                    style="
                 left:${(
-                  50 -
-                  35 *
-                    Math.cos(
-                      -0.5 * Math.PI -
-                        2 * (1 / this._config!.items.length) * index * Math.PI
-                    )
-                ).toFixed(4) + "%"};
+                      50 -
+                      35 *
+                        Math.cos(
+                          -0.5 * Math.PI -
+                            2 *
+                              (1 / this._config!.items.length) *
+                              index *
+                              Math.PI
+                        )
+                    ).toFixed(4) + "%"};
                 top:${(
-                  50 +
-                  35 *
-                    Math.sin(
-                      -0.5 * Math.PI -
-                        2 * (1 / this._config!.items.length) * index * Math.PI
-                    )
-                ).toFixed(4) + "%"};"
-              ></ha-icon>
-            `;
+                      50 +
+                      35 *
+                        Math.sin(
+                          -0.5 * Math.PI -
+                            2 *
+                              (1 / this._config!.items.length) *
+                              index *
+                              Math.PI
+                        )
+                    ).toFixed(4) + "%"};"
+                  ></hui-image>
+                `
+              : html`
+                  <ha-icon
+                    @click="${this._handleTap}"
+                    .config="${item}"
+                    .icon="${item.icon}"
+                    .title="${item.name}"
+                    style="
+                left:${(
+                      50 -
+                      35 *
+                        Math.cos(
+                          -0.5 * Math.PI -
+                            2 *
+                              (1 / this._config!.items.length) *
+                              index *
+                              Math.PI
+                        )
+                    ).toFixed(4) + "%"};
+                top:${(
+                      50 +
+                      35 *
+                        Math.sin(
+                          -0.5 * Math.PI -
+                            2 *
+                              (1 / this._config!.items.length) *
+                              index *
+                              Math.PI
+                        )
+                    ).toFixed(4) + "%"};"
+                  ></ha-icon>
+                `;
           })}
         </div>
         <ha-icon
@@ -133,7 +171,8 @@ class RadialMenu extends LitElement {
         transform: scale(1);
       }
 
-      .circle ha-icon {
+      .circle ha-icon,
+      .circle hui-image {
         text-decoration: none;
         display: block;
         height: 40px;
diff --git a/src/types.ts b/src/types.ts
index 4f2ee77..9d295b3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,14 +10,15 @@ import {
 export interface RadialMenuConfig {
   type: string;
   name: string;
-  icon: string;
+  icon?: string;
   default_open?: boolean;
   default_dismiss?: boolean;
   items: RadialMenuItemConfig[];
 }
 
 export interface RadialMenuItemConfig {
-  icon: string;
+  icon?: string;
+  entity_picture?: string;
   name?: string;
   entity?: string;
   tap_action?: ActionConfig;