From 7c7afb425fe36ef486bcb7b89ec320e8df508fc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20W?= Date: Sat, 20 Apr 2019 06:44:35 +0200 Subject: [PATCH] Name per state and new show_name parameter (#95) * Possibility to define a name per state and introduce a show_name parameter, defaults to using the entity name --- README.md | 5 ++++- button-card.js | 27 +++++++++++++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 143bf7e..b258616 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Lovelace Button card for your entities. ## Features - works with any toggleable entity -- 3 actions on tap `none`, `toggle`, `more-info` and `call-service` +- 5 actions on tap `none`, `toggle`, `more-info`, `navigate` and `call-service` - state display (optional) - custom color (optional), or based on light rgb value - custom state definition with customizable color, icon and style (optional) @@ -48,6 +48,7 @@ Lovelace Button card for your entities. | `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel | | `tap_action` | object | optional | See [Service](#Action) | Define the type of action, if undefined, toggle will be used. | | `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon | +| `show_name` | boolean | `true` | `true` \| `false` | Wether to show the name or not. Will pick entity_id's name by default, unless redefined in the `name` property or in any state `name` property | | `show_state` | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set | | `show_icon` | boolean | `true` | `true` \| `false` | Wether to show the icon or not. Unless redefined in `icon`, uses the default entity icon from hass | | `style` | object list | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card | @@ -70,6 +71,7 @@ Lovelace Button card for your entities. | ---------- | ------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | `operator` | string | `==` | See [Available Operators](#Available-operators) | The operator used to compare the current state against the `value` | | `value` | string/number | **required** (unless operator is `default`) | If your entity is a sensor with numbers, use a number directly, else use a string | The value which will be compared against the current state of the entity | +| `name` | string | optional | Any string, `'Alert'`, `'My little switch is on'`, ... | if `show_name` is `true`, the name to display for this state. If undefined, uses the general config `name`, and if undefined uses the entity name | | `icon` | string | optional | `mdi:battery` | The icon to display for this state. Defaults to the entity icon. Hide with `show_icon: false` | | `color` | string | `var(--primary-text-color)` | Any color, eg: `rgb(28, 128, 199)` or `blue` | The color of the icon (if `color_type: icon`) or the background (if `color_type: card`) | | `style` | string | optional | Any CSS style. If nothing is specified, the main style is used unless undefined. If you want to override the default style of the main part of the config, use `style: []` | Define a list of css attribute and their value to apply to the card | @@ -357,6 +359,7 @@ The `navigation_path` also accepts any Home Assistant internal URL such as /dev- #### blink You can make the whole button blink: + ![blink-animation](examples/blink-animation.gif) ```yaml diff --git a/button-card.js b/button-card.js index 7542885..a2b4cab 100644 --- a/button-card.js +++ b/button-card.js @@ -371,6 +371,21 @@ export default function domainIcon(domain, state) { return cardStyle; } + buildName(state, configState) { + let name = null; + if (configState && configState.name) { + name = configState.name; + } else if (this.config.name) { + name = this.config.name; + } else { + if (state) { + name = state.attributes && state.attributes.friendly_name ? + state.attributes.friendly_name : state.entity_id.split('.', 2)[1]; + } + } + return name; + } + isClickable(state, config) { let clickable = true; if (config.tap_action.action == 'toggle') { @@ -411,12 +426,13 @@ export default function domainIcon(domain, state) { const fontColor = this.getFontColorBasedOnBackgroundColor(color); const icon = this.buildIcon(state, config, configState); const style = this.buildStyle(state, config, configState); + const name = this.buildName(state, configState); return html`
${config.show_icon && icon ? html`` : ''} - ${config.name ? html`
${config.name}
` : ''} + ${config.show_name && name ? html`
${name}
` : ''}
@@ -428,12 +444,13 @@ export default function domainIcon(domain, state) { const fontColor = this.getFontColorBasedOnBackgroundColor(color); const icon = this.buildIcon(state, config, configState); const style = this.buildStyle(state, config, configState); + const name = this.buildName(state, configState); return html`
${config.show_icon && icon ? html`` : ''} - ${config.name ? html`
${config.name}
` : ''} + ${config.show_name && name ? html`
${name}
` : ''} ${config.show_state ? html`
${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}
` : ''}
@@ -445,12 +462,13 @@ export default function domainIcon(domain, state) { const color = this.buildCssColorAttribute(state, config, configState); const icon = this.buildIcon(state, config, configState); const style = this.buildStyle(state, config, configState); + const name = this.buildName(state, configState); return html`
${config.show_icon && icon ? html`` : ''} - ${config.name ? html`
${config.name}
` : ''} + ${config.show_name && name ? html`
${name}
` : ''} ${config.show_state ? html`
${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}
` : ''}
@@ -464,7 +482,8 @@ export default function domainIcon(domain, state) { size: '40%', color_type: 'icon', default_color: 'var(--primary-text-color)', - name: '', + show_name: true, + show_state: false, show_icon: true, ...config };