Picture Elements Card


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

Configuration Variables

type stringRequired

picture-elements

image stringRequired

The URL of an image.
To use a locally hosted image, see Hosting.

camera_image string(Optional)

A camera entity.

camera_view string(Optional, default: auto)

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

elements listRequired

List of elements

title string(Optional)

Card title

state_filter map(Optional)
theme string(Optional)

Set to any theme within themes.yaml

Elements

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:

State Badge

This element creates a badge representing the state of an entity.

Configuration Variables

type stringRequired

state-badge

entity stringRequired

Entity id

style mapRequired

Position and style the element using CSS.

Default:

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

title string(Optional)

State badge tooltip. Set to null to hide.

tap_action map(Optional)

Action taken on card tap. See action documentation.

hold_action map(Optional)

Action taken on card tap and hold. See action documentation.

double_tap_action map(Optional)

Action taken on card double tap. See action documentation.

State Icon

This element represents an entity state using an icon.

Configuration Variables

type stringRequired

state-icon

entity stringRequired

The entity id to use.

icon string(Optional)

Overwrites icon.

title string(Optional)

Icon tooltip. Set to null to hide.

state_color boolean(Optional, default: true)

Set to true to have icons colored when entity is active

tap_action map(Optional)

Action taken on card tap. See action documentation.

hold_action map(Optional)

Action taken on card tap and hold. See action documentation.

double_tap_action map(Optional)

Action taken on card double tap. See action documentation.

style stringRequired

Position and style the element using CSS.

Default:

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

State Label

This element represents an entity’s state via text.

Configuration Variables

type stringRequired

state-label

entity stringRequired

Entity id

attribute string(Optional)

If present, the corresponding attribute will be shown, instead of the entity’s state

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 taken on card tap. See action documentation.

hold_action map(Optional)

Action taken on card tap and hold. See action documentation.

double_tap_action map(Optional)

Action taken on card double tap. See action documentation.

style stringRequired

Position and style the element using CSS.

Default:

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

Service Call Button

This entity creates a button (with arbitrary text) that can be used to call a service.

Configuration Variables

type stringRequired

service-button

title stringRequired

Button label

service stringRequired

light.turn_on

service_data map(Optional)

The service data to use.

style stringRequired

Position and style the element using CSS.

Default:

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

Icon Element

This element creates a static icon that is not linked to the state of an entity.

Configuration Variables

type stringRequired

icon

icon stringRequired

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 taken on card tap. See action documentation.

hold_action map(Optional)

Action taken on card tap and hold. See action documentation.

double_tap_action map(Optional)

Action taken on card double tap. See action documentation.

style stringRequired

Position and style the element using CSS.

Default:

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

Image Element

This creates an image element that overlays the background image.

Configuration Variables

type stringRequired
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 taken on card tap. See action documentation.

hold_action map(Optional)

Action taken on card tap and hold. See action documentation.

double_tap_action map(Optional)

Action taken on card double tap. See action documentation.

image string(Optional)

The image to display.

camera_image string(Optional)

A camera entity.

camera_view string(Optional, default: auto)

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

state_image map(Optional)
filter string(Optional)

Default CSS filter

state_filter map(Optional)
aspect_ratio string(Optional, default: 50%)

Height-width-ratio.

style stringRequired

Position and style the element using CSS.

Default:

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 stringRequired

conditional

conditions listRequired

List of entity IDs and matching states.

entity stringRequired

Home Assistant entity ID.

state string(Optional)

Entity state is equal to this value.*

state_not string(Optional)

Entity state is unequal to this value.*

elements listRequired

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

Custom Elements

The process for creating and referencing custom elements is the same as for custom cards. Please see the developer documentation for more information.

Configuration Variables

type stringRequired

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

style stringRequired

Position and style the element using CSS.

Default:

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

Options For Exemptions

Configuration Variables

user stringRequired

User id that can see the view tab.

Notes on Element Attributes

How to use the style object

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

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

Examples

Example of icons, labels and buttons

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%

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%