Picture Elements Card


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 A functional floorplan powered by picture elements.

Configuration Variables

type

(string)(Required)picture-elements

image

(string)(Required)The URL of an image.

elements

(list)(Required)List of elements

title

(string)(Optional)Card title

Elements

State Badge

Configuration Variables

type

(string)(Required)state-badge

entity

(string)(Required)Entity id

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Icon representing an entity state

Configuration Variables

type

(string)(Required)state-icon

entity

(string)(Required)The entity id to use.

tap_action

(string)(Optional)more-info, toggle, navigate, call-service

Default value: more-info

hold_action

(string)(Optional)Action to perform when clicked-and-held (e.g., more-info, toggle, navigate, call-service).

Default value: none

navigation_path

(string)(Optional)Url path to navigate to (e.g., /lovelace/1)

service

(string)(Optional)Service to call (e.g., light.turn_on)

service_data

(object)(Optional)The service data to use.

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Label with state text

Configuration Variables

type

(string)(Required)state-label

entity

(string)(Required)Entity id

prefix

(string)(Optional)Text before entity state.

suffix

(string)(Optional)Text after entity state.

tap_action

(string)(Optional)more-info, toggle, navigate, call-service

Default value: more-info

hold_action

(string)(Optional)Action to perform when clicked-and-held (e.g., more-info, toggle, navigate, call-service).

Default value: none

navigation_path

(string)(Optional)Url path to navigate to (e.g., /lovelace/1)

service

(string)(Optional)Service to call (e.g., light.turn_on)

service_data

(object)(Optional)The service data to use.

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Service Call Button

Configuration Variables

type

(string)(Required)service-button

title

(string)(Required)Button label

service

(string)(Required)light.turn_on

service_data

(object)(Optional)The service data to use.

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Icon Element

Configuration Variables

type

(string)(Required)icon

icon

(string)(Required)Icon to display (e.g., mdi:home)

title

(string)(Optional)Icon tooltip.

entity

(string)(Optional)Entity to use for more-info/toggle

tap_action

(string)(Optional)more-info, toggle, navigate, call-service

Default value: more-info

hold_action

(string)(Optional)Action to perform when clicked-and-held (e.g., more-info, toggle, navigate, call-service).

Default value: none

navigation_path

(string)(Optional)Url path to navigate to (e.g., /lovelace/1)

service

(string)(Optional)Service to call (e.g., light.turn_on)

service_data

(object)(Optional)The service data to use.

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Image Element

Configuration Variables

type

(string)(Required)image

entity

(string)(Optional)Entity to use for state_image and state_filter and also target for actions.

tap_action

(string)(Optional)none, more-info, toggle, navigate, call-service

Default value: more-info

hold_action

(string)(Optional)Action to perform when clicked-and-held (e.g., more-info, toggle, navigate, call-service).

Default value: none

navigation_path

(string)(Optional)Url path to navigate to (e.g., /lovelace/1)

service

(string)(Optional)Service to call (e.g., light.turn_on)

service_data

(object)(Optional)The service data to use.

image

(string)(Optional)The image to display.

camera_image

(string)(Optional)A camera entity.

state_image

(object)(Optional)State-based images

filter

(string)(Optional)Default CSS filter

state_filter

(object)(Optional)State-based CSS filters

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

Custom Elements

Configuration Variables

type

(string)(Required)Card name with custom: prefix (e.g., custom:my-custom-card)

style

(object)(Required)Position and style the element using CSS.

Default value: position: absolute, transform: translate(-50%, -50%)

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.

How to use the style object

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

How to use state_image

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

How to use state_filter

Specify different CSS filters

state_filter:
  "on": brightness(110%) saturate(1.2)
  "off": brightness(50%) hue-rotate(45deg)

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 half a second or more. 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.

tap_action: toggle
hold_action: call-service
service: light.turn_on
service_data:
  entity_id: light.bed_light
  brightness_pct: 100

Example

- 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%

Images Example

- 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%