自定义动画条形卡教程：Bar Card

最新推荐文章于 2024-09-13 22:50:18 发布

沈书苹Peter

最新推荐文章于 2024-09-13 22:50:18 发布

阅读量514

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00443/article/details/141991662

版权

自定义动画条形卡教程：Bar Card

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

本教程旨在指导您了解并使用从 GitHub 获取的 custom:bar-card 开源项目。此项目提供了一个高度可定制的、动画化的条形图卡片，适用于 Home Assistant 的 Lovelace 界面。下面将分步骤介绍其关键的目录结构、启动文件以及配置文件的相关知识。

1. 项目的目录结构及介绍

在下载或克隆的 bar-card 项目中，预期的目录结构大致如下：

bar-card/
├── README.md            # 项目说明文档，包含了安装指引和基本用法。
├── src                  # 核心源代码目录。
│   ├── BarCard.ts       # 主要的TypeScript实现文件，定义了Bar Card的行为和逻辑。
│   └── ...
├── dist                 # 编译后的输出目录，包含用于实际部署的JavaScript文件。
│   ├── bar-card.js      # 编译后的主文件，用于在Home Assistant中加载。
│   └── ...
├── package.json         # Node.js项目配置文件，定义依赖项和脚本命令。
└── ...

2. 项目的启动文件介绍

尽管这个项目主要用于作为Home Assistant的自定义卡片，没有传统意义上的“启动文件”。但是，当涉及到开发或者测试该卡片时，主要关注的是 src 目录下的 BarCard.ts 文件。这是TypeScript源码，编译后生成的JavaScript文件（位于 dist 目录）才是最终被Home Assistant加载的部分。

对于最终用户来说，核心交互发生在Home Assistant的Lovelace界面中，通过在UI中添加以下YAML配置来引入和使用此卡片：

type: 'custom:bar-card'
entities: 
  - entity: your_entity_here

3. 项目的配置文件介绍

集成到Home Assistant的配置

安装与配置

集成bar-card通常不需要直接编辑配置文件。用户应通过Home Assistant的UI进行操作，如通过HACS（Home Assistant Community Store）安装。一旦安装完毕，配置是通过Lovelace UI的卡片设置完成的。示例如下：

type: 'custom:bar-card'
entities:
  - entity: sensor.example
    title: 示例
    severity:
      - color: red
        from: 0
        to: 25
      - color: orange
        from: 26
        to: 50
      - color: green
        from: 51
        to: 100

在此配置片段中：