|
本帖最后由 hungheo 于 2025-11-13 16:17 编辑
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，欧博代理跟和风天气一样的用
登录/注册后可看大图
屏幕截图 2025-06-03 000029.png (70.21 KB, 下载次数: 0) 下载附件 2025-6-3 00:01 上传 4、温湿度 背景根据不同的数值会有不同的颜色 可以根据温湿度entity的后缀识别是温度还是湿度数据，无需修改template
登录/注册后可看大图
屏幕截图 2025-06-20 095237.png (99.85 KB, 下载次数: 0) 下载附件 2025-6-20 09:54 上传 引用： 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写一个 2025-10-14 更新: button card 版本更新到5.0.2后，使用了新的方法 type: custom:button-card icon: mdi:menu show_name: false tap_action: # toggle_menu: | 弃用 action: javascript #新增 javascript: | #新增 [[[ 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使用，7.0.0版本及以后弃用： 在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 复制代码 2025-11-13更新：7.0.0版本及以后使用规则： （1）、引用实体列表中的entity id时，所有的variables变量都能根据自身状态改变而自行调整，原有设置的triggers_update会失效 （2）、非实体列表中的变量时，需要手动设置更新（求值） 例子： type: custom:button-card entity: switch.skylight update_timer: 1s #强制更新时间间隔 variables: always_evaled: #允许更新的变量列表 value: '[[[ window.alwaysEvaled = `${new Date().getTime()}`; ]]]' #这里的new Date().getTime()变量不是ha里的实体 force_eval: true #强制更新 never_evaled: '[[[ window.neverEvaled = `${new Date().getTime()}`; ]]]' #不允许更新的变量列表，只会在第一次加载时求值 name: 'always should update every second,<br/>never should be unset' show_label: true label: | [[[ return `always: ${window.alwaysEvaled || "not set"} <br/>never: ${window.neverEvaled || "not set"}`; ]]] 复制代码 (责任编辑：) |
