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

state_filter

(map)(Optional)

State-based CSS filters

theme

(string)(Optional)

Set to any theme within themes.yaml

Elements

State Badge

Configuration Variables

type

(string)(Required)

state-badge

entity

(string)(Required)

Entity id

style

(map)(Required)

Position and style the element using CSS.

Default value:

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

title

(string)(Optional)

State badge tooltip. Set to null to hide.

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

toggle

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

Icon representing an entity state

Configuration Variables

type

(string)(Required)

state-icon

entity

(string)(Required)

The entity id to use.

icon

(string)(Optional)

Overwrites icon.

title

(string)(Optional)

Icon tooltip. Set to null to hide.

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

style

(string)(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.

title

(string)(Optional)

Label tooltip. Set to null to hide.

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url,, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

style

(string)(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

(map)(Optional)

The service data to use.

style

(string)(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. Set to null to hide.

entity

(string)(Optional)

Entity to use for more-info/toggle

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

style

(string)(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.

title

(string)(Optional)

Image tooltip. Set to null to hide.

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g. /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g. https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g. media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

image

(string)(Optional)

The image to display.

camera_image

(string)(Optional)

A camera entity.

camera_view

(string)(Optional)

“live” will show the live view if stream is enabled.

Default value:

auto

state_image

(map)(Optional)

State-based images

filter

(string)(Optional)

Default CSS filter

state_filter

(map)(Optional)

State-based CSS filters

aspect_ratio

(string)(Optional)

Height-width-ratio.

Default value:

50%

style

(string)(Required)

Position and style the element using CSS.

Default value:

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

Conditional Element

Much like the Conditional card, this element will let you show its sub-elements based on entity states.

Configuration Variables

type

(string)(Required)

conditional

conditions

(list)(Required)

List of entity IDs and matching states.

entity

(string)(Required)

HA entity ID.

state

(string)(Optional)

Entity state is equal to this value.*

state_not

(string)(Optional)

Entity state is unequal to this value.*

elements

(list)(Required)

One or more elements of any type to show when conditions are met. See below for an example.

Options For Confirmation

If you define confirmation as an object instead of boolean, you can add more customization and configurations:

Configuration Variables

text

(string)(Optional)

Text to present in the confirmation dialog.

exemptions

(list)(Optional)

List of exemption objects. See below

Options For Exemptions

Configuration Variables

user

(string)(Required)

User id that can see the view tab.

Custom Elements

Configuration Variables

type

(string)(Required)

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

style

(string)(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.

tap_action:
  action: toggle
hold_action:
  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:
      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: 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%

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

Conditional Example

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%