layout | title | sidebar_label | description | date | sidebar | comments | sharing | footer |
---|---|---|---|---|---|---|---|---|
page |
Picture Elements Card |
Picture Elements |
Picture elements card is one of the most versatile type of cards |
2018-07-01 10:28 +00:00 |
true |
false |
true |
true |
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 with no restrictions!
A functional floorplan powered by picture elements.
{% configuration %} type: required: true description: picture-elements type: string image: required: true description: The URL of an image. type: string elements: required: true description: List of elements type: list title: required: false description: Card title type: string {% endconfiguration %}
{% configuration %} type: required: true description: state-badge type: string entity: required: true description: Entity id type: string style: required: true description: Position and style the element using CSS. type: object default: "position: absolute, transform: translate(-50%, -50%)" {% endconfiguration %}
{% configuration %}
type:
required: true
description: state-icon
type: string
entity:
required: true
description: The entity id to use.
type: string
tap_action:
required: false
description: more-info, toggle, navigate, call-service
type: string
default: more-info
navigation_path:
required: false
description: Url path to navigate to (e.g. /lovelace/1
)
type: string
service:
required: false
description: "Service to call (e.g. 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
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
{% configuration %}
type:
required: true
description: state-label
type: string
entity:
required: true
description: Entity id
type: string
prefix:
required: false
description: Text before entity state.
type: string
suffix:
required: false
description: Text after entity state.
type: string
tap_action:
required: false
description: more-info, toggle, navigate, call-service
type: string
default: more-info
navigation_path:
required: false
description: Url path to navigate to (e.g. /lovelace/1
)
type: string
service:
required: false
description: "Service to call (e.g. 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
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
{% 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 default: "position: absolute, transform: translate(-50%, -50%)" {% endconfiguration %}
{% configuration %}
type:
required: true
description: icon
type: string
icon:
required: true
description: Icon to display (e.g. mdi:home
)
type: string
title:
required: false
description: Icon tooltip.
type: string
entity:
required: false
description: Entity to use for more-info/toggle
type: string
tap_action:
required: false
description: more-info, toggle, navigate, call-service
type: string
default: more-info
navigation_path:
required: false
description: Url path to navigate to (e.g. /lovelace/1
)
type: string
service:
required: false
description: "Service to call (e.g. 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
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
{% configuration %}
type:
required: true
description: image
type: string
entity:
required: false
description: Entity to use for state_image and state_filter and also target for actions.
type: string
tap_action:
required: false
description: none, more-info, toggle, navigate, call-service
type: string
default: more-info
navigation_path:
required: false
description: Url path to navigate to (e.g. /lovelace/1
)
type: string
service:
required: false
description: "Service to call (e.g. light.turn_on
)"
type: string
service_data:
required: false
description: The service data to use.
type: object
image:
required: false
description: The image to display.
type: string
camera_image:
required: false
description: A camera entity.
type: string
state_image:
required: false
description: 'State-based images'
type: object
filter:
required: false
description: Default CSS filter
type: string
state_filter:
required: false
description: 'State-based CSS filters'
type: object
style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
{% configuration %}
type:
required: true
description: 'Card name with custom:
prefix (e.g. custom:my-custom-card
)'
type: string
style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
The process for creating and referencing custom elements is the same as for custom cards. Please see the developer docs on creating custom cards for more information.
Position and style your elements using CSS. More/other keys are also possible.
style:
# Positioning of the element
left: 50%
top: 50%
# Overwrite color for icons
"--paper-item-icon-color": pink
Specify a different image to display based on the state of the entity.
state_image:
"on": /local/living_room_on.jpg
"off": /local/living_room_off.jpg
Specify different CSS filters
state_filter:
"on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg)
- type: picture-elements
image: /local/floorplan.png
elements:
- type: state-icon
tap_action: toggle
entity: light.ceiling_lights
style:
top: 47%
left: 42%
- type: state-icon
tap_action: toggle
entity: light.kitchen_lights
style:
top: 30%
left: 15%
- type: state-label
entity: sensor.outside_temperature
style:
top: 82%
left: 79%
- type: service-button
title: Turn lights off
style:
top: 95%
left: 60%
service: homeassistant.turn_off
service_data:
entity_id: group.all_lights
- type: icon
icon: mdi:home
tap_action: navigate
navigation_path: /lovelace/0
style:
top: 10%
left: 10%
- type: picture-elements
image: /local/floorplan.png
elements:
# state_image & state_filter - toggle on click
- type: image
entity: light.living_room
tap_action: toggle
image: /local/living_room.png
state_image:
"off": /local/living_room_off.png
filter: saturate(.8)
state_filter:
"on": brightness(120%) saturate(1.2)
style:
top: 25%
left: 75%
width: 15%
# Camera, red border, rounded-rectangle - show more-info on click
- type: image
entity: camera.driveway_camera
camera_image: camera.driveway_camera
style:
top: 5%
left: 10%
width: 10%
border: 2px solid red
border-radius: 10%
# Single image, state_filter - call-service on click
- type: image
entity: media_player.living_room
tap_action: call-service
service: media_player.media_play_pause
image: /local/television.jpg
filter: brightness(5%)
state_filter:
playing: brightness(100%)
style:
top: 40%
left: 75%
width: 5%