Picture Glance Card


Show an image card and corresponding entity states as icon. The entities on the right side allow toggle actions, others show the more-info-dialog.

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

Configuration Variables

type

(string)(Required)

picture-glance

entities

(list)(Required)

List of entities or entity objects.

title

(string)(Optional)

The card title.

image

(string)(Optional)

Background image URL.

camera_image

(string)(Optional)

Camera entity as Background image.

camera_view

(string)(Optional)

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

Default value:

auto

state_image

(map)(Optional)

Background image based on entity state.

state

(string)(Optional)

state: image-url, check the example below.

state_filter

(map)(Optional)

State-based CSS filters

aspect_ratio

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

entity

(string)(Optional)

Entity to use for state_image.

show_state

(boolean)(Optional)

Show entity state-text.

Default value:

true

theme

(string)(Optional)

Set to any theme within themes.yaml

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

Options For Entities

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

Configuration Variables

entity

(string)(Required)

Home Assistant entity ID.

icon

(string)(Optional)

Overwrites default icon.

show_state

(boolean)(Optional)

Show entity state-text.

Default value:

true

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

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

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

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.

How to use state_filter

Specify different CSS filters

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

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