From dd3c187c1c7665dd657a0e21d14995f4524c7908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Sun, 21 Oct 2018 12:21:15 +0200
Subject: [PATCH] Documentation for home-assistant/home-assistant-polymer#1745
 (#6982)

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

* :pencil2: Tweaks
---
 source/_lovelace/picture-elements.markdown | 60 ++++++++++++++++++++--
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown
index 8dd83c9c005..54b60b92285 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: "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