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 `- 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: