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-19 07:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

More inital lovelace UI docs (#5680)

Browse Source 
* Update picture-elements.markdown

* Update glance.markdown

* Update iframe.markdown

* Update picture-entity.markdown

* Update picture-glance.markdown

* Update plant-status.markdown

* Update lovelace_navigation.html

* Update lovelace_navigation.html

* Update picture.markdown

* Create views.markdown

* Add files via upload

* Update views.markdown
This commit is contained in:
sjabby 2018-07-08 02:11:27 +02:00 committed by Paulus Schoutsen
parent 26e7024dcd
commit 387fb07067
16 changed files with 485 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@
<ul class='divided'>
<li><a href='/lovelace/'>Introduction</a></li>
<li><a href='/lovelace/changelog/'>Changelog</a></li>
<li><a href='/lovelace/views/'>Views</a></li>
</ul>
</div>
@ -20,4 +21,5 @@
{% endfor %}
</ul>
</div>
</section>

57
source/_lovelace/glance.markdown
View File

@ -10,17 +10,64 @@ sharing: true
footer: true
---
A card that allows you to see see a list of entities at a glance.
### Glance
Glance cards are a very compact. Very useful to group together multiple sensors for a quick and easy to use view. Keep in mind that this can be used together with [entity-filter](/lovelace/entity-filter/) cards to create dynamic cards.
<p class='img'>
<img src='/images/lovelace/lovelace_glance_card.png' alt='Screenshot of the glance card'>
Screenshot of the glance card.
</p>
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `glance`
| entities | list | **Required** | Entity id's
| entities | list | **Required** | Entity id's or an `entity` object (see structure below).
| title | string | Optional | Card title
Each entry in the list of entities is either an entity ID or an entity option object. The entity option object can have the following options:
`entity` object type
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| entity | entity id | **Required** | The ID of the entity to show.
| name | string | Optional | The name to use instead of the entity name.
| entity | string | **Required** | An entity_id. Example: 'device_tracker.demo_paulus'.
| name | string | **Required** | A new name for the entity_id
**Examples**
Basic example
```yaml
- type: glance
title: Glance card sample
entities:
- binary_sensor.movement_backyard
- light.bed_light
- binary_sensor.basement_floor_wet
- sensor.outside_temperature
- light.ceiling_lights
- switch.ac
- lock.kitchen_door
```
<p class='img'>
<img src='/images/lovelace/lovelace_glance_card.png' alt='Screenshot of the glance card with custom title'>
Screenshot of the glance card with custom title.
</p>
Example with custom name
```yaml
- type: glance
title: Better names
entities:
- entity: binary_sensor.movement_backyard
name: Movement?
- light.bed_light
- binary_sensor.basement_floor_wet
- sensor.outside_temperature
- light.ceiling_lights
- switch.ac
- lock.kitchen_door
```

37
source/_lovelace/iframe.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "iFrame Card"
sidebar_label: iFrame
description: "TBD"
description: "Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a grafana view."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,4 +10,37 @@ sharing: true
footer: true
---
TBD
### Iframe
Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a grafana view. You can also embed files stored in your `config/www` folder and reference them using `/local/<file>`.
<p class='img'>
<img width="500" src='/images/lovelace/lovelace_iframe.png' alt='Screenshot of the iframe card'>
Screenshot of the iframe card.
</p>
> Make sure the URL you're embedding has the right protocol and allows to be embedded in an iframe on a different domain. For example if your Home Assistant setup uses https you won't be able to embed http URLs
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `iframe`
| url | string | **Required** | iframe source url
| aspect_ratio | string | `"50%"` | Iframe height-width-ratio
| title | string | Optional | Card title
**Examples**
```yaml
- type: iframe
url: https://worldpingdemo.grafana.net/d/000000027/worldping-endpoint-summary?var-endpoint=www_amazon_com&var-probe=All&panelId=2&fullscreen&orgId=3&theme=light
aspect_ratio: 100%
```
Local html for custom content. Place `example.html` in your `config/www` folder and reference it as below:
```yaml
- type: iframe
url: /local/example.html
title: Sample local file
```

102
source/_lovelace/picture-elements.markdown
View File

@ -10,4 +10,104 @@ sharing: true
footer: true
---
TBD
### Picture elements
Picture elements card is one of the most versatile type of cards. I am almost sure that those that like to customize a lot in their home assistant interface will **love** this card.
The cards allows you to position icons or text and even services! on an image based on coordinates. Imagine floor plan, imagine [picture-glance](card-picture-glance.md) with no restrictions!
You can customize tap action and even icon color.
![floor-plan](https://user-images.githubusercontent.com/7738048/42103244-26bec55a-7bd1-11e8-8bc9-6a130c513f9e.gif)
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `picture-elements`
| image | string | **Required** | URL of an image
| elements | list | **Required** | List of elements
| title | string | Optional | Card title
Element types:
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `navigation`
| navigation_path | string | **Required** | navigation_path of URL to navigate to
| icon | string | Optional | Icon
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `state-badge`
| entity | string | **Required** | Entity id
| style | object | **Required** | See "Style options"
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `state-icon`
| entity | string | **Required** | Entity id
| style | object | **Required** | See "Style options"
| tap_action | string | more-info | Set to `toggle` to change state
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `state-label`
| entity | string | **Required** | Entity id
| style | object | **Required** | See "Style options"
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `service-button`
| service | string | **Required** | `light.turn_on`
| service_data | object | Optional | See `service_data` object structure.
| style | object | **Required** | See "Style options"
| title | string | Optional | Button label
`service_data` object structure
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| entity_id | string | **Required** | 'light.floor'
Style options (CSS):
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| left | string | **Required** | Position from left, `25%`
| top | string | **Required** | Position from top, `50%`
| ... | string | inherit | ...
| "--paper-item-icon-color" | string | inherit | Badge-icon off-color, `green`
**Example**
```yaml
- type: picture-elements
image: https://static.vecteezy.com/system/resources/previews/000/102/594/large_2x/free-floor-plan-vector.jpg
elements:
- type: state-icon
tap_action: toggle
entity: light.ceiling_lights
style:
top: 47%
left: 42%
- type: state-icon
tap_action: toggle
entity: light.kitchen_lights
style:
top: 30%
left: 15%
- type: state-label
entity: sensor.outside_temperature
style:
top: 82%
left: 79%
- type: service-button
title: Turn lights off
style:
top: 95%
left: 60%
service: light.turn_off
service_data:
entity_id: group.all_lights
```

64
source/_lovelace/picture-entity.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "Picture Entity Card"
sidebar_label: Picture Entity
description: "TBD"
description: "A very useful card for controling entities. By default you will get `more-info-dialog` but using `tap_action` you can directly control entities that have `on`/`off` states."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,4 +10,64 @@ sharing: true
footer: true
---
TBD
### Entity picture
A very useful card for controling entities. By default you will get `more-info-dialog` but using `tap_action` you can directly control entities that have `on`/`off` states. It allows you to generate a very nice looking card with a big touch area, highly recommended for mobile dashboards on small screens.
You can use different image combination to get a more realistic view for images with lights. The image setup also allows enough flexibility to get your garage picture with the door opened and closed.
You can also use `camera` domain entities to use that as `camera_image`.
<p class='img'>
<img src='/images/lovelace/lovelace_picture_entity.gif' alt='Screenshot of the picture entity card'>
Screenshot of the picture entity card.
</p>
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `picture-entity`
| entity | string | **Required** | Entity id to control via picture.
| camera_image | string | Optional | camera domain entity_id 'camera.demo_camera'
| image | string | Optional| URL of an image.
| state_image | object | Optional | See `state_image` object structure.
| name | string | Optional | Custom name for entity
| show_info | boolean | Optional | Set to false to hide infobar
| tap_action | string | dialog | Set to `toggle` for turning entity on/off without opening a dialog
`state_image` object structure
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| on | string | Optional | URL of an image used for on state.
| off | string | Optional | URL of an image used for off state.
| home | string | Optional | URL of an image used for home state.
| not_home | string | Optional | URL of an image used for not_home state.
| ... | string | Optional | Any state that is supported by the entity works
**Examples**
Basic example:
```yaml
- type: picture-entity
image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490
entity: light.bed_light
```
<p class='img'>
<img src='/images/lovelace/lovelace_picture_entity_2.gif' alt='Screenshot of the picture entity card'>
Screenshot of the picture entity card.
</p>
Example with night/day:
```yaml
- type: picture-entity
entity: light.bed_light
image: http://farm7.static.flickr.com/6153/6220100622_88e64ec5d8_b.jpg
state_image:
"on": http://farm7.static.flickr.com/6220/6220100616_a877f41a66_b.jpg
title: Livingroom lights
```

83
source/_lovelace/picture-glance.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "Picture Glance Card"
sidebar_label: Picture Glance
description: "TBD"
description: "A very useful type of card that can display sensors, switches, lights and other entities grouped on top of a custom image. Use this card for easy visual recognition inside a large dashboard."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,4 +10,83 @@ sharing: true
footer: true
---
TBD
### Picture glance
A very useful type of card that can display sensors, switches, lights and other entities grouped on top of a custom image. Use this card for easy visual recognition inside a large dashboard. You also can add `navigation_path` to take the user to a specific view and use these cards in an overview dashboard.
What really sets this card apart is the ability to **control** entities directly from the card without the need to open the details of that entity.
You can also use `camera` domain entities to use that as image. You can also use `state_image` just like in [picture-entity](/lovelace/picture-entity/) together with an `entity` entry to change the image in a dynamic way.
> Picture glance supports a display of maximum 10 items.
<p class='img'>
<img src='/images/lovelace/lovelace_picture_glance.gif' alt='Screenshot of the picture glance card'>
Screenshot of the picture glance card.
</p>
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `picture-glance`
| image | string | **Required** | URL of an image
| entities | list | **Required** | Entity id's
| navigation_path | string | Optional | Path of URL to use in navigation
| camera_image | string | Optional | camera domain entity_id 'camera.demo_camera'
| state_image | object | Optional| See `state_image` object structure.
| entity | list | Optional | An entity to use for state_image state
| title | string | Optional | Card title
`state_image` object structure
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| on | string | Optional | URL of an image used for on state.
| off | string | Optional | URL of an image used for off state.
| home | string | Optional | URL of an image used for home state.
| not_home | string | Optional | URL of an image used for not_home state.
| ... | string | Optional | Any state that is supported by the entity works
**Examples**
```yaml
- type: picture-glance
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
title: Living
entities:
- switch.decorative_lights
- light.ceiling_lights
- lock.front_door
- binary_sensor.movement_backyard
- binary_sensor.basement_floor_wet
```
Picture glance used together with 'camera_image'
```yaml
- type: picture-glance
image:
camera_image: camera.demo_camera
title: Living
entities:
- switch.decorative_lights
- light.ceiling_lights
- lock.front_door
- binary_sensor.movement_backyard
- binary_sensor.basement_floor_wet
```
Picture glance used together with 'entity-filter'
```yaml
- type: entity-filter
entities:
- light.bed_light
- light.kitchen_lights
- light.ceiling_lights
state_filter:
- 'on'
card: picture-glance
card_config:
title: Lights
image: https://images.pexels.com/photos/356048/pexels-photo-356048.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490
```

50
source/_lovelace/picture.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "Picture Card"
sidebar_label: Picture
description: "TBD"
description: "A very simple card that allows you to set an image to use for navigation to various paths in your interface or to call a service."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,4 +10,50 @@ sharing: true
footer: true
---
TBD
### Picture
A very simple card that allows you to set an image to use for navigation to various paths in your interface or to call a service.
<p class='img'>
<img src='/images/lovelace/lovelace_picture.png' alt='Screenshot of the picture card'>
Screenshot of the picture card.
</p>
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| type | string | **Required** | `picture`
| image | string | **Required**| URL of an image.
| navigation_path | string | Optional | Path of URL to navigate to
| service | string | Optional | `light.toggle`
| service_data | object | optional | See service_data object
`service_data` object structure
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| entity_id | string | **Required** | 'light.floor'
**Examples**
Basic navigation example:
```yaml
- type: picture
image: /local/exit.jpg
navigation_path: /lovelace/arsaboo
```
> Check the [views](/lovelace/views/) setup on how to setup custom ids
Basic navigation example:
```yaml
- type: picture
image: /local/exit.jpg
service: light.toggle
service_data:
entity_id: light.ceiling_lights
```

6
source/_lovelace/plant-status.markdown
View File

@ -10,13 +10,15 @@ sharing: true
footer: true
---
### Plant status
A card for all the lovely botanists out there.
<p class='img'>
<img src='/images/lovelace/lovelace_plant.png' alt='Screenshot of the plant card'>
Screenshot of the plant card.
<img src='/images/lovelace/lovelace_plant_card.png' alt='Screenshot of the plant status card'>
Screenshot of the plant status card.
</p>
**Options**
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------

BIN
source/images/lovelace/lovelace_glance_card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
source/images/lovelace/lovelace_glance_card_custom_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
source/images/lovelace/lovelace_iframe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
source/images/lovelace/lovelace_picture_entity.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB

BIN
source/images/lovelace/lovelace_picture_entity_2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
source/images/lovelace/lovelace_picture_glance.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
source/images/lovelace/lovelace_plant_card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

100
source/lovelace/views.markdown Normal file
View File

@ -0,0 +1,100 @@
---
layout: page
title: "Views"
description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
sharing: true
footer: true
---
These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep links like `/lovelace/0`. You can also assign your own [custom ids](/lovelace/views/#custom-id).
- Using custom id in view, for [nicer navigation paths](/lovelace/views/#custom-id) in URLs
- Using [icons](/lovelace/views/#icons) instead of text
- Using a card to [fill a complete view](/lovelace/views/#panel-view), just like panels
- Using [themes](/lovelace/views/#themes) in views
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| title | string | Optional | Text title of the view
| id | string | number | The id to use in URL path of this view
| icon | string | Optional | The material design icon for the view, uses this instead of title
| panel | boolean | false | Marks view as a panel reusing the first card in list
<p class='img'>
<img src='/images/lovelace/lovelace_views.gif' alt='Screenshot of views'>
Screenshot of views.
</p>
{% linkable_title Icons %}
You can use icons instead of text for your view tabs. The title in the example will be used as tooltip.
**Example**
```yaml
views:
- icon: mdi:settings
title: Debugging
```
{% linkable_title Panel view %}
This type of view uses the first card in the `cards` array to expand it to ocuppy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards.
**Example**
```yaml
views:
- icon: mdi:settings
id: debug
title: Floorplan
panel: true
cards:
- type: picture-elements
image: /local/floorplans/main.jpg
elements:
- type: state-icon
tap_action: toggle
entity: light.ceiling_lights
style:
top: 47%
left: 42%
```
{% linkable_title Themes %}
You can also set a [theme](/frontend/#themes) per view.
> Theme is currently only partially usable (font color works)
```yaml
views:
- icon: mdi:heart
id: debug
title: Home
theme: dark-mode
```
{% linkable_title Custom id %}
You can now assign a custom id to a view, for nicer navigation paths in URLs. This id allows you to deep-link navigation to this view from cards that allow `navigation_path`.
**Example**
View:
```yaml
views:
- icon: mdi:settings
id: debugging
```
Picture card:
```yaml
- type: picture
image: /local/debug.jpg
navigation_path: /lovelace/debugging
```