本帖最后由 gasment 于 2025-12-2 15:51 编辑
之前做过一版这种卡片，分享一个简单开关功能的电器控制卡片，button-card+card_mod - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
用的是button-card+card_mod实现，样式比较单一
这次用自制卡片重制了一个，全部使用我的自制卡片实现
卡片预览：
- 目前做了4个除开关按钮之外的额外选项，亮度控制、定时器、风速档位、耗电统计
- 关闭的样子
- 这版在卡片大小自适应方面下了大功夫，在不同屏幕宽度的设备上，卡片大小会根据特定比例自动缩放，确保在不同设备上的表现一致
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
]]]
- 使用一个基准屏幕宽度（350px），并在这个基准宽度下制作固定尺寸的卡片元素，通过innerWidth （视口宽度）与基准屏幕宽度的比值来动态放大元素，来实现比transfrorm scale更完善的等比缩放方案，缺点是使用的卡片styles都需要支持动态模板数值
下面开始操作：
1、先安装好上述4个自制卡片
PS:示例中用到的图标文件：
2、下载单卡片模板配置
3、将模板内容插入到仪表盘原始配置的views配置前，注意检查配置缩进格式
4、新建卡片，使用以下示例配置（需要修改的地方以及修改方法已经用注释标出）
type: custom:grid-template-card
template: muti_option_control_card
variables:
main_entity: light.ac8c46a90626_light #灯、开关等实体id
option_show_state: "on" #当上面的实体为何种状态，才显示选项
option_brightness: true #启用亮度选项，适用于light实体
option_timeseter: false #启用定时选项
option_fan_level: false #启用风速选项，适用于select实体
option_power_cost: false #启用耗电统计选项，适用于插座
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
main_name: 示例灯 #主名称文本
main_icon_on: /local/ui_v3/apng_webp_icon/control_card/light/down_light_on.svg #主图标，实体状态为option_show_state时应用
main_icon_off: /local/ui_v3/apng_webp_icon/control_card/light/down_light_off.svg #主图标，实体状态【不为】option_show_state时应用
auto_flow_switch: switch.1fke_ting_wai_tong_deng_zi_dong_hua_fen_kong #自动化流的开关实体,如没有，设置为auto_flow_switch： 无
auto_flow_icon_on: /local/ui_v3/apng_webp_icon/control_card/light/light_auto.svg #如没有自动化流开关，直接删掉此配置
auto_flow_icon_off: /local/ui_v3/apng_webp_icon/control_card/light/light_manual.svg #同上
#styles:
#card:
#- margin: auto #让单个卡片水平锤子居中
custom_grid_areas:
switch: #开关选项配置
card:
type: custom:grid-button-card
variables:
main_entity: light.ac8c46a90626_light #用于开关的实体id
left_button_name: 开 #左边按钮的名字
left_button_sync_state: "on" #左边按钮的操作
left_button_confirm: true #左边按钮的二次确认弹窗
left_button_highlight: rgb(255,206,84) #左边按钮高亮时的颜色
right_button_name: 关 #右边按钮的名字
right_button_sync_state: "off" #右边按钮的操作
right_button_confirm: true #右边按钮的二次确认弹窗
right_button_highlight: rgb(192,203,216) #右边按钮高亮时的颜色
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
sync_state_delay: 1000 #如果你的开关实体反应特别慢，可以加大这个值，单位毫秒
#option: null #如果不需要选项，直接配置为option: null，然后删掉option: null以下的所有配置
option:
card:
type: custom:grid-template-card
custom_grid_areas:
#brightness: null #如果不需要亮度选项，直接配置为brightness: null，然后删掉brightness的所有配置
brightness:
card:
type: custom:slider-mod-card
variables:
main_entity: light.ac8c46a90626_light #灯实体id
slider_icon: /local/ui_v3/apng_webp_icon/control_card/light/brightness.svg #滑块图标路径
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
#brightness配置到此结束
#timeset: null #如果不需要定时器选项，直接配置为timeset: null，然后删掉timeset的所有配置
timeset:
card:
type: custom:countdown-mod-card
timer_entity: timer.ji_shi_qi_test #计时器实体，如何配置timer实体，参考countdown-mod-card的用法说明
variables:
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
title: 定时关 #定时器标题
hour_sensitivity: 5 #小时部分的滑动灵敏度
minute_sensitivity: 1 #分钟部分的滑动灵敏度
hour_step: 1 #小时部分的滑动步进
minute_step: 5 #分钟部分的滑动步进
start_icon: /local/ui_v3/apng_webp_icon/countdown_card/start.svg #开始按钮图标路径
stop_icon: /local/ui_v3/apng_webp_icon/countdown_card/stop.svg #开停止按钮图标路径
#timeset配置到此结束
#fan_level: null #如果不需要风速选项，直接配置为fan_level: null，然后删掉fan_level的所有配置
fan_level:
card:
type: custom:grid-button-card
variables:
select_entity: select.cc4d75170b89_fan_level #风速档位选项实体
option_1: Level1 #选项1的值，这个值需要与select实体的option值严格一致
option_1_icon: /local/ui_v3/apng_webp_icon/control_card/fan/level1.svg #选项一的图标
option_2: Level2 #选项2的值
option_2_icon: /local/ui_v3/apng_webp_icon/control_card/fan/level2.svg #选项二的图标
option_3: Level3 #选项3的值
option_3_icon: /local/ui_v3/apng_webp_icon/control_card/fan/level3.svg #选项三的图标
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
sync_state_delay: 1000 #同步延迟，如果你的实体反应特别慢，可以加大这个值，单位毫秒
#fan_level配置到此结束
#power_cost: null #如果不需要耗电统计选项，直接配置为power_cost: null，然后删掉power_cost的所有配置
power_cost:
card:
type: custom:grid-template-card
variables:
power_entity: sensor.cuco_cp2d_b5cf_electric_power #实时功率实体
power_cost_daliy_entity: sensor.cuco_cp2d_b5cf_power_cost_today #日耗电实体
power_cost_monthly_entity: sensor.cuco_cp2d_b5cf_power_cost_month #月耗电实体
icon: /local/ui_v3/apng_webp_icon/control_card/plug/power.svg #图标路径
#power_cost配置到此结束
5、编辑完成后，打开F12控制台，刷新一下，留意有没有刷出来模板错误信息，大量模板错误会导致浏览器卡死，注意检查配置书写
PS:4连装卡片模板：,同样插入到原始配置
4连装卡片配置示例：
type: custom:grid-template-card
template: 2_columns_layout_card
variables:
dynamic_rate: |
[[[
var base_screen_width = 350
if (window.innerWidth > 500){
var rate = 500 / base_screen_width
} else {
var rate = window.innerWidth / base_screen_width
}
return Math.round(rate *100) /100
//return 1;
]]]
custom_grid_areas:
column1:
card:
type: custom:grid-template-card
styles:
grid:
- grid-template-areas: | #行数布局
"card1"
"card2"
custom_grid_areas:
card1:
card:
#接第一列第一行卡片yaml
card2:
card:
#接第一列第二行卡片yaml
column2:
card:
type: custom:grid-template-card
styles:
grid:
- grid-template-areas: | #行数布局
"card1"
"card2"
custom_grid_areas:
card1:
card:
#接第二列第一行卡片yaml
card2:
card:
#接第二列第二行卡片yaml
✅以上~ | 
发表于 
