jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-25 02:07:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation for how cards can be configured in the UI (#21556)

Browse Source 
Co-authored-by: Franck Nijhof <frenck@frenck.nl>
Co-authored-by: Franck Nijhof <git@frenck.dev>
fixes undefined
This commit is contained in:
Fredrik Andersson 2023-01-16 17:54:11 +01:00 committed by GitHub
parent c4c6030149
commit 6c6268a08e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 266 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
source/_dashboards/alarm-panel.markdown
View File

@ -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. Screenshot of the Alarm Panel card.
</p> </p>
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 ## YAML Configuration
type: alarm-panel
entity: alarm_control_panel.alarm 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 %} {% configuration %}
type: type:
@ -55,14 +54,14 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Title example: Title example:
```yaml ```yaml
- type: alarm-panel type: alarm-panel
name: House Alarm name: House Alarm
entity: alarm_control_panel.alarm entity: alarm_control_panel.alarm
``` ```
<p class='img'> <p class='img'>

25
source/_dashboards/area.markdown
View File

@ -12,13 +12,18 @@ The Area card lets you control and monitor an individual area.
Screenshot of the Area card. Screenshot of the Area card.
</p> </p>
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. 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. 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 %} {% configuration %}
type: type:
required: true required: true
@ -43,23 +48,21 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
Basic example: Basic example:
```yaml ```yaml
- type: area type: area
area: bedroom area: bedroom
``` ```
Complex example Complex example
```yaml ```yaml
- type: area type: area
area: bedroom area: bedroom
navigation_path: my_bedroom navigation_path: my_bedroom
show_camera: true show_camera: true
theme: green theme: green
``` ```

23
source/_dashboards/button.markdown
View File

@ -12,7 +12,9 @@ The Button card allows you to add buttons to perform tasks.
Screenshot of three Button Cards. Screenshot of three Button Cards.
</p> </p>
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 ## 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). description: The action taken on card tap and hold. For more information, see the [action documentation](/dashboards/actions/#hold-action).
{% endconfiguration_basic %} {% 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 %} {% configuration %}
type: type:
@ -108,24 +110,15 @@ action_name:
default: Run default: Run
{% endconfiguration %} {% endconfiguration %}
Example: ### Examples
Basic example:
```yaml ```yaml
type: button type: button
entity: light.living_room 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: Button Card with a button name and a script that runs when card is tapped:
```yaml ```yaml

10
source/_dashboards/calendar.markdown
View File

