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: