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

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

 找回密码
 立即注册
查看: 26739|回复: 470

[UI界面] 最近Mushroom界面挺火的,我也随便改了一下!2024-1-25更新

  [复制链接]

22

主题

465

帖子

5186

积分

元老级技术达人

略懂一些皮毛而已!

积分
5186
金钱
4711
HASS币
40
发表于 2023-8-31 19:59:58 | 显示全部楼层 |阅读模式
本帖最后由 Mr.G 于 2024-1-27 23:13 编辑

最近看到论坛各位大神都在改mushroom界面,我也抄了一下作业,加上自己改了一些东西,大家看下面的图的效果吧。

因为我家是两层,房间比较多,所以我按照房间给所有设备分了类,每次想要开什么设备时只需找到对应的房间即可!

具体还在完善中,先是改了这么多,只发这么多咯!

声明:并非所有都是原创,大家看下就好,代码我放在最下面附件里了。具体用什么集成和前端文件在hacs商店都能搜得到。

由于我改的这套界面如果出门的时候,不想点离家模式的时候,又不能直观的看出哪些1楼、2楼哪些设备没关,所以我把1楼、2楼的灯、开关电源插座插排、窗帘、空调分别做成一个group,进行分类,然后在1楼、2楼下面增加了:(灯开、插座开、窗帘开、空调开)


例如:1楼下面显示灯开,就代表1楼有灯类的设备是开启状态,这样就比较直观一些!



注:所有左上角带X号的界面是弹出界面。
弹出界面用的是browser_mod,之前我用的是该作者的:https://github.com/thomasloven/hass-browser_mod,结果手机端有BUG,总是全屏,无论怎么设置都没用,结果查资料发现有作者已经修复了,链接:https://github.com/raymercury/hass-browser_mod
如果安装之前版本的browser_mod的用户一定切记,删除干净以后手机端需要刷新缓存,具体方法如下:hacs商店里点删除就行,把之前的版本删除,然后下载修复的那个版本,然后打开手机app  配置----手机App----调试----重置页面缓存



2024-01-25更新如下:


1.在1楼和2楼页面分别增加了统计灯、插座、窗帘、空调数量功能,点击可以一键开启/关闭,具体如下图
(注意:因为灯、窗帘、插座的统计代码是统计有多少是on或open,而空调的代码是统计多少个关闭,用了if嵌套,我这边1楼是3个空调、2楼是2个空调,如果大家数量跟我不符的,需要自己改代码哦!)

QQ截图20240125102746.png
2.增加了几个插排的代码(该代码并非原创,抄自论坛一位大佬帖子)



2023_08_31_19_39_IMG_5451.PNG 2023_08_31_19_39_IMG_5452.PNG 2023_08_31_19_39_IMG_5453.PNG 2023_08_31_19_39_IMG_5454.PNG 2023_08_31_19_39_IMG_5455.PNG 2023_08_31_19_39_IMG_5456.PNG 2023_08_31_19_39_IMG_5457.PNG 2023_08_31_19_40_IMG_5458.PNG 2023_08_31_19_40_IMG_5459.PNG IMG_6475.PNG IMG_6477.PNG IMG_6478.PNG 2023_08_31_22_37_IMG_5485.PNG 2023_08_31_22_37_IMG_5486.PNG 2023_08_31_22_37_IMG_5487.PNG 2023_08_31_22_48_IMG_5507.PNG 2023_08_31_22_37_IMG_5489.PNG 2023_08_31_22_48_IMG_5508.PNG IMG_6479.PNG 2023_08_31_22_37_IMG_5491.PNG 2023_08_31_22_37_IMG_5492.PNG IMG_6476.PNG IMG_6480.PNG IMG_6481.PNG IMG_6482.PNG IMG_6483.PNG 2023_08_31_22_38_IMG_5494.PNG 2023_08_31_22_38_IMG_5495.PNG 2023_08_31_22_38_IMG_5496.PNG 2023_08_31_22_38_IMG_5497.PNG 2023_08_31_22_48_IMG_5509.PNG IMG_6486.PNG IMG_6484.PNG 2023_08_31_22_48_IMG_5510.PNG IMG_6487.PNG IMG_6485.PNG 2023_08_31_22_40_IMG_5503.PNG 2023_08_31_22_40_IMG_5504.PNG 2023_08_31_22_40_IMG_5505.PNG IMG_6488.PNG

如果需要滑动切换代码的只需要安装这个即可:

QQ截图20230901152110.png

例如我把天然气余额和手机套餐信息做了滑动切换:

QQ截图20230901152240.png QQ截图20230901152246.png

type: custom:swipe-card
parmameters:
  loop: true
  effect: coverflow
cards:
  - type: custom:stack-in-card
    title: 天然气余额
    mode: vertical
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.tian_ran_qi_jie_zhi_shi_jian
        icon: mdi:currency-usd
        name: 更新时间
        icon_type: none
        layout: vertical
        fill_container: false
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.1lou_tian_ran_qi_yu_e
            name: 1楼
            layout: vertical
            icon: mdi:currency-cny
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.2lou_tian_ran_qi_yu_e
            name: 2楼
            layout: vertical
            icon: mdi:currency-cny
  - type: custom:stack-in-card
    title: 手机套餐余量
    mode: vertical
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.lian_tong_tao_can_geng_xin_shi_jian
        icon: mdi:currency-usd
        name: 更新时间
        icon_type: none
        layout: vertical
        fill_container: false
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.lian_tong_sheng_yu_hua_fei
            name: 剩余话费
            layout: vertical
            icon: mdi:currency-cny
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.lian_tong_sheng_yu_liu_liang
            name: 剩余流量
            layout: vertical
            icon: mdi:clipboard-flow
          - type: custom:mushroom-entity-card
            entity: sensor.lian_tong_sheng_yu_yu_yin
            name: 剩余语音
            layout: vertical
            icon: mdi:account-tie-voice
            icon_color: purple


