The Picture Elements card is one of the most versatile types of cards.
The cards allow 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.
The URL of an image.
To use a locally hosted image, see Hosting.
This image is used when the dark mode is activated and no state image is set.
Elements are the active components (icons, badges, buttons, text, etc.) that overlay the image.
There are several different element types that can be added to a Picture Elements card:
This element creates a badge representing the state of an entity.
This element represents an entity state using an icon.
true to have icons colored when entity is active
This element represents an entity’s state via text.
If present, the corresponding attribute will be shown, instead of the entity’s state
This entity creates a button (with arbitrary text) that can be used to call a service.
This element creates a static icon that is not linked to the state of an entity.
This creates an image element that overlays the background image.
Entity to use for state_image and state_filter and also target for actions.
Much like the Conditional card, this element will let you show its sub-elements based on entity states.
List of entity IDs and matching states.
The process for creating and referencing custom elements is the same as for custom cards. Please see the developer documentation for more information.
Position and style your elements using CSS. More/other keys are also possible. Note, the default style for most elements includes translate(-50%, -50%), which means that the coordinates you provide will set the position of the center of the element.
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)
If the option
hold_action is specified, that action will be performed when the entity is clicked and held for half a second or more.
tap_action: action: toggle hold_action: action: call-service service: light.turn_on service_data: entity_id: light.bed_light brightness_pct: 100
type: picture-elements image: /local/floorplan.png elements: - type: state-icon tap_action: action: toggle entity: light.ceiling_lights style: top: 47% left: 42% - type: state-icon tap_action: action: toggle entity: light.kitchen_lights style: top: 30% left: 15% - type: state-label entity: sensor.outside_temperature style: top: 82% left: 79% - type: state-label entity: climate.kitchen attribute: current_temperature suffix: "°C" style: top: 33% left: 15% - 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: 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: 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: action: call-service service: media_player.media_play_pause service_data: entity_id: media_player.living_room image: /local/television.jpg filter: brightness(5%) state_filter: playing: brightness(100%) style: top: 40% left: 75% width: 5%
type: picture-elements image: /local/House.png elements: # conditionally show TV off button shortcut when dad's away and daughter is home - type: conditional conditions: - entity: sensor.presence_daughter state: 'home' - entity: sensor.presence_dad state: 'not_home' elements: - type: state-icon entity: switch.tv tap_action: action: toggle style: top: 47% left: 42%