HomeAssistant折腾日记

之四：HomeAssistant代码编辑

前言：

想了想，还是把这部分内容单独写一篇文章，之前的文章连接，毕竟写代码这块内容比较多。

1.基本操作

  • 添加集成：【设置】-【添加集成】
  • 添加辅助元素：【设置】-【辅助元素】-【创建辅助元素】
  • 添加HACS插件：需要添加HACS集成，然后再右边会出现HACS导航栏，在里面搜索插件即可
  • image-20250110013845692
  • 进入代码编辑模式：
点击右上角这个笔

image-20250110014344811

点击三个点	-【原始配置编辑器】

image-20250110014420445

2.设置按钮隐藏顶部和侧边栏

前置：安装Kiosk Mode插件

  • 创建辅助元素：开关，名称为full，图标mdi:fullscreen

  • 进入代码编辑模式，输入以下代码

  • kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.full: 'on'
      hide_header: true
      hide_sidebar: true
    - entity:
        input_boolean.full: 'off'
      hide_header: false
      hide_sidebar: false
views:
  - type: panel
    title: Home
    cards:
      - type: picture-elements
        image: /local/null.jpg
        elements:
          - type: custom:button-card
            entity: input_boolean.full
            icon: mdi:border-all-variant
            show_name: false
            show_icon: true
            tap_action:
              action: toggle
            styles:
              card:
                - width: 40px
                - height: 80px
            style:
              left: 20px
              top: 40px

    注意：

    1./local/对应的haos中的www的目录，这里要把null.jpg（一张白图背景）自己拷进去。

    2.left和top分别是距离左边距离和顶部距离，需要自己调整

    3.代码有严格的对齐需求，后续所有添加元素的代码都放在cards下一级，与- type: picture-elements对齐。

3.添加背景图片

将之前绘制的彩平图放入，

          - type: custom:button-card
            show_entity_picture: true
            entity_picture: /local/UI/bg.png
            style:
              pointer-events: none
              top: 260px
              left: 445px
            styles:
              entity_picture:
                - width: 100%
              card:
                - width: 810px

4.添加控制按钮

需要在【设置】-【实体】中找到对应实体标识符填到entity中；

放两张图分别对应开和关，图片100x80即可

          - type: custom:button-card
            entity: light.bedroom3_main
            show_name: false
            show_entity_picture: true
            entity_picture: >
              [[[ return (entity.state === 'on') ? '/local/UI/icon/lighton.png'
              : '/local/UI/icon/lightoff.png'; ]]]
            styles:
              entity_picture:
                - width: 100%
              card:
                - border-radius: 100%
                - width: 35px
                - '--mdc-ripple-press-opacity': 0
            style:
              top: 355px
              left: 630px

一些问题：

1.安装xiaomi_home最新版报错

image-20250105131905361 
解决：把ip网站换成公网ip或者域名就OK了。然后点链接进入登陆最后输入下面的进入码就OK了。

如果是docker的话进入终端然后运行以下代码

wget -O - https://get.hacs.xyz | bash -