Skip to content

Commit

Permalink
New item option entity_picture
Browse files Browse the repository at this point in the history
  • Loading branch information
@iantrich
iantrich committed Apr 16, 2019
1 parent 8eda895 commit 02f9016
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 45 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
63 changes: 47 additions & 16 deletions dist/radial-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "radial-menu",
"version": "1.1.0",
"version": "1.2.0",
"description": "Lovelace radial-menu",
"keywords": [
"home-assistant",
Expand Down
87 changes: 63 additions & 24 deletions src/radial-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 02f9016

Please sign in to comment.