请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居第一站

 找回密码
 立即注册
查看: 6142|回复: 160

[经验分享] 简单粗暴的写个custom-ui的教程贴

  [复制链接]

36

主题

1159

帖子

3584

积分

论坛元老

Rank: 8Rank: 8

积分
3584
金钱
2405
HASS币
200

活跃会员教程狂人

发表于 2018-6-7 20:29:01 | 显示全部楼层 |阅读模式
本帖最后由 咸味土豆 于 2018-6-10 01:51 编辑

更新,附上几个大神的帖子,我也是照着帖子一步一步来的:
1、EabeyTong 大神的: Customze-UI 新的分组UI,让你的分组更直观(更新自动化安装)

https://bbs.hassbian.com/thread-851-1-1.html

2、Jones 大的,使用custom_ui将小米产品剩余电量显示在设备下方

https://bbs.hassbian.com/thread-861-1-1.html

最早就是看这俩个帖子装了custom-ui,现在有好多种玩法了,进阶和高级的,我已经眼花缭乱了。

余歌唱晚 色彩缤纷续集--Custom UI通配符修改一类实体图标颜色
https://bbs.hassbian.com/thread-3141-1-1.html

还有这个热乎乎的:
倾微qiwe  〖Custom_UI〗【6.10更新】多功能按钮的自定义UI发布,及教程

https://bbs.hassbian.com/thread-3921-1-1.html


--------------------------------------------------------------------------------------
其实论坛已经有很多custom-ui的安装贴了,但是总看到有人发帖,结合我自己的安装经验再写个比较浅显的教程吧。

1、前提条件:
(1)、安装好了HA,不管你是什么平台、什么系统,Homeassistant也好、Hassio也好,都可以哒;

(2)、能进入HA的配置文件夹,不管你是通过安装Samba share还是群晖Docker(装Samba share的话不说了,群晖docker安装的,直接进你给HA映射的路径,PS:windows里面看不见的原因一般是因为docker文件夹默认是没有共享出来的,设置一下就行了);

2、安装步骤:

第一步:下载两个必须的文件:

文件1:https://github.com/andrey-git/home-assistant-custom-ui
1.jpg

文件2:https://github.com/andrey-git/home-assistant-customizer

2.jpg

如图,点那儿

3.jpg

第二步:复制粘贴(看图照着来)
上面的文件下载之后,得到两个压缩包,解压之后,将”home-assistant-custom-ui-master“中的:

4.jpg

这4个文件拷贝到你的HA配置文件夹下”config/www/custom_ui“文件夹下(没有的话就新建就行了):

5.jpg

将”home-assistant-customizer-master“中的”customizer“文件夹(或者里面的两个文件):

6.jpg

这俩个文件拷贝到”config/custom_components/customizer“文件夹下(没有的话就新建就行了):
7.jpg



如果实在找不到目录在哪儿,再附一张文件夹层级结构参考图咯:

8.jpg

3、配置步骤:

激活:
在”configuration.yaml“文件中写入:
[AppleScript] 纯文本查看 复制代码
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui


配置属性:加入:

[AppleScript] 纯文本查看 复制代码
customizer:
  custom_ui: local
  hide_attributes:
    - node_id
    - value_index


(备注:上面的这个配置,个人理解应该是custom-ui的显示属性之类的取值,没深入研究,最早大神们的原帖里面有,可以搜搜看。)

继续配置:
再加一段:

[AppleScript] 纯文本查看 复制代码
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html


参考图:

根据自己的实际情况来,红框标出来的一定要写进去:

30.jpg

然后应该就可以用了,
可能有忽略的地方,我随时补充。

当然,官方文档也写的很清楚:

20.jpg 40.jpg 41.jpg


4、简单应用:

比如,加上这一段代码:


[AppleScript] 纯文本查看 复制代码
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui

    automation.*:
      extra_data_template: >
        var t = attributes.last_triggered;
        if (t === null) {
          return '尚未触发' ;
        }else {
          var tt = new Date(t);
          var time = (tt.getMonth()+1) +'月'+tt.getDate()+'日 '+tt.getHours()+':'+(tt.getMinutes()<10?('0'+tt.getMinutes()):tt.getMinutes());
          return '上次触发:'+ time;
        }
      custom_ui_state_card: state-card-custom-ui


45.jpg

就可以实现这个效果了:


46.jpg



以上所有内容均来自于各路大神的帖子和教程,不好意思没附原帖地址,回头我有时间了再补上。


评分

参与人数 3金钱 +53 收起 理由
jyz_0501 + 3 分享是一&lt;span id=&quot;transmark&quot; st
Milo + 40 请多来一些这样详细的基础教程.
windgo + 10 膜拜大神!

查看全部评分

回复

使用道具 举报

6

主题

160

帖子

1286

积分

金牌会员

Rank: 6Rank: 6

积分
1286
金钱
1126
HASS币
0
发表于 2018-6-7 20:40:06 来自手机 | 显示全部楼层
看看什么是好东西
回复

使用道具 举报

1

主题

58

帖子

550

积分

高级会员

Rank: 4

积分
550
金钱
492
HASS币
0
发表于 2018-6-7 20:49:23 | 显示全部楼层
前来学习学习!
回复

使用道具 举报

4

主题

76

帖子

328

积分

中级会员

Rank: 3Rank: 3

积分
328
金钱
252
HASS币
0
发表于 2018-6-7 20:52:43 | 显示全部楼层
看看  。。。
回复

使用道具 举报

0

主题

30

帖子

120

积分

注册会员

Rank: 2

积分
120
金钱
90
HASS币
0
发表于 2018-6-7 20:56:36 | 显示全部楼层
xiexiefenxiang~!~!~!
回复

使用道具 举报

1

主题

136

帖子

644

积分

高级会员

Rank: 4

积分
644
金钱
508
HASS币
0
发表于 2018-6-7 21:06:34 | 显示全部楼层
感谢分享~~~
回复

使用道具 举报

4

主题

161

帖子

964

积分

论坛积极会员

积分
964
金钱
803
HASS币
0
发表于 2018-6-7 21:08:32 | 显示全部楼层
真粗!!!!!!爆
回复

使用道具 举报

19

主题

221

帖子

875

积分

高级会员

Rank: 4

积分
875
金钱
654
HASS币
0
发表于 2018-6-7 21:11:56 | 显示全部楼层
这个可以有~~~~~~
回复

使用道具 举报

0

主题

74

帖子

648

积分

论坛积极会员

积分
648
金钱
574
HASS币
0
发表于 2018-6-7 21:38:55 | 显示全部楼层
学习学习。
回复

使用道具 举报

1

主题

177

帖子

1092

积分

金牌会员

Rank: 6Rank: 6

积分
1092
金钱
915
HASS币
0
发表于 2018-6-7 21:44:47 来自手机 | 显示全部楼层
谢谢大神分享
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-5-27 05:29 , Processed in 0.473767 second(s), 41 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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