A few words about actions:
Consider this example:
- type: picture-elements
image: /local/images/test/transparent_1920_1080.png
elements:
- type: image
entity: zone.home
style:
top: 0%
left: 0%
transform: translate(0,0)
image: /local/images/test/lightgreen_1.jpg
- type: state-label
entity: sun.sun
style:
top: 20%
left: 20%
- type: icon
icon: mdi:car
style:
top: 20%
left: 60%
tap_action:
action: navigate
navigation_path : /developer-tools/yaml
- type: state-icon
entity: input_boolean.test_boolean
style:
top: 50%
left: 10%
- type: icon
icon: mdi:link
style:
top: 50%
left: 70%
tap_action:
action: url
url_path : http://google.com
- type: icon
icon: mdi:circle
style:
top: 50%
left: 90%
tap_action:
action: call-service
service: input_boolean.toggle
data:
entity_id: input_boolean.test_boolean
- type: service-button
title: Toggle boolean
style:
top: 75%
left: 30%
service: input_boolean.toggle
service_data:
entity_id: input_boolean.test_boolean
Here each element has an associated action:
– the “image” element - used to “mimic” the card’s main image (it covers the whole card - described here & here); the main image itself cannot have an action associated;
– the “state-label” element has a default “more-info” action;
– two “icon” elements have “navigate” & “url” actions;
– another “icon” element uses “input_boolean.toggle” service call;
– the “state-icon” element has a default “more-info” action;
– the “service-button” element uses “input_boolean.toggle” service call.
Next, imagine that an additional layer should be added into the card (in case of a floorplan - could be a dark room mask). To prevent overlapping other elements, this layer must be added BELOW other elements (which may be overlapped otherwise):
- type: picture-elements
image: /local/images/test/transparent_1920_1080.png
elements:
- type: image
entity: zone.home
....
- type: image
style:
top: 0%
left: 0%
transform: translate(0,0)
pointer-events: none
image: /local/images/test/transparent_mask.png
- type: state-label
...
...
Note a “pointer-events: none” style which makes this layer “transparent”, i.e. here an action for the 1st image element is executed.
Regarding “service-button”.
It is used to call a service - so it cannot be used to show “more-info”, navigate or follow url.
If you need to have a “service-button” to execute of of these actions - you may “mimic” this element by a “state-label” element:
Here “service-button” on the right, “state-label” on the left.
Add this element:
- type: state-label
entity: input_text.test_text
style:
top: 75%
left: 60%
color: var(--primary-color)
text-transform: uppercase
font-family: var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif))
font-weight: var(--mdc-typography-button-font-weight,500)
letter-spacing: var(--mdc-typography-button-letter-spacing,0.0892857em)
font-size: var(--mdc-typography-button-font-size,0.875rem)
tap_action:
...
Here CSS values are same as used for the “service-button” element and may be changed in some HA version, so use this method on your own risk.