本帖最后由 gasment 于 2025-9-12 17:37 编辑
之前做的第一版：分享一个自用的小清新手机UI房间卡片 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
第一版以实用为主，没什么花哨的东西，2.0版加上了一些动态效果和自定义图标元素，按钮数量也做了增加
动态演示:
静态讲解：
1、header，头部区域
由左上角一个按钮+一个房间图标组成
按钮为该房间的自动化总控开关，需要一个switch实体，至于怎么做个switch,大家八仙过海就行了
该按钮有一个二次确认的弹窗：
2、info，信息区域
可配置4个带数据状态的实体，和2个不带数据的实体
我这里固定为了温度、亮度、湿度、人在传感、门磁和监控，如果需要显示其他，可自行修改模板对应字段
其中门磁图和监控图标可根据on/off状态变换：
3、ctl，控制区（按钮区）
可配置 2,4,6个按钮3种布局，按钮根据控制的电器而定
我这里分类为灯类、空调、风扇类、插座（通断器）类，扫地机，分类按自己口味而定
点击按钮会拉起对应的bubble-card弹窗
图标会根据该分类下的开启数量或者电器状态来变化图标：
目前已制作的图标资源（部分为动态图标）：
灯类：
空调：
风扇类：
插座（通断器）类：
扫地机：
制作图标不易，希望大家帮顶，下文会分享全部用到的图标资源
下面开始操作：
先安装好button-card和card-mod,并确保他们正常工作
一、添加我的卡片模板代码到你的仪表盘
插入到views的前面，注意检查缩进格式
二、新建一个手动yaml卡片，插入房间卡代码：
按提示说明修改！！！！
type: custom:button-card
triggers_update:
- example.entity.1
- example.entity.2
- example.entity.3 #将此卡片用到的实体都按格式写到这里，保证状态变化时卡片及时刷新
variables:
button_number: 6 #按钮的数量，可选2、4、6
custom_fields:
header: #header区域配置
card:
type: custom:button-card
entity_picture: /local/ui_v3/apng_webp_icon/room_card_icon/header/livingroom.svg #房间图标路径
template: room_card_header_template
variables:
automation_status: |
[[[
return states[`switch.entity`].state;
]]]
automation_switch: switch.entity #自动化总控的switch实体，以上两处修改
info: #info区域配置
card:
type: custom:button-card
template: room_card_info_template
variables:
temperature_state: " · · · " #温度数值，如果你缺少这个传感器，可以像这样显示三个点来代替，如果有，就参考下面humidity_state的写法
illumination_state: | #亮度数值，可以做阈值判断返回文字，也可以直接输出数值，参考下面humidity_state的写法
[[[
var illuminance = states[`sensor.illuminance.entity`].state #注意修改实体
if (illuminance > 20){
return "明亮"
} else if (illuminance <= 20) {
return "昏暗"
} else {
return "未知"
}
]]]
humidity_state: | #湿度数值
[[[ return states[`sensor.humidity.entity`].state+" %"]]] #注意修改实体
occupation_state: | #人在传感状态，状态改写
[[[
var occupation = states[`binary_sensor.occupancy.entity`].state; #注意修改实体
if (occupation === "on"){
return "有人"
} else if (occupation === "off"){
return "无人"
} else {
return "未知"
}
]]]
cam_state: | #监控状态,如果没有，直接配置为cam_state: null
[[[
var cam = states[`sensor.cam.entity`].state
if (cam === "online"){
return "on"
} else {
return "off"
}
]]]
door_state: | #门磁状态，如果没有，直接配置为door_state: null
[[[
return states[`binary_sensor.contact.entity`].state
]]]
custom_fields: #如果需要点击info组件，打开历史记录，可如下配置对应的entity
illumination:
card:
entity: sensor.illuminance.entity
occupation:
card:
entity: sensor.occupation.entity
temperature:
card:
entity: sensor.temperature.entity
humidity:
card:
entity: sensor.humidity.entity
door:
card:
entity: sensor.door.entity
cam:
card:
entity: sensor.cam.entity
# door_state和cam_state如果配置为null,可以把图标屏蔽掉
#door:
#card:
#show_entity_picture: false
#styles:
#card:
#- background: rgb(244,236,220)
#cam:
#card:
#show_entity_picture: false
#styles:
#card:
#- background: rgb(244,236,220)
ctl: #按钮区域配置
card:
type: custom:button-card
styles:
card:
- padding: 0px
- border-radius: 0px
- background: rgba(0,0,0,0)
- box-shadow: none
grid:
- grid-template-areas: |
"emty b1 emty1 b2 emty2"
"emty b3 emty1 b4 emty2"
"emty b5 emty1 b6 emty2"
- grid-template-columns: 2% auto 8px auto 2%
- grid-template-rows: 68px 68px 68px
custom_fields: #不要动custom_fields以上的东西，除非你懂grid的作用，可用于配置大于6个按钮的布局
b1:
card:
type: custom:button-card
variables:
icon_path: > #图标路径，这里是灯类打开统计的自定义实体，其具有icon_path属性，其值能根据数量动态变化
[[[return
states[`sensor.统计实体`].attributes.icon_path;]]]
# icon_path: > #另一种写法，只有打开统计实体，可现场拼接路径
# [[[
# var count = states[`sensor.light_on_count`].state;
# var icon_path = "/local/ui_v3/apng_webp_icon/room_card_icon/light/light_" + count + ".png";
# return icon_path;
# ]]]
icon_width: 50px #图标宽度
icon_height: 50px #图标高度
icon_highlight_width: 50px #图标点亮时的宽度
icon_highlight_height: 50px #图标点亮时的高度
icon_highlight_margin_left: "-3px" #图标点亮时的左右偏移值
card_width: null #按钮宽度，不配置
card_height: 60px #按钮高度
device_type: light #按钮控制的电器类型，此处为灯，即light
device_state_or_num: > #灯的统计实体
[[[ return
states[`sensor.统计实体`].state]]]
bubble_card_pop_up_hash: "#1f_livingroom_light_ctl" #打开的bubble-card弹窗hash值
template: room_card_button_with_animation_icon #引用模板
#其他按钮配置参考以上即可，用的是同一个模板，不过有一点差异，下面会说明
b2:
card:
type: custom:button-card
variables:
icon_path: >
[[[return
"/local/ui_v3/apng_webp_icon/room_card_icon/ac/ac_off.png";]]]
icon_width: 55px
icon_height: 55px
icon_highlight_width: 60px
icon_highlight_height: 60px
icon_highlight_margin_left: null
card_width: null
card_height: 60px
device_type: ac #空调
device_state_or_num: | #配置空调的climate实体
[[[ return states[`climate.entity`].state]]]
bubble_card_pop_up_hash: "#2f_mainbedroom_ac_ctl"
template: room_card_button_with_animation_icon
b3:
card:
type: custom:button-card
variables:
icon_path: >
[[[return
"/local/ui_v3/apng_webp_icon/room_card_icon/fan/fan_0.png";]]]
icon_width: 47px
icon_height: 47px
icon_highlight_width: 50px
icon_highlight_height: 50px
icon_highlight_margin_left: "-3px"
card_width: null
card_height: 60px
device_type: fan #风扇类，如果你没有该类电器，又想预留按钮，统计类可以此处配置为0，状态类比如空调配置为off，与icon_path文件名对应
device_state_or_num: 0
bubble_card_pop_up_hash: "#1f_livingroom_fan_ctl"
template: room_card_button_with_animation_icon
b4:
card:
type: custom:button-card
variables:
icon_path: >
[[[return
states[`sensor.1lke_ting_cha_zuo_lei_da_kai_tong_ji`].attributes.icon_path;]]]
icon_width: 50px
icon_height: 50px
icon_highlight_width: 53px
icon_highlight_height: 53px
icon_highlight_margin_left: "-3px"
card_width: null
card_height: 60px
device_type: plug #插座类
device_state_or_num: > #修改统计实体
[[[ return
states[`sensor.统计实体`].state]]]
bubble_card_pop_up_hash: "#1f_livingroom_plug_ctl"
template: room_card_button_with_animation_icon
b5:
card:
type: custom:button-card
variables:
icon_path: >
[[[return
states[`sensor.1lsao_di_ji_zhuang_tai_icon`].attributes.icon_path;]]]
icon_width: 50px
icon_height: 50px
icon_highlight_width: 50px
icon_highlight_height: 50px
icon_highlight_margin_left: "-5px"
card_width: null
card_height: 60px
device_type: vacuum #扫地机
device_state_or_num: | #扫地机状态实体
[[[ return states[`sensor.扫地机状态`].state]]]
bubble_card_pop_up_hash: "#1f_livingroom_vacuum_ctl"
template: room_card_button_with_animation_icon
如果你对我演示中的其他部件感兴趣
可以查阅我的其他帖子：
分享一个简单开关功能的电器控制卡片，button-card+card_mod - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
纯bubble-card制作的底部tapbar，动态图标 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
✅以上~
| 
发表于 