@ -13,7 +13,9 @@ The Calendar card displays your [calendar](/integrations/#calendar) entities in
Screenshot of the Calendar card. Screenshot of the Calendar card.
</p> </p>
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 ## 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/). 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 %} {% 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 %} {% configuration %}
type: type:
@ -55,7 +57,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
Example: ### Examples
```yaml ```yaml
type: calendar type: calendar

14
source/_dashboards/conditional.markdown
View File

@ -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. 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 %} {% configuration %}
type: type:
@ -39,9 +47,7 @@ card:
*one is required (`state` or `state_not`) *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 ```yaml
type: conditional type: conditional

14
source/_dashboards/entities.markdown
View File

@ -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. 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 %} {% configuration %}
type: type:
@ -373,9 +377,9 @@ download:
default: false default: false
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
### Entity rows #### Entity rows
```yaml ```yaml
type: entities type: entities
@ -393,7 +397,7 @@ entities:
- group.all_locks - 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. 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 name: Dining Ceiling
``` ```
### Other special rows #### Other special rows
<p class='img'> <p class='img'>
<img src='/images/dashboards/entity_row_special.jpg' alt='Screenshot of other special rows'> <img src='/images/dashboards/entity_row_special.jpg' alt='Screenshot of other special rows'>

14
source/_dashboards/entity-filter.markdown
View File

@ -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. 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.
<p class='img'> <p class='img'>
<img src='/images/dashboards/entity_filter.png' alt='Screenshot of the Entity Filter card'> <img src='/images/dashboards/entity_filter.png' alt='Screenshot of the Entity Filter card'>
Screenshot of the Entity Filter card. Screenshot of the Entity Filter card.
</p> </p>
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 %} {% configuration %}
type: type:
required: true required: true
@ -39,7 +45,7 @@ show_empty:
default: true default: true
{% endconfiguration %} {% 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: 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 type: list
{% endconfiguration %} {% 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: 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:

12
source/_dashboards/entity.markdown
View File

@ -12,7 +12,13 @@ The Entity card gives you a quick overview of your entity's state.
Screenshot of the Entity card. Screenshot of the Entity card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -56,9 +62,7 @@ footer:
type: map type: map
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
```yaml ```yaml
- type: entity - type: entity

13
source/_dashboards/gauge.markdown
View File

@ -17,14 +17,13 @@ Screenshot of the Gauge card.
Screenshot of the Gauge card in needle mode. Screenshot of the Gauge card in needle mode.
</p> </p>
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 ## YAML Configuration
type: gauge
entity: sensor.cpu_usage 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 %} {% configuration %}
type: type:
@ -100,7 +99,7 @@ segments:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Title and unit of measurement: Title and unit of measurement:

14
source/_dashboards/glance.markdown
View File

@ -12,7 +12,13 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep
Screenshot of the Glance card. Screenshot of the Glance card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -57,7 +63,7 @@ state_color:
default: true default: true
{% endconfiguration %} {% endconfiguration %}
## Options For Entities ### Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration: 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 type: map
{% endconfiguration %} {% endconfiguration %}
## Options For Exemptions ### Options For Exemptions
{% configuration badges %} {% configuration badges %}
user: user:
@ -111,7 +117,7 @@ user:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Basic example: Basic example:

10
source/_dashboards/grid.markdown
View File

@ -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. Screenshot of the Grid card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -41,8 +47,6 @@ cards:
## Examples ## Examples
Alternatively, the card can be configured using YAML:
Basic example: Basic example:
```yaml ```yaml

14
source/_dashboards/history-graph.markdown
View File

@ -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. Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
</p> </p>
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 %} {% configuration %}
type: type:
@ -49,7 +55,7 @@ show_names:
default: true default: true
{% endconfiguration %} {% endconfiguration %}
## Options For Entities ### Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration: If you define entities as objects instead of strings, you can add more customization and configuration:
@ -64,9 +70,7 @@ name:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Alternatively, the card can be configured using YAML:
```yaml ```yaml
type: history-graph type: history-graph

8
source/_dashboards/horizontal-stack.markdown
View File

@ -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. 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 %} {% configuration %}
type: type:
@ -24,7 +28,7 @@ cards:
type: list type: list
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
```yaml ```yaml
type: horizontal-stack type: horizontal-stack

18
source/_dashboards/humidifier.markdown
View File

@ -12,7 +12,13 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and
Screenshot of the humidifier card. Screenshot of the humidifier card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -34,12 +40,10 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
```yaml ```yaml
- type: humidifier type: humidifier
entity: humidifier.bedroom entity: humidifier.bedroom
name: Bedroom Humidifier name: Bedroom Humidifier
``` ```

20
source/_dashboards/iframe.markdown
View File

@ -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 `<config-directory>/www` folder and reference them using `/local/<file>`. The Webpage card allows you to embed your favorite webpage right into Home Assistant. You can also embed files stored in your `<config-directory>/www` folder and reference them using `/local/<file>`.
<div class='note warning'>
You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
</div>
<p class='img'> <p class='img'>
<img width="500" src='/images/dashboards/iframe.png' alt='Windy weather radar as Webpage'> <img width="500" src='/images/dashboards/iframe.png' alt='Windy weather radar as Webpage'>
Windy weather radar as Webpage. Windy weather radar as Webpage.
</p> </p>
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.
<div class='note warning'>
You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
</div>
## 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 %} {% configuration %}
type: type:
@ -38,9 +44,7 @@ title:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
The card can also be configured using YAML, some examples below:
```yaml ```yaml
type: iframe type: iframe

20
source/_dashboards/light.markdown
View File

@ -12,14 +12,13 @@ The Light card allows you to change the brightness of the light.
Screenshot of the Light card. Screenshot of the Light card.
</p> </p>
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 ## YAML Configuration
type: light
entity: light.bedroom 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 %} {% configuration %}
type: type:
@ -54,7 +53,14 @@ double_tap_action:
type: map type: map
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Basic example:
```yaml
type: light
entity: light.bedroom
```
Overwriting names example: Overwriting names example:

8
source/_dashboards/logbook.markdown
View File

@ -12,7 +12,7 @@ The Logbook card displays entries from the logbook for specific entities.
Screenshot of the Logbook card. Screenshot of the Logbook card.
</p> </p>
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 ## 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/). 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 %} {% 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 %} {% configuration %}
type: type:
@ -55,7 +55,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
Example: ### Examples
```yaml ```yaml
type: logbook type: logbook

10
source/_dashboards/map.markdown
View File

@ -12,7 +12,13 @@ The Map card that allows you to display entities on a map
Screenshot of the map card. Screenshot of the map card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -71,8 +77,6 @@ hours_to_show:
## Examples ## Examples
The card can also be configured using YAML, some examples below:
```yaml ```yaml
type: map type: map
aspect_ratio: 16:9 aspect_ratio: 16:9

18
source/_dashboards/markdown.markdown
View File

@ -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 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`.
<p class='img'> <p class='img'>
<img src='/images/dashboards/markdown.png' alt='Screenshot of the markdown card'> <img src='/images/dashboards/markdown.png' alt='Screenshot of the markdown card'>
Screenshot of the Markdown card. Screenshot of the Markdown card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -46,9 +50,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
The card can also be configured using YAML, some examples below:
```yaml ```yaml
type: markdown type: markdown
@ -58,7 +60,7 @@ content: >
Starting with Home Assistant 0.72, we're experimenting with a new way of defining your interface. 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. 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 %} {% endraw %}
## Icons ### Icons
You can use [Material Design Icons](https://pictogrammers.com/library/mdi/) icons in the `content` of the card. You can use [Material Design Icons](https://pictogrammers.com/library/mdi/) icons in the `content` of the card.

10
source/_dashboards/media-control.markdown
View File

@ -12,7 +12,11 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl
Screenshot of the Media Control card. Screenshot of the Media Control card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -34,9 +38,9 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML: Basic example:
```yaml ```yaml
type: media-control type: media-control

10
source/_dashboards/picture-elements.markdown
View File

@ -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 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!
<p class='img'> <p class='img'>
<img src='/images/dashboards/picture_elements.gif' alt='A functional floorplan powered by picture elements'> <img src='/images/dashboards/picture_elements.gif' alt='A functional floorplan powered by picture elements'>
A functional floorplan powered by picture elements. A functional floorplan powered by picture elements.
</p> </p>
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 %} {% configuration %}
type: type:
required: true required: true

