『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 118993|回复: 73

[修仙教程] 【Lovelace用户界面】home assistant之UI配置分享!

  [复制链接]

75

主题

1976

帖子

8179

积分

元老级技术达人

积分
8179
金钱
6153
HASS币
430

活跃会员教程狂人

发表于 2020-7-15 00:24:38 | 显示全部楼层 |阅读模式
本帖最后由 咸味土豆 于 2021-10-4 05:03 编辑

更新了:https://bbs.hassbian.com/thread-14189-1-1.html


1、说明

  • 配置代码均来源于2位大佬的分享,仅仅搬运和试玩;

  • 确实是零基础玩家,不装逼,搬运+试玩,我也是大佬引导去玩的,只是没忍住分享出来,纯好奇+搬运,无技术含量;

2、界面效果

2.1、静态效果

01.png

02.png

03.png

04.png

2.2、细部效果

凑合看一下:

1.gif

2.gif

3.gif

3、素材来源

Github来源1

Github来源2

官方论坛讨论帖

3.3、同类界面

这个

4、配置方法

以原文档为主要参考资料,感兴趣可以结合github的源素材先试一试。

5、主题特性

  • 界面卡片基于坐标定位,对不同分辨率的平板来说比较友好;

  • homekit风格,但是lovleace插件确实很强大;

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

    • 反正都挺难玩的,还是nr+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: 界面_hki
      icon: mdi:cellphone
      show_in_sidebar: true
      filename: lovelace_hki.yaml
    hki-settings:
      mode: yaml
      title: 配置_hki
      icon: mdi:tools
      show_in_sidebar: true
      filename: lovelace_hki_settings.yaml
    lovelace-matt8707:
      mode: yaml
      title: 界面_matt
      icon: mdi:tablet-ipad
      show_in_sidebar: true
      filename: lovelace_matt8707.yaml
......

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

lovelace:
  mode: yaml

然后在ui-lovelace.yaml里面写入不同的dashboards的跳转链接或配置(待验证!!!),如果用webui,这些都是系统完成了,先不贴图了。

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

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

https://github.com/matt8707/hass-config/tree/master/www/community

截个图:

2e75ff940f4655164f279cb43efd2aa5f9d91935.png

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

先扔个配置:
lovelace_matt8707.yaml.zip (164.43 KB, 下载次数: 1248)




评分

参与人数 7金钱 +66 HASS币 +20 收起 理由
cooleephone + 1 感谢楼主分享!
unniversary + 5 感谢楼主分享!
令狐鸣 + 10 大神666!
+ 20 + 20 又见一枚视觉大佬
Guoer666 + 20 好久不玩,厉害啊,完全不似当初界面的粗糙.
smartws2016 + 5 感谢楼主分享!
diba.qiu + 5

查看全部评分

所有过往,皆为序章。
回复

使用道具 举报

14

主题

660

帖子

3957

积分

论坛元老

Rank: 8Rank: 8

积分
3957
金钱
3292
HASS币
10
发表于 2020-7-15 01:11:39 | 显示全部楼层
太高深了……折腾这个真是个大工程……可惜没有能挂墙的平板
回复

使用道具 举报

2

主题

223

帖子

3462

积分

论坛元老

Rank: 8Rank: 8

积分
3462
金钱
3239
HASS币
0
发表于 2020-7-15 11:10:41 | 显示全部楼层
挺好挺好,就是这个界面只适合平板吧,手机用这个界面适配效果咋样?
回复

使用道具 举报

39

主题

749

帖子

4833

积分

论坛元老

Freddy.

Rank: 8Rank: 8

积分
4833
金钱
4059
HASS币
0

最佳新人卓越贡献

发表于 2020-7-15 11:13:07 | 显示全部楼层
官方不喊你做UI设计可惜了
回复

使用道具 举报

8

主题

318

帖子

2172

积分

论坛技术达人

积分
2172
金钱
1844
HASS币
70
发表于 2020-7-15 13:42:51 | 显示全部楼层
感谢土豆!!!
回复

使用道具 举报

75

主题

1976

帖子

8179

积分

元老级技术达人

积分
8179
金钱
6153
HASS币
430

活跃会员教程狂人

 楼主| 发表于 2020-7-15 17:03:04 | 显示全部楼层
nichwang 发表于 2020-7-15 11:10
挺好挺好,就是这个界面只适合平板吧,手机用这个界面适配效果咋样?

手机横屏的话也行。
所有过往,皆为序章。
回复

使用道具 举报

75

主题

1976

帖子

8179

积分

元老级技术达人

积分
8179
金钱
6153
HASS币
430

活跃会员教程狂人

 楼主| 发表于 2020-7-15 17:04:24 | 显示全部楼层
南柯醉一梦丶 发表于 2020-7-15 11:13
官方不喊你做UI设计可惜了

别闹。。。。。。
所有过往,皆为序章。
回复

使用道具 举报

40

主题

3056

帖子

1万

积分

超级版主

Nero

Rank: 8Rank: 8

积分
11149
金钱
8042
HASS币
182
发表于 2020-7-16 09:08:24 | 显示全部楼层
我一直在停滞状态·····
Nero
回复

使用道具 举报

9

主题

787

帖子

3858

积分

论坛元老

Rank: 8Rank: 8

积分
3858
金钱
3071
HASS币
87
发表于 2020-7-16 11:21:53 | 显示全部楼层
最近终于决定要升级我的0.75.3版本了
拉了0.112.4版本,感觉打开了新世界的大门,新版真是方便好多.
特来学习一下UI
回复

使用道具 举报

8

主题

47

帖子

675

积分

高级会员

Rank: 4

积分
675
金钱
628
HASS币
0
发表于 2020-7-16 12:55:56 | 显示全部楼层
楼主可以出点更详细的教程吗?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-22 16:57 , Processed in 0.690674 second(s), 37 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表