mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 09:17:06 +00:00
Documentation for home-assistant/home-assistant-polymer#1745 (#6982)
* Documentation for home-assistant/home-assistant-polymer#1745 * ✏️ Tweaks
This commit is contained in:
parent
2668ce611c
commit
dd3c187c1c
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user