diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 13c2be1..0000000 --- a/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - semi: true, - trailingComma: 'all', - singleQuote: true, - printWidth: 120, - tabWidth: 2, -}; diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 0000000..d83ff3a --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1,6 @@ +semi: true +trailingComma: 'all' +singleQuote: true +printWidth: 120 +tabWidth: 2 +proseWrap: never diff --git a/README.md b/README.md index 136fe54..246b7dd 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,22 @@ # Button Card by [@RomRider](https://github.com/RomRider) -[![GitHub Release][releases-shield]][releases] -[![hacs_badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration) -[![License][license-shield]](LICENSE.md) +[![Stable][releases-shield]][releases] [![Beta][releases-dev-shield]][releases-dev] [![HACS Badge][hacs-badge]][hacs-link] ![Project Maintenance][maintenance-shield]
![Downloads][downloads] [![GitHub Activity][commits-shield]][commits] [![License][license-shield]](LICENSE.md) [![Discord][discord-shield]][discord] [![Community Forum][forum-shield]][forum] -![Project Maintenance][maintenance-shield] -[![GitHub Activity][commits-shield]][commits] - -[![Discord][discord-shield]][discord] -[![Community Forum][forum-shield]][forum] +[commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/button-card.svg +[commits]: https://github.com/custom-cards/button-card/commits/master +[discord]: https://discord.gg/Qa5fW2R +[discord-shield]: https://img.shields.io/discord/330944238910963714.svg +[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg +[forum]: https://community.home-assistant.io/t/lovelace-button-card/65981 +[license-shield]: https://img.shields.io/github/license/custom-cards/button-card.svg +[maintenance-shield]: https://img.shields.io/maintenance/yes/2023.svg +[releases-shield]: https://img.shields.io/github/release/custom-cards/button-card.svg +[releases]: https://github.com/custom-cards/button-card/releases/latest +[releases-dev-shield]: https://img.shields.io/github/package-json/v/custom-cards/button-card/dev?label=release%40dev +[releases-dev]: https://github.com/custom-cards/button-card/releases +[hacs-badge]: https://img.shields.io/badge/HACS-Default-41BDF5.svg +[downloads]: https://img.shields.io/github/downloads/custom-cards/button-card/total +[hacs-link]: https://hacs.xyz/ Lovelace Button card for your entities. @@ -60,7 +68,7 @@ Lovelace Button card for your entities. ## Features - works with any toggleable entity -- 6 available actions on **tap** and/or **hold** and/or **double click**: `none`, `toggle`, `more-info`, `navigate`, `url` and `call-service` +- 6 available actions on **tap** and/or **hold** and/or **double click**: `none`, `toggle`, `more-info`, `navigate`, `url`, `assist` and `call-service` - state display (optional) - custom color (optional), or based on light rgb value/temperature - custom state definition with customizable color, icon and style (optional) @@ -86,72 +94,72 @@ 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) | -| `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 | -| `numeric_precision` | number | none | any number | Force the display precision of the state to be with `numeric_precision` decimals | -| `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 | +| `numeric_precision` | number | none | any number | Force the display precision of the state to be with `numeric_precision` decimals | +| `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`, `assist` | 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` | -| `target` | object | none | | Only works with `call-service`. Follows the [home-assistant syntax](https://www.home-assistant.io/docs/scripts/service-calls/#targeting-areas-and-devices) | -| `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` | -| `data` or `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 `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. | -| `repeat_limit` | number | none | eg: `5` | For Hold action and if `repeat` if defined, it will stop calling the action after the `repeat_limit` has been reached. | -| `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`, `assist` | 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` | +| `target` | object | none | | Only works with `call-service`. Follows the [home-assistant syntax](https://www.home-assistant.io/docs/scripts/service-calls/#targeting-areas-and-devices) | +| `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` | +| `data` or `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 `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. | +| `repeat_limit` | number | none | eg: `5` | For Hold action and if `repeat` if defined, it will stop calling the action after the `repeat_limit` has been reached. | +| `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: @@ -166,12 +174,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: @@ -204,35 +212,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) | -| `state_display` | string | optional | `On` | If defined, override the way the state is displayed. 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) | +| `state_display` | string | optional | `On` | If defined, override the way the state is displayed. 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) +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 @@ -290,8 +297,7 @@ If your entity, any entity in the `triggers_update` field or any entity matched ### 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: -`[[[ javascript function here ]]]` +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: `[[[ javascript function here ]]]` Don't forget to quote if it's on one line: @@ -599,8 +605,7 @@ An example is better than words: ### Custom Fields -Custom fields support, using the `custom_fields` object, enables you to create your own fields on top of the pre-defined ones (name, state, label and icon). -This is an advanced feature which leverages (if you require it) the CSS Grid. +Custom fields support, using the `custom_fields` object, enables you to create your own fields on top of the pre-defined ones (name, state, label and icon). This is an advanced feature which leverages (if you require it) the CSS Grid. Custom fields also support embeded cards, see [example below](#custom_fields_card_example). @@ -640,6 +645,8 @@ Examples are better than a long text, so here you go: return "green"; return "red"; ]]] + + - border-radius: 50% - position: absolute - left: 60% @@ -694,6 +701,8 @@ Examples are better than a long text, so here you go: if (entity.state >= 60 && entity.state < 80) return 'orange'; else return 'red'; ]]] + + - width: 70% - margin-top: -10% custom_fields: @@ -722,6 +731,8 @@ Examples are better than a long text, so here you go: style="width: 12px; height: 12px; color: yellow;"> ${entity.state}°C` ]]] + + cpu: > [[[ return ` CPU: ${states['sensor.raspi_cpu'].state}%` ]]] + + ram: > [[[ return ` RAM: ${states['sensor.raspi_ram'].state}%` ]]] + + sd: > [[[ return ` [[[ return states['input_select.light_mode'].state === 'night_mode' ]]] + + icon: mdi:weather-night label: Night Mode - operator: default @@ -1374,6 +1396,8 @@ Example with `template`: var bri = states['light.test_light'].attributes.brightness; return 'Brightness: ' + (bri ? bri : '0') + '%'; ]]] + + show_label: true show_state: true size: 10% @@ -1412,6 +1436,8 @@ Example with `template`: layout: icon_label label: > [[[ return 'Other State: ' + states['switch.skylight'].state; ]]] + + show_label: true show_name: false size: 100% @@ -1518,14 +1544,3 @@ styles: - [ciotlosm](https://github.com/ciotlosm) for the readme template and some awesome examples - [iantrich](https://github.com/iantrich), [LbDab](https://github.com/lbdab) and [jimz011](https://github.com/jimz011) for the inspiration and the awesome templates and cards you've created. - -[commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/button-card.svg?style=for-the-badge -[commits]: https://github.com/custom-cards/button-card/commits/master -[discord]: https://discord.gg/Qa5fW2R -[discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge -[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge -[forum]: https://community.home-assistant.io/t/lovelace-button-card/65981 -[license-shield]: https://img.shields.io/github/license/custom-cards/button-card.svg?style=for-the-badge -[maintenance-shield]: https://img.shields.io/maintenance/yes/2023.svg?style=for-the-badge -[releases-shield]: https://img.shields.io/github/release/custom-cards/button-card.svg?style=for-the-badge -[releases]: https://github.com/custom-cards/button-card/releases