mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-24 17:57:14 +00:00
Lovelace: update picture elements (#5767)
This commit is contained in:
c727
Alok Saboo
parent
b0a1e16dfc
commit
d0a5d62488
@ -14,11 +14,9 @@ Picture elements card is one of the most versatile type 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 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.
|
|
||||||
|
|
||||||
<p class='img'>
|
<p class='img'>
|
||||||
<img src='/images/lovelace/lovelace_picture_elements.gif' alt='Screenshot of the picture elements card'>
|
<img src='/images/lovelace/lovelace_picture_elements.gif' alt='A functional floorplan powered by picture elements'>
|
||||||
Screenshot of the picture elements card.
|
A functional floorplan powered by picture elements.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% configuration %}
|
{% configuration %}
|
||||||
@ -40,183 +38,124 @@ title:
|
|||||||
type: string
|
type: string
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
Different `elements` types:
|
## {% linkable_title Elements %}
|
||||||
|
|
||||||
|
### {% linkable_title Navigate to other views %}
|
||||||
|
|
||||||
{% configuration %}
|
{% configuration %}
|
||||||
elements:
|
type:
|
||||||
required: true
|
required: true
|
||||||
description: List of elements
|
description: navigation
|
||||||
type: list
|
type: string
|
||||||
keys:
|
navigation_path:
|
||||||
type:
|
required: true
|
||||||
required: true
|
description: URL path to another view.
|
||||||
description: navigation
|
type: string
|
||||||
type: string
|
icon:
|
||||||
navigation_path:
|
required: false
|
||||||
required: true
|
description: Material Design Icon.
|
||||||
description: "The `navigation_path` of URL to navigate to."
|
type: string
|
||||||
type: string
|
|
||||||
icon:
|
|
||||||
required: false
|
|
||||||
description: Icon
|
|
||||||
type: string
|
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
{% configuration %}
|
### {% linkable_title State Badge %}
|
||||||
elements:
|
|
||||||
required: true
|
|
||||||
description: List of elements
|
|
||||||
type: list
|
|
||||||
keys:
|
|
||||||
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 %}
|
|
||||||
|
|
||||||
{% configuration %}
|
{% configuration %}
|
||||||
elements:
|
type:
|
||||||
required: true
|
required: true
|
||||||
description: List of elements
|
description: state-badge
|
||||||
type: list
|
type: string
|
||||||
keys:
|
entity:
|
||||||
type:
|
required: true
|
||||||
required: true
|
description: Entity id
|
||||||
description: state-icon
|
type: string
|
||||||
type: string
|
style:
|
||||||
entity:
|
required: true
|
||||||
required: true
|
description: Position and style the element using CSS.
|
||||||
description: The entity id to use.
|
type: object
|
||||||
type: string
|
|
||||||
style:
|
|
||||||
required: true
|
|
||||||
description: Additional style options to use.
|
|
||||||
type: list
|
|
||||||
keys:
|
|
||||||
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
|
|
||||||
"--paper-item-icon-color":
|
|
||||||
required: inherit
|
|
||||||
description: "Badge-icon off-color, `green`"
|
|
||||||
type: string
|
|
||||||
tap_action:
|
|
||||||
required: false
|
|
||||||
description: "Set to `toggle` to change state"
|
|
||||||
type: string
|
|
||||||
default: more-info
|
|
||||||
tap_action:
|
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
{% configuration %}
|
### {% linkable_title Icon representing an entity state %}
|
||||||
elements:
|
|
||||||
required: true
|
|
||||||
description: List of elements
|
|
||||||
type: list
|
|
||||||
keys:
|
|
||||||
type:
|
|
||||||
required: true
|
|
||||||
description: state-label
|
|
||||||
type: string
|
|
||||||
entity:
|
|
||||||
required: true
|
|
||||||
description: Entity id
|
|
||||||
type: string
|
|
||||||
style:
|
|
||||||
required: true
|
|
||||||
description: Additional style options to use.
|
|
||||||
type: list
|
|
||||||
keys:
|
|
||||||
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
|
|
||||||
"--paper-item-icon-color":
|
|
||||||
required: inherit
|
|
||||||
description: "Badge-icon off-color, `green`"
|
|
||||||
type: string
|
|
||||||
{% endconfiguration %}
|
|
||||||
|
|
||||||
{% configuration %}
|
{% configuration %}
|
||||||
elements:
|
type:
|
||||||
required: true
|
required: true
|
||||||
description: List of elements
|
description: state-icon
|
||||||
type: list
|
type: string
|
||||||
keys:
|
entity:
|
||||||
type:
|
required: true
|
||||||
required: true
|
description: The entity id to use.
|
||||||
description: service-button
|
type: string
|
||||||
type: string
|
tap_action:
|
||||||
service:
|
required: false
|
||||||
required: true
|
description: "Set to `toggle` to change state"
|
||||||
description: light.turn_on
|
type: string
|
||||||
type: string
|
default: more-info
|
||||||
service_data:
|
style:
|
||||||
required: false
|
required: true
|
||||||
description: The service data to use."
|
description: Position and style the element using CSS.
|
||||||
type: list
|
type: object
|
||||||
keys:
|
|
||||||
entity_id:
|
|
||||||
required: true
|
|
||||||
description: light.floor
|
|
||||||
type: string
|
|
||||||
style:
|
|
||||||
required: true
|
|
||||||
description: Additional style options to use.
|
|
||||||
type: object
|
|
||||||
keys:
|
|
||||||
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
|
|
||||||
"--paper-item-icon-color":
|
|
||||||
required: inherit
|
|
||||||
description: "Badge-icon off-color, `green`"
|
|
||||||
type: string
|
|
||||||
title:
|
|
||||||
required: false
|
|
||||||
description: Button label
|
|
||||||
type: string
|
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
|
### {% linkable_title Label with state text %}
|
||||||
|
|
||||||
|
{% configuration %}
|
||||||
|
type:
|
||||||
|
required: true
|
||||||
|
description: state-label
|
||||||
|
type: string
|
||||||
|
entity:
|
||||||
|
required: true
|
||||||
|
description: Entity id
|
||||||
|
type: string
|
||||||
|
style:
|
||||||
|
required: true
|
||||||
|
description: Position and style the element using CSS.
|
||||||
|
type: object
|
||||||
|
{% endconfiguration %}
|
||||||
|
|
||||||
|
### {% linkable_title Service Call Button %}
|
||||||
|
|
||||||
|
{% configuration %}
|
||||||
|
type:
|
||||||
|
required: true
|
||||||
|
description: service-button
|
||||||
|
type: string
|
||||||
|
title:
|
||||||
|
required: true
|
||||||
|
description: Button label
|
||||||
|
type: string
|
||||||
|
service:
|
||||||
|
required: true
|
||||||
|
description: light.turn_on
|
||||||
|
type: string
|
||||||
|
service_data:
|
||||||
|
required: false
|
||||||
|
description: The service data to use."
|
||||||
|
type: object
|
||||||
|
style:
|
||||||
|
required: true
|
||||||
|
description: Position and style the element using CSS.
|
||||||
|
type: object
|
||||||
|
{% endconfiguration %}
|
||||||
|
|
||||||
|
## {% linkable_title How-to use the style object %}
|
||||||
|
|
||||||
|
Position and style your elements using [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets). More/other keys are also possible.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
style:
|
||||||
|
# Positioning of the element
|
||||||
|
left: 50%
|
||||||
|
top: 50%
|
||||||
|
# Overwrite color for icons
|
||||||
|
"--paper-item-icon-color": pink
|
||||||
|
```
|
||||||
|
|
||||||
## {% linkable_title Example %}
|
## {% linkable_title Example %}
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
- type: picture-elements
|
- type: picture-elements
|
||||||
image: https://static.vecteezy.com/system/resources/previews/000/102/594/large_2x/free-floor-plan-vector.jpg
|
image: /local/floorplan.png
|
||||||
elements:
|
elements:
|
||||||
- type: state-icon
|
- type: state-icon
|
||||||
tap_action: toggle
|
tap_action: toggle
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user