diff --git a/source/_dashboards/alarm-panel.markdown b/source/_dashboards/alarm-panel.markdown index 2cb13800063..9a321211446 100644 --- a/source/_dashboards/alarm-panel.markdown +++ b/source/_dashboards/alarm-panel.markdown @@ -12,14 +12,13 @@ The Alarm Panel card allows you to arm and disarm your [alarm control panel](/in Screenshot of the Alarm Panel card.

-To add the Alarm Panel card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Alarm Panel** from the card picker. All options for this card can be configured via the user interface. +To add the Alarm Panel card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. -Alternatively, the card can be configured using YAML: +All options for this card can be configured via the user interface. -```yaml -type: alarm-panel -entity: alarm_control_panel.alarm -``` +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -55,14 +54,14 @@ theme: type: string {% endconfiguration %} -## Examples +### Examples Title example: ```yaml -- type: alarm-panel - name: House Alarm - entity: alarm_control_panel.alarm +type: alarm-panel +name: House Alarm +entity: alarm_control_panel.alarm ```

diff --git a/source/_dashboards/area.markdown b/source/_dashboards/area.markdown index 0518cd83131..a20a530fed7 100644 --- a/source/_dashboards/area.markdown +++ b/source/_dashboards/area.markdown @@ -12,13 +12,18 @@ The Area card lets you control and monitor an individual area. Screenshot of the Area card.

+To add the Area card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. -To add the Area card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Area** from the card picker. All options for this card can be configured via the user interface. +All options for this card can be configured via the user interface. Buttons will appear on the card for the entities in the area including fan, light and switch. A motion sensor icon will appear in the top left if a motion sensor is in the area and motion is detected by the motion sensor. If a camera is added to the area you can show the camera feed instead of the area picture. +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. + {% configuration %} type: required: true @@ -43,23 +48,21 @@ theme: type: string {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example Basic example: ```yaml -- type: area - area: bedroom +type: area +area: bedroom ``` Complex example ```yaml -- type: area - area: bedroom - navigation_path: my_bedroom - show_camera: true - theme: green +type: area +area: bedroom +navigation_path: my_bedroom +show_camera: true +theme: green ``` diff --git a/source/_dashboards/button.markdown b/source/_dashboards/button.markdown index 3cb5c6eb442..45f1c66f3bd 100644 --- a/source/_dashboards/button.markdown +++ b/source/_dashboards/button.markdown @@ -12,7 +12,9 @@ The Button card allows you to add buttons to perform tasks. Screenshot of three Button Cards.

-To add the Button card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Button** from the card picker. All options for this card can be configured via the user interface. +To add the Button card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. ## Card Settings @@ -37,9 +39,9 @@ Hold Action: description: The action taken on card tap and hold. For more information, see the [action documentation](/dashboards/actions/#hold-action). {% endconfiguration_basic %} -### YAML +## YAML Configuration -This is for if you use YAML mode or prefer to use YAML in the Code Editor in the UI. +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -108,24 +110,15 @@ action_name: default: Run {% endconfiguration %} -Example: +### Examples + +Basic example: ```yaml type: button entity: light.living_room ``` -## Options For Exemptions - -{% configuration badges %} -user: - required: true - description: The id of the user that can see the view tab. - type: string -{% endconfiguration %} - -## Examples - Button Card with a button name and a script that runs when card is tapped: ```yaml diff --git a/source/_dashboards/calendar.markdown b/source/_dashboards/calendar.markdown index 32b5d0ce772..e4ca202568d 100644 --- a/source/_dashboards/calendar.markdown +++ b/source/_dashboards/calendar.markdown @@ -13,7 +13,9 @@ The Calendar card displays your [calendar](/integrations/#calendar) entities in Screenshot of the Calendar card.

-To add the Calendar card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Calendar** from the card picker. All options for this card can be configured via the user interface. +To add the Calendar card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. ## Card Settings @@ -28,9 +30,9 @@ Theme: description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/). {% endconfiguration_basic %} -### YAML +## YAML Configuration -This is for if you use YAML mode or just prefer to use YAML in the Code Editor in the UI. +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -55,7 +57,7 @@ theme: type: string {% endconfiguration %} -Example: +### Examples ```yaml type: calendar diff --git a/source/_dashboards/conditional.markdown b/source/_dashboards/conditional.markdown index 26fc953c1dd..a678400f644 100644 --- a/source/_dashboards/conditional.markdown +++ b/source/_dashboards/conditional.markdown @@ -7,7 +7,15 @@ description: The Conditional card displays another card based on entity states. The Conditional card displays another card based on entity states. -To add the Conditional card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Conditional** from the card picker. All options for this card can be configured via the user interface. +Note: Conditions with more than one entity are treated as an 'and' condition. This means that for the card to show, *all* entities must meet the state requirements set. + +To add the Conditional card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -39,9 +47,7 @@ card: *one is required (`state` or `state_not`) -Note: Conditions with more than one entity are treated as an 'and' condition. This means that for the card to show, *all* entities must meet the state requirements set. - -## Examples +### Examples ```yaml type: conditional diff --git a/source/_dashboards/entities.markdown b/source/_dashboards/entities.markdown index 906025b5974..7efa6538ffd 100644 --- a/source/_dashboards/entities.markdown +++ b/source/_dashboards/entities.markdown @@ -7,7 +7,11 @@ description: "The Entities card is the most common type of card. It groups items The Entities card is the most common type of card. It groups items together into lists. It can be used to display an entity's state or attribute, but also contain buttons, web links, etc. -To add the Entities card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Entities** from the card picker. +To add the Entities card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -373,9 +377,9 @@ download: default: false {% endconfiguration %} -## Examples +### Examples -### Entity rows +#### Entity rows ```yaml type: entities @@ -393,7 +397,7 @@ entities: - group.all_locks ``` -### Buttons row +#### Buttons row Above the divider are regular entity rows, below one of type `buttons`. Note that regular entity rows automatically show the entity name, whereas for buttons you have to explicitly specify a label / name. @@ -416,7 +420,7 @@ entities: name: Dining Ceiling ``` -### Other special rows +#### Other special rows

Screenshot of other special rows diff --git a/source/_dashboards/entity-filter.markdown b/source/_dashboards/entity-filter.markdown index 32130457ec5..91e66b07afd 100644 --- a/source/_dashboards/entity-filter.markdown +++ b/source/_dashboards/entity-filter.markdown @@ -7,13 +7,19 @@ description: "The Entity Filter card allows you to define a list of entities tha The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they're at home. -This type of card can also be used together with rest of cards that allow multiple entities, allowing you to use [glance](/dashboards/glance/) or [picture-glance](/dashboards/picture-glance/). By default it uses [entities](/dashboards/entities/) card model. -

Screenshot of the Entity Filter card Screenshot of the Entity Filter card.

+This type of card can also be used together with other cards that allow multiple entities, allowing you to use [glance](/dashboards/glance/) or [picture-glance](/dashboards/picture-glance/). By default, it uses the [entities](/dashboards/entities/) card model. + +To add the Entity Filter card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +This card can only be configured in YAML. + {% configuration %} type: required: true @@ -39,7 +45,7 @@ show_empty: default: true {% endconfiguration %} -## Options for Entities +### Options For Entities If you define entities as objects instead of strings (by adding `entity:` before entity ID), you can add more customization and configurations: @@ -74,7 +80,7 @@ state_filter: type: list {% endconfiguration %} -## Options for state_filter +### Options For state_filter If you define `state_filter` as objects instead of strings (by adding `value:` before your state value), you can add more customization to your filter: diff --git a/source/_dashboards/entity.markdown b/source/_dashboards/entity.markdown index 125724a6a5b..5125642d791 100644 --- a/source/_dashboards/entity.markdown +++ b/source/_dashboards/entity.markdown @@ -12,7 +12,13 @@ The Entity card gives you a quick overview of your entity's state. Screenshot of the Entity card.

-To add the Entity card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Entity** from the card picker. +To add the Entity card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -56,9 +62,7 @@ footer: type: map {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example ```yaml - type: entity diff --git a/source/_dashboards/gauge.markdown b/source/_dashboards/gauge.markdown index 1c825c903a3..36078abad79 100644 --- a/source/_dashboards/gauge.markdown +++ b/source/_dashboards/gauge.markdown @@ -17,14 +17,13 @@ Screenshot of the Gauge card. Screenshot of the Gauge card in needle mode.

-To add the Gauge card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface. +To add the Gauge card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. -Alternatively, the card can be configured using YAML: +All options for this card can be configured via the user interface. -```yaml -type: gauge -entity: sensor.cpu_usage -``` +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -100,7 +99,7 @@ segments: type: string {% endconfiguration %} -## Examples +### Examples Title and unit of measurement: diff --git a/source/_dashboards/glance.markdown b/source/_dashboards/glance.markdown index bb0e4859f07..27f045b0060 100644 --- a/source/_dashboards/glance.markdown +++ b/source/_dashboards/glance.markdown @@ -12,7 +12,13 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep Screenshot of the Glance card.

-To add the Glance card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Glance** from the card picker. +To add the Glance card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -57,7 +63,7 @@ state_color: default: true {% endconfiguration %} -## Options For Entities +### Options For Entities If you define entities as objects instead of strings, you can add more customization and configuration: @@ -102,7 +108,7 @@ double_tap_action: type: map {% endconfiguration %} -## Options For Exemptions +### Options For Exemptions {% configuration badges %} user: @@ -111,7 +117,7 @@ user: type: string {% endconfiguration %} -## Examples +### Examples Basic example: diff --git a/source/_dashboards/grid.markdown b/source/_dashboards/grid.markdown index 3e397a09483..9d4fd1c5286 100644 --- a/source/_dashboards/grid.markdown +++ b/source/_dashboards/grid.markdown @@ -12,7 +12,13 @@ The Grid card allows you to show multiple cards in a grid. It will first fill th Screenshot of the Grid card.

-To add the Grid card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Grid Card** from the card picker. +To add the Grid card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -41,8 +47,6 @@ cards: ## Examples -Alternatively, the card can be configured using YAML: - Basic example: ```yaml diff --git a/source/_dashboards/history-graph.markdown b/source/_dashboards/history-graph.markdown index d43210e4e6c..2a53045b0e3 100644 --- a/source/_dashboards/history-graph.markdown +++ b/source/_dashboards/history-graph.markdown @@ -17,7 +17,13 @@ Screenshot of the History Graph card, when the sensor has no `unit_of_measuremen Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.

-To add the History Graph card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **History Graph** from the card picker. All options for this card can be configured via the user interface. +To add the History Graph card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -49,7 +55,7 @@ show_names: default: true {% endconfiguration %} -## Options For Entities +### Options For Entities If you define entities as objects instead of strings, you can add more customization and configuration: @@ -64,9 +70,7 @@ name: type: string {% endconfiguration %} -## Examples - -Alternatively, the card can be configured using YAML: +### Examples ```yaml type: history-graph diff --git a/source/_dashboards/horizontal-stack.markdown b/source/_dashboards/horizontal-stack.markdown index 6ee2246815c..348e5a845cf 100644 --- a/source/_dashboards/horizontal-stack.markdown +++ b/source/_dashboards/horizontal-stack.markdown @@ -7,7 +7,11 @@ description: "The Horizontal Stack card allows you to stack together multiple ca The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column. -To add the Horizontal Stack card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Horizontal Stack** from the card picker. All options for this card can be configured via the user interface. +To add the Horizontal Stack card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -24,7 +28,7 @@ cards: type: list {% endconfiguration %} -## Example +### Example ```yaml type: horizontal-stack diff --git a/source/_dashboards/humidifier.markdown b/source/_dashboards/humidifier.markdown index 38959d25b0a..4b1810d5d69 100644 --- a/source/_dashboards/humidifier.markdown +++ b/source/_dashboards/humidifier.markdown @@ -12,7 +12,13 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and Screenshot of the humidifier card.

-To add the Humidifier card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Humidifier** from the card picker. All options for this card can be configured via the user interface. +To add the Humidifier card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -34,12 +40,10 @@ theme: type: string {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example ```yaml -- type: humidifier - entity: humidifier.bedroom - name: Bedroom Humidifier +type: humidifier +entity: humidifier.bedroom +name: Bedroom Humidifier ``` diff --git a/source/_dashboards/iframe.markdown b/source/_dashboards/iframe.markdown index 75cf503c4b4..5e3e27d54d4 100644 --- a/source/_dashboards/iframe.markdown +++ b/source/_dashboards/iframe.markdown @@ -7,16 +7,22 @@ description: "The Webpage card allows you to embed your favorite webpage right i The Webpage card allows you to embed your favorite webpage right into Home Assistant. You can also embed files stored in your `/www` folder and reference them using `/local/`. -
-You can't embed sites using HTTP if you are using HTTPS for your Home Assistant. -
-

Windy weather radar as Webpage Windy weather radar as Webpage.

-To add the Webpage card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Webpage** from the card picker. All options for this card can be configured via the user interface. +To add the Webpage card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +
+You can't embed sites using HTTP if you are using HTTPS for your Home Assistant. +
+ +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -38,9 +44,7 @@ title: type: string {% endconfiguration %} -## Examples - -The card can also be configured using YAML, some examples below: +### Examples ```yaml type: iframe diff --git a/source/_dashboards/light.markdown b/source/_dashboards/light.markdown index c7be4b2720d..4cd5a824b25 100644 --- a/source/_dashboards/light.markdown +++ b/source/_dashboards/light.markdown @@ -12,14 +12,13 @@ The Light card allows you to change the brightness of the light. Screenshot of the Light card.

-To add the Light card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Light** from the card picker. All options for this card can be configured via the user interface. +To add the Light card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. -Alternatively, the card can be configured using YAML: +All options for this card can be configured via the user interface. -```yaml -type: light -entity: light.bedroom -``` +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -54,7 +53,14 @@ double_tap_action: type: map {% endconfiguration %} -## Examples +### Examples + +Basic example: + +```yaml +type: light +entity: light.bedroom +``` Overwriting names example: diff --git a/source/_dashboards/logbook.markdown b/source/_dashboards/logbook.markdown index 2581a0e4baa..2cb58f9b065 100644 --- a/source/_dashboards/logbook.markdown +++ b/source/_dashboards/logbook.markdown @@ -12,7 +12,7 @@ The Logbook card displays entries from the logbook for specific entities. Screenshot of the Logbook card.

-To add the Logbook card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Logbook** from the card picker. +To add the Logbook card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. ## Card Settings @@ -27,9 +27,9 @@ Theme: description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/). {% endconfiguration_basic %} -### YAML +## YAML Configuration -This is for if you use YAML mode or prefer to use YAML in the Code Editor in the UI. +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -55,7 +55,7 @@ theme: type: string {% endconfiguration %} -Example: +### Examples ```yaml type: logbook diff --git a/source/_dashboards/map.markdown b/source/_dashboards/map.markdown index c4cfb69d554..1608dd20535 100644 --- a/source/_dashboards/map.markdown +++ b/source/_dashboards/map.markdown @@ -12,7 +12,13 @@ The Map card that allows you to display entities on a map Screenshot of the map card.

-To add the Map card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Map** from the card picker. All options for this card can be configured via the user interface. +To add the Map card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -71,8 +77,6 @@ hours_to_show: ## Examples -The card can also be configured using YAML, some examples below: - ```yaml type: map aspect_ratio: 16:9 diff --git a/source/_dashboards/markdown.markdown b/source/_dashboards/markdown.markdown index 2200e5834c2..62ae632a637 100644 --- a/source/_dashboards/markdown.markdown +++ b/source/_dashboards/markdown.markdown @@ -7,14 +7,18 @@ description: "The Markdown card is used to render Markdown" The Markdown card is used to render [Markdown](https://commonmark.org/help/). -The renderer uses [Marked.js](https://marked.js.org), which supports [several specifications of Markdown](https://marked.js.org/#specifications), including CommonMark, GitHub Flavored Markdown (GFM) and `markdown.pl`. -

Screenshot of the markdown card Screenshot of the Markdown card.

-To add the Markdown card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Markdown** from the card picker. +The renderer uses [Marked.js](https://marked.js.org), which supports [several specifications of Markdown](https://marked.js.org/#specifications), including CommonMark, GitHub Flavored Markdown (GFM) and `markdown.pl`. + +To add the Markdown card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -46,9 +50,7 @@ theme: type: string {% endconfiguration %} -## Example - -The card can also be configured using YAML, some examples below: +### Example ```yaml type: markdown @@ -58,7 +60,7 @@ content: > Starting with Home Assistant 0.72, we're experimenting with a new way of defining your interface. ``` -## Template variables +### Template variables A special template variable - `config` is set up for the `content` of the card. It contains the configuration of the card. @@ -101,7 +103,7 @@ content: | {% endraw %} -## Icons +### Icons You can use [Material Design Icons](https://pictogrammers.com/library/mdi/) icons in the `content` of the card. diff --git a/source/_dashboards/media-control.markdown b/source/_dashboards/media-control.markdown index dfe6d462eab..0d20627e5f5 100644 --- a/source/_dashboards/media-control.markdown +++ b/source/_dashboards/media-control.markdown @@ -12,7 +12,11 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl Screenshot of the Media Control card.

-To add the Media Control card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Media Control** from the card picker. +To add the Media Control card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -34,9 +38,9 @@ theme: type: string {% endconfiguration %} -## Example +### Example -Alternatively, the card can be configured using YAML: +Basic example: ```yaml type: media-control diff --git a/source/_dashboards/picture-elements.markdown b/source/_dashboards/picture-elements.markdown index d3d9b2e557b..25be07e6f3d 100644 --- a/source/_dashboards/picture-elements.markdown +++ b/source/_dashboards/picture-elements.markdown @@ -7,13 +7,19 @@ description: "The Picture Elements card is one of the most versatile types of ca The Picture Elements card is one of the most versatile types of cards. -The cards allow you to position icons or text and even services on an image based on coordinates. Imagine floor plan, imagine [picture-glance](/dashboards/picture-glance/) with no restrictions! -

A functional floorplan powered by picture elements A functional floorplan powered by picture elements.

+The cards allow you to position icons or text and even services on an image based on coordinates. Imagine floor plan, imagine [picture-glance](/dashboards/picture-glance/) with no restrictions! + +To add the Picture Elements card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +This card can only be configured in YAML. + {% configuration %} type: required: true diff --git a/source/_dashboards/picture-entity.markdown b/source/_dashboards/picture-entity.markdown index 206de366042..2fa63308b7b 100644 --- a/source/_dashboards/picture-entity.markdown +++ b/source/_dashboards/picture-entity.markdown @@ -12,6 +12,12 @@ The Picture Entity card displays an entity in the form of an image. Instead of i Background changes according to the entity state.

+To add the Picture Entity card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. + {% configuration %} type: required: true @@ -78,7 +84,7 @@ double_tap_action: type: map {% endconfiguration %} -## How to use state_filter +### How to use state_filter Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) @@ -88,7 +94,7 @@ state_filter: "off": brightness(50%) hue-rotate(45deg) ``` -## Examples +### Examples Basic example: diff --git a/source/_dashboards/picture-glance.markdown b/source/_dashboards/picture-glance.markdown index 8f78dcab9ce..5f31ea3005a 100644 --- a/source/_dashboards/picture-glance.markdown +++ b/source/_dashboards/picture-glance.markdown @@ -12,6 +12,12 @@ The Picture Glance card shows an image and corresponding entity states as an ico Picture glance card for a living room.

+To add the Picture Glance card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. + {% configuration %} type: required: true @@ -82,7 +88,7 @@ double_tap_action: type: map {% endconfiguration %} -## Options For Entities +### Options For Entities If you define entities as objects instead of strings, you can add more customization and configuration: @@ -126,7 +132,7 @@ double_tap_action: type: map {% endconfiguration %} -## Options For Exemptions +### Options For Exemptions {% configuration badges %} user: @@ -135,7 +141,7 @@ user: type: string {% endconfiguration %} -## How to use state_filter +### How to use state_filter Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) @@ -146,7 +152,7 @@ state_filter: entity: switch.decorative_lights ``` -## Examples +### Examples ```yaml type: picture-glance diff --git a/source/_dashboards/picture.markdown b/source/_dashboards/picture.markdown index 17443ca9860..c66fbe8d851 100644 --- a/source/_dashboards/picture.markdown +++ b/source/_dashboards/picture.markdown @@ -12,6 +12,12 @@ The Picture card allows you to set an image to use for navigation to various pat Screenshot of the picture card.

+To add the Picture card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. + {% configuration %} type: required: true @@ -39,16 +45,7 @@ double_tap_action: type: map {% endconfiguration %} -## Options For Exemptions - -{% configuration badges %} -user: - required: true - description: User ID that can see the view tab. - type: string -{% endconfiguration %} - -## Examples +### Examples Navigate to another view: diff --git a/source/_dashboards/plant-status.markdown b/source/_dashboards/plant-status.markdown index 72b6378ddfd..f55c0820a13 100644 --- a/source/_dashboards/plant-status.markdown +++ b/source/_dashboards/plant-status.markdown @@ -12,7 +12,13 @@ The Plant Status card is for all the lovely botanists out there. Screenshot of the plant status card.

-To add the Plant Status card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Plant Status** from the card picker. All options for this card can be configured via the user interface. +To add the Plant Status card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -34,9 +40,9 @@ theme: type: string {% endconfiguration %} -## Example +### Example -Alternatively, the card can be configured using YAML: +Basic example: ```yaml type: plant-status diff --git a/source/_dashboards/sensor.markdown b/source/_dashboards/sensor.markdown index 1a134fa0b08..6eb923fa775 100644 --- a/source/_dashboards/sensor.markdown +++ b/source/_dashboards/sensor.markdown @@ -12,7 +12,13 @@ The Sensor card gives you a quick overview of your sensors state with an optiona Screenshot of the sensor card.

-To add the Sensor card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Sensor** from the card picker. All options for this card can be configured via the user interface. +To add the Sensor card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -70,9 +76,7 @@ theme: type: string {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example ```yaml type: sensor diff --git a/source/_dashboards/shopping-list.markdown b/source/_dashboards/shopping-list.markdown index 1c5a8cb788a..e6d5d7cd074 100644 --- a/source/_dashboards/shopping-list.markdown +++ b/source/_dashboards/shopping-list.markdown @@ -7,20 +7,20 @@ description: "The Shopping List card allows you to add, edit, check-off, and cle The Shopping List card allows you to add, edit, check-off, and clear items from your shopping list. -Setup of the [Shopping List integration](/integrations/shopping_list/) is required. -

Screenshot of the shopping list card Screenshot of the Shopping List card.

-To add the Shopping List card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Shopping List** from the card picker. All options for this card can be configured via the user interface. +Setup of the [Shopping List integration](/integrations/shopping_list/) is required. -Alternatively, the card can be configured using YAML: +To add the Shopping List card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. -```yaml -type: shopping-list -``` +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -37,7 +37,7 @@ theme: type: string {% endconfiguration %} -## Examples +### Examples Title Example: diff --git a/source/_dashboards/statistics-graph.markdown b/source/_dashboards/statistics-graph.markdown index 79239b9d2c5..e3409b6215c 100644 --- a/source/_dashboards/statistics-graph.markdown +++ b/source/_dashboards/statistics-graph.markdown @@ -7,10 +7,6 @@ description: "The Statistics Graph card allows you to display a graph with stati The Statistics Graph card allows you to display a graph of statistics data for each of the entities listed. -Statistics are gathered every 5 minutes for sensors that support it. It will either keep the `min`, `max` and `mean` of a sensors value for a specific hour, or the `sum` for a metered entity. - -If your sensor doesn't work with statistics, check [this](/more-info/statistics/). -

Screenshot of the statistics graph card for power entities Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`. @@ -21,7 +17,17 @@ Screenshot of the Statistics Graph card with none metered entities and `chart_ty Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.

-To add the Statistics Graph card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Statistics Graph** from the card picker. All options for this card can be configured via the user interface. +Statistics are gathered every 5 minutes for sensors that support it. It will either keep the `min`, `max`, and `mean` of a sensor's value for a specific hour or the `sum` for a metered entity. + +If your sensor doesn't work with statistics, check [this](/more-info/statistics/). + +To add the Statistics Graph card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -55,7 +61,7 @@ period: type: string {% endconfiguration %} -## Options For Entities +### Options For Entities If you define entities as objects instead of strings, you can add more customization and configuration: @@ -70,9 +76,7 @@ name: type: string {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example ```yaml type: statistics-graph diff --git a/source/_dashboards/thermostat.markdown b/source/_dashboards/thermostat.markdown index e9bb53a45ad..1007d5a4c55 100644 --- a/source/_dashboards/thermostat.markdown +++ b/source/_dashboards/thermostat.markdown @@ -12,7 +12,13 @@ The Thermostat card gives control of your [climate](/integrations/#climate) enti Screenshot of the Thermostat card.

-To add the Thermostat card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Thermostat** from the card picker. All options for this card can be configured via the user interface. +To add the Thermostat card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +All options for this card can be configured via the user interface. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -34,9 +40,7 @@ theme: type: string {% endconfiguration %} -## Example - -Alternatively, the card can be configured using YAML: +### Example ```yaml type: thermostat diff --git a/source/_dashboards/vertical-stack.markdown b/source/_dashboards/vertical-stack.markdown index 333788832f1..4aedb13d089 100644 --- a/source/_dashboards/vertical-stack.markdown +++ b/source/_dashboards/vertical-stack.markdown @@ -7,7 +7,11 @@ description: "The Vertical Stack card allows you to group multiple cards so they The Vertical Stack card allows you to group multiple cards so they always sit in the same column. -To add the Vertical Stack card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Vertical Stack** from the card picker. All options for this card can be configured via the user interface. +To add the Vertical Stack card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. + +## YAML Configuration + +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -24,9 +28,7 @@ cards: type: list {% endconfiguration %} -## Examples - -Alternatively, the card can be configured using YAML: +### Examples Basic example: diff --git a/source/_dashboards/weather-forecast.markdown b/source/_dashboards/weather-forecast.markdown index bc34e13db01..5e5c0c7db37 100644 --- a/source/_dashboards/weather-forecast.markdown +++ b/source/_dashboards/weather-forecast.markdown @@ -12,7 +12,7 @@ The Weather Forecast card displays the weather. Very useful to include on interf Screenshot of the Weather card.

-To add the Weather card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Weather** from the card picker. +To add the Weather card to your user interface, click the menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the **Add Card** button in the bottom right corner and select from the card picker. ## Card Settings @@ -37,9 +37,9 @@ Theme: -### YAML +## YAML Configuration -This is for if you use YAML mode or just prefer to use YAML in the Code Editor in the UI. +The following YAML options are available when you use YAML mode or just prefer to use YAML in the Code Editor in the UI. {% configuration %} type: @@ -83,7 +83,7 @@ double_tap_action: type: map {% endconfiguration %} -Example +### Example ```yaml type: weather-forecast @@ -113,8 +113,6 @@ Example theme configuration: --weather-icon-rain-color: purple ``` -  - #### Personal Icons Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include: diff --git a/source/dashboards/cards.markdown b/source/dashboards/cards.markdown index 4606b410eff..4f50fa2ba0f 100644 --- a/source/dashboards/cards.markdown +++ b/source/dashboards/cards.markdown @@ -5,4 +5,4 @@ description: "Cards." Your dashboard is made up of Cards. -There are several built-in card types, each with their own configuration options. Select a card from the menu to view additional details and the options for that card. +There are several built-in card types, each with their own configuration options. Select a card from the menu to view additional details and the options for that card. \ No newline at end of file