zhangyuqing
/
button-card
mirror of https://github.com/custom-cards/button-card.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add group_expand

This commit is contained in:
Jérôme Wiedemann 2020-11-01 19:34:09 +00:00
parent 67c637bdff
commit 0ca11564b9
3 changed files with 200 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

323
README.md
View File

@ -86,68 +86,69 @@ Lovelace Button card for your entities.
### Main Options
| Name | Type | Default | Supported options | Description |
| -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | string | **Required** | `custom:button-card` | Type of the card |
| `template` | string | optional | any valid template from `button_card_templates` | See [configuration template](#Configuration-Templates) |
| `entity` | string | optional | `switch.ac` | entity_id |
| `triggers_update` | string or array | optional | `switch.ac` | entity_id list that would trigger a card update, see [triggers_update](#triggers_update) |
| `icon` | string | optional | `mdi:air-conditioner` | Icon to display. Will be overridden by the icon defined in a state (if present). Defaults to the entity icon. Hide with `show_icon: false`. Supports templates, see [templates](#javascript-templates) |
| `color_type` | string | `icon` | `icon` \| `card` \| `blank-card` \| `label-card` | Color either the background of the card or the icon inside the card. Setting this to `card` enable automatic `font` and `icon` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options `blank-card` and `label-card` can be used for organisation (see examples). |
| `color` | string | optional | `auto` \| `auto-no-temperature` \| `rgb(28, 128, 199)` | Color of the icon/card. `auto` sets the color based on the color of a light including the temperature of the light. Setting this to `auto-no-temperature` will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is `off`, the color will be `var(--paper-item-icon-color)`, for `on` it will be `var(--paper-item-icon-active-color)` and for any other state it will be `var(--primary-text-color)`. You can redefine each colors using `state` |
| `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
| `aspect_ratio` | string | optional | `1/1`, `2/1`, `1/1.5`, ... | See [here](#aspect-ratio) for an example. Aspect ratio of the card. `1/1` being a square. This will auto adapt to your screen size |
| `tap_action` | object | optional | See [Action](#Action) | Define the type of action on click, if undefined, toggle will be used. |
| `hold_action` | object | optional | See [Action](#Action) | Define the type of action on hold, if undefined, nothing happens. |
| `double_tap_action` | object | optional | See [Action](#Action) | Define the type of action on double click, if undefined, nothing happens. |
| `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon. Supports templates, see [templates](#javascript-templates) |
| `state_display` | string | optional | `On` | Override the way the state is displayed. Supports templates, see [templates](#javascript-templates) |
| `label` | string | optional | Any string that you want | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates) |
| `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 |
| `show_units` | boolean | `true` | `true` \| `false` | Display or hide the units of a sensor, if any. |
| `show_label` | boolean | `false` | `true` \| `false` | Display or hide the `label` |
| `show_last_changed` | boolean | `false` | `true` \| `false` | Replace the label altogether and display the the `last_changed` attribute in a nice way (eg: `12 minutes ago`) |
| `show_entity_picture` | boolean | `false` | `true` \| `false` | Replace the icon by the entity picture (if any) or the custom picture (if any). Falls back to using the icon if both are undefined |
| `show_live_stream` | boolean | `false` | `true` \| `false` | Display the camera stream (if the entity is a camera). Requires the `stream:` component to be enabled in home-assistant's config |
| `entity_picture` | string | optional | Can be any of `/local/*` file or a URL | Will override the icon/the default entity_picture with your own image. Best is to use a square image. You can also define one per state. Supports templates, see [templates](#javascript-templates) |
| `units` | string | optional | `Kb/s`, `lux`, ... | Override or define the units to display after the state of the entity. If omitted, it's using the entity's units |
| `styles` | object list | optional | | See [styles](#styles) |
| `extra_styles` | string | optional | | See [styles](#styles) |
| `state` | object list | optional | See [State](#State) | State to use for the color, icon and style of the button. Multiple states can be defined |
| `confirmation` | object | optional | See [confirmation](#confirmation) | Display a confirmation popup |
| `lock` | object | optional | See [Lock Object](#lock-object) | Displays a lock on the button |
| `layout` | string | optional | See [Layout](#Layout) | The layout of the button can be modified using this option |
| `custom_fields` | object | optional | See [Custom Fields](#Custom-Fields) |
| `variables` | object | optional | See [Variables](#Variables) |
| `card_size` | number | 3 | Any number | Configure the card size seen by the auto layout feature of lovelace (lovelace will multiply the value by about 50px) |
| `tooltip` | string | optional | Any string | (Not supported on touchscreens) You can configure the tooltip displayed after hovering the card for 1.5 seconds . Supports templates, see [templates](#javascript-templates) |
| Name | Type | Default | Supported options | Description |
| --------------------- | --------------- | ------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | string | **Required** | `custom:button-card` | Type of the card |
| `template` | string | optional | any valid template from `button_card_templates` | See [configuration template](#Configuration-Templates) |
| `entity` | string | optional | `switch.ac` | entity_id |
| `triggers_update` | string or array | optional | `switch.ac` | entity_id list that would trigger a card update, see [triggers_update](#triggers_update) |
| `group_expand` | boolean | false | `true` \| `false` | When `true`, if any of the entities triggering a card update is a group, it will auto-expand the group and the card will update on any child entity state change. This works with nested groups too. See [triggers_update](#triggers_update) |
| `icon` | string | optional | `mdi:air-conditioner` | Icon to display. Will be overridden by the icon defined in a state (if present). Defaults to the entity icon. Hide with `show_icon: false`. Supports templates, see [templates](#javascript-templates) |
| `color_type` | string | `icon` | `icon` \| `card` \| `blank-card` \| `label-card` | Color either the background of the card or the icon inside the card. Setting this to `card` enable automatic `font` and `icon` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options `blank-card` and `label-card` can be used for organisation (see examples). |
| `color` | string | optional | `auto` \| `auto-no-temperature` \| `rgb(28, 128, 199)` | Color of the icon/card. `auto` sets the color based on the color of a light including the temperature of the light. Setting this to `auto-no-temperature` will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is `off`, the color will be `var(--paper-item-icon-color)`, for `on` it will be `var(--paper-item-icon-active-color)` and for any other state it will be `var(--primary-text-color)`. You can redefine each colors using `state` |
| `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
| `aspect_ratio` | string | optional | `1/1`, `2/1`, `1/1.5`, ... | See [here](#aspect-ratio) for an example. Aspect ratio of the card. `1/1` being a square. This will auto adapt to your screen size |
| `tap_action` | object | optional | See [Action](#Action) | Define the type of action on click, if undefined, toggle will be used. |
| `hold_action` | object | optional | See [Action](#Action) | Define the type of action on hold, if undefined, nothing happens. |
| `double_tap_action` | object | optional | See [Action](#Action) | Define the type of action on double click, if undefined, nothing happens. |
| `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon. Supports templates, see [templates](#javascript-templates) |
| `state_display` | string | optional | `On` | Override the way the state is displayed. Supports templates, see [templates](#javascript-templates) |
| `label` | string | optional | Any string that you want | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates) |
| `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 |
| `show_units` | boolean | `true` | `true` \| `false` | Display or hide the units of a sensor, if any. |
| `show_label` | boolean | `false` | `true` \| `false` | Display or hide the `label` |
| `show_last_changed` | boolean | `false` | `true` \| `false` | Replace the label altogether and display the the `last_changed` attribute in a nice way (eg: `12 minutes ago`) |
| `show_entity_picture` | boolean | `false` | `true` \| `false` | Replace the icon by the entity picture (if any) or the custom picture (if any). Falls back to using the icon if both are undefined |
| `show_live_stream` | boolean | `false` | `true` \| `false` | Display the camera stream (if the entity is a camera). Requires the `stream:` component to be enabled in home-assistant's config |
| `entity_picture` | string | optional | Can be any of `/local/*` file or a URL | Will override the icon/the default entity_picture with your own image. Best is to use a square image. You can also define one per state. Supports templates, see [templates](#javascript-templates) |
| `units` | string | optional | `Kb/s`, `lux`, ... | Override or define the units to display after the state of the entity. If omitted, it's using the entity's units |
| `styles` | object list | optional | | See [styles](#styles) |
| `extra_styles` | string | optional | | See [styles](#styles) |
| `state` | object list | optional | See [State](#State) | State to use for the color, icon and style of the button. Multiple states can be defined |
| `confirmation` | object | optional | See [confirmation](#confirmation) | Display a confirmation popup |
| `lock` | object | optional | See [Lock Object](#lock-object) | Displays a lock on the button |
| `layout` | string | optional | See [Layout](#Layout) | The layout of the button can be modified using this option |
| `custom_fields` | object | optional | See [Custom Fields](#Custom-Fields) |
| `variables` | object | optional | See [Variables](#Variables) |
| `card_size` | number | 3 | Any number | Configure the card size seen by the auto layout feature of lovelace (lovelace will multiply the value by about 50px) |
| `tooltip` | string | optional | Any string | (Not supported on touchscreens) You can configure the tooltip displayed after hovering the card for 1.5 seconds . Supports templates, see [templates](#javascript-templates) |
### Action
All the fields support templates, see [templates](#javascript-templates).
| Name | Type | Default | Supported options | Description |
| ----------------- | ------ | -------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `action` | string | `toggle` | `more-info`, `toggle`, `call-service`, `none`, `navigate`, `url` | Action to perform |
| `entity` | string | none | Any entity id | **Only valid for `action: more-info`** to override the entity on which you want to call `more-info` |
| `navigation_path` | string | none | Eg: `/lovelace/0/` | Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate |
| `url_path` | string | none | Eg: `https://www.google.fr` | URL to open on click when action is `url`. The URL will open in a new tab |
| `service` | string | none | Any service | Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service` |
| `service_data` | object | none | Any service data | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. If your `service_data` requires an `entity_id`, you can use the keywork `entity`, this will actually call the service on the entity defined in the main configuration of this card. Useful for [configuration templates](#configuration-templates) |
| `haptic` | string | none | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection` | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) |
| `repeat` | number | none | eg: `500` | For a hold_action, you can optionally configure the action to repeat while the button is being held down (for example, to repeatedly increase the volume of a media player). Define the number of milliseconds between repeat actions here. |
| `confirmation` | object | none | See [confirmation](#confirmation) | Display a confirmation popup, overrides the default `confirmation` object |
| Name | Type | Default | Supported options | Description |
| ----------------- | ------ | -------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `action` | string | `toggle` | `more-info`, `toggle`, `call-service`, `none`, `navigate`, `url` | Action to perform |
| `entity` | string | none | Any entity id | **Only valid for `action: more-info`** to override the entity on which you want to call `more-info` |
| `navigation_path` | string | none | Eg: `/lovelace/0/` | Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate |
| `url_path` | string | none | Eg: `https://www.google.fr` | URL to open on click when action is `url`. The URL will open in a new tab |
| `service` | string | none | Any service | Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service` |
| `service_data` | object | none | Any service data | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. If your `service_data` requires an `entity_id`, you can use the keywork `entity`, this will actually call the service on the entity defined in the main configuration of this card. Useful for [configuration templates](#configuration-templates) |
| `haptic` | string | none | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection` | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) |
| `repeat` | number | none | eg: `500` | For a hold_action, you can optionally configure the action to repeat while the button is being held down (for example, to repeatedly increase the volume of a media player). Define the number of milliseconds between repeat actions here. |
| `confirmation` | object | none | See [confirmation](#confirmation) | Display a confirmation popup, overrides the default `confirmation` object |
### Confirmation
This will popup a dialog box before running the action.
| Name | Type | Default | Supported options | Description |
| --- | ---- | ------- | ----------------- | ----------- |
| `text` | string | none | Any text | This text will be displayed in the popup. Supports templates, see [templates](#javascript-templates) |
| `exemptions` | array of users | none | `user: USER_ID` | Any user declared in this list will not see the confirmation dialog |
| Name | Type | Default | Supported options | Description |
| ------------ | -------------- | ------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
| `text` | string | none | Any text | This text will be displayed in the popup. Supports templates, see [templates](#javascript-templates) |
| `exemptions` | array of users | none | `user: USER_ID` | Any user declared in this list will not see the confirmation dialog |
Example:
@ -162,12 +163,12 @@ confirmation:
This will display a normal button with a lock symbol in the corner. Clicking the button will make the lock go away and enable the button to be manoeuvred for `delay` seconds (5 by default).
| Name | Type | Default | Supported options | Description |
| --- | ---- | ------- | ----------------- | ----------- |
| `enabled` | boolean | `false` | `true` \| `false` | Enables or disables the lock. Supports templates, see [templates](#javascript-templates) |
| `duration` | number | `5` | any number | Duration of the unlocked state in seconds
| `exemptions` | array of user id or username | none | `user: USER_ID` \| `username: test` | Any user declared in this list will not see the confirmation dialog. It can be a user id (`user`) or a username (`username`) |
| `unlock` | string | `tap` | `tap` \| `hold` \| `double_tap` | The type of click which will unlock the button |
| Name | Type | Default | Supported options | Description |
| ------------ | ---------------------------- | ------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | boolean | `false` | `true` \| `false` | Enables or disables the lock. Supports templates, see [templates](#javascript-templates) |
| `duration` | number | `5` | any number | Duration of the unlocked state in seconds |
| `exemptions` | array of user id or username | none | `user: USER_ID` \| `username: test` | Any user declared in this list will not see the confirmation dialog. It can be a user id (`user`) or a username (`username`) |
| `unlock` | string | `tap` | `tap` \| `hold` \| `double_tap` | The type of click which will unlock the button |
Example:
@ -190,6 +191,7 @@ lock:
```
By default the lock is visible in the upper-right corner. If you want to move the position of the lock to for example the bottom-right corner you can use this code:
```yaml
styles:
lock:
@ -199,34 +201,34 @@ styles:
### State
| Name | Type | Default | Supported options | Description |
| ---------- | ------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `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 defined uses the general config `name` and if undefined uses the entity name. Supports templates, see [templates](#javascript-templates) |
| `icon` | string | optional | `mdi:battery` | The icon to display for this state - Defaults to the entity icon. Hide with `show_icon: false`. Supports templates, see [templates](#javascript-templates) |
| `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`) |
| `styles` | string | optional | | See [styles](#styles) |
| `spin` | boolean | `false` | `true` \| `false` | Should the icon spin for this state? |
| `entity_picture` | string | optional | Can be any of `/local/*` file or a URL | Will override the icon/the default entity_picture with your own image for this state. Best is to use a square image. Supports templates, see [templates](#javascript-templates) |
| `label` | string | optional | Any string that you want | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates) |
| Name | Type | Default | Supported options | Description |
| ---------------- | ------------- | ------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 defined uses the general config `name` and if undefined uses the entity name. Supports templates, see [templates](#javascript-templates) |
| `icon` | string | optional | `mdi:battery` | The icon to display for this state - Defaults to the entity icon. Hide with `show_icon: false`. Supports templates, see [templates](#javascript-templates) |
| `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`) |
| `styles` | string | optional | | See [styles](#styles) |
| `spin` | boolean | `false` | `true` \| `false` | Should the icon spin for this state? |
| `entity_picture` | string | optional | Can be any of `/local/*` file or a URL | Will override the icon/the default entity_picture with your own image for this state. Best is to use a square image. Supports templates, see [templates](#javascript-templates) |
| `label` | string | optional | Any string that you want | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates) |
### Available operators
The order of your elements in the `state` object matters. The first one which is `true` will match.
The `value` field for all operators except `regex` support templating, see [templates](#javascript-templates)
| Operator | `value` example | Description |
| :-------: | --------------- | -------------------------------------------------------------------------------------------------------- |
| `<` | `5` | Current state is inferior to `value` |
| `<=` | `4` | Current state is inferior or equal to `value` |
| `==` | `42` or `'on'` | **This is the default if no operator is specified.** Current state is equal (`==` javascript) to `value` |
| `>=` | `32` | Current state is superior or equal to `value` |
| `>` | `12` | Current state is superior to `value` |
| `!=` | `'normal'` | Current state is not equal (`!=` javascript) to `value` |
| `regex` | `'^norm.*$'` | `value` regex applied to current state does match |
| `template` | | See [templates](#javascript-templates) for examples. `value` needs to be a javascript expression which returns a boolean. If the boolean is true, it will match this state |
| `default` | N/A | If nothing matches, this is used |
| Operator | `value` example | Description |
| :--------: | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<` | `5` | Current state is inferior to `value` |
| `<=` | `4` | Current state is inferior or equal to `value` |
| `==` | `42` or `'on'` | **This is the default if no operator is specified.** Current state is equal (`==` javascript) to `value` |
| `>=` | `32` | Current state is superior or equal to `value` |
| `>` | `12` | Current state is superior to `value` |
| `!=` | `'normal'` | Current state is not equal (`!=` javascript) to `value` |
| `regex` | `'^norm.*$'` | `value` regex applied to current state does match |
| `template` | | See [templates](#javascript-templates) for examples. `value` needs to be a javascript expression which returns a boolean. If the boolean is true, it will match this state |
| `default` | N/A | If nothing matches, this is used |
### Layout
@ -270,7 +272,7 @@ In this second case, you have 2 options:
triggers_update: all
```
- Set the value of `triggers_update` to a list of entities. When any of the entities in this list is updated, the card will be updated. The logic is the same as the internal home-assistant `* templates` integration (see [here](https://www.home-assistant.io/integrations/binary_sensor.template/#entity_id) for example):
- Set the value of `triggers_update` to a list of entities. When any of the entities in this list is updated, the card will be updated. The logic is the same as the internal home-assistant `* templates` integration (see [here](https://www.home-assistant.io/integrations/binary_sensor.template/#entity_id) for example):
```yaml
type: custom:button-card
@ -280,6 +282,8 @@ In this second case, you have 2 options:
- light.mylight
```
If your entity, any entity in the `triggers_update` field or any entity matched from your templates are a group and you want to update the card if any of the nested entity in that group update its state, then you can set `group_expand` to `true`. It will do the work for you and you won't have to specify manually the full list of entities in `triggers_update`.
### Javascript Templates
The template rendering uses a special format. All the fields where template is supported also support plain text. To activate the templating feature for such a field, you'll need to enclose the javascript function inside 3 square brackets:
@ -397,6 +401,7 @@ See [styling](#styling) for a complete example.
#### Light entity color variable
If a light entity is assigned to the button, then:
- the CSS variable `--button-card-light-color` will contain the current light color
- the CSS variable `--button-card-light-color-no-temperature` will contain the current light without the temperature
@ -468,7 +473,7 @@ Some examples:
- icon on the right side (by overloading an existing layout):
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: sensor.sensor1
layout: icon_state_name2nd
show_state: true
@ -587,32 +592,32 @@ Examples are better than a long text, so here you go:
![custom_fields_1](examples/custom_fields_1.gif)
```yaml
- type: custom:button-card
icon: mdi:lightbulb
aspect_ratio: 1/1
name: Nb lights on
styles:
grid:
- position: relative
custom_fields:
notification:
- background-color: >
[[[
if (states['input_number.test'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
- type: custom:button-card
icon: mdi:lightbulb
aspect_ratio: 1/1
name: Nb lights on
styles:
grid:
- position: relative
custom_fields:
notification: >
[[[ return Math.floor(states['input_number.test'].state / 10) ]]]
notification:
- background-color: >
[[[
if (states['input_number.test'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
custom_fields:
notification: >
[[[ return Math.floor(states['input_number.test'].state / 10) ]]]
```
- Or you can use the grid. Each element will have it's name positioned as the `grid-area`:
@ -786,8 +791,7 @@ button_card_templates:
card:
- background-color: '#FF0000'
my_little_template:
[...]
my_little_template: [...]
```
And then where you use button-card, you can apply this template, and/or overload it:
@ -898,12 +902,12 @@ button_card_templates:
2. Place the file in your `config/www` folder
3. Include the card code in your `ui-lovelace-card.yaml`
```yaml
title: Home
resources:
- url: /local/button-card.js
type: module
```
```yaml
title: Home
resources:
- url: /local/button-card.js
type: module
```
4. Write configuration for the card in your `ui-lovelace.yaml`
@ -913,11 +917,11 @@ button_card_templates:
2. Search for `button-card` and add it through HACS
3. Add the configuration to your `ui-lovelace.yaml`
```yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
```
```yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
```
4. Refresh home-assistant.
@ -928,7 +932,7 @@ Show a button for the air conditioner (blue when on, `var(--disabled-text-color)
![ac](examples/ac.png)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.ac
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
@ -937,12 +941,12 @@ Show a button for the air conditioner (blue when on, `var(--disabled-text-color)
Redefine the color when the state if off to red:
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.ac
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
state:
- value: "off"
- value: 'off'
color: rgb(255, 0, 0)
```
@ -953,7 +957,7 @@ Show an ON/OFF button for the home_lights group:
![no-icon](examples/no_icon.png)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: group.home_lights
show_icon: false
show_state: true
@ -966,7 +970,7 @@ Light entity with custom icon and "more info" pop-in:
![sofa](examples/sofa.png)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.living_room_lights
icon: mdi:sofa
color: auto
@ -981,7 +985,7 @@ Light card with card color type, name, and automatic color:
![color](examples/color.gif)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light._
icon: mdi:home
color: auto
@ -1009,11 +1013,11 @@ Horizontal stack with :
```yaml
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: blank-card
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: blank-card
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-plus
@ -1022,7 +1026,7 @@ Horizontal stack with :
service: media_player.volume_up
service_data:
entity_id: media_player.living_room_speaker
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: card
color: rgb(223, 255, 97)
icon: mdi:volume-minus
@ -1031,9 +1035,9 @@ Horizontal stack with :
service: media_player.volume_down
service_data:
entity_id: media_player.living_room_speaker
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: blank-card
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: blank-card
```
@ -1054,33 +1058,33 @@ Vertical Stack with :
```yaml
- type: vertical-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: label-card
color: rgb(44, 109, 214)
name: Kitchen
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.kitchen_scene_1
color_type: card
color: rgb(66, 134, 244)
icon: mdi:numeric-1-box-outline
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.kitchen_scene_2
color_type: card
color: rgb(66, 134, 244)
icon: mdi:numeric-2-box-outline
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.kitchen_scene_3
color_type: card
color: rgb(66, 134, 244)
icon: mdi:numeric-3-box-outline
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.kitchen_scene_4
color_type: card
color: rgb(66, 134, 244)
icon: mdi:numeric-4-box-outline
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.kitchen_off
color_type: card
color: rgb(66, 134, 244)
@ -1098,7 +1102,7 @@ Input select card with select next service and custom color and icon for states.
If you don't specify any operator, `==` will be used to match the current state against the `value`
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
entity: input_select.cube_mode
icon: mdi:cube
tap_action:
@ -1108,12 +1112,12 @@ If you don't specify any operator, `==` will be used to match the current state
entity_id: input_select.cube_mode
show_state: true
state:
- value: "sleeping"
- value: 'sleeping'
color: var(--disabled-text-color)
icon: mdi:cube-outline
- value: "media"
- value: 'media'
color: rgb(5, 147, 255)
- value: "light"
- value: 'light'
color: rgb(189, 255, 5)
```
@ -1147,7 +1151,7 @@ The definition order matters, the first item to match will be the one selected.
Buttons can link to different views using the `navigate` action:
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: label-card
icon: mdi:home
name: Go To Home
@ -1165,12 +1169,12 @@ You can make the whole button blink:
![blink-animation](examples/blink-animation.gif)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: card
entity: binary_sensor.intruder
name: Intruder Alert
state:
- value: "on"
- value: 'on'
color: red
icon: mdi:alert
styles:
@ -1192,14 +1196,14 @@ If you specify a width for the card, it has to be in `px`. All the cards without
```yaml
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color: auto
name: s:default h:200px
styles:
card:
- height: 200px
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
@ -1208,7 +1212,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
styles:
card:
- height: 200px
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
@ -1219,7 +1223,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
- height: 200px
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color: auto
name: 60px
@ -1227,7 +1231,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
card:
- height: 60px
- width: 60px
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
@ -1236,7 +1240,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
card:
- height: 80px
- width: 30px
- type: "custom:button-card"
- type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
@ -1253,7 +1257,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
![label_template](examples/labels.png)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: light.test_light
label: >
@ -1266,7 +1270,7 @@ If you specify a width for the card, it has to be in `px`. All the cards without
styles:
card:
- height: 100px
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: light.test_light
layout: icon_label
@ -1288,7 +1292,7 @@ The javascript code inside `value` needs to return `true` of `false`.
Example with `template`:
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: switch.skylight
show_state: true
@ -1303,7 +1307,7 @@ Example with `template`:
icon: mdi:alert
- operator: default
icon: mdi:lightbulb
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: light.test_light
show_label: true
@ -1323,7 +1327,7 @@ Example with `template`:
![per-style-config](examples/per-style-config.gif)
```yaml
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: light.test_light
label: >
@ -1363,7 +1367,7 @@ Example with `template`:
- color: red
card:
- filter: brightness(40%)
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: icon
entity: light.test_light
layout: icon_label
@ -1397,11 +1401,11 @@ Example with `template`:
```yaml
- type: horizontal-stack
cards:
- type: "custom:button-card"
- type: 'custom:button-card'
entity: switch.test
lock:
enabled: true
- type: "custom:button-card"
- type: 'custom:button-card'
color_type: card
lock:
enabled: true
@ -1468,6 +1472,7 @@ styles:
```
## Community guides
- [robotnet.dk](https://robotnet.dk/2020/homekit-knapper-custom-buttons-home-assistant.html): Danish tutorial and how-to about using Lovelace Button card for your entities.
## Credits

35
src/button-card.ts
View File

@ -180,7 +180,11 @@ class ButtonCard extends LitElement {
protected shouldUpdate(changedProps: PropertyValues): boolean {
const forceUpdate = this._hasTemplate || changedProps.has('_timeRemaining') ? true : false;
return forceUpdate || myHasConfigOrEntityChanged(this, changedProps);
if (forceUpdate || myHasConfigOrEntityChanged(this, changedProps)) {
this._expandTriggerGroups();
return true;
}
return false;
}
protected updated(changedProps: PropertyValues): void {
@ -954,6 +958,7 @@ class ButtonCard extends LitElement {
template = this._configFromLLTemplates(ll, template);
this._config = {
type: 'custom:button-card',
group_expand: false,
hold_action: { action: 'none' },
double_tap_action: { action: 'none' },
layout: 'vertical',
@ -1014,6 +1019,8 @@ class ButtonCard extends LitElement {
});
}
if (this._config.entity && !this._entities.includes(this._config.entity)) this._entities.push(this._config.entity);
this._expandTriggerGroups();
const rxp = new RegExp('\\[\\[\\[.*\\]\\]\\]', 'gm');
this._hasTemplate = this._config.triggers_update === 'all' && jsonConfig.match(rxp) ? true : false;
if (!this._initial_setup_complete) {
@ -1021,6 +1028,32 @@ class ButtonCard extends LitElement {
}
}
private _loopGroup(entityList: string[] | undefined): void {
if (entityList) {
entityList.forEach(childEntity => {
if (this._hass?.states[childEntity]) {
if (computeDomain(childEntity) === 'group' && this._hass.states[childEntity].attributes?.entity_id) {
this._loopGroup(this._hass.states[childEntity].attributes.entity_id);
} else {
if (!this._entities.includes(childEntity)) {
this._entities.push(childEntity);
}
}
}
});
}
}
private _expandTriggerGroups(): void {
if (this._hass && this._config?.group_expand && this._entities) {
this._entities.forEach(entity => {
if (computeDomain(entity) === 'group') {
this._loopGroup(this._hass?.states[entity].attributes?.entity_id);
}
});
}
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
public getCardSize(): number {

2
src/types.ts
View File

@ -3,6 +3,7 @@ import { ActionConfig, LovelaceCardConfig, LovelaceCard } from 'custom-card-help
export interface ButtonCardConfig {
template?: string | string[];
triggers_update?: string[] | 'all';
group_expand: boolean;
type: string;
entity?: string;
name?: string;
@ -45,6 +46,7 @@ export interface ButtonCardConfig {
export interface ExternalButtonCardConfig {
template?: string | string[];
triggers_update?: string[] | 'all';
group_expand?: boolean;
entity?: string;
name?: string;
icon?: string;