本帖最后由 hungheo 于 2025-6-26 16:21 编辑
button card 使用
所有template都在附件中,button card 默认的tap_action是toggle,如果不是可以开关的类型,记得修改一下,不然会报错(有些地方可能我没修改)。
可以参考我的另外的帖子:https://bbs.hassbian.com/thread-26299-1-1.html
1、房间卡片
variables最好都写完,如果没有的填写null,示例如下:
type: custom:button-card
entity: sensor.devices_count_light_all #主ID
template: rooms_template
variables:
room_name: 客厅
room_path: "#keting_control" #控制类弹出窗口路径
background_image: url('/local/home_picture/keting.jpg') #卡片背景图片
temperature: sensor.a4c138d5271a_temperature #温度
humidity: sensor.a4c138d5271a_humidity #湿度
light_entity: sensor.devices_count_light_keting #房间开灯统计
light_path: "#keting_light" #灯弹出窗口路径
move_entity: binary_sensor.esp32_keting_presence #人体传感
move_path: "#keting_move" #人体传感弹出窗口路径
havc_entity: climate.qdhkl_cn_proxy_532016519_0103_ac #空调
2、户型图预览
需要设置总宽高,里面的每个房间大小和动画可以根据总宽高等比例放大缩小
type: custom:button-card
template: floorplan #模板名称
variables:
entities:
zhuwo: #房间名称
- entity: binary_sensor.esp32_2450_presence #触发实体名称,没有的可以不写
path: "#zhuwo_move" #点击跳转路径,没有的可以不写
keting:
- entity: binary_sensor.esp32_keting_presence
path: "#keting_move"
zhuwei:
- entity: binary_sensor.d4f0ead95521_occupancy
path: "#zhuwei_move"
kewei:
- entity: binary_sensor.a4c138419493_occupancy
path: "#kewei_move"
chufang:
- entity: binary_sensor.ccb5d1f2b505_occupancy
path: "#chufang_move"
width: 300 #宽度 ,每个房间的尺寸和动画范围根据这个动态调整
height: 300 # 高度,每个房间的尺寸和动画范围根据这个动态调整
accent_color: var(--amber-color) #触发高亮颜色,默认是var(--accent-color),可以不写
3、天气卡片
需要自己准备图标(需要修改图标路径)
天气的集成用的是https://github.com/hasscc/tianqi,跟和风天气一样的用
4、温湿度
背景根据不同的数值会有不同的颜色
可以根据温湿度entity的后缀识别是温度还是湿度数据,无需修改template
引用:
type: custom:button-card
template: floorplan_en
variables:
entities:
zhuwo:
- entity: sensor.a4c13823df0b_temperature
keting:
- entity: sensor.a4c138d5271a_temperature
daciwo:
- entity: sensor.a4c1387d255a_temperature
xiaociwo:
- entity: sensor.a4c138dfe30d_temperature
zhuwei:
- entity: sensor.0x00158d000444b5af_temperature
kewei:
- entity: sensor.0x00158d000444b6a2_temperature
width: 184
height: 184
button_card_template代码:
5、隐藏顶部菜单栏及调出侧边栏
手机APP默认是收起侧边栏的,隐藏顶部菜单栏后需要设置一个按钮才能调出侧边栏
之前用的是Kiosk Mode插件,button card写个菜单按钮,通过辅助元素的开关,控制顶部菜单栏的显示与隐藏。
具体代码:
kiosk_mode:
entity_settings:
- entity:
input_boolean.ceshi5: "on"
hide_header: true
- entity:
input_boolean.ceshi5: "off"
hide_header: false
但最近手贱更新了Kiosk mode,经常提示错误,再加上我是用的yaml模式编辑的,感觉显示顶部菜单栏也没啥意义,干脆直接隐藏了。
隐藏方法(二选一):
(1)、card_mod插件,在主题文件中添加:
card-mod-theme: "hungheo" #跟主题名称相同
card-mod-root: |
.header {
display: none;
}
(2)、Kiosk mode插件,前端文件添加
kiosk_mode:
hide_header: true
mushroom chips带了一个菜单栏按钮,但是如果mushroom chips内嵌到button card会出现不兼容,并报错。
所以直接用button card写一个
type: custom:button-card
icon: mdi:menu
show_name: false
tap_action:
toggle_menu: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,composed: true }));
]]]
styles:
card:
- height: 38px
- backdrop-filter: none
icon:
- width: 24px
- justify-self: center
- color: var(--state-inactive-color)
6、其他
triggers_update使用:
在button card中,JS模板是静态模板,如果主entity 不更新的话,里面的其他enttiy.state是不会更新的,因此要用到triggers_update单独更新
type: custom:button-card
entity: sensor.mysensor #主enttiy ID
triggers_update:
- switch.myswitch #这里需要填上entity ID 单独更新
show_label: true
label: "[[[return states['switch.myswitch'].state]]]" #其他enttiy ID
|