Question

Custom UI Tiles 是由 Home Assistant 官方社区 @eddi89 制作的自定义 UI 卡片。类似 HADashboard，该插件可让用户使用方型磁贴控制常用设备。

项目地址：https://github.com/c727/home-assistant-tiles

项目社区讨论：https://community.home-assistant.io/t/custom-ui-tiles

使用方法

• 下载项目 Github 中的 /www/custom_ui/state-card-tiles.html 和 /www/custom_ui/state-card-tiles_es5.html 文件，复制进 Home Assistant 配置文件夹的相同目录中，即 配置文件夹/www/custom_ui/。

• 将下列配置添加进 configuration.yaml：

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-tiles.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-tiles_es5.html

• 新建一个 input_text 设备：

input_text:
  dummy_tiles:
    name: dummy     //名称任意，必须英文

• 使用 customize 设置设备，config项下所有子项均为可选项：

homeassistant:
  customize:
    input_text.dummy:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 3            # 列数
        column_width: 75px    # 列宽
        row_height: 75px      # 行高
        gap: 4px              # 间距
        color: blue           # 底色
        color_on: green       # 开启状态底色
        color_off: red        # 关闭状态底色
        text_color: #FFF      # 文字颜色
        text_color_on: #FFF   # 开启状态文字颜色
        text_color_off: #FFF  # 关闭状态文字颜色
        entities:
          - entity: script.test
            label: S1              # 显示标签
            label_state: input_boolean.switch2  # 状态同步设备
            icon: mdi:power        # 图标
            image: /local/test.png # 图片
            data: {value: right}   # 数据
            column: 2              # 起始列
            column_span: 2         # 所占列数
            row: 2                 # 起始行
            row_span: 2            # 所占行数
            color: blue            # 底色
            color_on: green        # 开启状态底色
            color_off: red         # 关闭状态底色
            text_color: #FFF       # 文字颜色
            text_color_on: #FFF    # 开启状态文字颜色
            text_color_off: #FFF   # 关闭状态文字颜色