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

 找回密码
 立即注册
查看: 9997|回复: 36

[UI界面] [更新中]移动端的Mushroom面板设计

[复制链接]

4

主题

48

帖子

747

积分

高级会员

Rank: 4

积分
747
金钱
699
HASS币
0
发表于 2023-7-5 08:41:55 | 显示全部楼层 |阅读模式
本帖最后由 myhades 于 2024-3-31 12:24 编辑

更新个新主页,重新弄了顶部栏和chips,加了场景状态,底部导航栏加了高斯模糊效果 IMG_8481.PNG

由于更新内容太多,另开一贴重新写。重要的几个特性:
1)全局导航
2)单个类型可复用的popup card
3)自动生成cards的耗材管理
4)单个页面内的快速类型选择
先上首页图,内容之后一边完善面板一边填吧。

Home Screen of My Mushroom Card


前排提醒,由于能力和时间有限,不太可能分享一个完整的拆分配置和教程。
如标题所述,我的重心放在怎样设计一个高效、简介且一致的移动端面板——基于mushroom。

后期解决css的奇怪的animation后会开始分享更多组件的yaml配置。
(请问有大佬知道这个是不是browser_mod的问题,因为我看到一个有类似的提出问题但是显示已被解决,Card Mod Issue
目前是应用了animation和transition none !important的标签,但是在首次加载时还是有缩放和排版的动画,后续加载后恢复正常)


---------------配置分割线---------------

目前正在结合之前的经验大量重写,便于通用化和分享,部分看起来奇怪或者冗长的代码可能是为了避免细节问题的workaround(例如HA启动时实体未准备好,卡片配置错误等导致的直接break整张卡片等)
由于个人时间有限,卡片分享我会视需求情况,完善后逐步更新。
这是第一次分享yaml配置,水平有限,同时不少设计或template写法来源于官方社区,由于时间久远帖子众多,无法一一列举原帖原作者,如有不周请见谅。
也欢迎大家可以向我提出改进的建议,也可以在此分享自己的Mushroom设计。
(注:我不太熟悉Markdown,我这边看到论坛似乎显示的是大于符号的转义“> ”,可能需要注意一下)

应用模板需要安装一下插件,可以使用HACS或手动安装,单击前往Repo:
1)房间卡片
如图所示,可以快速展示灯光/设备/空调/窗帘状态,单击导航,长按关闭等功能。
以下default栏目为预留好的所有变量,均为可选,需要该功能才需要填入(否则应用默认值)。需要自定义的功能可自行修改该template。

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: '[[area_friendly_name]]'
      secondary: |-
        {% set light_list=
          expand(states.light) 
          |selectattr('entity_id', 'in', area_entities('[[area_name]]'))
          |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='[[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('[[climate_entity]]') %} {% 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('[[cover_entity]]') %} {% 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('[[script_entity]]','on') %}

        {% if script_status %}正在关闭中...{% else %}
        {{'[[cover_name]]'+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_name]]'+climate_status if climate_status is defined}} {%
        endif %}
      icon: '[[icon]]'
      icon_color: >-
        {% set light_list=
          expand(states.light) 
          |selectattr('entity_id', 'in', area_entities('[[area_name]]'))
          |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='[[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('[[climate_entity]]') %} {% 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('[[cover_entity]]') %} {% 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('[[script_entity]]','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('[[area_name]]'))
          |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('[[area_name]]'))
          |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: '[[navigation_path]]'
      hold_action:
        action: call-service
        service: script.turn_on
        data: {}
        target:
          entity_id: '[[script_entity]]'
      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

Standard Room Card Template

















评分

参与人数 2金钱 +20 收起 理由
sorrypqa + 10 感谢楼主分享!
隔壁的王叔叔 + 10 简洁,希望作者进一步分享。

查看全部评分

回复

使用道具 举报

0

主题

608

帖子

2516

积分

金牌会员

Rank: 6Rank: 6

积分
2516
金钱
1908
HASS币
0
发表于 2023-7-5 08:54:34 | 显示全部楼层
这个帖子会分享配置吗 小白想抄作业
回复

使用道具 举报

0

主题

35

帖子

953

积分

高级会员

Rank: 4

积分
953
金钱
918
HASS币
0
发表于 2023-7-5 14:06:36 | 显示全部楼层
不同客户端,能设置自动用不同的页面吗
回复

使用道具 举报

5

主题

197

帖子

1467

积分

金牌会员

Rank: 6Rank: 6

积分
1467
金钱
1270
HASS币
0
发表于 2023-7-5 15:38:50 | 显示全部楼层

这个帖子会分享配置吗 小白想抄作业
回复

使用道具 举报

0

主题

2

帖子

116

积分

注册会员

Rank: 2

积分
116
金钱
114
HASS币
0
发表于 2023-7-5 16:17:14 | 显示全部楼层
很漂亮,有没有ipad宽屏界面的配置
回复

使用道具 举报

23

主题

329

帖子

1396

积分

金牌会员

Rank: 6Rank: 6

积分
1396
金钱
1067
HASS币
10
发表于 2023-7-5 16:51:48 | 显示全部楼层
这个要如何弄,分享一下教程?
回复

使用道具 举报

4

主题

48

帖子

747

积分

高级会员

Rank: 4

积分
747
金钱
699
HASS币
0
 楼主| 发表于 2023-7-5 17:05:20 | 显示全部楼层
Ari 发表于 2023-7-5 08:54
这个帖子会分享配置吗 小白想抄作业

最后可能会,但是我也在学怎么把配置文件拆开归类,所以可能得等一段时间
回复

使用道具 举报

4

主题

48

帖子

747

积分

高级会员

Rank: 4

积分
747
金钱
699
HASS币
0
 楼主| 发表于 2023-7-5 17:07:29 | 显示全部楼层
idook 发表于 2023-7-5 14:06
不同客户端,能设置自动用不同的页面吗

不太确定是什么意思,如果是指排版的话,可以用layout card和card mod写css配合,如果只是想进入不同的dashboard或者view的话,browser_mod有这个功能
回复

使用道具 举报

23

主题

329

帖子

1396

积分

金牌会员

Rank: 6Rank: 6

积分
1396
金钱
1067
HASS币
10
发表于 2023-7-5 18:21:27 来自手机 | 显示全部楼层
那个根据每个房间分类设备如何做出来的?
回复

使用道具 举报

3

主题

185

帖子

3351

积分

论坛元老

Rank: 8Rank: 8

积分
3351
金钱
3166
HASS币
0
发表于 2023-7-5 22:39:53 | 显示全部楼层
区域可以考虑tab插件,操作起来比较便捷
IMG_4313.png
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-25 07:24 , Processed in 0.127308 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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