[更新中]移动端的Mushroom面板设计
本帖最后由 myhades 于 2024-3-31 12:24 编辑更新个新主页，重新弄了顶部栏和chips，加了场景状态，底部导航栏加了高斯模糊效果
由于更新内容太多，另开一贴重新写。重要的几个特性：
1）全局导航
2）单个类型可复用的popup card
3）自动生成cards的耗材管理
4）单个页面内的快速类型选择
先上首页图，内容之后一边完善面板一边填吧。!(https://s2.loli.net/2023/08/05/Ugs4ydZtbPpVkji.png)
前排提醒，由于能力和时间有限，不太可能分享一个完整的拆分配置和教程。
如标题所述，我的重心放在怎样设计一个高效、简介且一致的移动端面板——基于mushroom。
后期解决css的奇怪的animation后会开始分享更多组件的yaml配置。
（请问有大佬知道这个是不是browser_mod的问题，因为我看到一个有类似的提出问题但是显示已被解决，Card Mod Issue
目前是应用了animation和transition none !important的标签，但是在首次加载时还是有缩放和排版的动画，后续加载后恢复正常）
---------------配置分割线---------------
目前正在结合之前的经验大量重写，便于通用化和分享，部分看起来奇怪或者冗长的代码可能是为了避免细节问题的workaround（例如HA启动时实体未准备好，卡片配置错误等导致的直接break整张卡片等）
由于个人时间有限，卡片分享我会视需求情况，完善后逐步更新。
这是第一次分享yaml配置，水平有限，同时不少设计或template写法来源于官方社区，由于时间久远帖子众多，无法一一列举原帖原作者，如有不周请见谅。
也欢迎大家可以向我提出改进的建议，也可以在此分享自己的Mushroom设计。
（注：我不太熟悉Markdown，我这边看到论坛似乎显示的是大于符号的转义“> ”，可能需要注意一下）
应用模板需要安装一下插件，可以使用HACS或手动安装，单击前往Repo：1) Decluttering Card [https://github.com/custom-cards/decluttering-card](https://github.com/custom-cards/decluttering-card)
2) Mushroom [https://github.com/piitaya/lovelace-mushroom](https://github.com/piitaya/lovelace-mushroom)
1）房间卡片
如图所示，可以快速展示灯光/设备/空调/窗帘状态，单击导航，长按关闭等功能。
以下default栏目为预留好的所有变量，均为可选，需要该功能才需要填入（否则应用默认值）。需要自定义的功能可自行修改该template。
```yaml
decluttering_templates:
std_room_card:#Decluttering Card 模板
default:#所有变量的默认值
- area_name: none#区域名称，用于灯具判断，灯实体的位置必须对应，隐藏的实体不计入
- area_friendly_name: 默认房间#区域别称，即卡片标题
- cover_name: 窗帘#窗帘别称
- cover_entity: none# 窗帘的cover实体
- climate_name: 中央空调#空调别称
- climate_entity: none#空调的climate实体
- icon: mdi:help#显示图标
- appliance_string: none#设备列表字符串，格式为"switch.xxx,media_player.xxx,fan.xxx"
- script_entity: none#该区域对应的功能（如一键关闭该区域所有设备）脚本，长按卡片执行
- navigation_path: /lovelace/home#导航路径，单击卡片执行
card:
type: custom:mushroom-template-card
primary: '[]'
secondary: |-
{% set light_list=
expand(states.light)
|selectattr('entity_id', 'in', area_entities('[]'))
|map(attribute='entity_id')
|reject('is_hidden_entity')
|list
%}
{% set lights_ns=namespace(number=0) %} {% for entity in light_list %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None'] %}
{% set lights_ns.number=lights_ns.number+1 %}
{% endif %}
{% endfor %}
{% set appliance_string='[]' %}
{% set appliances_ns=namespace(number=0) %} {% for entity in
appliance_string.split(",") %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None', 'standby', 'paused', 'idle', 'not_home'] %}
{% set appliances_ns.number=appliances_ns.number+1 %}
{% endif %}
{% endfor %}
{% set climate=states('[]') %} {% if climate not in
['off', 'unknown', 'unavailable', 'None'] %}
{% if climate=='cool' %}{% set climate_status='制冷' %}
{% elif climate=='heat' %}{% set climate_status='制热' %}
{% elif climate=='dry' %}{% set climate_status='除湿' %}
{% elif climate=='fan_only' %}{% set climate_status='送风' %}
{% else %}{% set climate_status='打开' %}
{% endif %}
{% endif %}
{% set curtain=states('[]') %} {% if curtain not in
['off', 'unknown', 'unavailable', 'None'] %}
{% if curtain=='open' %}{% set curtain_status='已打开' %}
{% elif curtain=='closed' %}{% set curtain_status='已合上' %}
{% else %}{% set curtain_status='未知' %}
{% endif %}
{% endif %}
{% if lights_ns.number==0 and appliances_ns.number==0 and
(climate_status is not defined) %} {% set all_off=true %} {% else %}{%
set all_off=false %} {% endif %}
{% set script_status=is_state('[]','on') %}
{% if script_status %}正在关闭中...{% else %}
{{'[]'+curtain_status if curtain_status is defined}}{% if
all_off %}
已关闭{% else %}{% if lights_ns.number!=0 %}
{{lights_ns.number}}盏灯亮着{% endif %}{% if appliances_ns.number!=0 %}
{{appliances_ns.number}}个设备打开{% endif %}{% endif %}
{{'[]'+climate_status if climate_status is defined}} {%
endif %}
icon: '[]'
icon_color: >-
{% set light_list=
expand(states.light)
|selectattr('entity_id', 'in', area_entities('[]'))
|map(attribute='entity_id')
|reject('is_hidden_entity')
|list
%}
{% set lights_ns=namespace(number=0) %} {% for entity in light_list %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None'] %}
{% set lights_ns.number=lights_ns.number+1 %}
{% endif %}
{% endfor %}
{% set appliance_string='[]' %}
{% set appliances_ns=namespace(number=0) %} {% for entity in
appliance_string.split(",") %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None', 'standby', 'paused', 'idle', 'not_home'] %}
{% set appliances_ns.number=appliances_ns.number+1 %}
{% endif %}
{% endfor %}
{% set climate=states('[]') %} {% if climate not in
['off', 'unknown', 'unavailable', 'None'] %}
{% if climate=='cool' %}{% set climate_status='制冷' %}
{% elif climate=='heat' %}{% set climate_status='制热' %}
{% elif climate=='dry' %}{% set climate_status='除湿' %}
{% elif climate=='fan_only' %}{% set climate_status='送风' %}
{% else %}{% set climate_status='打开' %}
{% endif %}
{% endif %}
{% set curtain=states('[]') %} {% if curtain not in
['off', 'unknown', 'unavailable', 'None'] %}
{% if curtain=='open' %}{% set curtain_status='已打开' %}
{% elif curtain=='closed' %}{% set curtain_status='已合上' %}
{% else %}{% set curtain_status='未知' %}
{% endif %}
{% endif %}
{% if lights_ns.number==0 and appliances_ns.number==0 and
(climate_status is not defined) %} {% set all_off=true %} {% else %}{%
set all_off=false %} {% endif %}
{% set script_status=is_state('[]','on') %}
{% if script_status %}orange {% elif climate_status is defined %}green
{% elif appliances_ns.number!=0 %}blue {% endif %}
badge_icon: |-
{% set light_list=
expand(states.light)
|selectattr('entity_id', 'in', area_entities('[]'))
|map(attribute='entity_id')
|reject('is_hidden_entity')
|list
%}
{% set lights_ns=namespace(number=0) %} {% for entity in light_list %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None'] %}
{% set lights_ns.number=lights_ns.number+1 %}
{% endif %}
{% endfor %}
{{ 'mdi:ceiling-light-outline' if lights_ns.number>0 }}
badge_color: |-
{% set light_list=
expand(states.light)
|selectattr('entity_id', 'in', area_entities('[]'))
|map(attribute='entity_id')
|reject('is_hidden_entity')
|list
%}
{% set lights_ns=namespace(number=0) %} {% for entity in light_list %}
{% if states(entity) not in ['off', 'unknown', 'unavailable', 'None'] %}
{% set lights_ns.number=lights_ns.number+1 %}
{% endif %}
{% endfor %}
{{ 'orange' if lights_ns.number>0 }}
multiline_secondary: true
fill_container: true
tap_action:
action: navigate
navigation_path: '[]'
hold_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: '[]'
double_tap_action:
action: none
layout: horizontal
···
使用配置示例
```
type: custom:decluttering-card
template: std_room_card
variables:
- area_name: secondary_bedroom
- area_friendly_name: 次卧
- icon: mdi:bed-queen-outline
- cover_entity: cover.xxx
- climate_entity: climate.xxx
- appliance_string: fan.xxx
- script_entity: script.xxx
- navigation_path: /lovelace/home
```
!(https://s2.loli.net/2023/08/05/JLR531jspQCOiyT.png )
这个帖子会分享配置吗 小白想抄作业 不同客户端，能设置自动用不同的页面吗
这个帖子会分享配置吗 小白想抄作业 很漂亮，有没有ipad宽屏界面的配置 这个要如何弄，分享一下教程？ Ari 发表于 2023-7-5 08:54
这个帖子会分享配置吗 小白想抄作业
最后可能会，但是我也在学怎么把配置文件拆开归类，所以可能得等一段时间 idook 发表于 2023-7-5 14:06
不同客户端，能设置自动用不同的页面吗
不太确定是什么意思，如果是指排版的话，可以用layout card和card mod写css配合，如果只是想进入不同的dashboard或者view的话，browser_mod有这个功能 那个根据每个房间分类设备如何做出来的？ 区域可以考虑tab插件，操作起来比较便捷