本帖最后由 gasment 于 2025-9-19 22:27 编辑
之前做的第一版：分享一个自用的小清新手机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: ##卡片内用到的实体都放进这里，以便卡片能及时更新
- entity.1
- entity.2
template: room_card_layout_template
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: | ##自动化总控的开关实体，修改以下2处
[[[
return states[`switch.entity`].state;
]]]
automation_switch: switch.entity
info: #信息区域配置
card:
type: custom:button-card
template: room_card_info_template
variables:
temperature_state: " · · · " #温度值，如果没有该类型传感器，可以直接显示···来占位，如有，参考humidity_state修改
illumination_state: | #以下修改亮度的判断阈值，或者直接返回数值
[[[
var illuminance = states[`sensor.illuminance`].state ##修改实体
if (illuminance > 20){
return "明亮"
} else if (illuminance <= 20) {
return "昏暗"
} else {
return "未知"
}
]]]
humidity_state: | #湿度值，如果没有该类传感器，参考temperature_state修改
[[[ return states[`sensor.humidity`].state +"%"]]] ##修改实体
occupation_state: | #人在传感改写
[[[
var occupation = states[`sensor.occupation`].state; ##修改实体
if (occupation === "on"){
return "有人"
} else if (occupation === "off"){
return "无人"
} else {
return "未知"
}
]]]
cam_state: | ##监控状态，如果没有，直接配置为cam_state: null
[[[
var cam = states[`sensor.cam`].state; ##修改实体
if (occupation === "on"){
if (cam1 === "online"){
return "on"
} else {
return "off"
}
]]]
door_state: | ##门磁状态，如果没有，直接配置为door_state: null
[[[
return states[`binary_sensor.e4aaec9dd329_contact`].state
]]]
custom_fields: #如果想点击按钮打开历史记录，可以如下配置对应实体，不设置则删掉对应条目
illumination:
card:
entity: sensor.illuminance
occupation:
card:
entity: sensor.occupation
temperature:
card:
entity: sensor.occupation
humidity:
card:
entity: sensor.occupation
cam:
card:
entity: sensor.cam
door:
card:
entity: sensor.occupation
#cam和door没有的话，可以像下面这样写，屏蔽掉图标
#cam:
#card:
#show_entity_picture: false
#styles:
#card:
#- background: rgb(244,236,220)
#door:
#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.ke_can_ting_deng_guang_zhuang_tai_tong_ji`].attributes.icon_path;]]]
#另外一种写法是：
#icon_path: >
# [[[
# var state = states[`your.enitty`].state #该实体反应统计数量，比如打开的灯数量
# return "/local/ui_v3/apng_webp_icon/room_card_icon/light_" + state + ".png"
# ]]]
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,可选light/ac/fan/plug/vacuum，更多的可以自己修改模板添加，主要作用于按钮背景色
device_state_or_num: > #统计或状态实体,接受参数为数字和状态，如0~9，空调为cool/heat/dry等，空调使用climate实体
[[[ return
states[`sensor.entity`].state]]]
bubble_card_pop_up_hash: "#1f_livingroom_light_ctl" #打开的bubble-card弹窗hash值
template: room_card_button_with_animation_icon #引用模板
b2: #其他按钮格式参考b1即可，按钮布局在上面grid里
card:
type: custom:button-card
b3:
card:
type: custom:button-card
图标资源：
如果你对我演示中的其他部件感兴趣
可以查阅我的其他帖子：
分享一个简单开关功能的电器控制卡片，button-card+card_mod - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
纯bubble-card制作的底部tapbar，动态图标 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
✅以上~
| 
发表于 2025-9-12 17:37:47
