jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-21 08:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
source/_lovelace/picture-elements.markdown
View File

@ -2,7 +2,7 @@
layout: page
title: "Picture Elements Card"
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
sidebar: true
comments: false
@ -10,9 +10,9 @@ 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 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'>
<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
type: string
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:
required: false
description: Url path to navigate to (e.g., `/lovelace/1`)
@ -86,6 +91,11 @@ service_data:
required: false
description: The service data to use.
type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style:
required: true
description: Position and style the element using CSS.
@ -117,6 +127,11 @@ tap_action:
description: more-info, toggle, navigate, call-service
type: string
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:
required: false
description: Url path to navigate to (e.g., `/lovelace/1`)
@ -129,6 +144,11 @@ service_data:
required: false
description: The service data to use.
type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style:
required: true
description: Position and style the element using CSS.
@ -186,6 +206,11 @@ tap_action:
description: more-info, toggle, navigate, call-service
type: string
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:
required: false
description: Url path to navigate to (e.g., `/lovelace/1`)
@ -198,6 +223,11 @@ service_data:
required: false
description: The service data to use.
type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
style:
required: true
description: Position and style the element using CSS.
@ -221,6 +251,11 @@ tap_action:
description: none, more-info, toggle, navigate, call-service
type: string
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:
required: false
description: Url path to navigate to (e.g., `/lovelace/1`)
@ -233,6 +268,11 @@ service_data:
required: false
description: The service data to use.
type: object
hold_time:
required: false
description: Time in ms for click-and-hold to register.
type: integer
default: 500
image:
required: false
description: The image to display.
@ -311,6 +351,20 @@ state_filter:
"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 %}
```yaml