使用Bubble Card实现动态文本与图标状态显示

背景介绍

在智能家居仪表盘开发中，经常需要根据设备状态动态显示不同内容和图标样式。本文介绍如何从Mushroom Card迁移到Bubble Card，实现电力消耗监控界面的动态显示功能。

原始Mushroom Card实现

原实现使用了Mushroom Template Card，主要功能包括：

1. 显示当前电力消耗值
2. 根据电价时段显示不同文本提示
3. 图标颜色根据时段变化
4. 图标动画效果随用电量变化

核心逻辑通过YAML模板实现条件判断，代码结构清晰但略显冗长。

Bubble Card迁移方案

Bubble Card提供了更灵活的JavaScript处理方式，可以实现同样的功能：

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.zb_zlinky_ccasn
styles: |
  ${(() => {
    card.querySelector('.bubble-name').innerText = "Électricité - " + hass.states['sensor.zb_zlinky_ccasn'].state + " W";
    card.querySelector('.bubble-state').innerText = (() => {
      const state = hass.states['sensor.zb_zlinky_ntarf'].state;
      if (state === '1') {
        return "Heures creuses (23h20 - 7h20)";
      } else if (state === '2') {
        return "Heures pleines (7h20 - 23h20)";
      } else if (state === '3' || state === '4') {
        return "Heures creuses (Weekend)";
      } else if (state === '5' || state === '6') {
        return "Heures creuses (Mercredi)";
      } else {
        return ""; // 默认状态
      }
    })();
  })()}
scrolling_effect: false
icon: mdi:flash

技术要点解析

1. 动态文本更新：通过JavaScript直接操作DOM元素，更新卡片名称和状态文本
2. 条件判断：使用JavaScript的if-else结构替代模板语言的判断逻辑
3. 状态绑定：直接访问Home Assistant的状态对象获取实时数据
4. 简洁配置：相比原方案减少了YAML嵌套层级，逻辑更集中

进阶优化建议

1. 图标动画：可通过CSS动画实现类似原方案的动态效果
2. 颜色变化：添加条件判断修改图标颜色
3. 性能优化：对于频繁更新的状态，考虑使用requestAnimationFrame
4. 响应式设计：添加媒体查询适应不同屏幕尺寸

总结

Bubble Card提供了更强大的自定义能力，通过JavaScript可以轻松实现复杂的动态显示需求。相比模板语言，JavaScript在处理复杂逻辑时更具优势，代码也更易于维护。开发者可以根据实际需求选择最适合的方案。