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

 找回密码
 立即注册
查看: 16455|回复: 30

[新奇玩法] [6.20更新]修改李白大神的彩云天气动画自定义UI.喜欢的拿去

[复制链接]

31

主题

188

帖子

1798

积分

论坛技术达人

积分
1798
金钱
1590
HASS币
20

教程狂人论坛风云人物

发表于 2018-6-16 15:57:56 | 显示全部楼层 |阅读模式
本帖最后由 倾微qiwe 于 2018-6-20 23:52 编辑

首先感谢李白大神的贡献以及api奉献,让我们轻松就能使用彩云天气了.
原帖地址:彩云天气轻便版(实时+未来四天+华丽UI+动态自定义UI)

更新内容:  
1.天气预报文字内容增加了当天最高最低气温..
2.修复了三个点按钮有时候看上去不圆的bug
                                          -2018.06.20

我修改内容:1.适当的调整了界面大小,方便与其他卡片融为一体
2.增加一个按钮,点击的时候可以切换显示更多内容
3.修改文字颜色为主题颜色,也就是说会随系统主题变化而变化

基于李白大神0.70版本修改的,老版本不适用!
安装及使用请参考李白大神的原帖!要我这个的,请先按照原帖的教程配置完成之后!
下载以下文件替换 \www\custom_ui\state-card-weather.html !
重要!!可以不重启HA,但是一定要清空浏览器缓存!
state-card-weather.html (11.59 KB, 下载次数: 191)


如果需要像我下图那样,单独显示城市名称,请在配置文件中添加:
location_name: 眉山
如图:
4.jpg
也可以不添加,就显示friendly_name的内容.

截图介绍:
默认的时候为这个效果:
11.jpg

当点击右边那三个点的时候就会显示这个效果:

12.jpg

另一个主题的效果:
1.jpg
21.jpg

界面变小了,就可以与其他设备同一个组了,但是建议天气放上面,效果最好
3.jpg

                               
登录/注册后可看大图


                               
登录/注册后可看大图




回复

使用道具 举报

3

主题

286

帖子

2664

积分

版主

懵懂的小白

Rank: 7Rank: 7Rank: 7

积分
2664
金钱
2378
HASS币
0
发表于 2018-6-16 16:10:56 | 显示全部楼层
小白来学习,感谢大神
回复

使用道具 举报

26

主题

553

帖子

2728

积分

金牌会员

Rank: 6Rank: 6

积分
2728
金钱
2150
HASS币
100

教程狂人

发表于 2018-6-16 17:05:05 | 显示全部楼层
关于前端的研究和成果越来越多了,为你们点赞!
回复

使用道具 举报

123

主题

4661

帖子

1万

积分

管理员

囧死

Rank: 9Rank: 9Rank: 9

积分
16410
金钱
11664
HASS币
45
发表于 2018-6-16 17:10:59 | 显示全部楼层
微大前端好牛比啊!
回复

使用道具 举报

25

主题

687

帖子

3630

积分

论坛元老

Rank: 8Rank: 8

积分
3630
金钱
2937
HASS币
219

活跃会员

发表于 2018-6-16 20:54:20 | 显示全部楼层
用上了,完美!
回复

使用道具 举报

9

主题

787

帖子

3858

积分

论坛元老

Rank: 8Rank: 8

积分
3858
金钱
3071
HASS币
87
发表于 2018-6-17 01:36:59 来自手机 | 显示全部楼层
非常支持
回复

使用道具 举报

25

主题

687

帖子

3630

积分

论坛元老

Rank: 8Rank: 8

积分
3630
金钱
2937
HASS币
219

活跃会员

发表于 2018-6-17 08:15:26 | 显示全部楼层
本帖最后由 aktifin 于 2018-6-17 09:25 编辑

想把和风天气的最高和最低温度,还有高德路况的信息整合到card中,一直不得其法,还望大神指点
另外自己修改了卡牌默认显示展开状态
360截图20180617081339349.jpg
回复

使用道具 举报

15

主题

212

帖子

1268

积分

金牌会员

Rank: 6Rank: 6

积分
1268
金钱
1056
HASS币
0
发表于 2018-6-17 08:39:08 | 显示全部楼层
效果不错啊
回复

使用道具 举报

31

主题

188

帖子

1798

积分

论坛技术达人

积分
1798
金钱
1590
HASS币
20

教程狂人论坛风云人物

 楼主| 发表于 2018-6-17 22:50:59 | 显示全部楼层
aktifin 发表于 2018-6-17 08:15
想把和风天气的最高和最低温度,还有高德路况的信息整合到card中,一直不得其法,还望大神指点
另外自己修 ...

如果仅仅是把其它ID的信息显示出来可以在script中这样return:
aaa: function(hass) {
var id = 'sensor.date'
return (hass.states[id].state)
},

然后再你想要加入的html中加入
<div>
[[aaa(hass)]]
</div>
回复

使用道具 举报

1

主题

190

帖子

1704

积分

金牌会员

Rank: 6Rank: 6

积分
1704
金钱
1514
HASS币
0
发表于 2018-6-17 23:19:08 | 显示全部楼层
非常的漂亮,谢谢
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-24 13:21 , Processed in 0.463958 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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