mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 08:16:53 +00:00
Reorg Lovelace docs (#14355)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
3e044c39b4
commit
024bb2311c
@ -2,33 +2,39 @@
|
||||
<!-- {% include edit_github.html %} -->
|
||||
{% assign cards = site.lovelace | sort_natural: 'title' %}
|
||||
|
||||
<div class='section'>
|
||||
<div class="section">
|
||||
<h1 class="title delta">Lovelace UI</h1>
|
||||
<ul class='divided sidebar-menu'>
|
||||
<ul class="divided sidebar-menu">
|
||||
<li>{% active_link /lovelace/ Introduction %}</li>
|
||||
<li>{% active_link /lovelace/changelog/ Changelog %}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class='section'>
|
||||
<div class="section">
|
||||
<h1 class="title delta">Advanced</h1>
|
||||
<ul class='divided sidebar-menu'>
|
||||
<ul class="divided sidebar-menu">
|
||||
<li>{% active_link /lovelace/how-it-works/ How it works %}</li>
|
||||
<li>{% active_link /lovelace/header-footer/ Headers & Footers %}</li>
|
||||
<li>{% active_link /lovelace/yaml-mode/ YAML mode %}</li>
|
||||
<li>{% active_link /lovelace/dashboards-and-views/ Dashboards & Views %}</li>
|
||||
<li>
|
||||
{% active_link /lovelace/dashboards-and-views/ Dashboards & Views %}
|
||||
</li>
|
||||
<li>{% active_link /lovelace/badges/ Badges %}</li>
|
||||
<li>{% active_link /lovelace/actions/ Actions %}</li>
|
||||
<li><a href='https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card.html'>Developing Custom Cards <i icon='icon-external-link'></i></a></li>
|
||||
<li>
|
||||
<a
|
||||
href="https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card.html"
|
||||
>Developing Custom Cards <i class="icon-external-link"></i
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class='section'>
|
||||
<div class="section">
|
||||
<h1 class="title delta">Cards</h1>
|
||||
<ul class='divided sidebar-menu'>
|
||||
<ul class="divided sidebar-menu">
|
||||
{% for card in cards %}
|
||||
<li>{% active_link {{card.url}} {{card.sidebar_label}} %}</li>
|
||||
<li>{% active_link {{card.url}} {{card.sidebar_label}} %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -2127,6 +2127,7 @@
|
||||
# Lovelace documentation
|
||||
/lovelace/entity-button /lovelace/button
|
||||
/lovelace/views /lovelace/dashboards-and-views
|
||||
/lovelace/yaml-mode /lovelace/dashboards-and-views
|
||||
|
||||
# Removed documentation
|
||||
/docs/installation/hassbian /getting-started
|
||||
|
||||
152
source/lovelace/badges.markdown
Normal file
152
source/lovelace/badges.markdown
Normal file
@ -0,0 +1,152 @@
|
||||
---
|
||||
title: "Lovelace Badges"
|
||||
description: "Description of the various badges that are available."
|
||||
---
|
||||
|
||||
Badges are widgets that sit at the top of a Lovelace panel, above all the cards.
|
||||
|
||||
### State Label Badge
|
||||
|
||||
The State Label badge allows you to dislay a state badge. This badge supports [actions](/lovelace/actions/).
|
||||
|
||||
```yaml
|
||||
type: state-label
|
||||
entity: light.living_room
|
||||
```
|
||||
|
||||
{% configuration state_label %}
|
||||
type:
|
||||
required: true
|
||||
description: entity-button
|
||||
type: string
|
||||
entity:
|
||||
required: true
|
||||
description: Home Assistant entity ID.
|
||||
type: string
|
||||
name:
|
||||
required: false
|
||||
description: Overwrites friendly name.
|
||||
type: string
|
||||
default: Name of Entity
|
||||
icon:
|
||||
required: false
|
||||
description: Overwrites icon or entity picture.
|
||||
type: string
|
||||
default: Entity Domain Icon
|
||||
image:
|
||||
required: false
|
||||
description: The URL of an image.
|
||||
type: string
|
||||
show_name:
|
||||
required: false
|
||||
description: Show name.
|
||||
type: boolean
|
||||
default: "true"
|
||||
show_icon:
|
||||
required: false
|
||||
description: Show icon.
|
||||
type: boolean
|
||||
default: "true"
|
||||
{% endconfiguration %}
|
||||
|
||||
### Entity Filter Badge
|
||||
|
||||
This badge 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.
|
||||
|
||||
{% configuration filter_badge %}
|
||||
type:
|
||||
required: true
|
||||
description: entity-filter
|
||||
type: string
|
||||
entities:
|
||||
required: true
|
||||
description: A list of entity IDs or `entity` objects, see below.
|
||||
type: list
|
||||
state_filter:
|
||||
required: true
|
||||
description: List of strings representing states or `filter` objects, see below.
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
#### 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:
|
||||
|
||||
{% configuration entities %}
|
||||
type:
|
||||
required: false
|
||||
description: "Sets a custom badge type: `custom:my-custom-badge`"
|
||||
type: string
|
||||
entity:
|
||||
required: true
|
||||
description: Home Assistant entity ID.
|
||||
type: string
|
||||
name:
|
||||
required: false
|
||||
description: Overwrites friendly name.
|
||||
type: string
|
||||
icon:
|
||||
required: false
|
||||
description: Overwrites icon or entity picture.
|
||||
type: string
|
||||
image:
|
||||
required: false
|
||||
description: The URL of an image.
|
||||
type: string
|
||||
state_filter:
|
||||
required: false
|
||||
description: List of strings representing states or `filter` objects, see below.
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
#### 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:
|
||||
|
||||
{% configuration state_filter %}
|
||||
value:
|
||||
required: true
|
||||
description: String representing the state.
|
||||
type: string
|
||||
operator:
|
||||
required: false
|
||||
description: Operator to use in the comparison. Can be `==`, `<=`, `<`, `>=`, `>`, `!=` or `regex`.
|
||||
type: string
|
||||
attribute:
|
||||
required: false
|
||||
description: Attribute of the entity to use instead of the state.
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
#### Examples
|
||||
|
||||
Show only active switches or lights in the house
|
||||
|
||||
```yaml
|
||||
type: entity-filter
|
||||
entities:
|
||||
- entity: light.bed_light
|
||||
name: Bed
|
||||
- light.kitchen_lights
|
||||
- light.ceiling_lights
|
||||
state_filter:
|
||||
- "on"
|
||||
```
|
||||
|
||||
Specify filter for a single entity
|
||||
|
||||
```yaml
|
||||
type: entity-filter
|
||||
state_filter:
|
||||
- "on"
|
||||
- operator: ">"
|
||||
value: 90
|
||||
entities:
|
||||
- sensor.water_leak
|
||||
- sensor.outside_temp
|
||||
- entity: sensor.humidity_and_temp
|
||||
state_filter:
|
||||
- operator: ">"
|
||||
value: 50
|
||||
attribute: humidity
|
||||
```
|
||||
@ -3,12 +3,35 @@ title: "Dashboards and Views"
|
||||
description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
|
||||
---
|
||||
|
||||
### Dashboards
|
||||
You can define multiple dashboards in Lovelace. Each dashboard can be added to the sidebar. This makes it possible to create separate control dashboards for each individual part of your house.
|
||||
|
||||
You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards.
|
||||
To create new or manage existing (with `mode: storage` only) dashboards, click on `Configuration` in the sidebar and then on `Lovelace Dashboards`.
|
||||
You can manage your dashboards via the user interface. Go to configuration -> Lovelace Dashboards. Here you can see all defined dashboards and create new ones.
|
||||
|
||||
The key of the dashboard is used as the URL, this needs to contain a hyphen (`-`).
|
||||
### Using YAML for the default dashboard
|
||||
|
||||
To change the default dashboard, create a new file `ui-lovelace.yaml` in your configuration directory and add the following section to your `configuration.yaml` and restart Home Assistant:
|
||||
|
||||
```yaml
|
||||
lovelace:
|
||||
mode: yaml
|
||||
```
|
||||
|
||||
A good way to start this file is to copy and paste the "Raw configuration" from the UI so your manual configuration starts the same as your existing UI.
|
||||
|
||||
- Go into the `Overview` tab.
|
||||
- Click the three dots menu (top-right) and click on `Configure UI`.
|
||||
- Click the three dots menu again and click on `Raw config editor`.
|
||||
- There you see the configuration for your current Lovelace UI. Copy that into the `<config>/ui-lovelace.yaml` file.
|
||||
|
||||
Once you take control of your UI via YAML, the Home Assistant interface for modifying it won't be available anymore and new entities will not automatically be added to your UI.
|
||||
|
||||
When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button in the menu at the top of the UI.
|
||||
|
||||
To revert back to using the UI to edit your Lovelace interface, remove the `lovelace` section from your `configuration.yaml` and copy the contents of your `ui-lovelace.yaml` into the raw configuration section of Home Assistant and restart.
|
||||
|
||||
### Adding more dashboards with YAML
|
||||
|
||||
It is also possible to use YAML to define multiple dashboards. Each dashboard will be loaded from its own YAML file.
|
||||
|
||||
```yaml
|
||||
lovelace:
|
||||
@ -298,6 +321,7 @@ views:
|
||||
cards:
|
||||
...
|
||||
```
|
||||
|
||||
### Options For Visible
|
||||
|
||||
If you define `visible` as objects instead of a boolean to specify conditions for displaying the view tab:
|
||||
@ -349,279 +373,3 @@ frontend:
|
||||
example:
|
||||
lovelace-background: center / cover no-repeat url("/local/background.png") fixed
|
||||
```
|
||||
|
||||
## Badges
|
||||
|
||||
### State Label Badge
|
||||
|
||||
The State Label badge allows you to dislay a state badge
|
||||
|
||||
```yaml
|
||||
type: state-label
|
||||
entity: light.living_room
|
||||
```
|
||||
|
||||
{% configuration state_label %}
|
||||
type:
|
||||
required: true
|
||||
description: entity-button
|
||||
type: string
|
||||
entity:
|
||||
required: true
|
||||
description: Home Assistant entity ID.
|
||||
type: string
|
||||
name:
|
||||
required: false
|
||||
description: Overwrites friendly name.
|
||||
type: string
|
||||
default: Name of Entity
|
||||
icon:
|
||||
required: false
|
||||
description: Overwrites icon or entity picture.
|
||||
type: string
|
||||
default: Entity Domain Icon
|
||||
image:
|
||||
required: false
|
||||
description: The URL of an image.
|
||||
type: string
|
||||
show_name:
|
||||
required: false
|
||||
description: Show name.
|
||||
type: boolean
|
||||
default: "true"
|
||||
show_icon:
|
||||
required: false
|
||||
description: Show icon.
|
||||
type: boolean
|
||||
default: "true"
|
||||
tap_action:
|
||||
required: false
|
||||
description: Action to take on tap
|
||||
type: map
|
||||
keys:
|
||||
action:
|
||||
required: true
|
||||
description: "Action to perform (`more-info`, `toggle`, `call-service`, `navigate`, `url`, `none`)"
|
||||
type: string
|
||||
default: "`toggle`"
|
||||
navigation_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `/lovelace/0/`) when `action` defined as `navigate`"
|
||||
type: string
|
||||
default: none
|
||||
url_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `https://www.home-assistant.io`) when `action` defined as `url`"
|
||||
type: string
|
||||
default: none
|
||||
service:
|
||||
required: false
|
||||
description: "Service to call (e.g., `media_player.media_play_pause`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
service_data:
|
||||
required: false
|
||||
description: "Service data to include (e.g., `entity_id: media_player.bedroom`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
confirmation:
|
||||
required: false
|
||||
description: "Present a confirmation dialog to confirm the action. See `confirmation` object below"
|
||||
type: [boolean, map]
|
||||
default: "false"
|
||||
hold_action:
|
||||
required: false
|
||||
description: Action to take on tap-and-hold
|
||||
type: map
|
||||
keys:
|
||||
action:
|
||||
required: true
|
||||
description: "Action to perform (`more-info`, `toggle`, `call-service`, `navigate`, `url`, `none`)"
|
||||
type: string
|
||||
default: "`more-info`"
|
||||
navigation_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `/lovelace/0/`) when `action` defined as `navigate`"
|
||||
type: string
|
||||
default: none
|
||||
url_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `https://www.home-assistant.io`) when `action` defined as `url`"
|
||||
type: string
|
||||
default: none
|
||||
service:
|
||||
required: false
|
||||
description: "Service to call (e.g., `media_player.media_play_pause`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
service_data:
|
||||
required: false
|
||||
description: "Service data to include (e.g., `entity_id: media_player.bedroom`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
confirmation:
|
||||
required: false
|
||||
description: "Present a confirmation dialog to confirm the action. See `confirmation` object below"
|
||||
type: [boolean, map]
|
||||
default: "false"
|
||||
double_tap_action:
|
||||
required: false
|
||||
description: Action to take on double tap
|
||||
type: map
|
||||
keys:
|
||||
action:
|
||||
required: true
|
||||
description: "Action to perform (`more-info`, `toggle`, `call-service`, `navigate`, `url`, `none`)"
|
||||
type: string
|
||||
default: "`more-info`"
|
||||
navigation_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `/lovelace/0/`) when `action` defined as `navigate`"
|
||||
type: string
|
||||
default: none
|
||||
url_path:
|
||||
required: false
|
||||
description: "Path to navigate to (e.g., `https://www.home-assistant.io`) when `action` defined as `url`"
|
||||
type: string
|
||||
default: none
|
||||
service:
|
||||
required: false
|
||||
description: "Service to call (e.g., `media_player.media_play_pause`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
service_data:
|
||||
required: false
|
||||
description: "Service data to include (e.g., `entity_id: media_player.bedroom`) when `action` defined as `call-service`"
|
||||
type: string
|
||||
default: none
|
||||
confirmation:
|
||||
required: false
|
||||
description: "Present a confirmation dialog to confirm the action. See `confirmation` object below"
|
||||
type: [boolean, map]
|
||||
default: "false"
|
||||
{% endconfiguration %}
|
||||
|
||||
#### Options For Confirmation
|
||||
|
||||
If you define confirmation as an object instead of boolean, you can add more customization and configurations:
|
||||
{% configuration confirmation %}
|
||||
text:
|
||||
required: false
|
||||
description: Text to present in the confirmation dialog.
|
||||
type: string
|
||||
exemptions:
|
||||
required: false
|
||||
description: "List of `exemption` objects. See below"
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
#### Options For Exemptions
|
||||
|
||||
{% configuration badges %}
|
||||
user:
|
||||
required: true
|
||||
description: User id that can see the view tab.
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
### Entity Filter Badge
|
||||
|
||||
This badge 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.
|
||||
|
||||
{% configuration filter_badge %}
|
||||
type:
|
||||
required: true
|
||||
description: entity-filter
|
||||
type: string
|
||||
entities:
|
||||
required: true
|
||||
description: A list of entity IDs or `entity` objects, see below.
|
||||
type: list
|
||||
state_filter:
|
||||
required: true
|
||||
description: List of strings representing states or `filter` objects, see below.
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
#### 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:
|
||||
|
||||
{% configuration entities %}
|
||||
type:
|
||||
required: false
|
||||
description: "Sets a custom badge type: `custom:my-custom-badge`"
|
||||
type: string
|
||||
entity:
|
||||
required: true
|
||||
description: Home Assistant entity ID.
|
||||
type: string
|
||||
name:
|
||||
required: false
|
||||
description: Overwrites friendly name.
|
||||
type: string
|
||||
icon:
|
||||
required: false
|
||||
description: Overwrites icon or entity picture.
|
||||
type: string
|
||||
image:
|
||||
required: false
|
||||
description: The URL of an image.
|
||||
type: string
|
||||
state_filter:
|
||||
required: false
|
||||
description: List of strings representing states or `filter` objects, see below.
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
#### 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:
|
||||
|
||||
{% configuration state_filter %}
|
||||
value:
|
||||
required: true
|
||||
description: String representing the state.
|
||||
type: string
|
||||
operator:
|
||||
required: false
|
||||
description: Operator to use in the comparison. Can be `==`, `<=`, `<`, `>=`, `>`, `!=` or `regex`.
|
||||
type: string
|
||||
attribute:
|
||||
required: false
|
||||
description: Attribute of the entity to use instead of the state.
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
#### Examples
|
||||
|
||||
Show only active switches or lights in the house
|
||||
|
||||
```yaml
|
||||
type: entity-filter
|
||||
entities:
|
||||
- entity: light.bed_light
|
||||
name: Bed
|
||||
- light.kitchen_lights
|
||||
- light.ceiling_lights
|
||||
state_filter:
|
||||
- "on"
|
||||
```
|
||||
|
||||
Specify filter for a single entity
|
||||
|
||||
```yaml
|
||||
type: entity-filter
|
||||
state_filter:
|
||||
- "on"
|
||||
- operator: ">"
|
||||
value: 90
|
||||
entities:
|
||||
- sensor.water_leak
|
||||
- sensor.outside_temp
|
||||
- entity: sensor.humidity_and_temp
|
||||
state_filter:
|
||||
- operator: ">"
|
||||
value: 50
|
||||
attribute: humidity
|
||||
```
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
title: "Lovelace YAML mode"
|
||||
description: "Advanced users can switch on YAML mode for editing the Lovelace UI."
|
||||
---
|
||||
|
||||
It is possible to customize your Home Assistant interface by writing in YAML instead of via the UI. To do so, you configure the Lovelace integration to be in YAML mode by adding the following to your `configuration.yaml`:
|
||||
|
||||
```yaml
|
||||
lovelace:
|
||||
mode: yaml
|
||||
```
|
||||
|
||||
Restart Home Assistant for the mode to be changed. Create a new file `<config>/ui-lovelace.yaml` and add your Lovelace configuration. A good way to start this file is to copy and paste the "Raw configuration" from the UI so your manual configuration starts the same as your existing UI.
|
||||
|
||||
- Go into the `Overview` tab.
|
||||
- Click the three dots menu (top-right) and click on `Configure UI`.
|
||||
- Click the three dots menu again and click on `Raw config editor`.
|
||||
- There you see the configuration for your current Lovelace UI. Copy that into the `<config>/ui-lovelace.yaml` file.
|
||||
|
||||
Once you take control of your UI via YAML, the Home Assistant interface for modifying it won't be available anymore and new entities will not automatically be added to your UI.
|
||||
|
||||
When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button in the menu at the top of the UI.
|
||||
|
||||
To revert back to using the UI to edit your Lovelace interface, remove the `lovelace` section from your `configuration.yaml` and copy the contents of your `ui-lovelace.yaml` into the raw configuration section of Home Assistant and restart.
|
||||
|
||||
### Advanced configuration
|
||||
|
||||
You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards. For more details refer to [this](/lovelace/dashboards-and-views/) page.
|
||||
Loading…
x
Reference in New Issue
Block a user