10
source/_dashboards/picture-entity.markdown
View File

@ -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. Background changes according to the entity state.
</p> </p>
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 %} {% configuration %}
type: type:
required: true required: true
@ -78,7 +84,7 @@ double_tap_action:
type: map type: map
{% endconfiguration %} {% 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) 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) "off": brightness(50%) hue-rotate(45deg)
``` ```
## Examples ### Examples
Basic example: Basic example:

14
source/_dashboards/picture-glance.markdown
View File

@ -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. Picture glance card for a living room.
</p> </p>
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 %} {% configuration %}
type: type:
required: true required: true
@ -82,7 +88,7 @@ double_tap_action:
type: map type: map
{% endconfiguration %} {% endconfiguration %}
## Options For Entities ### Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration: 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 type: map
{% endconfiguration %} {% endconfiguration %}
## Options For Exemptions ### Options For Exemptions
{% configuration badges %} {% configuration badges %}
user: user:
@ -135,7 +141,7 @@ user:
type: string type: string
{% endconfiguration %} {% 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) Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
@ -146,7 +152,7 @@ state_filter:
entity: switch.decorative_lights entity: switch.decorative_lights
``` ```
## Examples ### Examples
```yaml ```yaml
type: picture-glance type: picture-glance

17
source/_dashboards/picture.markdown
View File

