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

标题: [更新中]移动端的Mushroom面板设计 [打印本页]

作者: myhades    时间: 2023-7-5 08:41
标题: [更新中]移动端的Mushroom面板设计
本帖最后由 myhades 于 2024-3-31 12:24 编辑

更新个新主页,重新弄了顶部栏和chips,加了场景状态,底部导航栏加了高斯模糊效果[attach]57435[/attach]

由于更新内容太多,另开一贴重新写。重要的几个特性:
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) Decluttering Card https://github.com/custom-cards/decluttering-card

2) Mushroom https://github.com/piitaya/lovelace-mushroom



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

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



















作者: Ari    时间: 2023-7-5 08:54
这个帖子会分享配置吗 小白想抄作业
作者: idook    时间: 2023-7-5 14:06
不同客户端,能设置自动用不同的页面吗
作者: 459662146    时间: 2023-7-5 15:38

这个帖子会分享配置吗 小白想抄作业
作者: klhd    时间: 2023-7-5 16:17
很漂亮,有没有ipad宽屏界面的配置
作者: kkk123    时间: 2023-7-5 16:51
这个要如何弄,分享一下教程?
作者: myhades    时间: 2023-7-5 17:05
Ari 发表于 2023-7-5 08:54
这个帖子会分享配置吗 小白想抄作业

最后可能会,但是我也在学怎么把配置文件拆开归类,所以可能得等一段时间
作者: myhades    时间: 2023-7-5 17:07
idook 发表于 2023-7-5 14:06
不同客户端,能设置自动用不同的页面吗

不太确定是什么意思,如果是指排版的话,可以用layout card和card mod写css配合,如果只是想进入不同的dashboard或者view的话,browser_mod有这个功能
作者: kkk123    时间: 2023-7-5 18:21
那个根据每个房间分类设备如何做出来的?
作者: 自在    时间: 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷
作者: myhades    时间: 2023-7-7 10:16
本帖最后由 myhades 于 2023-7-7 10:20 编辑
自在 发表于 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷

谢谢提示,为了展示信息妥协一点操作速度,不过现在用导航栏和区域按钮导航已经挺快了。
倒是房间内部的选择(如信息、设备、环境),我是用chips card+css和conditional card写的,而且每个区域还要一个text helper,如果他的tabs高度可自定义的话就用这个了,方便部署太多
作者: relliky    时间: 2023-7-8 17:53
想问问底端导航栏怎么做的,卡片我会写也会导航,但怎么让他固定到底端呢?
作者: lszjl    时间: 2023-7-8 22:40
想知道你的微标根据状态显示和根据灯光设备是否开启来显示的代码,是否可以分享一下
作者: Sparta    时间: 2023-7-9 17:00
太好用了mushroom

作者: QQ617250210    时间: 2023-7-10 10:07
还在施工中,发出来,大家互相学习

[attach]49654[/attach]

作者: lszjl    时间: 2023-7-10 12:06
Sparta 发表于 2023-7-9 17:00
太好用了mushroom

兄弟 你这个卡片式什么主题吗,这个房间的显示式怎么做到的
作者: Sparta    时间: 2023-7-10 14:22
lszjl 发表于 2023-7-10 12:06
兄弟 你这个卡片式什么主题吗,这个房间的显示式怎么做到的

https://community.home-assistant ... d-easily/388590/236
大神作者的根据地,卡片是mushroom自带的但布局需要自己diy,慢慢摸索吧,前后一个星期才把家里所有120个设备接进去,自己diy的过程非常好玩
作者: lszjl    时间: 2023-7-11 12:14
本帖最后由 lszjl 于 2023-7-11 12:17 编辑
Sparta 发表于 2023-7-10 14:22
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/236 ...

谢谢 英文的看不懂啊 哈哈
作者: myhades    时间: 2023-8-5 16:38
kkk123 发表于 2023-7-5 18:21
那个根据每个房间分类设备如何做出来的?

已更新房间卡片的decluttering card配置
作者: Anooki    时间: 2023-8-12 16:33
Sparta 发表于 2023-7-9 17:00
太好用了mushroom

老哥,能把代码分享出来学习一下嘛
作者: Anooki    时间: 2023-8-14 11:17
自在 发表于 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷

老哥,tab插件全称是啥
作者: lswq    时间: 2023-8-29 21:24
楼主这个底部的 主页 区域 更多的dock栏是咋搞的呀

作者: 自在    时间: 2023-9-6 10:31
Anooki 发表于 2023-8-14 11:17
老哥,tab插件全称是啥

Tabbed Card
作者: wz1134    时间: 2023-11-19 10:56
自在 发表于 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷

可以抄一下作业么,我按范例改的只显示第一页,后面都不显示了
作者: wz1134    时间: 2023-11-19 19:50
请问底部的那条菜单栏怎么实现的
作者: 自在    时间: 2023-11-22 20:15
本帖最后由 自在 于 2023-11-22 20:21 编辑
wz1134 发表于 2023-11-19 10:56
可以抄一下作业么,我按范例改的只显示第一页,后面都不显示了
  1.   - title: 主页
  2.     cards:
  3.       - type: vertical-stack
  4.         cards:
  5.           - type: custom:mushroom-title-card
  6.             title: 概要
  7.           - type: markdown
  8.             content: >-
  9.               {% if states('binary_sensor.lumi_lumi_magnet_ac01_opening') ==
  10.               'off' %}

  11.               <ha-alert alert-type="success">大门关闭中</ha-alert>

  12.               {% else%}

  13.               <ha-alert alert-type="warning">大门未关闭,迅速检查</ha-alert>

  14.               {% endif %}


  15.               {%- set low_batteries = states |
  16.                 selectattr('attributes.battery_level', 'defined') |
  17.                 selectattr('attributes.battery_level','<=', 30 )  |
  18.                 rejectattr('attributes.friendly_name', 'contains', 'bin')
  19.                 | list -%}
  20.               {% if low_batteries | count >= 1 %}

  21.               <ha-alert alert-type="error">{{ low_batteries | list | count
  22.               }}个设备电量低:
  23.                 {%- for battery in low_batteries -%}
  24.                     {%- set message =  "\n -  *"+ battery.name + ' (' + (battery.attributes.battery_level | round(0) | string) + '%)*' -%}
  25.                     {{ message }}
  26.                 {%- endfor -%}
  27.               {% else %}

  28.               <ha-alert alert-type="success">所有设备电量都很正常

  29.               {% endif %}

  30.               </ha-alert>


  31.               {% if
  32.               states('sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640')
  33.               | float <= 0 -%}

  34.               <ha-alert alert-type="error">当前电费余额:
  35.               {{states('sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640')}}元

  36.               {% else%}

  37.               <ha-alert alert-type="success">当前电费余额:
  38.               {{states('sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640')}}元

  39.               {% endif %}

  40.               </ha-alert>


  41.               {% set entity_id = 'vacuum.shi_tou_g10s' %}

  42.               {%- if is_state(entity_id, 'cleaning') -%}

  43.               <ha-alert alert-type="info">扫地机正在吃土</ha-alert>

  44.               {%- elif is_state(entity_id, 'docked') -%}

  45.               <ha-alert alert-type="info">扫地机正在休息</ha-alert>

  46.               {%- elif is_state(entity_id, 'returning') -%}

  47.               <ha-alert alert-type="info">扫地机返回基站中</ha-alert>

  48.               {%- else %}

  49.               <ha-alert alert-type="error">扫地机在发神经
  50.               {{states.vacuum.shi_tou_g10s.state}}</ha-alert>

  51.               {%- endif %}
  52.       - type: vertical-stack
  53.         cards:
  54.           - type: custom:mushroom-title-card
  55.             title: 设备
  56.             subtitle: ''
  57.           - type: custom:search-card
  58.           - square: false
  59.             type: grid
  60.             cards:
  61.               - type: custom:mushroom-template-card
  62.                 primary: 灯光
  63.                 secondary: |-
  64.                   {% if states('sensor.number_lights_on')  | float >= 1 %}
  65.                   {{states.sensor.number_lights_on.state}}  盏
  66.                   {% else%}
  67.                   全部关着
  68.                   {% endif %}
  69.                 icon: mdi:lightbulb-on
  70.                 layout: vertical
  71.                 icon_color: >-
  72.                   {{ (states('sensor.number_lights_on') | float >= 1) |
  73.                   iif('orange', '') }}
  74.                 tap_action:
  75.                   action: fire-dom-event
  76.                   browser_mod:
  77.                     service: browser_mod.popup
  78.                     data:
  79.                       content:
  80.                         type: vertical-stack
  81.                         cards:
  82.                           - type: custom:mushroom-title-card
  83.                             title: 灯光
  84.                           - type: logbook
  85.                             entities:
  86.                               - sensor.number_lights_on
  87.                             hours_to_show: 72
  88.                           - type: custom:mini-graph-card
  89.                             entities:
  90.                               - entity: sensor.number_lights_on
  91.                                 color: orange
  92.                             hours_to_show: 24
  93.                             points_per_hour: 60
  94.                             animate: true
  95.                             line_width: 2
  96.                             show:
  97.                               name: false
  98.                               icon: false
  99.                               state: false
  100.                               legend: false
  101.                             card_mod:
  102.                               style: |
  103.                                 ha-card {
  104.                                   border-radius: 12px;
  105.                                   box-shadow: none;
  106.                                 }
  107.               - type: custom:mushroom-template-card
  108.                 primary: 空调
  109.                 secondary: |-
  110.                   {% if states('sensor.number_climates_on') | float >= 1 %}
  111.                   {{states.sensor.number_climates_on.state}}  台
  112.                   {% else%}
  113.                   全部关着
  114.                   {% endif %}
  115.                 icon: mdi:air-conditioner
  116.                 layout: vertical
  117.                 icon_color: >-
  118.                   {{ (states('sensor.number_climates_on') | float >= 1) |
  119.                   iif('blue', '') }}
  120.                 tap_action:
  121.                   action: fire-dom-event
  122.                   browser_mod:
  123.                     service: browser_mod.popup
  124.                     data:
  125.                       content:
  126.                         type: vertical-stack
  127.                         cards:
  128.                           - type: custom:mushroom-title-card
  129.                             title: 空调
  130.                           - type: logbook
  131.                             entities:
  132.                               - sensor.number_climates_on
  133.                             hours_to_show: 72
  134.                           - type: custom:mini-graph-card
  135.                             entities:
  136.                               - entity: sensor.number_climates_on
  137.                                 color: '#03A9F4'
  138.                             hours_to_show: 24
  139.                             points_per_hour: 60
  140.                             animate: true
  141.                             line_width: 2
  142.                             show:
  143.                               name: false
  144.                               icon: false
  145.                               state: false
  146.                               legend: false
  147.                             card_mod:
  148.                               style: |
  149.                                 ha-card {
  150.                                   border-radius: 12px;
  151.                                   box-shadow: none;
  152.                                 }
  153.               - type: custom:mushroom-template-card
  154.                 primary: 功率
  155.                 secondary: |-
  156.                   {{states.sensor.he_xiang_you_gong_gong_lu_pt.state}}
  157.                    W
  158.                 icon: mdi:lightning-bolt
  159.                 layout: vertical
  160.                 icon_color: >-
  161.                   {{ (states('sensor.he_xiang_you_gong_gong_lu_pt') | float <=
  162.                   1000) | iif('green', 'red') }}
  163.                 tap_action:
  164.                   action: fire-dom-event
  165.                   browser_mod:
  166.                     service: browser_mod.popup
  167.                     data:
  168.                       content:
  169.                         type: vertical-stack
  170.                         cards:
  171.                           - type: custom:mushroom-title-card
  172.                             title: 功率
  173.                           - type: entities
  174.                             show_header_toggle: false
  175.                             state_color: true
  176.                             entities:
  177.                               - entity: sensor.axiang_dian_ya_ua
  178.                                 name: 电压
  179.                                 type: custom:multiple-entity-row
  180.                                 show_state: false
  181.                                 entities:
  182.                                   - entity: sensor.axiang_dian_ya_ua
  183.                                     name: A相
  184.                                   - entity: sensor.bxiang_dian_ya_ub
  185.                                     name: B相
  186.                                   - entity: sensor.cxiang_dian_ya_uc
  187.                                     name: C相
  188.                               - entity: sensor.axiang_dian_liu_ia
  189.                                 name: 电流
  190.                                 type: custom:multiple-entity-row
  191.                                 show_state: false
  192.                                 entities:
  193.                                   - entity: sensor.axiang_dian_liu_ia
  194.                                     name: A相
  195.                                   - entity: sensor.bxiang_dian_liu_ib
  196.                                     name: B相
  197.                                   - entity: sensor.cxiang_dian_liu_ic
  198.                                     name: C相
  199.                               - entity: sensor.he_xiang_you_gong_gong_lu_pt
  200.                                 name: 有功功率
  201.                                 type: custom:multiple-entity-row
  202.                                 show_state: false
  203.                                 entities:
  204.                                   - entity: sensor.axiang_you_gong_gong_lu_pa
  205.                                     name: A相
  206.                                   - entity: sensor.bxiang_you_gong_gong_lu_pb
  207.                                     name: B相
  208.                                   - entity: sensor.cxiang_you_gong_gong_lu_pc
  209.                                     name: C相
  210.                                   - entity: sensor.he_xiang_you_gong_gong_lu_pt
  211.                                     name: 合相
  212.                               - entity: sensor.he_xiang_wu_gong_gong_lu_qt
  213.                                 name: 无功功率
  214.                                 type: custom:multiple-entity-row
  215.                                 show_state: false
  216.                                 entities:
  217.                                   - entity: sensor.axiang_wu_gong_gong_lu_qa
  218.                                     name: A相
  219.                                   - entity: sensor.bxiang_wu_gong_gong_lu_qb
  220.                                     name: B相
  221.                                   - entity: sensor.cxiang_wu_gong_gong_lu_qc
  222.                                     name: C相
  223.                                   - entity: sensor.he_xiang_wu_gong_gong_lu_qt
  224.                                     name: 合相
  225.                               - entity: >-
  226.                                   sensor.zui_jin_yi_tian_yong_dian_liang_3507589481640
  227.                                 name: 电量
  228.                                 type: custom:multiple-entity-row
  229.                                 show_state: false
  230.                                 entities:
  231.                                   - entity: >-
  232.                                       sensor.zui_jin_yi_tian_yong_dian_liang_3507589481640
  233.                                     name: 最近一天
  234.                                   - entity: >-
  235.                                       sensor.ben_yue_yong_dian_liang_3507589481640
  236.                                     name: 本月电量
  237.                                   - entity: >-
  238.                                       sensor.jin_nian_yi_lai_yong_dian_liang_3507589481640
  239.                                     name: 今年电量
  240.                               - entity: >-
  241.                                   sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640
  242.                                 name: 电费
  243.                                 type: custom:multiple-entity-row
  244.                                 show_state: false
  245.                                 entities:
  246.                                   - entity: >-
  247.                                       sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640
  248.                                     name: 余额
  249.                                   - entity: >-
  250.                                       sensor.jin_nian_yi_lai_dian_fei_3507589481640
  251.                                     name: 今年电费
  252.                                   - entity: >-
  253.                                       sensor.shu_ju_geng_xin_de_zui_hou_ri_qi_3507589481640
  254.                                     name: 更新日期
  255.                           - type: custom:mini-graph-card
  256.                             name: 功率
  257.                             hours_to_show: 12
  258.                             points_per_hour: 1
  259.                             animate: true
  260.                             entities:
  261.                               - entity: sensor.he_xiang_you_gong_gong_lu_pt
  262.                                 name: 合相
  263.                               - entity: sensor.axiang_you_gong_gong_lu_pa
  264.                                 name: A相
  265.                               - entity: sensor.bxiang_you_gong_gong_lu_pb
  266.                                 name: B相
  267.                               - entity: sensor.cxiang_you_gong_gong_lu_pc
  268.                                 name: C相
  269.                             show:
  270.                               name: false
  271.                               icon: false
  272.                               graph: bar
  273.           - type: custom:auto-entities
  274.             show_empty: false
  275.             card:
  276.               type: entities
  277.               state_color: true
  278.               show_header_toggle: true
  279.               title: 已开启
  280.             filter:
  281.               include:
  282.                 - domain: light
  283.                   options:
  284.                     type: custom:mushroom-light-card
  285.                     use_light_color: true
  286.                     show_brightness_control: true
  287.                     layout: horizontal
  288.                     hold_action:
  289.                       action: more-info
  290.                 - domain: climate
  291.                   options:
  292.                     type: custom:mushroom-climate-card
  293.                     show_temperature_control: true
  294.                     hvac_modes:
  295.                       - heat
  296.                       - cool
  297.                     layout: horizontal
  298.                     hold_action:
  299.                       action: more-info
  300.                 - domain: fan
  301.                   options:
  302.                     type: custom:mushroom-fan-card
  303.                     icon_animation: true
  304.                     hold_action:
  305.                       action: more-info
  306.                 - domain: vacuum
  307.                   options:
  308.                     type: custom:mushroom-vacuum-card
  309.                     commands:
  310.                       - return_home
  311.                       - locate
  312.                       - clean_spot
  313.                       - start_pause
  314.                     icon_animation: true
  315.                     tap_action:
  316.                       action: url
  317.                       url_path: mihome://device?did=577508595&uid=224179353&server=cn
  318.                     layout: horizontal
  319.                     hold_action:
  320.                       action: more-info
  321.               exclude:
  322.                 - state: 'off'
  323.                 - state: unavailable
  324.                 - state: docked
  325.                 - entity_id: fan.espwml_fan
  326.       - type: vertical-stack
  327.         cards:
  328.           - type: custom:mushroom-title-card
  329.             title: 区域
  330.           - type: custom:tabbed-card
  331.             options:
  332.               defaultTabIndex: 3
  333.             tabs:
  334.               - label: tab
  335.                 attributes:
  336.                   label: 客厅
  337.                 card:
  338.                   type: vertical-stack
  339.                   cards:
  340.                     - type: custom:mushroom-title-card
  341.                       title: ''
  342.                       subtitle: 灯光
  343.                     - type: grid
  344.                       square: false
  345.                       columns: 2
  346.                       cards:
  347.                         - type: custom:mushroom-light-card
  348.                           entity: light.ke_ting_diao_deng
  349.                           name: 吊灯
  350.                           icon: mdi:chandelier
  351.                           hold_action:
  352.                             action: more-info
  353.                         - type: custom:mushroom-light-card
  354.                           entity: group.ktbd
  355.                           name: 壁灯
  356.                           icon: mdi:coach-lamp
  357.                           hold_action:
  358.                             action: more-info
  359.                         - type: custom:mushroom-light-card
  360.                           entity: light.ke_ting_an_cang_deng
  361.                           name: 暗藏灯
  362.                           icon: mdi:led-strip-variant
  363.                           hold_action:
  364.                             action: more-info
  365.                         - type: custom:mushroom-light-card
  366.                           entity: light.ketingshedeng
  367.                           name: 射灯
  368.                           icon: mdi:light-recessed
  369.                           hold_action:
  370.                             action: more-info
  371.                         - type: custom:mushroom-light-card
  372.                           entity: group.1fzl
  373.                           name: 1F走廊
  374.                           icon: mdi:lightbulb-variant
  375.                           hold_action:
  376.                             action: more-info
  377.                         - type: custom:mushroom-light-card
  378.                           entity: group.2fzl
  379.                           name: 2F走廊
  380.                           icon: mdi:lightbulb-variant
  381.                           hold_action:
  382.                             action: more-info
  383.                     - type: custom:mushroom-title-card
  384.                       title: ''
  385.                       subtitle: 环境
  386.                     - type: custom:mushroom-climate-card
  387.                       entity: climate.1fke_ting
  388.                       name: 1F空调
  389.                       show_temperature_control: true
  390.                       hvac_modes:
  391.                         - heat
  392.                         - cool
  393.                     - type: custom:mushroom-climate-card
  394.                       entity: climate.2fzou_lang
  395.                       name: 2F空调
  396.                       show_temperature_control: true
  397.                       hvac_modes:
  398.                         - heat
  399.                         - cool
  400.               - label: tab
  401.                 attributes:
  402.                   label: 餐厅
  403.                 card:
  404.                   type: vertical-stack
  405.                   cards:
  406.                     - type: custom:mushroom-title-card
  407.                       title: ''
  408.                       subtitle: 灯光
  409.                     - type: grid
  410.                       square: false
  411.                       columns: 2
  412.                       cards:
  413.                         - type: custom:mushroom-light-card
  414.                           entity: light.can_ting_diao_deng
  415.                           name: 吊灯
  416.                           icon: mdi:chandelier
  417.                           hold_action:
  418.                             action: more-info
  419.                         - type: custom:mushroom-light-card
  420.                           entity: light.cantingancangdeng
  421.                           name: 暗藏燈
  422.                           icon: mdi:led-strip-variant
  423.                           hold_action:
  424.                             action: more-info
  425.                         - type: custom:mushroom-light-card
  426.                           entity: light.cantingshedeng
  427.                           name: 射灯
  428.                           icon: mdi:light-recessed
  429.                           hold_action:
  430.                             action: more-info
  431.                     - type: custom:mushroom-title-card
  432.                       title: ''
  433.                       subtitle: 环境
  434.                     - type: custom:mushroom-climate-card
  435.                       entity: climate.can_ting
  436.                       show_temperature_control: true
  437.                       name: 空调
  438.                       hvac_modes:
  439.                         - heat
  440.                         - cool
  441.               - label: tab
  442.                 attributes:
  443.                   label: 厨房
  444.                 card:
  445.                   type: vertical-stack
  446.                   cards:
  447.                     - type: custom:mushroom-title-card
  448.                       title: ''
  449.                       subtitle: 灯光
  450.                     - type: grid
  451.                       square: false
  452.                       columns: 2
  453.                       cards:
  454.                         - type: custom:mushroom-light-card
  455.                           entity: light.light_3ch_3c963a_light_1
  456.                           icon: mdi:lightbulb-variant
  457.                           name: 玄关
  458.                           hold_action:
  459.                             action: more-info
  460.                         - type: custom:mushroom-light-card
  461.                           entity: light.chufangzhudeng
  462.                           name: 主灯
  463.                           icon: mdi:lightbulb-variant
  464.                           hold_action:
  465.                             action: more-info
  466.                         - type: custom:mushroom-light-card
  467.                           name: 灯带
  468.                           entity: light.chu_fang_deng_dai
  469.                           icon: mdi:led-strip-variant
  470.                           hold_action:
  471.                             action: more-info
  472.                     - type: custom:mushroom-title-card
  473.                       title: ''
  474.                       subtitle: 环境
  475.                     - type: custom:mushroom-climate-card
  476.                       show_temperature_control: true
  477.                       name: 空调
  478.                       hvac_modes:
  479.                         - heat
  480.                         - cool
  481.                       entity: climate.chu_fang
  482.               - label: tab
  483.                 attributes:
  484.                   label: 卧室
  485.                 card:
  486.                   type: vertical-stack
  487.                   cards:
  488.                     - type: custom:mushroom-title-card
  489.                       title: ''
  490.                       subtitle: 灯光
  491.                     - type: grid
  492.                       square: false
  493.                       columns: 2
  494.                       cards:
  495.                         - type: custom:mushroom-light-card
  496.                           entity: light.sonoff_100143611c_1
  497.                           name: 灯带
  498.                           icon: mdi:led-strip-variant
  499.                           hold_action:
  500.                             action: more-info
  501.                         - type: custom:mushroom-light-card
  502.                           entity: light.sonoff_10014389da_2
  503.                           name: 轨道灯
  504.                           icon: mdi:led-strip
  505.                           hold_action:
  506.                             action: more-info
  507.                         - type: custom:mushroom-light-card
  508.                           entity: light.sonoff_10014389da_1
  509.                           name: 叁号筒灯
  510.                           icon: mdi:light-recessed
  511.                           hold_action:
  512.                             action: more-info
  513.                         - type: custom:mushroom-light-card
  514.                           entity: light.sonoff_100143611c_2
  515.                           name: 沿窗筒灯
  516.                           icon: mdi:light-recessed
  517.                           hold_action:
  518.                             action: more-info
  519.                         - type: custom:mushroom-light-card
  520.                           entity: light.2fbei_wo_wei_sheng_jian_deng_dai
  521.                           name: 卫生间灯带
  522.                           icon: mdi:led-strip-variant
  523.                           hold_action:
  524.                             action: more-info
  525.                         - type: custom:mushroom-light-card
  526.                           entity: light.2fbeiwoweishengjianfangdeng
  527.                           name: 卫生间方灯
  528.                           icon: mdi:rhombus-outline
  529.                           hold_action:
  530.                             action: more-info
  531.                     - type: custom:mushroom-title-card
  532.                       title: ''
  533.                       subtitle: 环境
  534.                     - type: grid
  535.                       square: false
  536.                       columns: 2
  537.                       cards:
  538.                         - type: custom:mushroom-cover-card
  539.                           entity: cover.sonoff_10013b9c67
  540.                           show_buttons_control: false
  541.                           show_tilt_position_control: false
  542.                           show_position_control: true
  543.                         - type: custom:mushroom-cover-card
  544.                           entity: cover.sonoff_10013b9d82
  545.                           show_position_control: true
  546.                           show_buttons_control: false
  547.                     - type: custom:mushroom-climate-card
  548.                       show_temperature_control: true
  549.                       name: 空调
  550.                       hvac_modes:
  551.                         - heat
  552.                         - cool
  553.                       entity: climate.2fbei_wo

复制代码

作者: wz1134    时间: 2023-11-27 15:03
请问底部那栏怎么做的
作者: 6327949    时间: 2023-11-30 11:01
学习学些了,超级好看
作者: 6327949    时间: 2023-11-30 11:25
学习学习学习一下下下下
作者: 6327949    时间: 2023-11-30 14:27

学习学习学习一下下下下
作者: terran    时间: 2023-12-26 20:38
自动生成cards的耗材管理  请问这个是用什么做的?
作者: logan    时间: 2023-12-30 23:26
有谁知道底下dock栏咋弄的
作者: logan    时间: 2024-1-10 20:45
求教,怎么让那个导航栏一直固定在最底部?
作者: michael655    时间: 2024-3-23 12:12
学习学习一下!感谢楼主分享!
作者: kongdk5654    时间: 2024-3-25 12:23
66666666666666
作者: myhades    时间: 2024-3-31 12:19
terran 发表于 2023-12-26 20:38
自动生成cards的耗材管理  请问这个是用什么做的?

这个自定义卡片可以根据条件生成卡片并给每个卡片附上entity_id:
type: custom:auto-entities
作者: hood2000    时间: 2024-4-19 16:16
这个模板怎么用啊




欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5