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

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

 找回密码
 立即注册
查看: 3263|回复: 10

[UI界面] 跟风折腾Mushroom主题卡片,无技术,有心得

[复制链接]

13

主题

230

帖子

1622

积分

金牌会员

Rank: 6Rank: 6

积分
1622
金钱
1392
HASS币
10
发表于 2023-9-12 17:42:41 | 显示全部楼层 |阅读模式
本帖最后由 mrlaogui 于 2023-9-14 19:33 编辑

这两天看到论坛技术达人陆续分享了一些个人制作的主题UI,看多了心思就动了。因为之前界面没有怎么打理是因为绝大多数情况下,都是自动化+Siri,也就没有怎么在意UI的颜值。


经过两天的沉浸式学(ctrl c)习(ctrl v),可算是获得了一些成果,因为不是代码相关从业者,可谓是晦涩难懂、如看天书。
好在,有chatgpt的加持,如有神助,解决了很多技术达人看来是小问题的大难题。

所以这个帖子没有什么技术能够分享的,所涉及到的界面你都能在论坛找到(关键词“卡片”),我这连抛砖引玉都算不上,主打一个活跃论坛氛围。
整个过程中有三点心得:

1、根据自己的实际需要以及现有设备选择符合自己的UI,没必要硬上难度做了一堆用不上的,有时间多陪陪家人或出去走走;
2、代码小白请善用、多用chatgpt,节省的时间可以多陪陪家人或出去走走;
3、部分卡片引用动态的svg的时候会整个浏览器卡死,启用browser_mod也一样,奇怪;

推荐工具&网站:
a、配色,适合需要细致化定制颜色http://zhongguose.com/

b、图标,适合需要自定义图标而又不确定具体名称
https://fonts.google.com/icons
https://www.svgrepo.com/

c、编辑,涉及代码部分编辑还是专业软件编辑好再粘贴,直接编辑容易出错
Visual Studio Code(或者类似的软件)


截图:
未标题-1.png
未标题-2.png
未标题-3.png
未标题-4.png
未标题-5.png
未标题-6.png


评分

参与人数 2金钱 +18 收起 理由
chenquanhao + 8 论坛有你更精彩!
DDDear + 10 感谢楼主分享!

查看全部评分

回复

使用道具 举报

5

主题

174

帖子

1314

积分

金牌会员

Rank: 6Rank: 6

积分
1314
金钱
1140
HASS币
0
发表于 2023-9-12 20:18:31 | 显示全部楼层
好看,可以分享一下代码吗?
回复

使用道具 举报

50

主题

1316

帖子

5178

积分

论坛DIY达人

积分
5178
金钱
3862
HASS币
20
发表于 2023-9-12 20:48:49 | 显示全部楼层
这个卡片还能再增加上次变化时间的信息吗?


SNAG-2023-9-12_00000.png

回复

使用道具 举报

31

主题

1018

帖子

4607

积分

论坛元老

Rank: 8Rank: 8

积分
4607
金钱
3574
HASS币
90
发表于 2023-9-12 21:30:49 | 显示全部楼层
本帖最后由 relliky 于 2023-9-12 21:32 编辑
sorrypqa 发表于 2023-9-12 20:48
这个卡片还能再增加上次变化时间的信息吗?

难道这上面不就是上次变化的时间吗,3小时前变的现在的状态啊 这是系统自带得

如果你想问,有没有从上上次变化到上次的时间,那肯定是没有的,你得自己写实体和自动化去跟踪这个。
我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

0

主题

573

帖子

2274

积分

金牌会员

Rank: 6Rank: 6

积分
2274
金钱
1701
HASS币
0
发表于 2023-9-12 23:21:47 | 显示全部楼层
厉害了啊,直接分区域
回复

使用道具 举报

50

主题

1316

帖子

5178

积分

论坛DIY达人

积分
5178
金钱
3862
HASS币
20
发表于 2023-9-13 08:23:41 | 显示全部楼层
本帖最后由 sorrypqa 于 2023-9-13 08:26 编辑
relliky 发表于 2023-9-12 21:30
难道这上面不就是上次变化的时间吗,3小时前变的现在的状态啊 这是系统自带得

如果你想问,有没 ...

我发那张图,自带卡片可以同时显示4个属性:显示图标、名称、状态、变化时间。
蘑菇卡片默认只能同时显示3个属性呀!
回复

使用道具 举报

31

主题

1018

帖子

4607

积分

论坛元老

Rank: 8Rank: 8

积分
4607
金钱
3574
HASS币
90
发表于 2023-9-13 21:04:38 | 显示全部楼层
sorrypqa 发表于 2023-9-13 08:23
我发那张图,自带卡片可以同时显示4个属性:显示图标、名称、状态、变化时间。
蘑菇卡片默认只能同时显示3 ...

你想显示啥可以自己加啊, 用蘑菇的template卡就可以了,就是写的麻烦点

我的房间导航卡片可以显示十几个属性
我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

13

主题

230

帖子

1622

积分

金牌会员

Rank: 6Rank: 6

积分
1622
金钱
1392
HASS币
10
 楼主| 发表于 2023-9-14 19:37:38 | 显示全部楼层
mr_chenxc 发表于 2023-9-12 20:18
好看,可以分享一下代码吗?

搜索“卡片”哈,论坛都有。我是东抄一点、西抄一点,所以链接整理不好弄。在这里致谢各位的分享与付出!
回复

使用道具 举报

10

主题

184

帖子

1804

积分

论坛技术达人

积分
1804
金钱
1615
HASS币
20
发表于 2023-9-15 00:01:18 | 显示全部楼层
这些卡片之类的都可以google一下,然后修修补补。我感觉最复杂的是整体UI的排版,各种css参数不知道怎么调整,调整不好就很丑,只能保证能用就行。。。
Screenshot_20230914234544.jpg
Screenshot_20230908175831.jpg
Screenshot_20230902112019.jpg
回复

使用道具 举报

13

主题

230

帖子

1622

积分

金牌会员

Rank: 6Rank: 6

积分
1622
金钱
1392
HASS币
10
 楼主| 发表于 2023-9-15 07:42:14 | 显示全部楼层
szlww 发表于 2023-9-15 00:01
这些卡片之类的都可以google一下,然后修修补补。我感觉最复杂的是整体UI的排版,各种css参数不知道怎么调 ...

布局好紧凑哇,密密麻麻的数据板看着很有意思。
排版个人倾向于简约和实用,很多传感器信息都是看着图一乐,平时都参与到自动化里面了,出问题的时候才打开后台看下。

搞得越杂,对代码调整就越多,各种套娃也就更容易出错。
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-6-22 13:24 , Processed in 0.172557 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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