本帖最后由 郭子漳 于 2023-9-4 08:43 编辑
最近看到论坛各位大神都在改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----调试----重置页面缓存
其实感觉我之前帖子这套界面也挺好的，简单，反而现在这套有点花里胡哨了：https://bbs.hassbian.com/thread-21713-1-2.html
如果需要滑动切换代码的只需要安装这个即可：
例如我把天然气余额和手机套餐信息做了滑动切换：
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
在1楼和2楼页面分别增加了控制灯、插座、空调的总控开关，可以一键开关
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: 灯
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
icon: mdi:chandelier
secondary: |
{% if is_state(entity, 'on') %}
开
{% else %}
关
{% endif %}
double_tap_action:
action: more-info
entity: group.lights2
badge_color: ''
badge_icon: ''
- type: custom:mushroom-template-card
primary: 插座
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
grey
{% endif %}
icon: mdi:power-socket-uk
secondary: |
{% if is_state(entity, 'on') %}
开
{% else %}
关
{% endif %}
double_tap_action:
action: more-info
entity: group.kaiguan2
badge_color: ''
badge_icon: ''
- type: custom:mushroom-template-card
primary: 空调
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
grey
{% endif %}
icon: mdi:air-conditioner
secondary: |
{% if is_state(entity, 'on') %}
开
{% else %}
关
{% endif %}
double_tap_action:
action: more-info
entity: group.kongtiao2
badge_color: ''
badge_icon: ''
代码大家回复一下吧，辛苦了，隐藏内容有小技巧哦！
| 
[复制链接]
发表于 2023-8-31 19:59:58
楼主
