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

 找回密码
 立即注册
查看: 19001|回复: 87

[UI界面] Mushroom手机界面分享-施工中

  [复制链接]

22

主题

184

帖子

1524

积分

金牌会员

Rank: 6Rank: 6

积分
1524
金钱
1340
HASS币
10
发表于 2023-8-19 12:04:20 | 显示全部楼层 |阅读模式
本帖最后由 Anooki 于 2023-9-2 11:07 编辑

以下为9/1更新
添加空调卡片yaml文件

一点小提示:
1.用到的设备或者实体:空调、温湿度计(也可以直接用空调的温湿度实体)、天气(包含室外温湿度)
2.卡片分析
微信截图_20230901142227.png 代码分析.png
3.特别说明
因为每个空调对于加热、制冷、强风等叫的属性名称叫法不一样,甚至有的比我的多,有的少。
所以大家可以在hass中查看空调的属性(如下图),来修改下面这部分代码或者增减就行对应文件是204-222行,代码的280-299行同理这样修改
false:是代表不显示
            control:
                hvac:
                    'off':
                        name: Power
                    heat:
                        name: Heat
                    cool:
                        name: Cool
                    heat_cool:
                        name: Auto
                    fan_only: false
                fan:
                    auto: false
                    low: false
                    medium low: false
                    medium: false
                    high: false
                    meidum low: false
                    medium high: false
微信截图_20230901143608.png



                               
登录/注册后可看大图



                               
登录/注册后可看大图



以下为8/21更新(markdown语法杂用,怎么不生效,大家先凑合着看吧)
# 说明
- 因为怕有的老哥不熟悉,这个说的啰嗦点,大佬可以略过
- 建议大家用vscode等软件进行编辑,编辑完直接复制过去会快很多
- 而且可以折叠,逻辑看起来比较清晰
# 构成
## 主页是一个卡片:custom:stack-in-card(hacs下载)
这个卡片可系统自带的垂直卡片功能是一样的,但是用系统自带的卡片有时候在浅色模式下会显示卡片的边框或者阴影,这个卡片可以解决这个问题
## 卡片由三部分组成

微信截图_20230821083817.png
微信截图_20230821084535.png
- custom:layout-card
     - custom:mushroom-chips-card
     - custom:mushroom-template-card
- horizontal-stack
- horizontal-stack
    - custom:mushroom-template-card
    - custom:mushroom-template-card
    - custom:mushroom-template-card
    - custom:mushroom-template-card
    - custom:mushroom-template-card
# 第三方卡片
- stack-in-card
- card-mod
- mushroom

# car-mod
car-mod主要是用来修改卡片的样式,比如左上角的圆形chip,取消卡片边框阴影,修改背景等等
如果知道代码什么意思,可以自己调整(大部门mushroom包括其他卡片的变形都是通过这种方式)
因为我对css也不是很熟悉,所以大部分都是抄其他大佬的
# 右上角动态图标
来源:Free animated SVG weather icons - amCharts
需要下载到本地,然后将你用的天气api对应天气状态改成图标的名称
我用的是彩云天气,虽然按照官方把所有状态都添加了,但是还是有时候会报错,如下图
微信截图_20230821084136.png
那就查询一下当前的天气状态,把他添加到这两段代码中去
 secondary: |-
                {% set condition = states(entity) %} {% set name = {
                  'CLEAR_DAY':'晴', 'CLEAR_NIGHT':'晴','partlycloudy':'多云', 'PARTLY_CLOUDY_NIGHT':'多云','cloudy':'阴', 'LIGHT_HAZE':'轻度雾霾','MODERATE_HAZE':'中度雾霾', 'HEAVY_HAZE':'重度雾霾',
                  'rainy':'雨','LIGHT_RAIN':'小雨', 'MODERATE_RAIN':'中雨','HEAVY_RAIN':'大雨', 'STORM_RAIN':'暴雨','FOG':'雾', 'LIGHT_SNOW':'小雪','MODERATE_SNOW':'中雪', 'HEAVY_SNOW':'大雪','STORM_SNOW':'暴雪',
                  'DUST':'浮尘','SAND':'沙尘', 'WIND':'风','sunny':'晴'
                } %} {{name[condition]}}
            icon: ' '
            entity: weather.wo_de_jia
            picture: |-
                {% set condition = states(entity)  %}
                {% set icon = {
                  'CLEAR_DAY':'day', 'CLEAR_NIGHT':'night','partlycloudy':'cloudy-day-3', 'PARTLY_CLOUDY_NIGHT':'cloudy-night-3','cloudy':'cloudy-day-3', 'LIGHT_HAZE':'','MODERATE_HAZE':'', 'HEAVY_HAZE':'',
                    'rainy':'rainy-4','LIGHT_RAIN':'rainy-4', 'MODERATE_RAIN':'rainy-5','HEAVY_RAIN':'rainy-6', 'STORM_RAIN':'rainy-7','FOG':'', 'LIGHT_SNOW':'snowy-3','MODERATE_SNOW':'snowy-4', 'HEAVY_SNOW':'snowy-5','STORM_SNOW':'snowy-6',
                  'DUST':'','SAND':'', 'WIND':'','sunny':'day'
                } %}
# chip关闭和展开
是通过显示secondary或者primary来实现的
我是通过状态来确定展开或者关闭
你也可以改成开关实现展开或者关闭,
也可以全部展开,通过状态或者点击显示颜色,这个就看你的喜好了# 源码
- 附件为抬头部分的代码
- 中间那一部分就是mushroom-title卡片,比较简单,就没有贴
- 第三部分是抄@relliky 大佬的代码,大家可以看另外一篇帖子,大佬5楼的留言

                               
登录/注册后可看大图

以下为原文
喜欢折腾ui界面,最近在折腾mushroom
参考了不少大佬的设计方案
目前还在施工中,感觉最难得是排版,
卡片的设计反而是其次。
分享一下半成品
1.jpg 2.jpg 微信图片_20230819120518.jpg


3.jpg

test.zip

7.26 KB, 下载次数: 493

空调卡片.zip

1.9 KB, 下载次数: 300

房间.zip

1.13 KB, 下载次数: 315

nas.zip

1.64 KB, 下载次数: 234

评分

参与人数 12金钱 +84 收起 理由
Xi11 + 10 感谢楼主分享!
学童 + 2 感谢楼主分享!
Aretaeus + 2 感谢楼主分享!
Bearst + 5 感谢楼主分享!
idreamshen + 16 感谢楼主分享!
hunl1986 + 8 感谢楼主分享!
q873139535 + 5 膜拜大神!
隔壁的王叔叔 + 10 论坛有你更精彩!
xms200 + 5 论坛有你更精彩!
儿时的快乐 + 5 厉害了word楼主!
relliky + 6 膜拜大神!
DDDear + 10 厉害了word楼主!

查看全部评分

回复

使用道具 举报

2

主题

69

帖子

561

积分

高级会员

Rank: 4

积分
561
金钱
492
HASS币
0
发表于 2023-8-19 13:52:18 | 显示全部楼层
大佬 后期考虑出教程么?
回复

使用道具 举报

10

主题

99

帖子

1368

积分

金牌会员

Rank: 6Rank: 6

积分
1368
金钱
1269
HASS币
0
发表于 2023-8-19 14:30:05 | 显示全部楼层
利害了,给个源吧,好看
回复

使用道具 举报

10

主题

124

帖子

755

积分

高级会员

Rank: 4

积分
755
金钱
631
HASS币
0
发表于 2023-8-19 18:37:28 | 显示全部楼层
非常漂亮,期待教程
回复

使用道具 举报

32

主题

1065

帖子

4942

积分

论坛元老

Rank: 8Rank: 8

积分
4942
金钱
3862
HASS币
90
发表于 2023-8-19 19:46:39 | 显示全部楼层
能分享一下源代码吗
我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

0

主题

8

帖子

54

积分

注册会员

Rank: 2

积分
54
金钱
46
HASS币
0
发表于 2023-8-19 19:58:49 来自手机 | 显示全部楼层
看起来很好,啥时候出个教程
回复

使用道具 举报

2

主题

51

帖子

548

积分

高级会员

Rank: 4

积分
548
金钱
497
HASS币
0
发表于 2023-8-19 21:15:42 | 显示全部楼层
很好看,等教程
回复

使用道具 举报

1

主题

111

帖子

560

积分

高级会员

Rank: 4

积分
560
金钱
449
HASS币
0
发表于 2023-8-19 21:17:01 | 显示全部楼层
Lewis大佬不是早有视频了
回复

使用道具 举报

6

主题

186

帖子

1230

积分

金牌会员

Rank: 6Rank: 6

积分
1230
金钱
1044
HASS币
0
发表于 2023-8-19 22:41:19 | 显示全部楼层
期待大佬出教程
回复

使用道具 举报

0

主题

11

帖子

116

积分

注册会员

Rank: 2

积分
116
金钱
105
HASS币
0
发表于 2023-8-20 00:03:22 | 显示全部楼层
这是HA的软件么?怎么可以设置在下面
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-24 07:51 , Processed in 0.088632 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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