【Lovelace用户界面】home assistant之壁挂平板UI配置分享,像素级DIY、等你一起来玩!

1、说明


  • 个性定制化比较强,能参考的东西也很多,整体上需要自己有想法,感兴趣可以一起来玩;
  • 我借鉴了大佬们的配置代码、结合自己的接入设备瞎搞的,没做筛选和整理,所以很乱…
  • 边玩边写,零基础玩家,开心就好!

2、素材来源


2.1、Github来源

2.2、官方论坛讨论帖

网络环境不好的话,可以用码云克隆一下上面的仓库,感谢 @Caffreyfans 大佬指路。

2.3、同类界面

这个也很cool,效果图:

3、界面效果

3.1、静态效果


  • view1:

  • view2:

  • view3:

  • view4:

3.2、细部效果


凑合看一下:

4、参考配置文件

放个我的配置文件,仅参考,以原文档为主要参考资料。

lovelace_matt8707.yaml (164.4 KB)

感兴趣可以结合github的源素材先试一试。

5、主题特性

  • 界面卡片基于坐标定位,对不同分辨率的平板来说比较友好,通过custom_header插件配置kiosk_mode模式+ fully kiosk自身的强大功能(需要付费,6.9欧元)可以实现很多独特的功能,放个视频链接:https://www.you学习强国tube.com/watch?v=-7ChDLprmeU,当然tasker应该也是可以的(没玩);

  • fully kiosk文档

  • homekit的风格,homekit胜在省心,但是lovleace插件确实很强大;

  • 主题侧重图标动态效果,看看blob大佬的配置就知道了,不过两个人风格不太统一;

  • 宿主要求不高,原作者是树莓派;

  • 反正这种界面都挺难玩的,还是homekit省心。

6、简单教程

6.1、 HA前置配置

6.1.1、新建1个dashboards

参考:

lovelace:
  mode: yaml
  resources: 
    !include_dir_merge_list resources/
  dashboards:
    homekit-infused:
      mode: yaml
      title: 界面1
      icon: mdi:cellphone
      show_in_sidebar: true
      filename: lovelace_hki.yaml
    hki-settings:
      mode: yaml
      title: 界面2
      icon: mdi:tools
      show_in_sidebar: true
      filename: lovelace_hki_settings.yaml
    lovelace-matt8707:
      mode: yaml
      title: 界面3
      icon: mdi:tablet-ipad
      show_in_sidebar: true
      filename: lovelace_matt8707.yaml
......

configuration.yaml添加一个dashboards,我没搭测试环境,一直都是yaml方式配置,所以可能需要切换到yaml的配置,提前做好备份,不行了还可以切回去:

lovelace:
  mode: yaml

然后在ui-lovelace.yaml里面或同级目录下写入不同的dashboards的跳转链接,对应上面的filename,如果用webui的方式配置,会不太一样,就不贴图了。

6.1.2、在hacs里面下载所需的插件

看原文档中需要的插件,地址:

截个图:

如果hacs里面能搜到,就下载,没有的话,可以用原作者的,或者把插件的github地址添加到hacs的自定义仓库里面。

……

下载,打开,滚轮,摸头,关闭,回复
完全不知道怎么搞哈哈哈哈 :grinning:
还很理直气壮

土豆哥,牛逼,马不停蹄的赶来学习

牛逼,。。。。。。

先收藏后观看 给力呀

太好看了,我慢慢copy一份 :see_no_evil:

一脸兴奋的点进来,下载了之后 默默的关闭了

看着很爽,不敢动手 :joy:

其实我也玩不懂,装逼失败了,又是个残品,可惜鸟了。