三十四 Home Assistant 创建自定义面板

创建自定义用户界面

如果你想使用自己的状态卡片，且不将代码合并到home-assistant-polymer中，你可以创建自己的实现。

将元素源文件及其依赖项放在Home Assistant配置目录下的www/custom_ui/目录中。例如，如果要为light域创建一个名为my_custom_light_card的状态卡片，将my_custom_light_card.html放在www/custom_ui/中。该文件应该使用Polymer实现<my_custom_light_card>标签。

在my_custom_light_card.html中，你应该使用<link rel="import">导入Home Assistant用户界面未使用的所有依赖项。不要导入Home Assistant用户界面使用的任何依赖项。在development: 1模式下导入这些依赖项会起作用，但在生产模式下会失败。

1. 在configuration.yaml文件的customize:部分，放入custom_ui_state_card: <element-name>。
2. 在frontend部分，使用extra_html_url指定要加载的URL。

例如：

homeassistant:
  customize:
    light.bedroom:
      custom_ui_state_card: my_custom_light_card
frontend:
  extra_html_url:
    - /local/custom_ui/my_custom_light_card.html

参阅示例页面上的自定义UI部分。

总结

此页面主要介绍了在Home Assistant中创建自定义用户界面的方法，具体包括将自定义元素源文件及其依赖项放在特定目录，在configuration.yaml文件的customize:部分指定自定义状态卡片名称，在frontend部分使用extra_html_url指定加载的URL等步骤。通过这些操作，用户可以创建并使用自己的状态卡片，同时需要注意导入依赖项的规则，避免在生产模式下出现问题。