双仪表盘自定义卡片教程 - 适用于Home Assistant的Lovelace UI

最新推荐文章于 2025-04-28 17:40:19 发布

乌昱有Melanie

最新推荐文章于 2025-04-28 17:40:19 发布

阅读量549

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00057/article/details/139344252

版权

双仪表盘自定义卡片教程 - 适用于Home Assistant的Lovelace UI

dual-gauge-card Dual gauge custom card for Lovelace in Home Assistant 项目地址: https://gitcode.com/gh_mirrors/du/dual-gauge-card

项目介绍

双仪表盘自定义卡片（custom-dual-gauge-card）是专为Home Assistant设计的一个Lovelace UI插件。该插件利用CSS构建了两个仪表在一个卡片上的显示效果，灵感来源于ciotlosm的gauge-card，但所有代码都是从零开始编写的。它支持自定义颜色配置、背景色、以及对内外两个仪表的独立配置。

技术栈与许可证

技术: HTML, CSS, JavaScript
许可证: [MIT许可证]

项目快速启动

要迅速在您的Home Assistant环境中集成双仪表盘卡片，您需要按照以下步骤操作：

安装HACS（推荐方法）: 如果您尚未安装HACS（Home Assistant Community Store），首先需要安装。
添加卡片到HACS: 在HACS中搜索“Dual Gauge Card”并将其添加至您的自定义组件。
手动下载: 若不使用HACS，可直接访问仓库，下载并解压后，将dual-gauge-card.js文件放到Home Assistant配置目录下的www目录里。

配置UI: 编辑您的ui-lovelace.yaml，加入以下配置来使用卡片：

- type: custom:dual-gauge-card
  title: 客厅温度
  outer:
    entity: climate.living_room
    attribute: current_temperature
    label: "当前"
    unit: "°C"
  inner:
    entity: climate.living_room
    attribute: temperature
    label: "目标"
    unit: "°C"

重新加载Lovelace: 完成配置后，刷新浏览器页面，您的Home Assistant界面即会出现新添加的双仪表盘卡片。

应用案例与最佳实践

应用案例通常包括监控家庭环境中的温湿度、车辆性能指标或任何需要可视化对比两种数据的情况。最佳实践建议您充分利用卡片的颜色配置功能，以视觉直观地表示不同水平的数据范围，例如通过不同的颜色区分温度警告区域。

示例配置

- type: custom:dual-gauge-card
  title: 环境监控
  min: -10
  max: 30
  outer:
    entity: sensor.outside_temp
    attribute: state
    label: 外部
  inner:
    entity: sensor.indoor_temp
    attribute: state
    label: 内部
  colors:
    - color: "#FF0000"    # 红色，超过25°C
      value: 25
    - color: "#FFFF00"    # 黄色，介于20°C至25°C
      value: 20
    - color: "#00FF00"    # 绿色，低于20°C
      value: 0