diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown index 81b74140530..ad0a0f09c4f 100644 --- a/source/_lovelace/picture-elements.markdown +++ b/source/_lovelace/picture-elements.markdown @@ -2,7 +2,7 @@ layout: page title: "Picture Elements Card" sidebar_label: Picture Elements -description: "TBD" +description: "Picture elements card is one of the most versatile type of cards" date: 2018-07-01 10:28 +00:00 sidebar: true comments: false @@ -10,76 +10,165 @@ sharing: true footer: true --- -### Picture elements +Picture elements card is one of the most versatile type of cards. -Picture elements card is one of the most versatile type of cards. I am almost sure that those that like to customize a lot in their home assistant interface will **love** this card. - -The cards allows you to position icons or text and even services! on an image based on coordinates. Imagine floor plan, imagine [picture-glance](card-picture-glance.md) with no restrictions! +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. -![floor-plan](https://user-images.githubusercontent.com/7738048/42103244-26bec55a-7bd1-11e8-8bc9-6a130c513f9e.gif) +

+Screenshot of the picture elements card +Screenshot of the picture elements card. +

-**Options** +{% linkable_title Options %} -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `picture-elements` -| image | string | **Required** | URL of an image -| elements | list | **Required** | List of elements -| title | string | Optional | Card title +{% configuration %} +type: + required: true + description: picture-elements + type: string +image: + required: true + description: URL of an image + type: string +elements: + required: true + description: List of elements + type: list +title: + required: false + description: Card title + type: string + default: none +{% endconfiguration %} Element types: -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `navigation` -| navigation_path | string | **Required** | navigation_path of URL to navigate to -| icon | string | Optional | Icon +{% configuration %} +type: + 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 +{% endconfiguration %} -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `state-badge` -| entity | string | **Required** | Entity id -| style | object | **Required** | See "Style options" +{% configuration %} +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 %} -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `state-icon` -| entity | string | **Required** | Entity id -| style | object | **Required** | See "Style options" -| tap_action | string | more-info | Set to `toggle` to change state +{% configuration %} +type: + required: true + description: state-icon + type: string +entity: + required: true + description: Entity id + type: string +style: + required: true + description: See "Style options" + type: object +tap_action: + required: true + description: "Set to `toggle` to change state" + type: string + default: more-info +{% endconfiguration %} -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `state-label` -| entity | string | **Required** | Entity id -| style | object | **Required** | See "Style options" +{% configuration %} +type: + required: true + description: state-label + type: string +entity: + required: true + description: Entity id + type: string +style: + required: true + description: See "Style options" + type: object +{% endconfiguration %} -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| type | string | **Required** | `service-button` -| service | string | **Required** | `light.turn_on` -| service_data | object | Optional | See `service_data` object structure. -| style | object | **Required** | See "Style options" -| title | string | Optional | Button label +{% configuration %} +type: + 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 -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| entity_id | string | **Required** | 'light.floor' +{% configuration %} +entity_id: + required: true + description: light.floor + type: string +{% endconfiguration %} Style options (CSS): -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| left | string | **Required** | Position from left, `25%` -| top | string | **Required** | Position from top, `50%` -| ... | string | inherit | ... -| "--paper-item-icon-color" | string | inherit | Badge-icon off-color, `green` +{% configuration %} +left: + required: true + description: Position from left, "25%" + type: string +top: + required: true + description: Position from top, "50%" + type: string +...: + required: inherit + description: ... + type: string + default: none +"--paper-item-icon-color": + required: inherit + description: "Badge-icon off-color, `green`" + type: string + default: none +{% endconfiguration %} -**Example** +{% linkable_title Example %} ```yaml - type: picture-elements