From 009a62a490086ac902de477d2c32b11c88499a54 Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 16:02:54 +0200 Subject: [PATCH 01/13] Minor changes --- source/_components/sensor.efergy.markdown | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/source/_components/sensor.efergy.markdown b/source/_components/sensor.efergy.markdown index 3fed31f58d2..7a57d281fb0 100644 --- a/source/_components/sensor.efergy.markdown +++ b/source/_components/sensor.efergy.markdown @@ -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_\. 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_\`. 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. From d07bf0e11be0368bfb756c8d4df8a32c74d76a00 Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 16:20:17 +0200 Subject: [PATCH 02/13] Fix titles, typos and style --- source/_lovelace/entities.markdown | 4 ++-- source/_lovelace/entity-filter.markdown | 4 ++-- source/_lovelace/glance.markdown | 4 ++-- source/_lovelace/history-graph.markdown | 4 ++-- source/_lovelace/horizontal-stack.markdown | 6 ++---- source/_lovelace/iframe.markdown | 9 +++++---- source/_lovelace/map.markdown | 6 ++---- source/_lovelace/markdown.markdown | 4 ++-- source/_lovelace/media-control.markdown | 4 ++-- source/_lovelace/picture-elements.markdown | 4 ++-- source/_lovelace/picture-glance.markdown | 14 +++++++------- source/_lovelace/picture.markdown | 6 +++--- source/_lovelace/plant-status.markdown | 4 ++-- source/_lovelace/vertical-stack.markdown | 9 +++++---- source/lovelace/changelog.markdown | 20 ++++++++++---------- source/lovelace/index.markdown | 8 ++++---- source/lovelace/views.markdown | 15 ++++++++------- 17 files changed, 62 insertions(+), 63 deletions(-) diff --git a/source/_lovelace/entities.markdown b/source/_lovelace/entities.markdown index 11d53d9f658..bf7b8a7790f 100644 --- a/source/_lovelace/entities.markdown +++ b/source/_lovelace/entities.markdown @@ -12,7 +12,7 @@ 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 %} +## {% linkable_title Options %} {% configuration %} type: @@ -47,7 +47,7 @@ name: type: string {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: entities diff --git a/source/_lovelace/entity-filter.markdown b/source/_lovelace/entity-filter.markdown index 8eabe85a8e5..f34724be51b 100644 --- a/source/_lovelace/entity-filter.markdown +++ b/source/_lovelace/entity-filter.markdown @@ -19,7 +19,7 @@ This type of card can also be used together with rest of cards that allow multip Screenshot of the entity filter card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -46,7 +46,7 @@ show_empty: default: true {% endconfiguration %} -{% linkable_title Examples %} +## {% linkable_title Examples %} Show only active switches or lights in the house ```yaml diff --git a/source/_lovelace/glance.markdown b/source/_lovelace/glance.markdown index eb90fdbd7ca..68fc44c0d2d 100644 --- a/source/_lovelace/glance.markdown +++ b/source/_lovelace/glance.markdown @@ -17,7 +17,7 @@ Glance cards are a very compact. Very useful to group together multiple sensors Screenshot of the glance card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -48,7 +48,7 @@ name: type: string {% endconfiguration %} -{% linkable_title Examples %} +## {% linkable_title Examples %} Basic example diff --git a/source/_lovelace/history-graph.markdown b/source/_lovelace/history-graph.markdown index 41c53201d21..17e67ae53b4 100644 --- a/source/_lovelace/history-graph.markdown +++ b/source/_lovelace/history-graph.markdown @@ -17,7 +17,7 @@ History graph is a basic card, allowing you to display a graph for each of the e Screenshot of the history graph card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -45,7 +45,7 @@ title: default: none {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: history-graph diff --git a/source/_lovelace/horizontal-stack.markdown b/source/_lovelace/horizontal-stack.markdown index 5de229372aa..86da454cd3d 100644 --- a/source/_lovelace/horizontal-stack.markdown +++ b/source/_lovelace/horizontal-stack.markdown @@ -12,7 +12,7 @@ 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 %} +## {% linkable_title Options %} {% configuration %} type: @@ -25,9 +25,7 @@ cards: type: list {% endconfiguration %} -{% linkable_title Example %} - -Basic example +## {% linkable_title Example %} ```yaml - type: horizontal-stack diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown index 99080d33fcc..dc62e4ec919 100644 --- a/source/_lovelace/iframe.markdown +++ b/source/_lovelace/iframe.markdown @@ -10,16 +10,16 @@ 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/`. +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/`.