@ -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. Screenshot of the picture card.
</p> </p>
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 %} {% configuration %}
type: type:
required: true required: true
@ -39,16 +45,7 @@ double_tap_action:
type: map type: map
{% endconfiguration %} {% endconfiguration %}
## Options For Exemptions ### Examples
{% configuration badges %}
user:
required: true
description: User ID that can see the view tab.
type: string
{% endconfiguration %}
## Examples
Navigate to another view: Navigate to another view:

12
source/_dashboards/plant-status.markdown
View File

@ -12,7 +12,13 @@ The Plant Status card is for all the lovely botanists out there.
Screenshot of the plant status card. Screenshot of the plant status card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -34,9 +40,9 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML: Basic example:
```yaml ```yaml
type: plant-status type: plant-status

12
source/_dashboards/sensor.markdown
View File

@ -12,7 +12,13 @@ The Sensor card gives you a quick overview of your sensors state with an optiona
Screenshot of the sensor card. Screenshot of the sensor card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -70,9 +76,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
```yaml ```yaml
type: sensor type: sensor

16
source/_dashboards/shopping-list.markdown
View File

@ -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. 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.
<p class='img'> <p class='img'>
<img src='/images/dashboards/shopping_list_card.gif' alt='Screenshot of the shopping list card'> <img src='/images/dashboards/shopping_list_card.gif' alt='Screenshot of the shopping list card'>
Screenshot of the Shopping List card. Screenshot of the Shopping List card.
</p> </p>
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 All options for this card can be configured via the user interface.
type: shopping-list
``` ## 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 %} {% configuration %}
type: type:
@ -37,7 +37,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Title Example: Title Example:

22
source/_dashboards/statistics-graph.markdown
View File

@ -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. 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/).
<p class='img'> <p class='img'>
<img src='/images/dashboards/statistics_graph_line.png' alt='Screenshot of the statistics graph card for power entities'> <img src='/images/dashboards/statistics_graph_line.png' alt='Screenshot of the statistics graph card for power entities'>
Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`. 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`. Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.
</p> </p>
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 %} {% configuration %}
type: type:
@ -55,7 +61,7 @@ period:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Options For Entities ### Options For Entities
If you define entities as objects instead of strings, you can add more customization and configuration: If you define entities as objects instead of strings, you can add more customization and configuration:
@ -70,9 +76,7 @@ name:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
```yaml ```yaml
type: statistics-graph type: statistics-graph

12
source/_dashboards/thermostat.markdown
View File

@ -12,7 +12,13 @@ The Thermostat card gives control of your [climate](/integrations/#climate) enti
Screenshot of the Thermostat card. Screenshot of the Thermostat card.
</p> </p>
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 %} {% configuration %}
type: type:
@ -34,9 +40,7 @@ theme:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Example ### Example
Alternatively, the card can be configured using YAML:
```yaml ```yaml
type: thermostat type: thermostat

10
source/_dashboards/vertical-stack.markdown
View File

@ -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. 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 %} {% configuration %}
type: type:
@ -24,9 +28,7 @@ cards:
type: list type: list
{% endconfiguration %} {% endconfiguration %}
## Examples ### Examples
Alternatively, the card can be configured using YAML:
Basic example: Basic example:

10
source/_dashboards/weather-forecast.markdown
View File

@ -12,7 +12,7 @@ The Weather Forecast card displays the weather. Very useful to include on interf
Screenshot of the Weather card. Screenshot of the Weather card.
</p> </p>
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 ## Card Settings
@ -37,9 +37,9 @@ Theme:
</div> </div>
### 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 %} {% configuration %}
type: type:
@ -83,7 +83,7 @@ double_tap_action:
type: map type: map
{% endconfiguration %} {% endconfiguration %}
Example ### Example
```yaml ```yaml
type: weather-forecast type: weather-forecast
@ -113,8 +113,6 @@ Example theme configuration:
--weather-icon-rain-color: purple --weather-icon-rain-color: purple
``` ```
&nbsp;
#### Personal Icons #### Personal Icons
Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include: Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include: