ha-floorplan 项目教程

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

ha-floorplan/
├── .prettierrc
├── LICENSE
├── README.md
├── hacs.json
├── package-lock.json
├── package.json
├── tsconfig.json
├── webpack.config.js
├── panels/
│   └── floorplan.html
├── src/
│   ├── floorplan.js
│   └── ...
├── examples/
│   ├── modern_floorplan.yaml
│   └── ...
└── floorplan.yaml

目录结构介绍

• .prettierrc: 代码格式化配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• hacs.json: HACS（Home Assistant Community Store）配置文件。
• package-lock.json: 锁定项目依赖版本的文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• webpack.config.js: Webpack 打包配置文件。
• panels/: 包含自定义面板的 HTML 文件。
• src/: 包含项目的源代码文件。
• examples/: 包含示例配置文件。
• floorplan.yaml: 项目的主要配置文件。

2. 项目的启动文件介绍

启动文件

• src/floorplan.js: 这是项目的主要启动文件，包含了项目的核心逻辑和功能实现。

启动流程

1. npm install: 安装项目依赖。
2. npm run build: 构建生产环境版本。
3. npm run build:dev: 构建开发环境版本。

3. 项目的配置文件介绍

主要配置文件

• floorplan.yaml: 这是项目的主要配置文件，用于定义 Home Assistant 实体的显示和样式。

配置文件结构

# floorplan.yaml
name: 你的楼层平面图名称
location: 你的楼层平面图位置
entities:
  - entity_id: light.living_room
    type: light
    style:
      color: red
  - entity_id: switch.bedroom
    type: switch
    style:
      color: green

配置说明

• name: 楼层平面图的名称。
• location: 楼层平面图的位置。
• entities: 定义要显示的实体及其样式。
  • entity_id: 实体的 ID。
  • type: 实体的类型。
  • style: 实体的样式配置。

通过以上配置，你可以自定义 Home Assistant 中的楼层平面图显示效果。