类Homekit介面，3D Floorplan 触控屏

fung1006

由于HA原生的介面不利于触控操作，故上网搜寻资料，自行制作类似Homekit的介面，务求能清晰显示资讯及方便操作

左：
－天气
－家庭成员24小时内手机电量图
－灯光场景
中：
－室外及各房间当前气温及湿度 （图示最近5天记录)
－服务器、私有云 cpu ram 负载及温度，bt机所剩容量，光度計（小米、 tsl2561及bh1750)
右：
－家庭成员所在位置（家／公司／路上／医院）
－各灯具控制、关灯时间倒数
－人体侦测，门窗侦测，下雨侦测（小米门窗改），烟雾感应

－背景根据当前天气播放不同视频

3D floorplan:

sweet home 3D制作，以picture-element堆叠，配上各种图示而成，当中以电风扇测试了动画演示
可以每灯具制定照亮范围，进阶设定可以按照该灯光颜色渲染于 floorplan上

触控屏是15吋超薄USB-C供电屏，hdmi接树莓派4B，用windows的话反应会更灵敏
后续将会添加音乐播放面板，暂定以volumio制作

====== 30/11/2020 更新 ======

－ 加入依照日出／日落时间反映光照于平面图上
－ 大门／窗户／led灯带状态实时显示
－ 场景按钮
－ 平面图 数据统一合拼显示


====== 14/12/2020 更新 ======
透过Logitech media server 控制 homepod 播放歌曲







====  26/1/2022 更新 ====
手機端介面更新

a3241

666很漂亮

hundajdx

楼主牛逼！学习学习再学习，谢谢谢谢再谢谢！

dizherui

多介绍下啊，这个界面完全符合我胃口，超级喜欢

fung1006

dizherui 发表于 2020-7-30 01:01
多介绍下啊，这个界面完全符合我胃口，超级喜欢

有哪些详情想知，我尽量解答

Anooki

有没有详细的配置教程啊

zeze247

那个灯光按钮怎么做的？

fung1006

zeze247 发表于 2020-7-30 09:16
那个灯光按钮怎么做的？

floorplan的最基本配置:

floorplan 底图 (关灯状态)
在上面堆叠各房间或灯光点亮时照亮范围 (off 时显示透明图)
最后在上面铺设按钮图示（以state_filter 控制按钮开关颜色)
堆叠图示要按顺序，图示要放底图之上

elements:
      - entity: light.xxx
        state_image:
          'off': /local/floorplan/img/transparent.png
          'on': /local/floorplan/img/living_room.png
        style:
          left: 50%
          top: 50%
          width: 100%
        type: image

      - entity: light.xxx
        state_filter:
          'off': opacity(40%) saturate(0%)
          'on': opacity(100%)
        state_image:
          'off': /local/floorplan/img/ico_bulb.png
          'on': /local/floorplan/img/ico_bulb.png
        style:
          left: 75%
          top: 13%
          width: 7%
        tap_action:
          action: toggle
        type: image

image: local/floorplan/img/floorplan.png
type: picture-elements

复制代码

fung1006

Anooki 发表于 2020-7-30 08:36
有没有详细的配置教程啊

你对那个部份有兴趣? 因为当中用到的card也不少

Anooki

fung1006 发表于 2020-7-30 11:35
你对那个部份有兴趣? 因为当中用到的card也不少

对啊，目前还是纯小白，还在摸爬滚打中