Home Assistant Mini Graph Card 使用与安装指南
1. 项目目录结构及介绍
Mini Graph Card 是一个专为 Home Assistant 的 Lovelace 界面设计的简洁且可定制化的图表卡片。以下是该项目的主要目录结构及其简要说明:
.
├── babelrc # Babel 配置文件,用于编译源代码。
├── changelog.md # 版本更新日志。
├── CONTRIBUTING.md # 贡献者指南。
├── dist # 编译后的产出文件夹,包含可直接在 Home Assistant 中使用的 bundle 文件。
│ └── mini-graph-card-bundle.js
├── eslintrc.yaml # ESLint 配置文件,确保代码质量。
├── gitignore # Git 忽略文件列表。
├── hacs.json # 用于HACS(Home Assistant Community Store)的配置文件。
├── package-lock.json
├── package.json # Node.js 项目配置,列出了依赖项和脚本命令。
├── release-config.js # 可能用于版本发布的配置文件。
├── rollup.config.js # Rollup 打包配置文件,用于构建过程。
├── scripts # 可能包含自定义脚本的文件夹。
├── src # 源码文件夹,包含主要的 JavaScript 和 HTML 模板。
│ ├── main.js # 主入口文件,定义 Mini Graph Card 的核心逻辑。
│ └── ...
└── README.md # 项目介绍和快速使用指南。
2. 项目的启动文件介绍
该项目的核心在于 src/main.js
文件。这个文件是 Mini Graph Card 的业务逻辑起点,它定义了如何将传感器数据可视化为图表。虽然直接运行此文件不适合最终用户操作,开发者会通过这个文件以及相关的配置(如 rollup.config.js
)进行开发和打包。普通用户通过更新或添加到 Home Assistant 的资源来间接“启动”这个卡片。
对于用户来说,重要的是添加到 Home Assistant 的 /local/mini-graph-card-bundle.js
文件,这是经过编译和打包后的前端代码,直接在用户的 UI 配置中引用即可使用。
3. 项目的配置文件介绍
用户界面配置 (ui-lovelace.yaml
)
在 Home Assistant 中,用户可以通过编辑 ui-lovelace.yaml
来集成 Mini Graph Card。下面是一个示例配置片段,展示了如何将卡片添加到资源并使用它:
resources:
- url: /local/mini-graph-card-bundle.js?v=0.12.1
type: module
views:
- title: My Dashboard
path: my-dashboard
icon: 'mdi:home'
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.example_temperature
...
在这个配置里,“url”指定了 Mini Graph Card 的资源位置和版本控制参数(防止浏览器缓存),而“type”指定它是作为一个 ES6 模块加载的。接下来在视图中的卡片部分,用户通过定义卡片类型为 custom:mini-graph-card
并指定相关实体等选项来使用该卡。
开发环境配置
对于贡献者和希望自建的用户,需要关注 package.json
文件,因为它包含了npm脚本命令,比如用于开发时自动重建的 npm run watch
命令。此外,hacs.json
为那些通过Home Assistant Community Store安装提供配置信息。
请注意,以上操作需在Node.js环境下进行,并理解基本的Web开发概念,以正确地配置和利用Mini Graph Card的功能。