用decluttering card模板制作的界面对系统性能影响很大吗

hood2000 · 发表于 2024-5-1 10:07:35

本帖最后由 hood2000 于 2024-5-1 13:09 编辑

如图k，每个页面的导航、楼层提示和房间都用decluttering的template生成。
感觉app快卡死了

[code]kiosk_mode:
  mobile_settings:
hide_header: false
ignore_entity_settings: Fasle
custom_width: 768
decluttering_templates:
  std_navigate_card:
default:
   - area_name: none
card:
   type: custom:stack-in-card
   cards:
      - type: custom:layout-card
      layout_type: masonry
      layout: {}
      cards:
         - type: horizontal-stack
            cards:
            - type: custom:mushroom-template-card
               primary: 主页
               secondary: ''
               icon: mdi:home
               layout: vertical
               icon_color: blue
               tap_action:
                  action: navigate
                  navigation_path: default_view
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 天气
               secondary: ''
               icon: mdi:weather-lightning-rainy
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: weather
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 负一
               secondary: ''
               icon: mdi:home-floor-negative-1
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: negative-1
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 一楼
               secondary: ''
               icon: mdi:home-floor-1
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: floor-1
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 二楼
               secondary: ''
               icon: mdi:home-floor-2
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: floor-2
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 安防
               secondary: ''
               icon: mdi:shield
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: shield
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
            - type: custom:mushroom-template-card
               primary: 能源
               secondary: ''
               icon: mdi:power
               icon_color: amber
               layout: vertical
               tap_action:
                  action: navigate
                  navigation_path: power
               card_mod:
                  style: |
                  ha-card {
                     background: var(--card-background-color);
                     width: 56px;
                     border-radius: 26px;
                     margin-left: auto;
                     margin-right: auto;
                     margin-bottom: 2px;
                  }
  std_floor_card:
default:
   - area_name: none
   - weather_entity: none
   - light_group: none
   - backlight_group: none
card:
   type: custom:layout-card
   layout_type: masonry
   layout: {}
   cards:
      - type: custom:mushroom-template-card
      primary: >-
         {% set time = now().hour %} {% if (time >= 18) %} 晚上好, {{user}}! {%
         elif (time >= 12) %} 下午好, {{user}}! {% elif (time >= 5) %} 早上好,
         {{user}}! {% else %} 您好, {{user}}! {% endif %}
      icon: mdi:hand-wave
      icon_color: orange
      tap_action:
         action: none
      double_tap_action:
         action: none
      hold_action:
         action: none
      - type: custom:mushroom-chips-card
      alignment: left
      chips:
         - type: weather
            show_temperature: true
            show_conditions: true
            entity: '[[weather_entity]]'
         - type: template
            icon: mdi:lightbulb-group
            icon_color: amber
            content: >-
            {% set all = expand('[[light_group]]')| list -%}  {{ all |
            selectattr('state','eq','on')|list|count }} 个灯光开
            tap_action:
            action: call-service
            service: light.turn_off
            target:
               entity_id: '[[light_group]]'
            hold_action:
            action: call-service
            service: light.turn_on
            target:
               entity_id: '[[light_group]]'
         - type: template
            icon: mdi:lightbulb-group
            icon_color: amber
            content: >-
            {% set all = expand('[[backlight_group]]')| list -%}  {{ all |
            selectattr('state','eq','on')|list|count }} 个底灯开
            tap_action:
            action: call-service
            service: light.turn_off
            target:
               entity_id: '[[backlight_group]]'
            hold_action:
            action: call-service
            service: light.turn_on
            target:
               entity_id: '[[backlight_group]]'
  std_room_card:
default:
   - area_name: none
   - area_friendly_name: 默认房间
   - cover1_name: 厚帘
   - cover1_entity: none
   - cover2_name: 纱帘
   - cover2_entity: none
   - cover3_name: 厚帘
   - cover3_entity: none
   - cover4_name: 纱帘
   - cover4_entity: none
   - climate_name: 中央空调
   - climate_entity: none
   - temp_humi_name: 温湿度计
   - temp_entity: none
   - humi_entity: none
   - icon: mdi:help
   - appliance_string: none
   - script_entity: none
   - navigation_path: none
card:
   type: custom:vertical-stack-in-card
   card_mod:
      style: |
      ha-card {
         height: 178px !important;
         width: 240px !important;
      }
   cards:
      - 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 curtain1=states('[[cover1_entity]]') %} {% if curtain1 not in
         ['off', 'unknown', 'unavailable', 'None'] %}
            {% if curtain1=='open' %}{% set curtain1_status='已打开' %}
            {% elif curtain1=='closed' %}{% set curtain1_status='已合上' %}
            {% else %}{% set curtain1_status='未知' %}
            {% endif %}
         {% endif %}  {% set curtain2=states('[[cover2_entity]]') %} {% if
         curtain2 not in
         ['off', 'unknown', 'unavailable', 'None'] %}
            {% if curtain2=='open' %}{% set curtain2_status='已打开' %}
            {% elif curtain2=='closed' %}{% set curtain2_status='已合上' %}
            {% else %}{% set curtain2_status='未知' %}
            {% endif %}
         {% endif %}       {% set curtain3=states('[[cover3_entity]]') %}
         {% if curtain3 not in
         ['off', 'unknown', 'unavailable', 'None'] %}
            {% if curtain3=='open' %}{% set curtain3_status='已打开' %}
            {% elif curtain3=='closed' %}{% set curtain3_status='已合上' %}
            {% else %}{% set curtain3_status='未知' %}
            {% endif %}
         {% endif %}    {% set curtain4=states('[[cover4_entity]]') %} {%
         if curtain4 not in
         ['off', 'unknown', 'unavailable', 'None'] %}
            {% if curtain4=='open' %}{% set curtain4_status='已打开' %}
            {% elif curtain4=='closed' %}{% set curtain4_status='已合上' %}
            {% else %}{% set curtain4_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 temp=states('[[temp_entity]]') %}  {% if temp not
         in ['off', 'unknown', 'unavailable', 'None']
         %}☀️❄️{{states('[[temp_entity]]')}}℃
         [code]  std_room_device_card:
default:
   - area_name: none
   - area_friendly_name: 默认房间
   - cover1_name: 厚帘
   - cover1_entity: none
   - cover2_name: 纱帘
   - cover2_entity: none
   - cover3_name: 厚帘
   - cover3_entity: none
   - cover4_name: 纱帘
   - cover4_entity: none
   - climate_name: 中央空调
   - climate_entity: none
   - temp_humi_name: 温湿度计
   - temp_entity: none
   - humi_entity: none
   - icon: mdi:help
card:
   type: vertical-stack
   cards:
      - type: custom:auto-entities
      card:
         type: entities
      filter:
         include: >-
            {% set light_list= expand(states.light)  |selectattr('entity_id',
            'in', area_entities('[[area_name]]')) |map(attribute='entity_id')
            |reject('is_hidden_entity') |list %}                - group: {%
            for light_entity in light_list %}{{ light_entity }}{% endfor %}

title: 富力仙湖国际
views:
  - icon: mdi:home
path: default_view
cards:
   - type: custom:decluttering-card
      template: std_navigate_card
   - type: custom:stack-in-card
      title: null
      mode: vertical
      cards:
      - type: horizontal-stack
         cards:
            - type: custom:ch_calendar-card
            entity: sensor.holiday
            icons: /local/community/chineseholiday_card/icons/
            text: null
      - type: horizontal-stack
         cards:
            - type: custom:mushroom-person-card
            entity: person.hood
            name: 笑笑爸爸
            icon: mdi:face-man
            icon_type: entity-picture
            - type: custom:mushroom-person-card
            entity: person.ljy
            name: 笑笑妈妈
            icon: mdi:face-woman
            icon_type: entity-picture
            - type: custom:mushroom-person-card
            entity: person.xiaoxiao
            name: 笑笑
            icon: mdi:face-woman
            icon_type: entity-picture
   - 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
  - title: 天气
icon: mdi:weather-hail
path: weather
subview: false
type: custom:vertical-layout
cards:
   - type: custom:decluttering-card
      template: std_navigate_card
   - type: custom:stack-in-card
      title: null
      mode: vertical
      cards:
      - type: horizontal-stack
         cards:
            - type: vertical-stack
            cards:
               - type: horizontal-stack
                  cards:
                  - type: custom:mushroom-chips-card
                     chips:
                        - type: entity
                        entity: button.nodered_513bc1cceab22de5_2
                        content_info: name
                        icon_color: teal
                        tap_action:
                           action: toggle
                  - type: custom:mushroom-chips-card
                     chips:
                        - type: entity
                        entity: button.nodered_e07e65a06cb4b02b
                        content_info: name
                        icon_color: teal
                        tap_action:
                           action: toggle
                  - type: custom:mushroom-chips-card
                     chips:
                        - type: entity
                        entity: button.nodered_cce5fbe2b5123879
                        content_info: name
                        icon_color: teal
                        tap_action:
                           action: toggle
      - type: horizontal-stack
         cards:
            - type: custom:qweather-card
            entity: weather.tian_qi
            title: null
            name: null
            show_attributes: true
            show_hourly_forecast: true
            show_daily_forecast: true
            show_daily_chart: true
            show_daily_date: true
            show_condition_text: true
            show_keypoint: true
            show_warning: true
            show_warningtext: true
            show_night: true
            show_wind: true
            show_daily_temperature: true
            show_thick_border: false
  - title: 负一楼
icon: mdi:home-floor-negative-1
path: negative-1
subview: false
type: custom:vertical-layout
cards:
   - type: custom:decluttering-card
      template: std_navigate_card
   - type: custom:decluttering-card
      template: std_floor_card
      variables:
      - area_name: 负一楼
      - weather_entity: weather.forecast_wo_de_jia
      - light_group: light.fuyi_lights
      - backlight_group: light.fuyi_backlights
   - square: false
      type: grid
      columns: 2
      cards:
      - type: custom:vertical-stack-in-card
         card_mod:
            style: |
            ha-card {
               height: 178px !important;
               width: px !important;
            }
         cards:
            - type: custom:mushroom-template-card
            icon: mdi:sofa
            icon_color: cyan
            hold_action:
               action: none
            fill_container: true
            double_tap_action:
               action: none
            card_mod:
               style:
                  mushroom-state-info$: |
                  .primary {
                     font-size: 16px !important;
                     position: relative;
                     top: -50px;
                     left: -155px;
                     overflow: visible !important;
                     white-space:
                  }
                  .secondary {
                     position: relative;
                     overflow: visible !important;
                     top: -52px;
                     left: -155px;
                  }
                  mushroom-shape-icon$: |
                  .shape {
                     position: relative;
                     left: -43px;
                     top: 55px;
                  }
                  .: |
                  :host {
                     --mush-icon-size: 146px;
                  }
                  style: |
                  mushroom-badge-icon {
                     left: 60px;
                     top: 5px;
                  }
            primary: 负一影音区
            secondary: >-

hood2000 · 发表于 2024-5-1 12:59:40

我想把每种类似的需要重复用的都做成模板，基本的设备通过区域自动生成，特殊的单独用参数调整。
想问一下，这种用模板的方式有问题吗，怎么能优化？

relliky · 发表于 2024-5-1 16:27:28

>>感觉app快卡死了

卡了多长时间？复杂的lovelace本来打开app的时候第一次加载的时候就很卡，第二次就好了。

relliky · 发表于 2024-5-1 16:30:24

hood2000 发表于 2024-5-1 12:59
我想把每种类似的需要重复用的都做成模板，基本的设备通过区域自动生成，特殊的单独用参数调整。
想问一下 ...

我不知道还有decluttering card这种好东西，所以一直用python模板来生成各种各样的卡片。这是我刚刚开始打算整理分享的卡片合集

https://github.com/relliky/HA_Composite_Card_Lib

而且我还用python模板来生成各个房间的自动化，实体等等见

https://bbs.hassbian.com/thread-20292-1-1.html
https://github.com/relliky/Tais_ ... /gen_config_yaml.py

但是我也不确定是不是性能就好一点。毕竟我没动底层，就是再用一下yaml而已。

hood2000 · 发表于 2024-5-1 17:29:17

relliky 发表于 2024-5-1 16:30
我不知道还有decluttering card这种好东西，所以一直用python模板来生成各种各样的卡片。这是我刚刚开始打 ...

这个card感觉效率不高，学习你的实现方式，python还是比jinja代码简洁多了

hood2000 · 发表于 2024-5-1 17:30:59

relliky 发表于 2024-5-1 16:27
>>感觉app快卡死了

卡了多长时间？复杂的lovelace本来打开app的时候第一次加载的时候就很卡，第二次就好了 ...

切换房间的时候估计卡顿1秒左右，不舒服。

relliky · 发表于 2024-5-1 17:58:00

hood2000 发表于 2024-5-1 17:30
切换房间的时候估计卡顿1秒左右，不舒服。

那你试试呗，我的话就是第一次载入有点卡，后面就还好了。
不过这种也跟性能有关系，你在电脑上用它也这么卡吗？

hood2000 · 发表于 2024-5-1 18:06:31

relliky 发表于 2024-5-1 16:27
>>感觉app快卡死了

卡了多长时间？复杂的lovelace本来打开app的时候第一次加载的时候就很卡，第二次就好了 ...

还真发现了问题，刚打开还不卡，但是切换或者打开几次房间卡片之后就卡了，应该是房间卡片模板里筛选设备的代码有问题。

relliky · 发表于 2024-5-2 00:01:40

hood2000 发表于 2024-5-1 18:06
还真发现了问题，刚打开还不卡，但是切换或者打开几次房间卡片之后就卡了，应该是房间卡片模板里筛选设备 ...

嗯，可能要在打开的时候要跑太多代码来筛选设备了。能想象的出来如果设备多了可能会导致很慢。用python模板提前渲染好，会让实时渲染的工作少很多。

relliky · 发表于 2024-5-2 00:03:01

本帖最后由 relliky 于 2024-5-2 00:04 编辑

hood2000 发表于 2024-5-1 17:29
这个card感觉效率不高，学习你的实现方式，python还是比jinja代码简洁多了

哈哈，我就是因为不喜欢写jinja，所以我自动化尽量用python模板，实在不行再用pyscript。但卡片里面如果要用模板的话，jinja是不得不用的，总有要用的时候，只是我会尽量用的简单而已。

		自动登录	找回密码
密码			立即注册

[求助] 用decluttering card模板制作的界面对系统性能影响很大吗