自定义动画条形卡 - `bar-card`教程

自定义动画条形卡 - bar-card教程

bar-cardCustomizable Animated Bar card for Home Assistant Lovelace项目地址:https://gitcode.com/gh_mirrors/ba/bar-card

项目介绍

bar-card 是一个专为 Home Assistant 设计的自定义Lovelace卡片，由社区成员贡献。它提供了一种高度可定制且动画化的展示方式来可视化你的家庭自动化状态。灵感来源于“Big Number Card”，该卡片通过丰富的视觉效果让你能够更直观地监控你的智能家庭中的各项数据。采用MIT许可进行分发，项目活跃于GitHub上，拥有超过363颗星和持续的社区贡献。

项目快速启动

要开始使用bar-card，你需要先安装它到你的Home Assistant实例中。推荐的方式是通过Home Assistant Community Store (HACS)：

1. 安装HACS（如果你还未安装的话）。
2. 登录Home Assistant，导航至HACS。
3. 在“Integration”标签页中点击三个点（更多操作），选择“Custom repositories”添加仓库地址：https://github.com/custom-cards/bar-card.git。
4. 添加后，找到并安装bar-card。
5. 重启Home Assistant以使更改生效。

安装完毕后，你可以通过以下示例配置在你的Lovelace界面中添加条形卡：

type: 'custom:bar-card'
entities:
  - entity: sensor.example  # 示例传感器
    title: '默认展示'

确保替换sensor.example为你实际的实体ID。

应用案例和最佳实践

基础使用

基础配置即可快速展现单一或多个实体的状态，非常适合监测温度、湿度等变化不大的数据。

type: 'custom:bar-card'
entities:
  - entity: sensor.temperature
    title: '室内温度'
  - entity: sensor.humidity
    title: '室内湿度'

高级用法：动态颜色显示

利用条件给不同数值区间设置不同的颜色，增强视觉识别度：

type: 'custom:bar-card'
severity:
  - color: 'Red'
    from: 0
    to: 25
  - color: 'Orange'
    from: 26
    to: 50
  - color: 'Green'
    from: 51
    to: 100
entities:
  - entity: sensor.power_consumption

方向和堆叠

调整条形图的方向和堆叠模式，例如垂直排列：

type: 'custom:bar-card'
direction: up
stack: vertical
entities:
  - entity: sensor.energy_1
  - entity: sensor.energy_2
  - entity: sensor.energy_3

典型生态项目

虽然bar-card本身是一个独立的组件，但它完美嵌入Home Assistant的生态系统，可以与其他自定义卡片、小工具以及主题相结合，比如结合使用lovelace-dashboard布局，创建出既美观又实用的家庭控制面板。开发者和用户常将这类自定义卡片作为提升家庭自动化系统视觉体验的关键元素之一，通过它们的灵活组合实现个性化界面设计。

---

以上就是使用bar-card的基本指南，通过不断探索它的配置选项，你可以创造出符合自己需求的多样化和动态的家庭自动化展示界面。

bar-cardCustomizable Animated Bar card for Home Assistant Lovelace项目地址:https://gitcode.com/gh_mirrors/ba/bar-card