mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 17:27:19 +00:00
Update documentation for how cards can be configured in the UI (#21556)
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
GitHub
parent
c4c6030149
commit
6c6268a08e
@ -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.
|
||||
</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
|
||||
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
|
||||
```
|
||||
|
||||
<p class='img'>
|
||||
|
||||
@ -12,13 +12,18 @@ The Area card lets you control and monitor an individual area.
|
||||
Screenshot of the Area card.
|
||||
</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.
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
@ -12,7 +12,9 @@ The Button card allows you to add buttons to perform tasks.
|
||||
Screenshot of three Button Cards.
|
||||
</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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -13,7 +13,9 @@ The Calendar card displays your [calendar](/integrations/#calendar) entities in
|
||||
Screenshot of the Calendar card.
|
||||
</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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/dashboards/entity_row_special.jpg' alt='Screenshot of other special rows'>
|
||||
|
||||
@ -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.
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/dashboards/entity_filter.png' alt='Screenshot of the Entity Filter card'>
|
||||
Screenshot of the Entity Filter card.
|
||||
</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 %}
|
||||
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:
|
||||
|
||||
|
||||
@ -12,7 +12,13 @@ The Entity card gives you a quick overview of your entity's state.
|
||||
Screenshot of the Entity card.
|
||||
</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 %}
|
||||
type:
|
||||
@ -56,9 +62,7 @@ footer:
|
||||
type: map
|
||||
{% endconfiguration %}
|
||||
|
||||
## Example
|
||||
|
||||
Alternatively, the card can be configured using YAML:
|
||||
### Example
|
||||
|
||||
```yaml
|
||||
- type: entity
|
||||
|
||||
@ -17,14 +17,13 @@ Screenshot of the Gauge card.
|
||||
Screenshot of the Gauge card in needle mode.
|
||||
</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
|
||||
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:
|
||||
|
||||
|
||||
@ -12,7 +12,13 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep
|
||||
Screenshot of the Glance card.
|
||||
</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 %}
|
||||
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:
|
||||
|
||||
|
||||
@ -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.
|
||||
</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 %}
|
||||
type:
|
||||
@ -41,8 +47,6 @@ cards:
|
||||
|
||||
## Examples
|
||||
|
||||
Alternatively, the card can be configured using YAML:
|
||||
|
||||
Basic example:
|
||||
|
||||
```yaml
|
||||
|
||||
@ -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.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -12,7 +12,13 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and
|
||||
Screenshot of the humidifier card.
|
||||
</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 %}
|
||||
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
|
||||
```
|
||||
|
||||
@ -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>`.
|
||||
|
||||
<div class='note warning'>
|
||||
You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
|
||||
</div>
|
||||
|
||||
<p class='img'>
|
||||
<img width="500" src='/images/dashboards/iframe.png' alt='Windy weather radar as Webpage'>
|
||||
Windy weather radar as Webpage.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -12,14 +12,13 @@ The Light card allows you to change the brightness of the light.
|
||||
Screenshot of the Light card.
|
||||
</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
|
||||
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:
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ The Logbook card displays entries from the logbook for specific entities.
|
||||
Screenshot of the Logbook card.
|
||||
</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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -12,7 +12,13 @@ The Map card that allows you to display entities on a map
|
||||
Screenshot of the map card.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -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`.
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/dashboards/markdown.png' alt='Screenshot of the markdown card'>
|
||||
Screenshot of the Markdown card.
|
||||
</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 %}
|
||||
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.
|
||||
|
||||
|
||||
@ -12,7 +12,11 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl
|
||||
Screenshot of the Media Control card.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -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!
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/dashboards/picture_elements.gif' alt='A functional floorplan powered by picture elements'>
|
||||
A functional floorplan powered by picture elements.
|
||||
</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 %}
|
||||
type:
|
||||
required: true
|
||||
|
||||
@ -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.
|
||||
</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 %}
|
||||
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:
|
||||
|
||||
|
||||
@ -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.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -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.
|
||||
</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 %}
|
||||
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:
|
||||
|
||||
|
||||
@ -12,7 +12,13 @@ The Plant Status card is for all the lovely botanists out there.
|
||||
Screenshot of the plant status card.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -12,7 +12,13 @@ The Sensor card gives you a quick overview of your sensors state with an optiona
|
||||
Screenshot of the sensor card.
|
||||
</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 %}
|
||||
type:
|
||||
@ -70,9 +76,7 @@ theme:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
## Example
|
||||
|
||||
Alternatively, the card can be configured using YAML:
|
||||
### Example
|
||||
|
||||
```yaml
|
||||
type: sensor
|
||||
|
||||
@ -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.
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/dashboards/shopping_list_card.gif' alt='Screenshot of the shopping list card'>
|
||||
Screenshot of the Shopping List card.
|
||||
</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
|
||||
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:
|
||||
|
||||
|
||||
@ -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/).
|
||||
|
||||
<p class='img'>
|
||||
<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`.
|
||||
@ -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`.
|
||||
</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 %}
|
||||
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
|
||||
|
||||
@ -12,7 +12,13 @@ The Thermostat card gives control of your [climate](/integrations/#climate) enti
|
||||
Screenshot of the Thermostat card.
|
||||
</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 %}
|
||||
type:
|
||||
@ -34,9 +40,7 @@ theme:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
## Example
|
||||
|
||||
Alternatively, the card can be configured using YAML:
|
||||
### Example
|
||||
|
||||
```yaml
|
||||
type: thermostat
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ The Weather Forecast card displays the weather. Very useful to include on interf
|
||||
Screenshot of the Weather card.
|
||||
</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
|
||||
|
||||
@ -37,9 +37,9 @@ Theme:
|
||||
|
||||
</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 %}
|
||||
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:
|
||||
|
||||
@ -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.
|
||||
Loading…
x
Reference in New Issue
Block a user