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

 找回密码
 立即注册
楼主: myhades

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

[复制链接]

22

主题

184

帖子

1524

积分

金牌会员

Rank: 6Rank: 6

积分
1524
金钱
1340
HASS币
10
发表于 2023-8-14 11:17:56 | 显示全部楼层
自在 发表于 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷

老哥,tab插件全称是啥
回复

使用道具 举报

3

主题

99

帖子

781

积分

高级会员

Rank: 4

积分
781
金钱
682
HASS币
0
发表于 2023-8-29 21:24:30 | 显示全部楼层
楼主这个底部的 主页 区域 更多的dock栏是咋搞的呀
回复

使用道具 举报

3

主题

185

帖子

3351

积分

论坛元老

Rank: 8Rank: 8

积分
3351
金钱
3166
HASS币
0
发表于 2023-9-6 10:31:54 | 显示全部楼层
Anooki 发表于 2023-8-14 11:17
老哥,tab插件全称是啥

Tabbed Card
回复

使用道具 举报

1

主题

37

帖子

353

积分

中级会员

Rank: 3Rank: 3

积分
353
金钱
316
HASS币
0
发表于 2023-11-19 10:56:13 | 显示全部楼层
自在 发表于 2023-7-5 22:39
区域可以考虑tab插件,操作起来比较便捷

可以抄一下作业么,我按范例改的只显示第一页,后面都不显示了
回复

使用道具 举报

1

主题

37

帖子

353

积分

中级会员

Rank: 3Rank: 3

积分
353
金钱
316
HASS币
0
发表于 2023-11-19 19:50:03 | 显示全部楼层
请问底部的那条菜单栏怎么实现的
回复

使用道具 举报

3

主题

185

帖子

3351

积分

论坛元老

Rank: 8Rank: 8

积分
3351
金钱
3166
HASS币
0
发表于 2023-11-22 20:15:49 | 显示全部楼层
本帖最后由 自在 于 2023-11-22 20:21 编辑
wz1134 发表于 2023-11-19 10:56
可以抄一下作业么,我按范例改的只显示第一页,后面都不显示了
  - title: 主页
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: 概要
          - type: markdown
            content: >-
              {% if states('binary_sensor.lumi_lumi_magnet_ac01_opening') ==
              'off' %}

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

              {% else%} 

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

              {% endif %}


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

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

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

              {% endif %}

              </ha-alert>


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

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

              {% else%} 

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

              {% endif %}

              </ha-alert>


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

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

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

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

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

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

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

              {%- else %}

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

              {%- endif %}
      - type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: 设备
            subtitle: ''
          - type: custom:search-card
          - square: false
            type: grid
            cards:
              - type: custom:mushroom-template-card
                primary: 灯光
                secondary: |-
                  {% if states('sensor.number_lights_on')  | float >= 1 %}
                  {{states.sensor.number_lights_on.state}}  盏
                  {% else%} 
                  全部关着
                  {% endif %}
                icon: mdi:lightbulb-on
                layout: vertical
                icon_color: >-
                  {{ (states('sensor.number_lights_on') | float >= 1) |
                  iif('orange', '') }}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      content:
                        type: vertical-stack
                        cards:
                          - type: custom:mushroom-title-card
                            title: 灯光
                          - type: logbook
                            entities:
                              - sensor.number_lights_on
                            hours_to_show: 72
                          - type: custom:mini-graph-card
                            entities:
                              - entity: sensor.number_lights_on
                                color: orange
                            hours_to_show: 24
                            points_per_hour: 60
                            animate: true
                            line_width: 2
                            show:
                              name: false
                              icon: false
                              state: false
                              legend: false
                            card_mod:
                              style: |
                                ha-card {
                                  border-radius: 12px;
                                  box-shadow: none;
                                }
              - type: custom:mushroom-template-card
                primary: 空调
                secondary: |-
                  {% if states('sensor.number_climates_on') | float >= 1 %}
                  {{states.sensor.number_climates_on.state}}  台
                  {% else%} 
                  全部关着
                  {% endif %}
                icon: mdi:air-conditioner
                layout: vertical
                icon_color: >-
                  {{ (states('sensor.number_climates_on') | float >= 1) |
                  iif('blue', '') }}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      content:
                        type: vertical-stack
                        cards:
                          - type: custom:mushroom-title-card
                            title: 空调
                          - type: logbook
                            entities:
                              - sensor.number_climates_on
                            hours_to_show: 72
                          - type: custom:mini-graph-card
                            entities:
                              - entity: sensor.number_climates_on
                                color: '#03A9F4'
                            hours_to_show: 24
                            points_per_hour: 60
                            animate: true
                            line_width: 2
                            show:
                              name: false
                              icon: false
                              state: false
                              legend: false
                            card_mod:
                              style: |
                                ha-card {
                                  border-radius: 12px;
                                  box-shadow: none;
                                }
              - type: custom:mushroom-template-card
                primary: 功率
                secondary: |-
                  {{states.sensor.he_xiang_you_gong_gong_lu_pt.state}} 
                   W
                icon: mdi:lightning-bolt
                layout: vertical
                icon_color: >-
                  {{ (states('sensor.he_xiang_you_gong_gong_lu_pt') | float <=
                  1000) | iif('green', 'red') }}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      content:
                        type: vertical-stack
                        cards:
                          - type: custom:mushroom-title-card
                            title: 功率
                          - type: entities
                            show_header_toggle: false
                            state_color: true
                            entities:
                              - entity: sensor.axiang_dian_ya_ua
                                name: 电压
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: sensor.axiang_dian_ya_ua
                                    name: A相
                                  - entity: sensor.bxiang_dian_ya_ub
                                    name: B相
                                  - entity: sensor.cxiang_dian_ya_uc
                                    name: C相
                              - entity: sensor.axiang_dian_liu_ia
                                name: 电流
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: sensor.axiang_dian_liu_ia
                                    name: A相
                                  - entity: sensor.bxiang_dian_liu_ib
                                    name: B相
                                  - entity: sensor.cxiang_dian_liu_ic
                                    name: C相
                              - entity: sensor.he_xiang_you_gong_gong_lu_pt
                                name: 有功功率
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: sensor.axiang_you_gong_gong_lu_pa
                                    name: A相
                                  - entity: sensor.bxiang_you_gong_gong_lu_pb
                                    name: B相
                                  - entity: sensor.cxiang_you_gong_gong_lu_pc
                                    name: C相
                                  - entity: sensor.he_xiang_you_gong_gong_lu_pt
                                    name: 合相
                              - entity: sensor.he_xiang_wu_gong_gong_lu_qt
                                name: 无功功率
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: sensor.axiang_wu_gong_gong_lu_qa
                                    name: A相
                                  - entity: sensor.bxiang_wu_gong_gong_lu_qb
                                    name: B相
                                  - entity: sensor.cxiang_wu_gong_gong_lu_qc
                                    name: C相
                                  - entity: sensor.he_xiang_wu_gong_gong_lu_qt
                                    name: 合相
                              - entity: >-
                                  sensor.zui_jin_yi_tian_yong_dian_liang_3507589481640
                                name: 电量
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: >-
                                      sensor.zui_jin_yi_tian_yong_dian_liang_3507589481640
                                    name: 最近一天
                                  - entity: >-
                                      sensor.ben_yue_yong_dian_liang_3507589481640
                                    name: 本月电量
                                  - entity: >-
                                      sensor.jin_nian_yi_lai_yong_dian_liang_3507589481640
                                    name: 今年电量
                              - entity: >-
                                  sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640
                                name: 电费
                                type: custom:multiple-entity-row
                                show_state: false
                                entities:
                                  - entity: >-
                                      sensor.dian_fei_yu_e_shang_qi_zhang_dan_jin_e_3507589481640
                                    name: 余额
                                  - entity: >-
                                      sensor.jin_nian_yi_lai_dian_fei_3507589481640
                                    name: 今年电费
                                  - entity: >-
                                      sensor.shu_ju_geng_xin_de_zui_hou_ri_qi_3507589481640
                                    name: 更新日期
                          - type: custom:mini-graph-card
                            name: 功率
                            hours_to_show: 12
                            points_per_hour: 1
                            animate: true
                            entities:
                              - entity: sensor.he_xiang_you_gong_gong_lu_pt
                                name: 合相
                              - entity: sensor.axiang_you_gong_gong_lu_pa
                                name: A相
                              - entity: sensor.bxiang_you_gong_gong_lu_pb
                                name: B相
                              - entity: sensor.cxiang_you_gong_gong_lu_pc
                                name: C相
                            show:
                              name: false
                              icon: false
                              graph: bar
          - type: custom:auto-entities
            show_empty: false
            card:
              type: entities
              state_color: true
              show_header_toggle: true
              title: 已开启
            filter:
              include:
                - domain: light
                  options:
                    type: custom:mushroom-light-card
                    use_light_color: true
                    show_brightness_control: true
                    layout: horizontal
                    hold_action:
                      action: more-info
                - domain: climate
                  options:
                    type: custom:mushroom-climate-card
                    show_temperature_control: true
                    hvac_modes:
                      - heat
                      - cool
                    layout: horizontal
                    hold_action:
                      action: more-info
                - domain: fan
                  options:
                    type: custom:mushroom-fan-card
                    icon_animation: true
                    hold_action:
                      action: more-info
                - domain: vacuum
                  options:
                    type: custom:mushroom-vacuum-card
                    commands:
                      - return_home
                      - locate
                      - clean_spot
                      - start_pause
                    icon_animation: true
                    tap_action:
                      action: url
                      url_path: mihome://device?did=577508595&uid=224179353&server=cn
                    layout: horizontal
                    hold_action:
                      action: more-info
              exclude:
                - state: 'off'
                - state: unavailable
                - state: docked
                - entity_id: fan.espwml_fan
      - type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: 区域
          - type: custom:tabbed-card
            options:
              defaultTabIndex: 3
            tabs:
              - label: tab
                attributes:
                  label: 客厅
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 灯光
                    - type: grid
                      square: false
                      columns: 2
                      cards:
                        - type: custom:mushroom-light-card
                          entity: light.ke_ting_diao_deng
                          name: 吊灯
                          icon: mdi:chandelier
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: group.ktbd
                          name: 壁灯
                          icon: mdi:coach-lamp
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.ke_ting_an_cang_deng
                          name: 暗藏灯
                          icon: mdi:led-strip-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.ketingshedeng
                          name: 射灯
                          icon: mdi:light-recessed
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: group.1fzl
                          name: 1F走廊
                          icon: mdi:lightbulb-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: group.2fzl
                          name: 2F走廊
                          icon: mdi:lightbulb-variant
                          hold_action:
                            action: more-info
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 环境
                    - type: custom:mushroom-climate-card
                      entity: climate.1fke_ting
                      name: 1F空调
                      show_temperature_control: true
                      hvac_modes:
                        - heat
                        - cool
                    - type: custom:mushroom-climate-card
                      entity: climate.2fzou_lang
                      name: 2F空调
                      show_temperature_control: true
                      hvac_modes:
                        - heat
                        - cool
              - label: tab
                attributes:
                  label: 餐厅
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 灯光
                    - type: grid
                      square: false
                      columns: 2
                      cards:
                        - type: custom:mushroom-light-card
                          entity: light.can_ting_diao_deng
                          name: 吊灯
                          icon: mdi:chandelier
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.cantingancangdeng
                          name: 暗藏燈
                          icon: mdi:led-strip-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.cantingshedeng
                          name: 射灯
                          icon: mdi:light-recessed
                          hold_action:
                            action: more-info
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 环境
                    - type: custom:mushroom-climate-card
                      entity: climate.can_ting
                      show_temperature_control: true
                      name: 空调
                      hvac_modes:
                        - heat
                        - cool
              - label: tab
                attributes:
                  label: 厨房
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 灯光
                    - type: grid
                      square: false
                      columns: 2
                      cards:
                        - type: custom:mushroom-light-card
                          entity: light.light_3ch_3c963a_light_1
                          icon: mdi:lightbulb-variant
                          name: 玄关
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.chufangzhudeng
                          name: 主灯
                          icon: mdi:lightbulb-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          name: 灯带
                          entity: light.chu_fang_deng_dai
                          icon: mdi:led-strip-variant
                          hold_action:
                            action: more-info
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 环境
                    - type: custom:mushroom-climate-card
                      show_temperature_control: true
                      name: 空调
                      hvac_modes:
                        - heat
                        - cool
                      entity: climate.chu_fang
              - label: tab
                attributes:
                  label: 卧室
                card:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 灯光
                    - type: grid
                      square: false
                      columns: 2
                      cards:
                        - type: custom:mushroom-light-card
                          entity: light.sonoff_100143611c_1
                          name: 灯带
                          icon: mdi:led-strip-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.sonoff_10014389da_2
                          name: 轨道灯
                          icon: mdi:led-strip
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.sonoff_10014389da_1
                          name: 叁号筒灯
                          icon: mdi:light-recessed
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.sonoff_100143611c_2
                          name: 沿窗筒灯
                          icon: mdi:light-recessed
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.2fbei_wo_wei_sheng_jian_deng_dai
                          name: 卫生间灯带
                          icon: mdi:led-strip-variant
                          hold_action:
                            action: more-info
                        - type: custom:mushroom-light-card
                          entity: light.2fbeiwoweishengjianfangdeng
                          name: 卫生间方灯
                          icon: mdi:rhombus-outline
                          hold_action:
                            action: more-info
                    - type: custom:mushroom-title-card
                      title: ''
                      subtitle: 环境
                    - type: grid
                      square: false
                      columns: 2
                      cards:
                        - type: custom:mushroom-cover-card
                          entity: cover.sonoff_10013b9c67
                          show_buttons_control: false
                          show_tilt_position_control: false
                          show_position_control: true
                        - type: custom:mushroom-cover-card
                          entity: cover.sonoff_10013b9d82
                          show_position_control: true
                          show_buttons_control: false
                    - type: custom:mushroom-climate-card
                      show_temperature_control: true
                      name: 空调
                      hvac_modes:
                        - heat
                        - cool
                      entity: climate.2fbei_wo

回复

使用道具 举报

1

主题

37

帖子

353

积分

中级会员

Rank: 3Rank: 3

积分
353
金钱
316
HASS币
0
发表于 2023-11-27 15:03:24 | 显示全部楼层
请问底部那栏怎么做的
回复

使用道具 举报

0

主题

20

帖子

83

积分

注册会员

Rank: 2

积分
83
金钱
63
HASS币
0
发表于 2023-11-30 11:01:30 | 显示全部楼层
学习学些了,超级好看
回复

使用道具 举报

0

主题

20

帖子

83

积分

注册会员

Rank: 2

积分
83
金钱
63
HASS币
0
发表于 2023-11-30 11:25:41 | 显示全部楼层
学习学习学习一下下下下
回复

使用道具 举报

0

主题

20

帖子

83

积分

注册会员

Rank: 2

积分
83
金钱
63
HASS币
0
发表于 2023-11-30 14:27:06 | 显示全部楼层

学习学习学习一下下下下
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-25 07:52 , Processed in 0.196813 second(s), 30 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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