Screenshot of the iframe card Screenshot of the iframe card.

-> 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 %} {% configuration %} type: @@ -42,7 +42,7 @@ title: default: none {% endconfiguration %} -{% linkable_title Examples %} +## {% linkable_title Examples %} ```yaml - type: iframe @@ -51,6 +51,7 @@ title: ``` 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 diff --git a/source/_lovelace/map.markdown b/source/_lovelace/map.markdown index 63b57ffebbc..be7057822d9 100644 --- a/source/_lovelace/map.markdown +++ b/source/_lovelace/map.markdown @@ -17,7 +17,7 @@ A card that allows you to display entities on a map Screenshot of the map card.

-### {% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -53,9 +53,7 @@ entity:

-### {% linkable_title Examples %} - -Basic map example: +## {% linkable_title Examples %} ```yaml - type: map diff --git a/source/_lovelace/markdown.markdown b/source/_lovelace/markdown.markdown index 7b433d93f6e..242f96f0cb0 100644 --- a/source/_lovelace/markdown.markdown +++ b/source/_lovelace/markdown.markdown @@ -17,7 +17,7 @@ Markdown card is used to render [markdown](http://commonmark.org/help/) Screenshot of the markdown card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -35,7 +35,7 @@ title: default: none {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: markdown diff --git a/source/_lovelace/media-control.markdown b/source/_lovelace/media-control.markdown index 276ee00ee41..16f66dd0936 100644 --- a/source/_lovelace/media-control.markdown +++ b/source/_lovelace/media-control.markdown @@ -17,7 +17,7 @@ The media control card is used to display [Media Player](/components/#search/med Screenshot of the media player control card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -30,7 +30,7 @@ entity: type: string {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: media-control diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown index ad0a0f09c4f..0756121bd44 100644 --- a/source/_lovelace/picture-elements.markdown +++ b/source/_lovelace/picture-elements.markdown @@ -21,7 +21,7 @@ You can customize tap action and even icon color. Screenshot of the picture elements card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -168,7 +168,7 @@ top: default: none {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: picture-elements diff --git a/source/_lovelace/picture-glance.markdown b/source/_lovelace/picture-glance.markdown index 5c22ecd72dc..d2c36351af2 100644 --- a/source/_lovelace/picture-glance.markdown +++ b/source/_lovelace/picture-glance.markdown @@ -10,22 +10,20 @@ 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. 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. +Picture glance supports a display of maximum 10 items.

Screenshot of the picture glance card Screenshot of the picture glance card.

-**Options** +## {% linkable_title Options %} | Name | Type | Default | Description | ---- | ---- | ------- | ----------- @@ -48,7 +46,7 @@ Screenshot of the picture glance card. | 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 +60,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 +75,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: diff --git a/source/_lovelace/picture.markdown b/source/_lovelace/picture.markdown index 0517527fc31..5182c0cf820 100644 --- a/source/_lovelace/picture.markdown +++ b/source/_lovelace/picture.markdown @@ -17,7 +17,7 @@ A very simple card that allows you to set an image to use for navigation to vari Screenshot of the picture card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -55,7 +55,7 @@ entity_id: {% endconfiguration %} -{% linkable_title Examples %} +## {% linkable_title Examples %} Basic navigation example: @@ -65,7 +65,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: diff --git a/source/_lovelace/plant-status.markdown b/source/_lovelace/plant-status.markdown index 11f791b6499..5ceb73e8b3a 100644 --- a/source/_lovelace/plant-status.markdown +++ b/source/_lovelace/plant-status.markdown @@ -17,7 +17,7 @@ A card for all the lovely botanists out there. Screenshot of the plant status card.

-{% linkable_title Options %} +## {% linkable_title Options %} {% configuration %} type: @@ -30,7 +30,7 @@ entity: type: string {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} ```yaml - type: plant-status diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown index 737e3fbe46e..695c0ef20f8 100644 --- a/source/_lovelace/vertical-stack.markdown +++ b/source/_lovelace/vertical-stack.markdown @@ -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: @@ -25,9 +25,10 @@ cards: type: list {% endconfiguration %} -{% linkable_title Example %} +## {% linkable_title Example %} Basic example + ```yaml - type: vertical-stack cards: @@ -44,7 +45,7 @@ Basic example Screenshot of the vertical stack card.

-Example using both a Vertical and Horizontal Stack Card +Example using both a vertical and horizontal stack card. ```yaml - type: vertical-stack diff --git a/source/lovelace/changelog.markdown b/source/lovelace/changelog.markdown index c109e872b20..41812c74370 100644 --- a/source/lovelace/changelog.markdown +++ b/source/lovelace/changelog.markdown @@ -9,7 +9,7 @@ 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) @@ -17,15 +17,15 @@ footer: true - 📣 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` @@ -35,7 +35,7 @@ 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 @@ -53,10 +53,10 @@ 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` @@ -70,7 +70,7 @@ 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 @@ -89,12 +89,12 @@ footer: true - 🔧 Fix use of groups in `picture-entity` - 🔧 Fix 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 +## {% linkable_title Changes in 0.72 %} - Initial release of the Lovelace UI diff --git a/source/lovelace/index.markdown b/source/lovelace/index.markdown index 0b42ccf2e62..2e351a0b7c3 100644 --- a/source/lovelace/index.markdown +++ b/source/lovelace/index.markdown @@ -26,7 +26,7 @@ The Lovelace UI is: -## 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. @@ -39,7 +39,7 @@ Visual comparison of old configuration versus new configuration -## Trying it out +## {% linkable_title Trying it out %} Create a new file `/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation. @@ -100,10 +100,10 @@ views: Now restart Home Assistant, navigate to `/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. diff --git a/source/lovelace/views.markdown b/source/lovelace/views.markdown index fbd50d4d56e..84530c959e1 100644 --- a/source/lovelace/views.markdown +++ b/source/lovelace/views.markdown @@ -28,11 +28,11 @@ These are exactly as before, tab views with icons or text that help you manage l Screenshot of views.

-{% 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. -**Example** +### {% linkable_title Example %} ```yaml views: @@ -40,11 +40,11 @@ views: 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. -**Example** +### {% linkable_title Example %} ```yaml views: @@ -64,7 +64,7 @@ views: left: 42% ``` -{% linkable_title Themes %} +## {% linkable_title Themes %} You can also set a [theme](/frontend/#themes) per view. @@ -77,11 +77,12 @@ views: title: Home theme: dark-mode ``` -{% linkable_title Custom id %} + +## {% 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** +### {% linkable_title Example %} View: From fc01fd4609f1244611474d21d4fcc7453388654f Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 20:22:26 +0200 Subject: [PATCH 03/13] Update configuration description (#5722) --- source/_components/sensor.twitch.markdown | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/source/_components/sensor.twitch.markdown b/source/_components/sensor.twitch.markdown index 6ed513ca902..d1265c1b1d5 100644 --- a/source/_components/sensor.twitch.markdown +++ b/source/_components/sensor.twitch.markdown @@ -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 %} From 6dec82d5f22fda7e7a21eeea5e85153c875fdaec Mon Sep 17 00:00:00 2001 From: sjabby Date: Mon, 9 Jul 2018 20:46:18 +0200 Subject: [PATCH 04/13] Fix typo in Lovelace docs - picture-elements --- source/_lovelace/picture-elements.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown index 0756121bd44..770a4043653 100644 --- a/source/_lovelace/picture-elements.markdown +++ b/source/_lovelace/picture-elements.markdown @@ -90,7 +90,7 @@ style: description: See "Style options" type: object tap_action: - required: true + required: false description: "Set to `toggle` to change state" type: string default: more-info From f05f308d6343f7ddd65c104225bbc197bd83d3ba Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Mon, 9 Jul 2018 21:17:17 +0200 Subject: [PATCH 05/13] :shirt: :pencil2: Lovelace channgelog Markdownlint & spelling fixes --- source/lovelace/changelog.markdown | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/source/lovelace/changelog.markdown b/source/lovelace/changelog.markdown index 41812c74370..923247b75c0 100644 --- a/source/lovelace/changelog.markdown +++ b/source/lovelace/changelog.markdown @@ -10,24 +10,29 @@ footer: true --- ## {% 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 ## {% linkable_title Changes in 0.73.0 %} ### Views + - 📣 New button to show unused entities in Lovelace ## Changes in 0.73.0b5 %} + - 🏁 Only minor fixes in this release ## {% 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` @@ -38,9 +43,11 @@ footer: true ## {% 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` @@ -54,11 +61,13 @@ footer: true - ‼️ `entity-filter` no longer allows to show all entities or a full domain ## {% linkable_title Changes in 0.73.0b2 %} + - :zap: Went by too fast :zap: ## {% 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` @@ -71,30 +80,34 @@ footer: true - 🔧 Fix card size calculation `horizontal-stack`/`vertical-stack` ## {% 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 ## {% linkable_title Changes in 0.72.1 %} ### Cards + - 🐞 Bug introduced in `glance` card - titles now overlap - 📣 New card: `iframe` ## {% linkable_title Changes in 0.72 %} -- Initial release of the Lovelace UI +- Initial release of the Lovelace UI From 475cb9bbdfe5f60989c25d127f7c6c15a3ae7056 Mon Sep 17 00:00:00 2001 From: Marius Ciotlos Date: Mon, 9 Jul 2018 22:28:11 +0300 Subject: [PATCH 06/13] Added FAQ for Lovelace --- source/lovelace/index.markdown | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/source/lovelace/index.markdown b/source/lovelace/index.markdown index 2e351a0b7c3..a960ccfb5da 100644 --- a/source/lovelace/index.markdown +++ b/source/lovelace/index.markdown @@ -107,3 +107,14 @@ It is possible to add your own custom cards to show up in the Lovelace UI. For m ## {% 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. \ No newline at end of file From 4afb924778dcca06c254eec230e7f4b05d8ed908 Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Mon, 9 Jul 2018 21:28:33 +0200 Subject: [PATCH 07/13] :pencil2: Lovelace index and views spelling fixes --- source/lovelace/index.markdown | 14 +++++++------- source/lovelace/views.markdown | 18 +++++++++--------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/source/lovelace/index.markdown b/source/lovelace/index.markdown index 2e351a0b7c3..4e57bb8de9e 100644 --- a/source/lovelace/index.markdown +++ b/source/lovelace/index.markdown @@ -17,10 +17,10 @@ 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.
@@ -28,7 +28,7 @@ The Lovelace UI is: ## {% 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.

Screenshot of views @@ -30,7 +30,7 @@ Screenshot of views. ## {% 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. ### {% linkable_title Example %} @@ -42,7 +42,7 @@ views: ## {% 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` array to expand it to occupy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards. ### {% linkable_title Example %} @@ -66,7 +66,7 @@ views: ## {% linkable_title Themes %} -You can also set a [theme](/frontend/#themes) per view. +You can also set a [theme](/frontend/#themes) per view. > Theme is currently only partially usable (font color works) @@ -80,7 +80,7 @@ views: ## {% 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`. +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 %} From c8ebaa152567dd6f7ab85d92cc5a26ca84d4d5e5 Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 21:32:57 +0200 Subject: [PATCH 08/13] Update configuration description (#5726) --- source/_components/sensor.lastfm.markdown | 25 ++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/source/_components/sensor.lastfm.markdown b/source/_components/sensor.lastfm.markdown index 8a78726e381..d76a8beba62 100644 --- a/source/_components/sensor.lastfm.markdown +++ b/source/_components/sensor.lastfm.markdown @@ -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 %} From 3f08d48c00f39d648b89d648a6025aa616e041cf Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Mon, 9 Jul 2018 21:42:11 +0200 Subject: [PATCH 09/13] :spencil2: Lovelace spelling & grammar fixes --- source/_lovelace/entity-filter.markdown | 2 +- source/_lovelace/glance.markdown | 6 +++--- source/_lovelace/horizontal-stack.markdown | 2 +- source/_lovelace/iframe.markdown | 6 +++--- source/_lovelace/map.markdown | 2 +- source/_lovelace/markdown.markdown | 2 +- source/_lovelace/media-control.markdown | 2 +- source/_lovelace/picture-elements.markdown | 2 +- source/_lovelace/picture-entity.markdown | 4 ++-- source/_lovelace/picture-glance.markdown | 10 +++++----- source/_lovelace/picture.markdown | 1 - source/_lovelace/vertical-stack.markdown | 4 ++-- source/_lovelace/weather-forecast.markdown | 3 +-- 13 files changed, 22 insertions(+), 24 deletions(-) diff --git a/source/_lovelace/entity-filter.markdown b/source/_lovelace/entity-filter.markdown index f34724be51b..64b53b9b925 100644 --- a/source/_lovelace/entity-filter.markdown +++ b/source/_lovelace/entity-filter.markdown @@ -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. diff --git a/source/_lovelace/glance.markdown b/source/_lovelace/glance.markdown index 68fc44c0d2d..8b4d933c384 100644 --- a/source/_lovelace/glance.markdown +++ b/source/_lovelace/glance.markdown @@ -10,7 +10,7 @@ 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.

Screenshot of the glance card @@ -50,7 +50,7 @@ name: ## {% linkable_title Examples %} -Basic example +Basic example: ```yaml - type: glance @@ -70,7 +70,7 @@ Basic example Screenshot of the glance card with custom title.

-Example with custom name +Example with a custom name: ```yaml - type: glance diff --git a/source/_lovelace/horizontal-stack.markdown b/source/_lovelace/horizontal-stack.markdown index 86da454cd3d..edcde4e4a74 100644 --- a/source/_lovelace/horizontal-stack.markdown +++ b/source/_lovelace/horizontal-stack.markdown @@ -10,7 +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. +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 %} diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown index dc62e4ec919..fc150133fbd 100644 --- a/source/_lovelace/iframe.markdown +++ b/source/_lovelace/iframe.markdown @@ -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 @@ -17,7 +17,7 @@ Iframe cards are useful to embed outside websites in your dashboard with little Screenshot of the iframe card.

-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 %} @@ -50,7 +50,7 @@ title: 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 diff --git a/source/_lovelace/map.markdown b/source/_lovelace/map.markdown index be7057822d9..5563de03de1 100644 --- a/source/_lovelace/map.markdown +++ b/source/_lovelace/map.markdown @@ -10,7 +10,7 @@ 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.

Screenshot of the map card diff --git a/source/_lovelace/markdown.markdown b/source/_lovelace/markdown.markdown index 242f96f0cb0..2aa621424af 100644 --- a/source/_lovelace/markdown.markdown +++ b/source/_lovelace/markdown.markdown @@ -10,7 +10,7 @@ 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/).

Screenshot of the markdown card diff --git a/source/_lovelace/media-control.markdown b/source/_lovelace/media-control.markdown index 16f66dd0936..25d870b4f1c 100644 --- a/source/_lovelace/media-control.markdown +++ b/source/_lovelace/media-control.markdown @@ -10,7 +10,7 @@ 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.

Screenshot of the media player control card diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown index 0756121bd44..a0d81f0910d 100644 --- a/source/_lovelace/picture-elements.markdown +++ b/source/_lovelace/picture-elements.markdown @@ -10,7 +10,7 @@ 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! diff --git a/source/_lovelace/picture-entity.markdown b/source/_lovelace/picture-entity.markdown index 60fc038ed2b..021efd490ce 100644 --- a/source/_lovelace/picture-entity.markdown +++ b/source/_lovelace/picture-entity.markdown @@ -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. diff --git a/source/_lovelace/picture-glance.markdown b/source/_lovelace/picture-glance.markdown index d2c36351af2..293258bb7fd 100644 --- a/source/_lovelace/picture-glance.markdown +++ b/source/_lovelace/picture-glance.markdown @@ -12,9 +12,9 @@ footer: true 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. @@ -33,8 +33,8 @@ Screenshot of the picture glance card. | 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 +| entity | list | Optional | An entity to use for state_image state. +| title | string | Optional | Card title. `state_image` object structure @@ -44,7 +44,7 @@ Screenshot of the picture glance card. | 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 +| ... | string | Optional | Any state that is supported by the entity works. ## {% linkable_title Examples %} diff --git a/source/_lovelace/picture.markdown b/source/_lovelace/picture.markdown index 5182c0cf820..bccf0d9b237 100644 --- a/source/_lovelace/picture.markdown +++ b/source/_lovelace/picture.markdown @@ -54,7 +54,6 @@ entity_id: type: string {% endconfiguration %} - ## {% linkable_title Examples %} Basic navigation example: diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown index 695c0ef20f8..164bc5681b8 100644 --- a/source/_lovelace/vertical-stack.markdown +++ b/source/_lovelace/vertical-stack.markdown @@ -27,7 +27,7 @@ cards: ## {% linkable_title Example %} -Basic example +Basic example: ```yaml - type: vertical-stack @@ -45,7 +45,7 @@ Basic example Screenshot of the vertical stack card.

