Picture Glance Card


The Picture Glance card shows an image and corresponding entity states as an icon. The entities on the right side allow toggle actions, others show the more information dialog.

Picture glance card for a living room Picture glance card for a living room.

Configuration Variables

typestringRequired

picture-glance

entitieslistRequired

List of entities or entity objects.

titlestring(Optional)

The card title.

imagestring(Optional)

Background image URL.

camera_imagestring(Optional)

Camera entity as Background image.

camera_viewstring(Optional, default: auto)

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

state_imagemap(Optional)

Background image based on entity state.

statestring(Optional)

state: image-url, check the example below.

state_filtermap(Optional)
aspect_ratiostring(Optional)

Forces the height of the image to be a ratio of the width. You may enter a value such as: 16x9, 16:9, 1.78.

entitystring(Optional)

Entity to use for state_image and state_filter.

show_stateboolean(Optional, default: true)

Show entity state-text.

themestring(Optional)

Set to any theme within themes.yaml

tap_actionmap(Optional)

Action taken on card tap. See action documentation.

hold_actionmap(Optional)

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

double_tap_actionmap(Optional)

Action taken on card double tap. See action documentation.

Options For Entities

If you define entities as objects instead of strings, you can add more customization and configuration:

Configuration Variables

entitystringRequired

Home Assistant entity ID.

attributestring(Optional)

Attribute of the entity to display instead of the state

prefixstring(Optional)

Prefix to display before the attribute’s value

suffixstring(Optional)

Suffix to display after the attribute’s value

iconstring(Optional)

Overwrites default icon.

show_stateboolean(Optional, default: true)

Show entity state-text.

tap_actionmap(Optional)

Action taken on card tap. See action documentation.

hold_actionmap(Optional)

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

double_tap_actionmap(Optional)

Action taken on card double tap. See action documentation.

Options For Exemptions

Configuration Variables

userstringRequired

User id that can see the view tab.

How to use state_filter

Specify different CSS filters

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

Examples

type: picture-glance
title: Living room
entities:
  - switch.decorative_lights
  - light.ceiling_lights
  - lock.front_door
  - binary_sensor.movement_backyard
  - binary_sensor.basement_floor_wet
image: /local/living_room.png

Display a camera image as background:

type: picture-glance
title: Living room
entities:
  - switch.decorative_lights
  - light.ceiling_lights
camera_image: camera.demo_camera

Display a camera image without additional entities:

type: picture-glance
title: Front garden
entities: []
camera_image: camera.front_garden_camera

Use different images based on entity state:

type: picture-glance
title: Living room
entities:
  - switch.decorative_lights
  - light.ceiling_lights
state_image:
  "on": /local/living_room_on.png
  "off": /local/living_room_off.png
entity: group.living.room