Documentation for home-assistant/home-assistant-polymer#1745 (#6982)

* Documentation for home-assistant/home-assistant-polymer#1745

* ✏️ Tweaks
This commit is contained in:
Thomas Lovén 2018-10-21 12:21:15 +02:00 committed by Franck Nijhof
parent 2668ce611c
commit dd3c187c1c

View File

@ -2,7 +2,7 @@
layout: page layout: page
title: "Picture Elements Card" title: "Picture Elements Card"
sidebar_label: Picture Elements sidebar_label: Picture Elements
description: "Picture elements card is one of the most versatile type of cards" description: "Picture elements card is one of the most versatile types of cards"
date: 2018-07-01 10:28 +00:00 date: 2018-07-01 10:28 +00:00
sidebar: true sidebar: true
comments: false comments: false
@ -10,9 +10,9 @@ sharing: true
footer: true footer: true
--- ---
Picture elements card is one of the most versatile type of cards. Picture elements card is one of the most versatile types 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 allow 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!
<p class='img'> <p class='img'>
<img src='/images/lovelace/lovelace_picture_elements.gif' alt='A functional floorplan powered by picture elements'> <img src='/images/lovelace/lovelace_picture_elements.gif' alt='A functional floorplan powered by picture elements'>
@ -74,6 +74,11 @@ tap_action:
description: more-info, toggle, navigate, call-service description: more-info, toggle, navigate, call-service
type: string type: string
default: more-info default: more-info
hold_action:
required: false
description: Action to perform when clicked-and-held (e.g., `more-info`, `toggle`, `navigate`, `call-service`).
type: string
default: none
navigation_path: navigation_path:
required: false required: false
description: Url path to navigate to (e.g., `/lovelace/1`) description: Url path to navigate to (e.g., `/lovelace/1`)
@ -86,6 +91,11 @@ service_data:
required: false required: false
description: The service data to use. description: The service data to use.
type: object type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style: style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
@ -117,6 +127,11 @@ tap_action:
description: more-info, toggle, navigate, call-service description: more-info, toggle, navigate, call-service
type: string type: string
default: more-info default: more-info
hold_action:
required: false
description: Action to perform when clicked-and-held (e.g., `more-info`, `toggle`, `navigate`, `call-service`).
type: string
default: none
navigation_path: navigation_path:
required: false required: false
description: Url path to navigate to (e.g., `/lovelace/1`) description: Url path to navigate to (e.g., `/lovelace/1`)
@ -129,6 +144,11 @@ service_data:
required: false required: false
description: The service data to use. description: The service data to use.
type: object type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style: style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
@ -186,6 +206,11 @@ tap_action:
description: more-info, toggle, navigate, call-service description: more-info, toggle, navigate, call-service
type: string type: string
default: more-info default: more-info
hold_action:
required: false
description: Action to perform when clicked-and-held (e.g., `more-info`, `toggle`, `navigate`, `call-service`).
type: string
default: none
navigation_path: navigation_path:
required: false required: false
description: Url path to navigate to (e.g., `/lovelace/1`) description: Url path to navigate to (e.g., `/lovelace/1`)
@ -198,6 +223,11 @@ service_data:
required: false required: false
description: The service data to use. description: The service data to use.
type: object type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style: style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
@ -221,6 +251,11 @@ tap_action:
description: none, more-info, toggle, navigate, call-service description: none, more-info, toggle, navigate, call-service
type: string type: string
default: more-info default: more-info
hold_action:
required: false
description: Action to perform when clicked-and-held (e.g., `more-info`, `toggle`, `navigate`, `call-service`).
type: string
default: none
navigation_path: navigation_path:
required: false required: false
description: Url path to navigate to (e.g., `/lovelace/1`) description: Url path to navigate to (e.g., `/lovelace/1`)
@ -233,6 +268,11 @@ service_data:
required: false required: false
description: The service data to use. description: The service data to use.
type: object type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
image: image:
required: false required: false
description: The image to display. description: The image to display.
@ -311,6 +351,20 @@ state_filter:
"off": brightness(50%) hue-rotate(45deg) "off": brightness(50%) hue-rotate(45deg)
``` ```
## {% linkable_title How to use click-and-hold %}
If the option `hold_action` is specified, that action will be performed when the entity is clicked and held for a certain time (default 0.5 seconds).
Please note that the `tap_action` and `hold_action` share variables for `navigation_path`, `service` and `service_data`. It is therefore not possible to, e.g., call two different services when clicked and when held.
```yaml
tap_action: toggle
hold_action: call-service
service: light.turn_on
service_data:
entity_id: light.bed_light
brightness_pct: 100
```
## {% linkable_title Example %} ## {% linkable_title Example %}
```yaml ```yaml