-Example using both a vertical and horizontal stack card. +Example using both a vertical and horizontal stack card: ```yaml - type: vertical-stack diff --git a/source/_lovelace/weather-forecast.markdown b/source/_lovelace/weather-forecast.markdown index 4a1a17cd4c3..eb6b490db3a 100644 --- a/source/_lovelace/weather-forecast.markdown +++ b/source/_lovelace/weather-forecast.markdown @@ -10,7 +10,7 @@ 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.

Screenshot of the weather card @@ -30,7 +30,6 @@ entity: type: string {% endconfiguration %} - {% linkable_title Example %} ```yaml From f08ae234124aaa219408ddaca1584fa13abe4d9d Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Mon, 9 Jul 2018 21:46:45 +0200 Subject: [PATCH 10/13] :pencil2: Tweaks --- source/lovelace/index.markdown | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/source/lovelace/index.markdown b/source/lovelace/index.markdown index a960ccfb5da..8a011cd29bf 100644 --- a/source/lovelace/index.markdown +++ b/source/lovelace/index.markdown @@ -110,11 +110,12 @@ This is the very very early version aimed at gathering feedback. Discussion and ## {% 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? +### 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. \ No newline at end of file +> Note: Enabling `latest` on IOS could cause automation and script editor to crash. From 5d00db97b2471c200a2d638c69acc90558a1e1ff Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 21:51:12 +0200 Subject: [PATCH 11/13] Update configuration description (#5727) --- .../_components/binary_sensor.velbus.markdown | 47 ++++++++++++------ source/_components/fan.velbus.markdown | 47 +++++++++++++----- source/_components/light.velbus.markdown | 39 ++++++++++----- source/_components/switch.velbus.markdown | 49 +++++++++++++------ source/_components/velbus.markdown | 12 ++++- 5 files changed, 138 insertions(+), 56 deletions(-) diff --git a/source/_components/binary_sensor.velbus.markdown b/source/_components/binary_sensor.velbus.markdown index 7c9c9ef62dd..dc476b53f12 100644 --- a/source/_components/binary_sensor.velbus.markdown +++ b/source/_components/binary_sensor.velbus.markdown @@ -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/). diff --git a/source/_components/fan.velbus.markdown b/source/_components/fan.velbus.markdown index ff0652f233f..e1686e65642 100644 --- a/source/_components/fan.velbus.markdown +++ b/source/_components/fan.velbus.markdown @@ -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/). diff --git a/source/_components/light.velbus.markdown b/source/_components/light.velbus.markdown index 662b788ca41..ddafbaa7eb5 100644 --- a/source/_components/light.velbus.markdown +++ b/source/_components/light.velbus.markdown @@ -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/). diff --git a/source/_components/switch.velbus.markdown b/source/_components/switch.velbus.markdown index b4a7ae12967..6cd0303fde6 100644 --- a/source/_components/switch.velbus.markdown +++ b/source/_components/switch.velbus.markdown @@ -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/). diff --git a/source/_components/velbus.markdown b/source/_components/velbus.markdown index 0f8f3abdead..329258ee28a 100644 --- a/source/_components/velbus.markdown +++ b/source/_components/velbus.markdown @@ -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 %} From 8b0b7501b3789245bc72d227f4643b242d4ff14b Mon Sep 17 00:00:00 2001 From: DubhAd Date: Mon, 9 Jul 2018 21:11:02 +0100 Subject: [PATCH 12/13] Makign titles linkable (#5733) --- source/hassio/zwave.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/hassio/zwave.markdown b/source/hassio/zwave.markdown index 4ba8aed7937..6920a30615c 100644 --- a/source/hassio/zwave.markdown +++ b/source/hassio/zwave.markdown @@ -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: From 4c0d2624d7012f8786c097ad3a06c4bf46d6e9b0 Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Mon, 9 Jul 2018 22:28:48 +0200 Subject: [PATCH 13/13] Fix configuration descriptions (#5721) * Fix configuration descriptions * Fix syntax * Minor changes * Other fixes * Update configuration description * Check syntax * Remove {% configuration %} --- source/_lovelace/entities.markdown | 30 +-- source/_lovelace/entity-filter.markdown | 17 +- source/_lovelace/glance.markdown | 26 +- source/_lovelace/history-graph.markdown | 9 +- source/_lovelace/horizontal-stack.markdown | 17 +- source/_lovelace/iframe.markdown | 20 +- source/_lovelace/map.markdown | 29 +-- source/_lovelace/markdown.markdown | 6 +- source/_lovelace/media-control.markdown | 4 +- source/_lovelace/picture-elements.markdown | 262 ++++++++++++--------- source/_lovelace/picture-entity.markdown | 70 +++--- source/_lovelace/picture-glance.markdown | 81 +++++-- source/_lovelace/picture.markdown | 27 +-- source/_lovelace/plant-status.markdown | 3 +- source/_lovelace/vertical-stack.markdown | 13 + source/_lovelace/weather-forecast.markdown | 4 +- source/lovelace/views.markdown | 51 ++-- 17 files changed, 365 insertions(+), 304 deletions(-) diff --git a/source/_lovelace/entities.markdown b/source/_lovelace/entities.markdown index bf7b8a7790f..fec4fc9b8ac 100644 --- a/source/_lovelace/entities.markdown +++ b/source/_lovelace/entities.markdown @@ -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,32 +19,28 @@ 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 %} ```yaml diff --git a/source/_lovelace/entity-filter.markdown b/source/_lovelace/entity-filter.markdown index 64b53b9b925..f72711a90a9 100644 --- a/source/_lovelace/entity-filter.markdown +++ b/source/_lovelace/entity-filter.markdown @@ -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.

-## {% 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 diff --git a/source/_lovelace/glance.markdown b/source/_lovelace/glance.markdown index 8b4d933c384..ff677b6c864 100644 --- a/source/_lovelace/glance.markdown +++ b/source/_lovelace/glance.markdown @@ -17,8 +17,6 @@ Glance cards are very compact. Very useful to group together multiple sensors fo Screenshot of the glance card.

-## {% 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,19 +42,6 @@ title: default: none {% endconfiguration %} -`entity` object type - -{% 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: diff --git a/source/_lovelace/history-graph.markdown b/source/_lovelace/history-graph.markdown index 17e67ae53b4..282b59912f5 100644 --- a/source/_lovelace/history-graph.markdown +++ b/source/_lovelace/history-graph.markdown @@ -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.

-## {% linkable_title Options %} - {% configuration %} type: required: true @@ -30,19 +28,18 @@ 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 %} diff --git a/source/_lovelace/horizontal-stack.markdown b/source/_lovelace/horizontal-stack.markdown index edcde4e4a74..bf031a83017 100644 --- a/source/_lovelace/horizontal-stack.markdown +++ b/source/_lovelace/horizontal-stack.markdown @@ -12,8 +12,6 @@ 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 %} - {% configuration %} type: required: true @@ -21,8 +19,21 @@ 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 %} diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown index fc150133fbd..0e34633d2ff 100644 --- a/source/_lovelace/iframe.markdown +++ b/source/_lovelace/iframe.markdown @@ -21,6 +21,8 @@ Make sure the URL you're embedding has the right protocol and allows to be embed ## {% linkable_title Options %} +Create a new file `/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation. + {% configuration %} type: required: true @@ -28,16 +30,16 @@ 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 %} @@ -45,15 +47,15 @@ title: ## {% 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: ```yaml - - type: iframe - url: /local/example.html - title: Sample local file +- type: iframe + url: /local/example.html + title: Sample local file ``` diff --git a/source/_lovelace/map.markdown b/source/_lovelace/map.markdown index 5563de03de1..023b386b37b 100644 --- a/source/_lovelace/map.markdown +++ b/source/_lovelace/map.markdown @@ -17,42 +17,35 @@ A card that allows you to display entities on a map. Screenshot of the map card.

-## {% 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 %}

- 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.

- ## {% linkable_title Examples %} ```yaml diff --git a/source/_lovelace/markdown.markdown b/source/_lovelace/markdown.markdown index 2aa621424af..de239baa5ce 100644 --- a/source/_lovelace/markdown.markdown +++ b/source/_lovelace/markdown.markdown @@ -17,8 +17,6 @@ Markdown card is used to render [markdown](http://commonmark.org/help/). Screenshot of the markdown card.

-## {% linkable_title Options %} - {% configuration %} type: required: true @@ -26,11 +24,11 @@ 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 %} diff --git a/source/_lovelace/media-control.markdown b/source/_lovelace/media-control.markdown index 25d870b4f1c..313d7492227 100644 --- a/source/_lovelace/media-control.markdown +++ b/source/_lovelace/media-control.markdown @@ -17,8 +17,6 @@ The media control card is used to display [Media Player](/components/#search/med Screenshot of the media player control card.

-## {% linkable_title Options %} - {% configuration %} type: required: true @@ -26,7 +24,7 @@ type: type: string entity: required: true - description: "Entity id of `media_player` domain" + description: "A media player `entity_id`." type: string {% endconfiguration %} diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown index d7f6c8c2caf..d923415e177 100644 --- a/source/_lovelace/picture-elements.markdown +++ b/source/_lovelace/picture-elements.markdown @@ -12,7 +12,7 @@ footer: true 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.

-## {% 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,132 +38,178 @@ 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: false - 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 -{% 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 + 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 %} ## {% linkable_title Example %} diff --git a/source/_lovelace/picture-entity.markdown b/source/_lovelace/picture-entity.markdown index 021efd490ce..b45c475f334 100644 --- a/source/_lovelace/picture-entity.markdown +++ b/source/_lovelace/picture-entity.markdown @@ -21,8 +21,6 @@ You can also use `camera` domain entities to use that as `camera_image`. Screenshot of the picture entity card.

-{% 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: diff --git a/source/_lovelace/picture-glance.markdown b/source/_lovelace/picture-glance.markdown index 293258bb7fd..b141f1c0eae 100644 --- a/source/_lovelace/picture-glance.markdown +++ b/source/_lovelace/picture-glance.markdown @@ -23,28 +23,65 @@ Picture glance supports a display of maximum 10 items. Screenshot of the picture glance card.

-## {% linkable_title 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. +{% 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 %} ## {% linkable_title Examples %} diff --git a/source/_lovelace/picture.markdown b/source/_lovelace/picture.markdown index bccf0d9b237..73f4e6896e1 100644 --- a/source/_lovelace/picture.markdown +++ b/source/_lovelace/picture.markdown @@ -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.

-## {% linkable_title Options %} - {% configuration %} type: required: true @@ -26,32 +24,25 @@ 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 -{% endconfiguration %} - -`service_data` object structure - -{% configuration %} -entity_id: - required: true - description: light.floor - type: string + keys: + entity_id: + required: true + description: The ID of the entity to use. + type: string {% endconfiguration %} ## {% linkable_title Examples %} diff --git a/source/_lovelace/plant-status.markdown b/source/_lovelace/plant-status.markdown index 5ceb73e8b3a..09be25d0332 100644 --- a/source/_lovelace/plant-status.markdown +++ b/source/_lovelace/plant-status.markdown @@ -17,8 +17,6 @@ A card for all the lovely botanists out there. Screenshot of the plant status card.

-## {% linkable_title Options %} - {% configuration %} type: required: true @@ -33,6 +31,7 @@ entity: ## {% linkable_title Example %} ```yaml +cards: - type: plant-status entity: plant.bonsai ``` diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown index 164bc5681b8..49349d51c9e 100644 --- a/source/_lovelace/vertical-stack.markdown +++ b/source/_lovelace/vertical-stack.markdown @@ -23,6 +23,19 @@ 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 %} diff --git a/source/_lovelace/weather-forecast.markdown b/source/_lovelace/weather-forecast.markdown index eb6b490db3a..b92588bd2c2 100644 --- a/source/_lovelace/weather-forecast.markdown +++ b/source/_lovelace/weather-forecast.markdown @@ -17,8 +17,6 @@ The weather forecast is a card to display the weather. Very useful to include on Screenshot of the weather card.

-{% linkable_title Options %} - {% configuration %} type: required: true @@ -26,7 +24,7 @@ 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 %} diff --git a/source/lovelace/views.markdown b/source/lovelace/views.markdown index 653911fe25e..8c741d1f083 100644 --- a/source/lovelace/views.markdown +++ b/source/lovelace/views.markdown @@ -9,7 +9,7 @@ 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. @@ -36,51 +36,46 @@ You can use icons instead of text for your view tabs. The title in the example w ```yaml views: -- icon: mdi:settings - title: Debugging + - 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 occupy 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. ### {% 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 %} -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`. +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 %} @@ -88,8 +83,8 @@ View: ```yaml views: -- icon: mdi:settings - id: debugging + - icon: mdi:settings + id: debugging ``` Picture card: