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-14 12:56:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moving Lovelace Dashboards to Views page (#12707)

Browse Source 
* add dashboards

Based on this issue - https://github.com/home-assistant/home-assistant.io/issues/12462

As dashboards are not limited to YAML mode, it makes the information on them hard to find when it's a part of Lovelace YAML mode page.
I propose to add informatin about dashboards' configuration to the page about Views and rename it accordingly.

* move dashboards to views

* add link to dashboards

* dashes instead of underscores

* change link to Dashboards & Views

* add /lovelace/views
This commit is contained in:
akasma74 2020-04-06 14:11:51 +01:00 committed by GitHub
parent 4bfcad1e28
commit c369cb84a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 171 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/_includes/asides/lovelace_navigation.html
View File

@ -16,7 +16,7 @@
<li>{% active_link /lovelace/how-it-works/ How it works %}</li> <li>{% active_link /lovelace/how-it-works/ How it works %}</li>
<li>{% active_link /lovelace/header-footer/ Headers & Footers %}</li> <li>{% active_link /lovelace/header-footer/ Headers & Footers %}</li>
<li>{% active_link /lovelace/yaml-mode/ YAML mode %}</li> <li>{% active_link /lovelace/yaml-mode/ YAML mode %}</li>
<li>{% active_link /lovelace/views/ Views %}</li> <li>{% active_link /lovelace/dashboards-and-views/ Dashboards & Views %}</li>
<li>{% active_link /lovelace/actions/ Actions %}</li> <li>{% active_link /lovelace/actions/ Actions %}</li>
<li><a href='https://developers.home-assistant.io/docs/en/lovelace_custom_card.html'>Developing Custom Cards <i icon='icon-external-link'></i></a></li> <li><a href='https://developers.home-assistant.io/docs/en/lovelace_custom_card.html'>Developing Custom Cards <i icon='icon-external-link'></i></a></li>
</ul> </ul>

1
source/_redirects
View File

@ -2088,3 +2088,4 @@
# Lovelace documentation # Lovelace documentation
/lovelace/entity-button /lovelace/button /lovelace/entity-button /lovelace/button
/lovelace/views /lovelace/dashboards-and-views

169
source/lovelace/views.markdown → source/lovelace/dashboards-and-views.markdown
View File

@ -1,8 +1,175 @@
--- ---
title: "Views" title: "Dashboards and Views"
description: "The Lovelace UI is a powerful and configurable interface for Home Assistant." description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
--- ---
### Dashboards
You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards.
The key of the dashboard is used as the URL, this needs to contain a hyphen (`-`).
```yaml
lovelace:
mode: yaml
# Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
resources:
- url: /local/my-custom-card.js
type: module
- url: /local/my-webfont.css
type: css
# Add more dashboards
dashboards:
lovelace-generated: # Needs to contain a hyphen (-)
mode: yaml
filename: notexist.yaml
title: Generated
icon: mdi:tools
show_in_sidebar: true
require_admin: true
lovelace-hidden:
mode: yaml
title: hidden
show_in_sidebar: false
filename: hidden.yaml
```
You can also add YAML dashboards when your main dashboard is UI configurated:
```yaml
lovelace:
mode: storage
# Add yaml dashboards
dashboards:
lovelace-yaml:
mode: yaml
title: YAML
icon: mdi:script
show_in_sidebar: true
filename: lovelace.yaml
```
{% configuration Lovelace %}
mode:
required: true
description: "In what mode should the main Lovelace panel be, `yaml` or `storage` (UI managed)."
type: string
resources:
required: false
description: "List of resources that should be loaded when you use Lovelace. Only use this when mode is `yaml`."
type: list
keys:
url:
required: true
description: The URL of the resource to load.
type: string
type:
required: true
description: "The type of resource, this should be either `module` for a JavaScript module or `css` for a StyleSheet."
type: string
dashboards:
required: false
description: Additional Lovelace YAML dashboards. The key is used for the URL and should contain a hyphen (`-`)
type: map
keys:
mode:
required: true
description: "The mode of the dashboard, this should always be `yaml`. Dashboards in `storage` mode can be created in the Lovelace configuration panel."
type: string
filename:
required: true
description: "The file in your `config` directory where the Lovelace configuration for this panel is."
type: string
title:
required: true
description: "The title of the dashboard, will be used in the sidebar."
type: string
icon:
required: false
description: The icon to show in the sidebar.
type: string
show_in_sidebar:
required: false
description: Should this view be shown in the sidebar.
type: boolean
default: true
require_admin:
required: false
description: Should this view be only accessible for admin users.
type: boolean
default: false
{% endconfiguration %}
As a super minimal example of a Lovelace dashboard config, here's the bare minimum you will need for it to work:
```yaml
title: My Awesome Home
views:
# View tab title.
- title: Example
cards:
# The markdown card will render markdown text.
- type: markdown
title: Lovelace
content: >
Welcome to your **Lovelace UI**.
```
A slightly more advanced example:
```yaml
title: My Awesome Home
views:
# View tab title.
- title: Example
# Unique path for direct access /lovelace/${path}
path: example
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
cards:
# The filter card will filter entities for their state
- type: entity-filter
entities:
- device_tracker.paulus
- device_tracker.anne_there
state_filter:
- 'home'
card:
type: glance
title: People that are home
# The picture entity card will represent an entity with a picture
- type: picture-entity
image: https://www.home-assistant.io/images/default-social.png
entity: light.bed_light
# Specify a tab icon if you want the view tab to be an icon.
- icon: mdi:home-assistant
# Title of the view. Will be used as the tooltip for tab icon
title: Second view
cards:
# Entities card will take a list of entities and show their state.
- type: entities
# Title of the entities card
title: Example
# The entities here will be shown in the same order as specified.
# Each entry is an entity ID or a map with extra options.
entities:
- light.kitchen
- switch.ac
- entity: light.living_room
# Override the name to use
name: LR Lights
# The markdown card will render markdown text.
- type: markdown
title: Lovelace
content: >
Welcome to your **Lovelace UI**.
```
### Views
To display cards on the UI you have to define them in views. Views sort cards in columns based on their `card size`. If you want to group some cards you have to use `stack` cards. To display cards on the UI you have to define them in views. Views sort cards in columns based on their `card size`. If you want to group some cards you have to use `stack` cards.
<p class="img"> <p class="img">

163
source/lovelace/yaml-mode.markdown
View File

@ -25,165 +25,4 @@ To revert back to using the UI to edit your Lovelace interface, remove the `love
### Advanced configuration ### Advanced configuration
You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards. 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.markdown) page.
The key of the dashboard is used as the URL, this needs to contain a hyphen (`-`).
```yaml
lovelace:
mode: yaml
# Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
resources:
- url: /local/my-custom-card.js
type: module
- url: /local/my-webfont.css
type: css
# Add more dashboards
dashboards:
lovelace-generated: # Needs to contain a hyphen (-)
mode: yaml
filename: notexist.yaml
title: Generated
icon: mdi:tools
show_in_sidebar: true
require_admin: true
lovelace-hidden:
mode: yaml
title: hidden
show_in_sidebar: false
filename: hidden.yaml
```
You can also add YAML dashboards when your main dashboard is UI configurated:
```yaml
lovelace:
mode: storage
# Add yaml dashboards
dashboards:
lovelace-yaml:
mode: yaml
title: YAML
icon: mdi:script
show_in_sidebar: true
filename: lovelace.yaml
```
{% configuration Lovelace %}
mode:
required: true
description: "In what mode should the main Lovelace panel be, `yaml` or `storage` (UI managed)."
type: string
resources:
required: false
description: "List of resources that should be loaded when you use Lovelace. Only use this when mode is `yaml`."
type: list
keys:
url:
required: true
description: The URL of the resource to load.
type: string
type:
required: true
description: "The type of resource, this should be either `module` for a JavaScript module or `css` for a StyleSheet."
type: string
dashboards:
required: false
description: Additional Lovelace YAML dashboards. The key is used for the URL and should contain a hyphen (`-`)
type: map
keys:
mode:
required: true
description: "The mode of the dashboard, this should always be `yaml`. Dashboards in `storage` mode can be created in the Lovelace configuration panel."
type: string
filename:
required: true
description: "The file in your `config` directory where the Lovelace configuration for this panel is."
type: string
title:
required: true
description: "The title of the dashboard, will be used in the sidebar."
type: string
icon:
required: false
description: The icon to show in the sidebar.
type: string
show_in_sidebar:
required: false
description: Should this view be shown in the sidebar.
type: boolean
default: true
require_admin:
required: false
description: Should this view be only accessible for admin users.
type: boolean
default: false
{% endconfiguration %}
As a super minimal example of a Lovelace dashboard config, here's the bare minimum you will need for it to work:
```yaml
title: My Awesome Home
views:
# View tab title.
- title: Example
cards:
# The markdown card will render markdown text.
- type: markdown
title: Lovelace
content: >
Welcome to your **Lovelace UI**.
```
A slightly more advanced example:
```yaml
title: My Awesome Home
views:
# View tab title.
- title: Example
# Unique path for direct access /lovelace/${path}
path: example
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
cards:
# The filter card will filter entities for their state
- type: entity-filter
entities:
- device_tracker.paulus
- device_tracker.anne_there
state_filter:
- 'home'
card:
type: glance
title: People that are home
# The picture entity card will represent an entity with a picture
- type: picture-entity
image: https://www.home-assistant.io/images/default-social.png
entity: light.bed_light
# Specify a tab icon if you want the view tab to be an icon.
- icon: mdi:home-assistant
# Title of the view. Will be used as the tooltip for tab icon
title: Second view
cards:
# Entities card will take a list of entities and show their state.
- type: entities
# Title of the entities card
title: Example
# The entities here will be shown in the same order as specified.
# Each entry is an entity ID or a map with extra options.
entities:
- light.kitchen
- switch.ac
- entity: light.living_room
# Override the name to use
name: LR Lights
# The markdown card will render markdown text.
- type: markdown
title: Lovelace
content: >
Welcome to your **Lovelace UI**.
```