代码大家回复一下吧,辛苦了,隐藏内容有小技巧哦!

游客,如果您要查看本帖隐藏内容请回复




















评分

参与人数 23金钱 +108 收起 理由
chr0429 + 1 感谢楼主分享!
oscar2024 + 1 高手,这是高手!
benlky + 1 感谢楼主分享!
学童 + 1 感谢楼主分享!
8616032 + 2
wuyouning + 5 论坛有你更精彩!
snowing + 5 高手,这是高手!
baiqianlover + 5 高手,这是高手!
aogubest + 1
Aretaeus + 2 感谢楼主分享!
DDDear + 10 感谢楼主分享!
xajeff + 1 高手,这是高手!
ekingfan + 8 纳尼,还有这种操作?
ma303973022 + 5 在下对你的景仰犹如滔滔长江之水,连绵不绝.
hbzjhg + 1 感谢楼主分享!
Feokce + 2 高手,这是高手!
Bulb8852 + 2 论坛有你更精彩!
q873139535 + 5 高手,这是高手!
eric + 20 感谢楼主分享!
隔壁的王叔叔 + 10 楼主是个有才,又愿意分享的胖子,点赞.

查看全部评分

回复

使用道具 举报

16

主题

149

帖子

1243

积分

金牌会员

Rank: 6Rank: 6

积分
1243
金钱
1094
HASS币
0
发表于 2023-8-31 20:41:34 | 显示全部楼层
挺好的,请问楼主用的啥品牌的智能锁?
回复

使用道具 举报

22

主题

465

帖子

5186

积分

元老级技术达人

略懂一些皮毛而已!

积分
5186
金钱
4711
HASS币
40
 楼主| 发表于 2023-8-31 20:43:08 | 显示全部楼层
wpw72 发表于 2023-8-31 20:41
挺好的,请问楼主用的啥品牌的智能锁?

耶鲁,您那边可以去上面的另一个帖子里去看。
回复

使用道具 举报

17

主题

77

帖子

1476

积分

金牌会员

Rank: 6Rank: 6

积分
1476
金钱
1399
HASS币
0
发表于 2023-8-31 21:09:51 | 显示全部楼层
需要遥控器那个单独的卡片,用的是哪一种卡片?能分享下吗,一大堆代码看不明白是用哪一种卡片
回复

使用道具 举报

22

主题

465

帖子

5186

积分

元老级技术达人

略懂一些皮毛而已!

积分
5186
金钱
4711
HASS币
40
 楼主| 发表于 2023-8-31 21:17:47 | 显示全部楼层
skiong 发表于 2023-8-31 21:09
需要遥控器那个单独的卡片,用的是哪一种卡片?能分享下吗,一大堆代码看不明白是用哪一种卡片 ...

遥控器界面是仿照这个帖子改的,我这边是增加了一些图标,
https://bbs.hassbian.com/thread-12198-1-1.html
回复

使用道具 举报

13

主题

181

帖子

2475

积分

金牌会员

Rank: 6Rank: 6

积分
2475
金钱
2294
HASS币
0
发表于 2023-8-31 21:32:38 | 显示全部楼层
大佬 电视遥控的卡片分享下呗
回复

使用道具 举报

22

主题

465

帖子

5186

积分

元老级技术达人

略懂一些皮毛而已!

积分
5186
金钱
4711
HASS币
40
 楼主| 发表于 2023-8-31 21:33:42 | 显示全部楼层
fz雪之汐若 发表于 2023-8-31 21:32
大佬 电视遥控的卡片分享下呗

遥控器界面是仿照这个帖子改的,我这边是增加了一些图标,
https://bbs.hassbian.com/thread-12198-1-1.html
回复

使用道具 举报

13

主题

181

帖子

2475

积分

金牌会员

Rank: 6Rank: 6

积分
2475
金钱
2294
HASS币
0
发表于 2023-8-31 21:43:35 | 显示全部楼层
郭子漳 发表于 2023-8-31 21:33
遥控器界面是仿照这个帖子改的,我这边是增加了一些图标,
https://bbs.hassbian.com/thread-12198-1-1.h ...

你修改的图标能分享吗?
回复

使用道具 举报

22

主题

465

帖子

5186

积分

元老级技术达人

略懂一些皮毛而已!

积分
5186
金钱
4711
HASS币
40
 楼主| 发表于 2023-8-31 21:47:00 | 显示全部楼层
fz雪之汐若 发表于 2023-8-31 21:43
你修改的图标能分享吗?

yaokong.rar (1005.53 KB, 下载次数: 71, 售价: 3 金钱)
回复

使用道具 举报

12

主题

84

帖子

694

积分

高级会员

Rank: 4

积分
694
金钱
610
HASS币
10
发表于 2023-8-31 21:55:34 | 显示全部楼层
我刚看了两个帖子,正准备开始抄作业呢。哈哈。
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-5-19 13:48 , Processed in 0.133961 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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