图片元素卡片
图片元素卡片是最多功能的卡片类型之一。
由图片元素驱动的功能性平面图。
该卡片允许你基于坐标在图像上放置图标、文本甚至按钮。想象一下平面图，想象一下没有限制的图片概览！
要将图片元素卡片添加到你的用户界面：
-
在屏幕右上角，选择编辑 按钮。
- 如果这是你第一次编辑仪表板，编辑仪表板对话框会出现。
- 通过编辑仪表板，你将接管这个仪表板的控制权。
- 这意味着当新的仪表板元素可用时，它将不再自动更新。
- 一旦你接管控制权，你将无法让这个特定的仪表板恢复自动更新。但是，你可以创建一个新的默认仪表板。
- 要继续，在对话框中，选择三点 菜单，然后选择接管控制。
- 如果这是你第一次编辑仪表板，编辑仪表板对话框会出现。
-
添加卡片并自定义操作和功能 到你的仪表板。
YAML 配置
当你使用 YAML 模式或只是更喜欢在 UI 中的代码编辑器中使用 YAML 时，以下 YAML 选项可用。
配置变量
type 字符串 必填
picture-elements
image_entity 字符串 (可选)
要显示的图像或人员实体。
camera_image 字符串 (可选)
摄像头实体。
camera_view 字符串 (可选，默认：auto)
"live"将在启用stream时显示实时视图。
elements 列表 必填
元素列表。
title 字符串 (可选)
卡片标题。
state_filter 映射 (可选)
theme 字符串 (可选)
使用任何已加载的主题覆盖此卡片的主题。有关主题的更多信息，请参阅前端文档。
dark_mode_image 字符串 (可选)
当启用暗模式且未设置状态图像时使用此图像。
dark_mode_filter 字符串 (可选)
当启用暗模式时使用此CSS过滤器。
元素
元素是覆盖图像的活动组件（图标、徽章、按钮、文本等）。
可以添加到图片元素卡片的几种不同元素类型：
- 状态徽章
- 状态图标
- 状态标签
- 执行操作按钮
- 图标
- 图像
- 条件
- 自定义
状态徽章
此元素创建表示实体状态的徽章。
配置变量
type 字符串 必填
state-badge
entity 字符串 必填
实体ID。
title 字符串 (可选)
状态徽章工具提示。设置为null以隐藏。
tap_action 映射 (可选)
点击卡片时执行的操作。参见操作文档。
hold_action 映射 (可选)
点击并按住时执行的操作。参见操作文档。
double_tap_action 映射 (可选)
双击时执行的操作。参见操作文档。
状态图标
此元素使用图标表示实体状态。
配置变量
type 字符串 必填
state-icon
entity 字符串 必填
要使用的实体ID。
icon 字符串 (可选)
覆盖图标。
title 字符串 (可选)
状态徽章工具提示。设置为null以隐藏。
state_color 布尔值 (可选，默认值：true)
设置为true使实体激活时图标着色。
tap_action 映射 (可选)
点击卡片时执行的操作。参见操作文档。
hold_action 映射 (可选)
点击并按住时执行的操作。参见操作文档。
double_tap_action 映射 (可选)
双击时执行的操作。参见操作文档。
状态标签
此元素通过文本表示实体的状态。
配置变量
type 字符串 必填
state-label
entity 字符串 必填
实体ID。
attribute 字符串 (可选)
如果存在，将显示相应的属性，而不是实体的状态。
prefix 字符串 (可选)
实体状态前的文本。
suffix 字符串 (可选)
实体状态后的文本。
title 字符串 (可选)
状态徽章工具提示。设置为null以隐藏。
tap_action 映射 (可选)
点击卡片时执行的操作。参见操作文档。
hold_action 映射 (可选)
点击并按住时执行的操作。参见操作文档。
double_tap_action 映射 (可选)
双击时执行的操作。参见操作文档。
执行操作按钮
此实体创建一个按钮（带有任意文本），可用于执行操作。
配置变量
type 字符串 必填
state-button
title 字符串 必填
按钮标签。
action 字符串 必填
light.turn_on
target 映射 (可选)
用于操作的目标。
data 映射 (可选)
用于操作的数据。
图标元素
此元素创建一个不链接到实体状态的静态图标。
配置变量
type 字符串 必填
icon
icon 字符串 必填
要显示的图标（例如，mdi:home）。
title 字符串 (可选)
图标工具提示。设置为null以隐藏。
entity 字符串 (可选)
用于更多信息/切换的实体。
tap_action 映射 (可选)
点击卡片时执行的操作。参见操作文档。
hold_action 映射 (可选)
点击并按住时执行的操作。参见操作文档。
double_tap_action 映射 (可选)
双击时执行的操作。参见操作文档。
图像元素
这会创建一个覆盖背景图像的图像元素。
配置变量
type 字符串 必填
image
entity 字符串 (可选)
用于state_image和state_filter以及操作目标的实体。
title 字符串 (可选)
图像工具提示。设置为null以隐藏。
tap_action 映射 (可选)
点击卡片时执行的操作。参见操作文档。
hold_action 映射 (可选)
点击并按住时执行的操作。参见操作文档。
double_tap_action 映射 (可选)
双击时执行的操作。参见操作文档。
image 字符串 (可选)
要显示的图像。
camera_image 字符串 (可选)
摄像头实体。
camera_view 字符串 (可选，默认：auto)
"live"将在启用stream时显示实时视图。
state_image 映射 (可选)
filter 字符串 (可选)
默认值：当实体状态为off时为grayscale(100%)。设置为none以移除此项。
state_filter 映射 (可选)
aspect_ratio 字符串 (可选，默认值：50%)
强制图像的高度为宽度的比例。有效格式：高度百分比值（23%）或以冒号或"x"分隔符表示的比例（16:9或16x9）。对于比例，可以省略第二个元素，默认为"1"（1.78等于1.78:1）。
条件元素
与条件卡片类似，此元素将让你根据实体状态显示其子元素。
配置变量
type 字符串 必填
conditional
conditions 列表 必填
实体ID和匹配状态列表。
entity 字符串 必填
实体ID。
state 字符串 (可选)
实体状态等于此值。*
state_not 字符串 (可选)
实体状态不等于此值。*
elements 列表 必填
在满足条件时显示的列出类型中的一个或多个元素。请参见下面的示例。
自定义元素
创建和引用自定义元素的过程与自定义卡片相同。请参阅开发者文档获取更多信息。
配置变量
type 字符串 必填
带有custom:前缀的卡片名称（例如，custom:my-custom-card）。
元素属性注意事项
如何使用style对象
使用CSS定位和样式化你的元素。可能有更多/其他键。注意，大多数元素的默认样式包括translate(-50%, -50%)，这意味着你提供的坐标将设置元素中心的位置。使用transform: none禁用此行为。
style:
# 元素的定位
left: 50%
top: 50%
如何使用state_image
基于实体的状态指定显示不同的图像。
state_image:
"on": /local/living_room_on.jpg
"off": /local/living_room_off.jpg
如何使用state_filter
指定不同的CSS过滤器
state_filter:
"on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg)
如何使用点击并按住
如果指定了hold_action选项，当实体被点击并按住半秒或更长时间时，将执行该操作。
tap_action:
action: toggle
hold_action:
action: perform-action
perform_action: light.turn_on
data:
entity_id: light.bed_light
brightness_pct: 100
示例
图标、标签和按钮示例
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: action-button
title: Turn lights off
style:
top: 95%
left: 60%
action: homeassistant.turn_off
target:
entity_id: group.all_lights
- type: icon
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/0
style:
top: 10%
left: 10%
图像示例
type: picture-elements
image: /local/floorplan.png
elements:
# state_image 和 state_filter - 点击切换
- 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%
# 摄像头，红色边框，圆角矩形 - 点击显示更多信息
- 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%
# 单个图像，state_filter - 点击执行操作
- type: image
entity: media_player.living_room
tap_action:
action: perform-action
perform_action: media_player.media_play_pause
target:
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%
条件示例
type: picture-elements
image: /local/House.png
elements:
# 当爸爸不在家而女儿在家时有条件地显示电视关闭按钮快捷方式
- 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%