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-27 19:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'current' into next

Browse Source
This commit is contained in:
Fabian Affolter 2018-07-09 22:30:07 +02:00
commit 5403cf32c2
No known key found for this signature in database
GPG Key ID: DDF3D6F44AAB1336
28 changed files with 653 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
source/_components/binary_sensor.velbus.markdown
View File

@ -15,28 +15,47 @@ ha_release: "0.50"
The `velbus` binary_sensor allows you to control [Velbus](http://www.velbus.eu) connected wall switches.
## {% linkable_title Configuration %}
To use your Velbus wall switches in your installation, add the following to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry
binary_sensor:
- platform: velbus
devices:
- name: Wall Switch 1
module: 0xda
channel: 4
- name: Wall Switch 2
module: 0xbc
channel: 1
is_pushbutton: true
- name: Wall Switch 1
module: 0xda
channel: 4
- name: Wall Switch 2
module: 0xbc
channel: 1
is_pushbutton: true
```
Configuration variables:
- **devices** array (*Required*): The array contains the binary sensors to configure
- **name** (*Required*): Name of the binary sensor.
- **module** (*Required*): The hexadecimal module address
- **channel** (*Required*): The channel number in the module.
- **is_pushbutton** (*Optional*): Boolean to indicate if a wall switch is a push button or not (default: false)
{% configuration %}
devices:
description: The list contains the binary sensors to configure.
required: true
type: map
keys:
name:
description: Name to use in the frontend.
required: true
type: string
module:
description: The hexadecimal module address.
required: true
type: string
channel:
description: The channel number in the module.
required: true
type: string
is_pushbutton:
description: Set to indicate if a wall switch is a push button or not.
required: false
type: boolean
default: false
{% endconfiguration %}
For hub configuration, see [the Velbus component](/components/velbus/).

47
source/_components/fan.velbus.markdown
View File

@ -15,27 +15,48 @@ ha_release: "0.50"
The `velbus` fan allows you to control [Velbus](http://www.velbus.eu) connected fans.
## {% linkable_title Configuration %}
To use your Velbus fans in your installation, add the following to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry
fan:
- platform: velbus
devices:
- name: Fan 1
module: 0xda
channel_low: 4
channel_medium: 3
channel_high: 2
- name: Fan 1
module: 0xda
channel_low: 4
channel_medium: 3
channel_high: 2
```
Configuration variables:
- **devices** array (*Required*): The array contains the fans to configure
- **name** (*Required*): Name of the fan.
- **module** (*Required*): The hexadecimal module address
- **channel_low** (*Required*): The channel number in the module for low-speed.
- **channel_medium** (*Required*): The channel number in the module for medium-speed.
- **channel_high** (*Required*): The channel number in the module for high-speed.
{% configuration %}
devices:
description: The list contains the fans to configure.
required: true
type: map
keys:
name:
description: Name to use in the frontend.
required: true
type: string
module:
description: The hexadecimal module address.
required: true
type: string
channel_low:
description: The channel number in the module for low-speed.
required: true
type: string
channel_medium:
description: The channel number in the module for medium-speed.
required: true
type: string
channel_high:
description: The channel number in the module for high-speed.
required: true
type: string
{% endconfiguration %}
For hub configuration, see [the Velbus component](/components/velbus/).

39
source/_components/light.velbus.markdown
View File

@ -15,26 +15,41 @@ ha_release: "0.50"
The `velbus` light allows you to control [Velbus](http://www.velbus.eu) lights.
## {% linkable_title Configuration %}
To use your Velbus lights in your installation, add the following to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry
light:
- platform: velbus
devices:
- name: Light 1
module: 0xda
channel: 4
- name: Light 2
module: 0xbc
channel: 1
- name: Light 1
module: 0xda
channel: 4
- name: Light 2
module: 0xbc
channel: 1
```
Configuration variables:
- **devices** array (*Required*): The array contains the lights to configure
- **name** (*Required*): Name of the light.
- **module** (*Required*): The hexadecimal module address
- **channel** (*Required*): The channel number in the module.
{% configuration %}
devices:
description: The list contains the lights to configure.
required: true
type: map
keys:
name:
description: Name to use in the frontend.
required: true
type: string
module:
description: The hexadecimal module address.
required: true
type: string
channel:
description: The channel number in the module.
required: true
type: string
{% endconfiguration %}
For hub configuration, see [the Velbus component](/components/velbus/).

15
source/_components/sensor.efergy.markdown
View File

@ -14,16 +14,21 @@ ha_iot_class: "Cloud Polling"
---
Integrate your [Efergy](https://efergy.com) meter information into Home Assistant. To get an app token:
Integrate your [Efergy](https://efergy.com) meter information into Home Assistant.
## {% linkable_title Setup %}
To get an app token:
1. Log in to your efergy account
2. Go to the Settings page
3. Click on App tokens
4. Click "Add token"
## {% linkable_title Configuration %}
To enable the sensor, add the following lines to your `configuration.yaml`:
```yaml
# Example configuration.yaml entry
sensor:
@ -52,7 +57,7 @@ negative number of minutes your timezone is ahead/behind UTC time.
- **budget**: Monthly budget.
- **cost**: The cost for energy consumption (with the tariff that has been set in Efergy) over a given period.
- **amount**: The amount of energy consumed over a given period.
- **current_values**: This returns the current energy usage of each device on your account, as efergy_\<sid of device\>. If you only have one device in your account, this is effectively the same as instant_readings.
- **current_values**: This returns the current energy usage of each device on your account, as `efergy_\<sid of device\>`. If you only have one device in your account, this is effectively the same as instant_readings.
- **period** (*Optional*): Some variables take a period argument. Valid options are "day", "week", "month", and "year".
- **currency** (*Optional*): This is used to display the cost/period as the unit when monitoring the cost. It should correspond to the actual currency used in your dashboard.

25
source/_components/sensor.lastfm.markdown
View File

@ -16,9 +16,13 @@ ha_release: "0.20"
The `lastfm` sensor platform will allow you to see whenever a user starts scrobbling, their play count, last song played, and top song played on [Last.fm](http://www.last.fm).
## {% linkable_title Setup %}
To get an API key you need to create an [API account](http://www.last.fm/api/account/create).
To use Last.fm with your installation, add the following to your `configuration.yaml` file:
## {% linkable_title Configuration %}
To use Last.fm sensor with your installation, add the following to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry
@ -30,9 +34,16 @@ sensor:
- user2
```
Configuration variables:
- **api_key** (*Required*): Your API key.
- **users** array (*Required*): Array of users.
- **username** (*Required*): Username of the user.
{% configuration %}
api_key:
description: Your Last.fm API key.
required: true
type: string
users:
description: List of users.
required: true
type: map
keys:
username:
description: Username of the user to monitor.
{% endconfiguration %}

15
source/_components/sensor.twitch.markdown
View File

@ -16,6 +16,8 @@ ha_iot_class: "Cloud Polling"
The `twitch` platform will allow you to monitor [Twitch](http://www.twitch.tv/) channel status from within Home Assistant and setup automation based on the information.
## {% linkable_title Configuration %}
To use Twitch with your installation, add the following to your `configuration.yaml` file:
```yaml
@ -27,8 +29,13 @@ sensor:
- channel2
```
Configuration variables:
- **channels** array (*Required*): Array of channels.
- **channel_name** (*Required*): Name of the channel.
{% configuration %}
channels:
description: List of channels.
required: true
type: map
keys:
channel_id:
description: Name of the channel.
{% endconfiguration %}

49
source/_components/switch.velbus.markdown
View File

@ -15,6 +15,8 @@ ha_release: "0.50"
The `velbus` switch allows you to control [Velbus](http://www.velbus.eu) connected switches.
## {% linkable_title Configuration %}
To use your Velbus switches in your installation, add the following to your `configuration.yaml` file:
```yaml
@ -23,22 +25,39 @@ To use your Velbus switches in your installation, add the following to your `con
light:
- platform: velbus
devices:
- name: Switch 1
type: single
module: 0xda
channel: 4
- name: Switch 2
type: double
module: 0xbc
open_channel: 1
close_channel: 2
- name: Switch 1
type: single
module: 0xda
channel: 4
- name: Switch 2
type: double
module: 0xbc
open_channel: 1
close_channel: 2
```
Configuration variables:
- **devices** array (*Required*): The array contains the switches to configure
- **name** (*Required*): Name of the switch.
- **module** (*Required*): The hexadecimal module address
- **type** (*Required*): Either `single` or `double`. If single, only `channel` attribute is required. If double, both `open_channel` and `close_channel` attributes are required
- **channel** (*Required*): The channel number in the module.
{% configuration %}
devices:
description: The list contains the switches to configure.
required: true
type: map
keys:
name:
description: Name to use in the frontend.
required: true
type: string
module:
description: The hexadecimal module address.
required: true
type: string
channel:
description: The channel number in the module.
required: true
type: string
type:
description: "Either `single` or `double`. If single, only `channel` attribute is required. If `double`, both `open_channel:` and `close_channel:` keys are required."
required: true
type: string
{% endconfiguration %}
For hub configuration, see [the Velbus component](/components/velbus/).

12
source/_components/velbus.markdown
View File

@ -13,13 +13,21 @@ ha_iot_class: "Local Push"
ha_release: "0.50"
---
The `velbus` component supports the Velbus USB and Serial gateways.
The `velbus` component supports the Velbus USB and serial gateways.
## {% linkable_title Configuration %}
The gateway needs to be configured by adding the following lines to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry
velbus:
port: '/dev/ttyUSB00'
```
{% configuration %}
port:
description: The port where your board is connected to your Home Assistant host. The port will be most likely named `ttyUSB*`.
required: true
type: string
{% endconfiguration %}

32
source/_lovelace/entities.markdown
View File

@ -12,8 +12,6 @@ footer: true
Entities will be the most common type of card that will also be the most familiar to people using the standard interface. It groups items together very close to how groups used to do.
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -21,33 +19,29 @@ type:
type: string
entities:
required: true
description: "Entity id's or an `entity` object (see structure below)."
description: "A list of entity IDs or an `entity` object."
type: list
keys:
entity:
required: true
description: "An `entity_id` to use in the frontend."
type: string
name:
required: true
description: "The name for the `entity_id` to use in the frontend."
type: string
title:
required: false
description: Card title
description: The card title.
type: string
show_header_toggle:
required: false
description: Button to turn on/off all entities
description: Button to turn on/off all entities.
type: boolean
default: true
{% endconfiguration %}
`entity` object
{% configuration %}
entity:
required: true
description: "An entity_id. Example: 'device_tracker.demo_paulus'."
type: string
name:
required: true
description: A new name for the entity_id
type: string
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
- type: entities

21
source/_lovelace/entity-filter.markdown
View File

@ -10,7 +10,7 @@ sharing: true
footer: true
---
This 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 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](/lovelace/glance/) or [picture-glance](/lovelace/picture-glance/). By default it uses [entities](/lovelace/entities/) card model.
@ -19,8 +19,6 @@ This type of card can also be used together with rest of cards that allow multip
Screenshot of the entity filter card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -28,11 +26,20 @@ type:
type: string
entities:
required: true
description: Array of entity_ids
type: array
description: "List of entities to show."
type: list
keys:
name:
required: false
description: The name to use in the front for the entity.
type: string
entity:
required: false
description: "The `entity_id` to show in the frontend."
type: string
state_filter:
required: true
description: Array of strings representing states
description: Array of strings representing states.
type: array
card:
required: false
@ -46,7 +53,7 @@ show_empty:
default: true
{% endconfiguration %}
{% linkable_title Examples %}
## {% linkable_title Examples %}
Show only active switches or lights in the house
```yaml

34
source/_lovelace/glance.markdown
View File

@ -10,15 +10,13 @@ sharing: true
footer: true
---
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.
Glance cards are very compact. Very useful to group together multiple sensors for a quick and easy overview. 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>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -26,8 +24,17 @@ type:
type: string
entities:
required: true
description: "Entity id's or an `entity` object (see structure below)."
description: "A list of entity IDs or an `entity` object."
type: list
keys:
entity:
required: true
description: "The `entity_id` to show."
type: string
name:
required: true
description: "A name for `the entity_id`."
type: string
title:
required: false
description: Card title
@ -35,22 +42,9 @@ title:
default: none
{% endconfiguration %}
`entity` object type
## {% linkable_title Examples %}
{% configuration %}
entity:
required: true
description: "An entity_id. Example: 'device_tracker.demo_paulus'."
type: string
name:
required: true
description: A new name for the entity_id
type: string
{% endconfiguration %}
{% linkable_title Examples %}
Basic example
Basic example:
```yaml
- type: glance
@ -70,7 +64,7 @@ Basic example
Screenshot of the glance card with custom title.
</p>
Example with custom name
Example with a custom name:
```yaml
- type: glance

11
source/_lovelace/history-graph.markdown
View File

@ -17,8 +17,6 @@ History graph is a basic card, allowing you to display a graph for each of the e
Screenshot of the history graph card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -30,22 +28,21 @@ entities:
type: list
hours_to_show:
required: false
description: Hours to show
description: Hours to show.
type: integer
default: 24
refresh_interval:
required: false
description: Refresh interval in seconds
description: Refresh interval in seconds.
type: integer
default: 0
title:
required: false
description: Card title
description: The card title.
type: string
default: none
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
- type: history-graph

23
source/_lovelace/horizontal-stack.markdown
View File

@ -10,9 +10,7 @@ sharing: true
footer: true
---
Horizontal stack card will allow you to stack together multiple cards so they always sit next to each other in the space of one column.
{% linkable_title Options %}
Horizontal stack card will allow you to stack together multiple cards, so they always sit next to each other in the space of one column.
{% configuration %}
type:
@ -21,13 +19,24 @@ type:
type: string
cards:
required: true
description: List of cards
description: List of cards.
type: list
keys:
type:
required: true
description: The type of the card to stack.
type: string
entity:
required: true
description: "An `entity_id` to use in the frontend."
type: string
image:
required: true
description: The URL to an image.
type: string
{% endconfiguration %}
{% linkable_title Example %}
Basic example
## {% linkable_title Example %}
```yaml
- type: horizontal-stack

33
source/_lovelace/iframe.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "iFrame Card"
sidebar_label: iFrame
description: "Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a grafana view."
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,16 +10,18 @@ sharing: true
footer: true
---
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>`.
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
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.
{% linkable_title Options %}
## {% linkable_title Options %}
Create a new file `<config>/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.
{% configuration %}
type:
@ -28,31 +30,32 @@ type:
type: string
url:
required: true
description: iframe source url
description: The iframe source URL.
type: string
aspect_ratio:
required: false
description: Iframe height-width-ratio
description: The iframe height-width-ratio.
type: string
default: "50%"
title:
required: false
description: Card title
description: The card title.
type: string
default: none
{% endconfiguration %}
{% linkable_title Examples %}
## {% linkable_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%
- 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:
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
- type: iframe
url: /local/example.html
title: Sample local file
```

35
source/_lovelace/map.markdown
View File

@ -10,52 +10,43 @@ sharing: true
footer: true
---
A card that allows you to display entities on a map
A card that allows you to display entities on a map.
<p class='img'>
<img src='/images/lovelace/lovelace_map_card.png' alt='Screenshot of the map card'>
Screenshot of the map card.
</p>
### {% linkable_title Options %}
{% configuration %}
type:
required: true
description: "`map`"
description: map
type: string
entities:
required: true
description: "Entity id's or an `entity` object (see structure below)."
description: List of entity IDs.
type: list
keys:
entity:
required: true
description: "An `entity_id` to use."
type: string
title:
required: false
description: Card title
description: The card title.
type: string
aspect_ratio:
required: false
description: "Map height:width ratio"
type: string
default: 100%
{% endconfiguration %}
`entity` object:
{% configuration %}
entity:
required: true
description: "An entity_id. Example: 'device_tracker.demo_paulus'."
description: "The map's height:width ratio."
type: string
default: "100%"
{% endconfiguration %}
<p class='note'>
Only entities that have latitude and longitude attributes will be displayed on the map
Only entities that have latitude and longitude attributes will be displayed on the map.
</p>
### {% linkable_title Examples %}
Basic map example:
## {% linkable_title Examples %}
```yaml
- type: map

10
source/_lovelace/markdown.markdown
View File

@ -10,15 +10,13 @@ sharing: true
footer: true
---
Markdown card is used to render [markdown](http://commonmark.org/help/)
Markdown card is used to render [markdown](http://commonmark.org/help/).
<p class='img'>
<img src='/images/lovelace/lovelace_markdown.png' alt='Screenshot of the markdown card'>
Screenshot of the markdown card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -26,16 +24,16 @@ type:
type: string
content:
required: true
description: Content to render as [markdown](http://commonmark.org/help/).
description: "Content to render as [markdown](http://commonmark.org/help/)."
type: string
title:
required: false
description: Card title
description: The card title.
type: string
default: none
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
- type: markdown

8
source/_lovelace/media-control.markdown
View File

@ -10,15 +10,13 @@ sharing: true
footer: true
---
The media control card is used to display [Media Player](/components/#search/media-player) entities on an interface with easy to use controls.
The media control card is used to display [Media Player](/components/#search/media-player) entities on an interface with easy to use controls.
<p class='img'>
<img src='/images/lovelace/lovelace_mediaplayer.png' alt='Screenshot of the media player control card'>
Screenshot of the media player control card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -26,11 +24,11 @@ type:
type: string
entity:
required: true
description: "Entity id of `media_player` domain"
description: "A media player `entity_id`."
type: string
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
- type: media-control

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

@ -10,9 +10,9 @@ sharing: true
footer: true
---
Picture elements card is one of the most versatile type of cards.
Picture elements card is one of the most versatile type of cards.
The cards allows you to position icons or text and even services! on an image based on coordinates. Imagine floor plan, imagine [picture-glance](/lovelace/picture-glance/) with no restrictions!
The cards allows you to position icons or text and even services! On an image based on coordinates. Imagine floor plan, imagine [picture-glance](/lovelace/picture-glance/) with no restrictions!
You can customize tap action and even icon color.
@ -21,8 +21,6 @@ You can customize tap action and even icon color.
Screenshot of the picture elements card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -30,7 +28,7 @@ type:
type: string
image:
required: true
description: URL of an image
description: The URL of an image.
type: string
elements:
required: true
@ -40,135 +38,181 @@ title:
required: false
description: Card title
type: string
default: none
{% endconfiguration %}
Element types:
Different `elements` types:
{% configuration %}
type:
elements:
required: true
description: navigation
type: string
navigation_path:
required: true
description: navigation_path of URL to navigate to
type: string
icon:
required: false
description: Icon
type: string
default: none
description: List of elements
type: list
keys:
type:
required: true
description: navigation
type: string
navigation_path:
required: true
description: "The `navigation_path` of URL to navigate to."
type: string
icon:
required: false
description: Icon
type: string
{% endconfiguration %}
{% configuration %}
type:
elements:
required: true
description: state-badge
type: string
entity:
required: true
description: Entity id
type: string
style:
required: true
description: See "Style options"
type: object
description: List of elements
type: list
keys:
type:
required: true
description: state-badge
type: string
entity:
required: true
description: Entity id
type: string
style:
required: true
description: See "Style options"
type: object
{% endconfiguration %}
{% configuration %}
type:
elements:
required: true
description: state-icon
type: string
entity:
required: true
description: Entity id
type: string
style:
required: true
description: See "Style options"
type: object
tap_action:
required: true
description: "Set to `toggle` to change state"
type: string
default: more-info
description: List of elements
type: list
keys:
type:
required: true
description: state-icon
type: string
entity:
required: true
description: The entity id to use.
type: string
style:
required: true
description: Additional style options to use.
type: list
keys:
left:
required: true
description: Position from left, "25%".
type: string
top:
required: true
description: Position from top, "50%".
type: string
...:
required: inherit
description: ...
type: string
"--paper-item-icon-color":
required: inherit
description: "Badge-icon off-color, `green`"
type: string
tap_action:
required: false
description: "Set to `toggle` to change state"
type: string
default: more-info
tap_action:
{% endconfiguration %}
{% configuration %}
type:
elements:
required: true
description: state-label
type: string
entity:
required: true
description: Entity id
type: string
style:
required: true
description: See "Style options"
type: object
description: List of elements
type: list
keys:
type:
required: true
description: state-label
type: string
entity:
required: true
description: Entity id
type: string
style:
required: true
description: Additional style options to use.
type: list
keys:
left:
required: true
description: Position from left, "25%".
type: string
top:
required: true
description: Position from top, "50%".
type: string
...:
required: inherit
description: ...
type: string
"--paper-item-icon-color":
required: inherit
description: "Badge-icon off-color, `green`"
type: string
{% endconfiguration %}
{% configuration %}
type:
elements:
required: true
description: service-button
type: string
service:
required: true
description: light.turn_on
type: string
service_data:
required: false
description: "See `service_data` object structure."
type: object
default: none
style:
required: true
description: See "Style options"
type: object
title:
required: false
description: Button label
type: string
default: none
description: List of elements
type: list
keys:
type:
required: true
description: service-button
type: string
service:
required: true
description: light.turn_on
type: string
service_data:
required: false
description: The service data to use."
type: list
keys:
entity_id:
required: true
description: light.floor
type: string
style:
required: true
description: Additional style options to use.
type: object
keys:
left:
required: true
description: Position from left, "25%".
type: string
top:
required: true
description: Position from top, "50%".
type: string
...:
required: inherit
description: ...
type: string
"--paper-item-icon-color":
required: inherit
description: "Badge-icon off-color, `green`"
type: string
title:
required: false
description: Button label
type: string
{% endconfiguration %}
`service_data` object structure
{% configuration %}
entity_id:
required: true
description: light.floor
type: string
{% endconfiguration %}
Style options (CSS):
{% configuration %}
left:
required: true
description: Position from left, "25%"
type: string
top:
required: true
description: Position from top, "50%"
type: string
...:
required: inherit
description: ...
type: string
default: none
"--paper-item-icon-color":
required: inherit
description: "Badge-icon off-color, `green`"
type: string
default: none
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
- type: picture-elements

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

@ -2,7 +2,7 @@
layout: page
title: "Picture Entity Card"
sidebar_label: Picture Entity
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."
description: "A very useful card for controlling 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,7 +10,7 @@ sharing: true
footer: true
---
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.
A very useful card for controlling 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.
@ -21,8 +21,6 @@ You can also use `camera` domain entities to use that as `camera_image`.
Screenshot of the picture entity card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -30,11 +28,11 @@ type:
type: string
entity:
required: true
description: Entity id to control via picture.
description: "An `entity_id` to control via picture."
type: string
camera_image:
required: false
description: "Camera domain entity_id 'camera.demo_camera'"
description: "Camera `entity_id` to use."
type: string
default: None
image:
@ -46,55 +44,47 @@ state_image:
required: false
description: "See `state_image` object structure."
type: object
default: None
keys:
"on":
required: true
description: URL of an image used for on state.
type: string
"off":
required: true
description: URL of an image used for off state.
type: string
default: None
home:
required: false
description: URL of an image used for home state.
type: string
not_home:
required: false
description: URL of an image used for not_home state.
type: string
default: None
any:
required: false
description: Any state that is supported by the entity works.
type: object
name:
required: false
description: Custom name for entity
description: Custom name for entity.
type: string
default: None
show_info:
required: false
description: Set to false to hide infobar
description: Set to false to hide infobar.
type: boolean
default: True
default: true
tap_action:
required: false
description: "Set to `toggle` for turning entity on/off without opening a dialog"
description: "Set to `toggle` for turning entity on/off without opening a dialog."
type: string
default: dialog
{% endconfiguration %}
`state_image` object structure
{% configuration %}
"on":
required: true
description: URL of an image used for on state.
type: string
default: None
"off":
required: true
description: URL of an image used for off state.
type: string
default: None
home:
required: false
description: URL of an image used for home state.
type: string
default: None
not_home:
required: false
description: URL of an image used for not_home state.
type: string
default: None
any:
required: false
description: Any state that is supported by the entity works
type: object
default: None
{% endconfiguration %}
{% linkable_title Examples %}
## {% linkable_title Examples %}
Basic example:

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

@ -10,45 +10,80 @@ sharing: true
footer: true
---
### 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.
What 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.
You can also use `camera` domain entities to use that as the 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.
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**
{% configuration %}
type:
required: true
description: picture-glance
type: string
image:
required: true
description: The URL of an image.
type: string
navigation_path:
required: false
description: Path of URL to use in navigation.
type: string
entities:
required: true
description: A list of entity IDs.
type: list
navigation_path:
required: false
description: Path of URL to use in navigation.
type: string
camera_image:
required: false
description: The entity ID of a camera.
type: string
state_image:
required: false
description: Path of URL to use in navigation.
type: list
keys:
"on":
type: string
required: false
description: URL of an image used for on state.
"off":
type: string
required: false
description: URL of an image used for off state.
home:
type: string
required: false
description: URL of an image used for home state.
not_home:
type: string
required: false
description: URL of an image used for not_home state.
ANYTHING:
type: string
required: false
description: Any state that is supported by the entity works.
entity:
required: false
description: "An entity to use for state_image state."
type: list
title:
required: false
description: The card title.
type: string
{% endconfiguration %}
| 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**
## {% linkable_title Examples %}
```yaml
- type: picture-glance
@ -62,7 +97,8 @@ Screenshot of the picture glance card.
- binary_sensor.basement_floor_wet
```
Picture glance used together with 'camera_image'
Picture glance used together with 'camera_image'.
```yaml
- type: picture-glance
image:
@ -76,7 +112,8 @@ Picture glance used together with 'camera_image'
- binary_sensor.basement_floor_wet
```
Picture glance used together with 'entity-filter'
Picture glance used together with 'entity-filter'.
```yaml
- type: entity-filter
entities:

32
source/_lovelace/picture.markdown
View File

@ -17,8 +17,6 @@ A very simple card that allows you to set an image to use for navigation to vari
Screenshot of the picture card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -26,36 +24,28 @@ type:
type: string
image:
required: true
description: URL of an image
description: The URL of an image.
type: string
navigation_path:
required: false
description: Path of URL to navigate to
description: Path of URL to navigate to.
type: string
default: None
service:
required: false
description: "`light.toggle`"
description: The service to call.
type: string
default: None
service_data:
required: false
description: See service_data object
description: The service data.
type: object
default: None
keys:
entity_id:
required: true
description: The ID of the entity to use.
type: string
{% endconfiguration %}
`service_data` object structure
{% configuration %}
entity_id:
required: true
description: light.floor
type: string
{% endconfiguration %}
{% linkable_title Examples %}
## {% linkable_title Examples %}
Basic navigation example:
@ -65,7 +55,7 @@ Basic navigation example:
navigation_path: /lovelace/arsaboo
```
> Check the [views](/lovelace/views/) setup on how to setup custom ids
Check the [views](/lovelace/views/) setup on how to setup custom IDs.
Basic navigation example:

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

@ -17,8 +17,6 @@ A card for all the lovely botanists out there.
Screenshot of the plant status card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -30,9 +28,10 @@ entity:
type: string
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
```yaml
cards:
- type: plant-status
entity: plant.bonsai
```

24
source/_lovelace/vertical-stack.markdown
View File

@ -10,9 +10,9 @@ sharing: true
footer: true
---
Stack card will allow you to stack together multiple cards so they always sit together in the same column one on top of the other. Keep in mind this can be used with any cards, and even used alongside a [horizontal-stack](/lovelace/horizontal-stack/).
Stack card will allow you to stack together multiple cards so they always sit together in the same column one on top of the other. Keep in mind this can be used with any cards and even used alongside a [horizontal-stack](/lovelace/horizontal-stack/).
{% linkable_title Options %}
## {% linkable_title Options %}
{% configuration %}
type:
@ -23,11 +23,25 @@ cards:
required: true
description: List of cards
type: list
keys:
type:
required: true
description: The type of the card to stack.
type: string
entity:
required: true
description: "An `entity_id` to use in the frontend."
type: string
image:
required: true
description: The URL to an image.
type: string
{% endconfiguration %}
{% linkable_title Example %}
## {% linkable_title Example %}
Basic example:
Basic example
```yaml
- type: vertical-stack
cards:
@ -44,7 +58,7 @@ Basic example
Screenshot of the vertical stack card.
</p>
Example using both a Vertical and Horizontal Stack Card
Example using both a vertical and horizontal stack card:
```yaml
- type: vertical-stack

7
source/_lovelace/weather-forecast.markdown
View File

@ -10,15 +10,13 @@ sharing: true
footer: true
---
Weather forecast is a card to display the weather. Very useful to include on interfaces that people display on the wall.
The weather forecast is a card to display the weather. Very useful to include on interfaces that people display on the wall.
<p class='img'>
<img src='/images/lovelace/lovelace_weather.png' alt='Screenshot of the weather card'>
Screenshot of the weather card.
</p>
{% linkable_title Options %}
{% configuration %}
type:
required: true
@ -26,11 +24,10 @@ type:
type: string
entity:
required: true
description: "Entity id of `weather` domain"
description: "The `entity_id` of the `weather` platform to use."
type: string
{% endconfiguration %}
{% linkable_title Example %}
```yaml

4
source/hassio/zwave.markdown
View File

@ -16,7 +16,7 @@ zwave:
usb_path: /dev/ttyACM0
```
### RAZBERRY BOARD
### {% linkable_title RAZBERRY BOARD %}
If you need GPIO on Raspberry Pi 3 for your Z-Wave module, add the following line into `config.txt` (you have to access that on the SD card directly; simply plug it into your PC and edit it there):
@ -31,7 +31,7 @@ zwave:
usb_path: /dev/ttyAMA0
```
### HUSBZB-1
### {% linkable_title HUSBZB-1 %}
```yaml
zwave:

41
source/lovelace/changelog.markdown
View File

@ -9,25 +9,30 @@ sharing: true
footer: true
---
## Changes in 0.73.1
## {% linkable_title Changes in 0.73.1 %}
- Setting Lovelace as default now updates `Overview` button to point to `/lovelace`
- Allow setting background styles (global and per view)
### Cards
- 📣 New card: `map` that allows showing `device_tracker` entities on a map card
- 📣 `entities` card now support `type: custom:state-card-custom` for the entities list
## Changes in 0.73.0
## {% linkable_title Changes in 0.73.0 %}
### Views
- 📣 New button to show unused entities in Lovelace
## Changes in 0.73.0b5
## Changes in 0.73.0b5 %}
- 🏁 Only minor fixes in this release
## Changes in 0.73.0b4
## {% linkable_title Changes in 0.73.0b4 %}
### Cards
- 📣 `picture-entity` allow hiding of infobar using `show_info: false`
- 📣 `picture-entity` now supports `tap_action` parameter allowing you to switch from `on`/`off` to `more-info-dialog`
- 📣 `picture-glance` now supports `navigation_path`
@ -35,12 +40,14 @@ footer: true
- `picture-elements` renamed `path` to `navigation_path`
- ‼️ `camera-preview` card removed, features added to `picture-entity` and `picture-glance`
## Changes in 0.73.0b3
## {% linkable_title Changes in 0.73.0b3 %}
### Views
- 📣 Added panel mode for a view to use 1st card to fill whole screen
- 📣 Added panel mode for a view to use the 1st card to fill the whole screen
### Cards
- 📣 New card: `picture` for triggering navigation and services
- 📣 `picture-elements` now supports `navigation` type
- 📣 `picture-entity` now supports `camera_image`
@ -53,12 +60,14 @@ footer: true
- 🔧 Fix wrapping and padding for `service-button` in `picture-elements`
- ‼️ `entity-filter` no longer allows to show all entities or a full domain
## Changes in 0.73.0b2
## {% linkable_title Changes in 0.73.0b2 %}
- :zap: Went by too fast :zap:
## Changes in 0.73.0b1
## {% linkable_title Changes in 0.73.0b1 %}
### Cards
- `column` renamed to `vertical-stack`
- `row` renamed to `horizontal-stack`
- `picture-elements` new `state-badge` using `ha-state-label-badge`
@ -70,31 +79,35 @@ footer: true
- 📣 `entity-filter` allow auto-hide if empty using `show_empty: false`
- 🔧 Fix card size calculation `horizontal-stack`/`vertical-stack`
## Changes in 0.73.0b0
## {% linkable_title Changes in 0.73.0b0 %}
- 📣 New feature to allow Lovelace to be default for `/`
### Views
- 📣 Now views have deep-links: `/lovelace/3` will link to the tab with id `3`
- `name` renamed `title` to match cards setup
- `tab_icon` renamed `icon` for simplicity
### Cards
- 📣 New card: `picture-elements`
- 📣 New card: `column`
- 📣 New card: `row`
- 📣 `glance` allow custom title for entities - rename your entity only in this card
- 📣 `entities` toggle button in header can now be hidden using `show_header_toggle: false`
- 📣 `entities` toggle button in a header can now be hidden using `show_header_toggle: false`
- `entity-picture` renamed `picture-entity` to be consistent with `picture-glance`
- `entity-filter` removed `card_config` and made `card` property an object
- 🔧 Fix use of groups in `picture-entity`
- 🔧 Fix title in `glance` to avoid overlapping
- 🔧 Fix the title in `glance` to avoid overlapping
## Changes in 0.72.1
## {% linkable_title Changes in 0.72.1 %}
### Cards
- 🐞 Bug introduced in `glance` card - titles now overlap
- 📣 New card: `iframe`
## Changes in 0.72
- Initial release of the Lovelace UI
## {% linkable_title Changes in 0.72 %}
- Initial release of the Lovelace UI

34
source/lovelace/index.markdown
View File

@ -17,18 +17,18 @@ Starting with Home Assistant 0.72, we're experimenting with a new way of definin
The Lovelace UI is:
- **Extremely fast**. We create the user interface when the UI configuration changes. When a state changes, we just make the UI represent the current state.
- **Extremely customizable**. We have a new file for just configuration. In the past, we declined UI specific options because they did not fit in the state machine. They will fit in a configuration file for a user interface.
- **Extremely extensible**. It's based on the web standard [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Don't like the built-in cards? Make your own! Custom cards are treated the same as built-in cards and are configured the same way. [Check the docs.](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
- **Making the backend faster**. With Lovelace, the backend will no longer need to maintain entities like groups for the sole purpose of showing them on the frontend.
- **Extremely fast**. We create the user interface when the UI configuration changes. When a state changes, we just make the UI represent the current state.
- **Extremely customizable**. We have a new file for just configuration. In the past, we declined UI specific options because they did not fit in the state machine. They will fit in a configuration file for a user interface.
- **Extremely extensible**. It's based on the web standard [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Don't like the built-in cards? Make your own! Custom cards are treated the same as built-in cards and are configured the same way. [Check the docs.](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
- **Making the backend faster**. With Lovelace, the backend will no longer need to maintain entities like groups for the sole purpose of showing them on the frontend.
<div class='videoWrapper'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6FX9_leiikw" frameborder="0" allowfullscreen></iframe>
</div>
## How it works
## {% linkable_title How it works %}
The old user interface relied solely on the state machine. This caused trouble as it meant that the state machine was now not only the source for device states, but also for user interface configuration. With Lovelace, we're taking a completely different approach. All user interface configuration will live in a seperate file, controlled by the user.
The old user interface relied solely on the state machine. This caused trouble as it meant that the state machine was now not only the source for device states, but also for user interface configuration. With Lovelace, we're taking a completely different approach. All user interface configuration will live in a separate file, controlled by the user.
<p class='img'>
<img
@ -39,7 +39,7 @@ Visual comparison of old configuration versus new configuration
<!-- source: https://docs.google.com/drawings/d/1O1o7-wRlnsU1lLgfdtn3s46P5StJjSL5to5RU9SV8zs/edit?usp=sharing -->
## Trying it out
## {% linkable_title Trying it out %}
Create a new file `<config>/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.
@ -82,12 +82,12 @@ views:
# Title of the view. Will be used as the tooltip for tab icon
title: Second view
cards:
# Entities card will take list of entities and show their state.
# 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 entriy is an entity ID or a map with extra options.
# Each entry is an entity ID or a map with extra options.
entities:
- light.kitchen
- switch.ac
@ -104,10 +104,22 @@ views:
Now restart Home Assistant, navigate to `<YOUR HASS URL>/lovelace`. 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 at the top of the UI.
## Custom Cards
## {% linkable_title Custom Cards %}
It is possible to add your own custom cards to show up in the Lovelace UI. For more information, check [the developer docs](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html).
## Current limitations
## {% linkable_title Current limitations %}
This is the very very early version aimed at gathering feedback. Discussion and suggestions are welcome in the [ui-schema repository](https://github.com/home-assistant/ui-schema) and in the [chat](/join-chat/) in #lovelace.
## {% linkable_title FAQ %}
### I am running Firefox but, custom cards like gauge-card look bad or don't load at all. How do I fix this?
This is probably because your version of Firefox doesn't have custom components supported or enabled. Please set to `true` in your `about:config` the following settings: `dom.webcomponents.customelements.enabled` and `dom.webcomponents.shadowdom.enabled`
### Custom components don't load on my IOS device?
This is because for IOS devices by default javascript served is `es5`. You can allow custom components to load by forcing `javascript: latest` in your `configuration.yaml` under `frontend:`.
> Note: Enabling `latest` on IOS could cause automation and script editor to crash.

78
source/lovelace/views.markdown
View File

@ -9,86 +9,82 @@ 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).
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
- 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
| panel | boolean | false | Marks view as a panel reusing the first card in the list
<p class='img'>
<img src='/images/lovelace/lovelace_views.gif' alt='Screenshot of views'>
Screenshot of views.
</p>
{% linkable_title Icons %}
## {% linkable_title Icons %}
You can use icons instead of text for your view tabs. The title in the example will be used as tooltip.
You can use icons instead of text for your view tabs. The title in the example will be used as a tooltip.
**Example**
### {% linkable_title Example %}
```yaml
views:
- icon: mdi:settings
title: Debugging
- icon: mdi:settings
title: Debugging
```
{% linkable_title Panel view %}
## {% 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.
This type of view uses the first card in the `cards` list 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**
### {% linkable_title 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%
- 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
```
{% linkable_title Themes %}
## {% linkable_title Themes %}
You can also set a [theme](/frontend/#themes) per view.
> Theme is currently only partially usable (font color works)
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
- 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`.
## {% linkable_title Custom ID %}
**Example**
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`.
### {% linkable_title Example %}
View:
```yaml
views:
- icon: mdi:settings
id: debugging
- icon: mdi:settings
id: debugging
```
Picture card: