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

 找回密码
 立即注册
查看: 1538|回复: 7

[UI界面] 分享下嫩白简约风手机UI

[复制链接]

3

主题

185

帖子

3351

积分

论坛元老

Rank: 8Rank: 8

积分
3351
金钱
3166
HASS币
0
发表于 2024-3-21 17:05:42 | 显示全部楼层 |阅读模式
本帖最后由 自在 于 2024-3-21 19:09 编辑

论坛上抄作业搞了个mushroom界面

2361711011465_.jpg

概要
type: markdown
content: >-

  {% if states('binary_sensor.lumi_lumi_magnet_ac01_opening') == 'off' %}

  <ha-alert alert-type="success">大门关闭中  [<ha-icon
  icon="mdi:exit-to-app"></ha-icon>](/lovelace/af)</ha-alert>

  {% else%} 

  <ha-alert alert-type="warning">大门未关闭,迅速检查  [<ha-icon
  icon="mdi:exit-to-app"></ha-icon>](/lovelace/af)</ha-alert>

  {% endif %}





  {%- set low_batteries = states |
    selectattr('attributes.battery_level', 'defined') |
    selectattr('attributes.battery_level','<=', 30 )  |
    rejectattr('attributes.friendly_name', 'contains', 'iPhone')|
    rejectattr('attributes.friendly_name', 'contains', 'bin')|
    rejectattr('attributes.friendly_name', 'contains','MX')
    | 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>



  {% set state = state_attr('weather.tian_qi', 'daily_forecast')%}

  {% if is_state('weather.tian_qi', 'sunny' or 'WIND' or 'PARTLY_CLOUDY_NIGHT'
  or 'partlycloudy' or 'clear-night' or 'CLEAR_DAY') %}

  <ha-alert
  alert-type="info">{{states.weather.tian_qi.attributes.forecast_hourly}}
  室外温度{{state[0].native_temperature}}/{{state[0].native_templow}}°,当前{{states.weather.tian_qi.attributes.temperature}}° 
  [<ha-icon icon="mdi:exit-to-app"></ha-icon>](/lovelace/tq)</ha-alert>

  {% else%} 

  <ha-alert
  alert-type="warning">{{states.weather.tian_qi.attributes.forecast_hourly}}
  室外温度{{state[0].native_temperature}}/{{state[0].native_templow}}°,当前{{states.weather.tian_qi.attributes.temperature}}° 
  [<ha-icon icon="mdi:exit-to-app"></ha-icon>](/lovelace/tq)</ha-alert>

  {% endif %}





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

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

  <ha-alert alert-type="info">扫地机正在吃土  [<ha-icon
  icon="mdi:exit-to-app"></ha-icon>](/lovelace/sdj)</ha-alert>

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

  <ha-alert alert-type="info">扫地机正在休息  [<ha-icon
  icon="mdi:exit-to-app"></ha-icon>](/lovelace/sdj)</ha-alert>

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

  <ha-alert alert-type="info">扫地机返回基站中  [<ha-icon
  icon="mdi:exit-to-app"></ha-icon>](/lovelace/sdj)</ha-alert>

  {%- else %}

  <ha-alert alert-type="error">扫地机在发神经 {{states.vacuum.shi_tou_g10s.state}} 
  [<ha-icon icon="mdi:exit-to-app"></ha-icon>](/lovelace/sdj)</ha-alert>

  {%- endif %}



设备
type: vertical-stack
cards:
  - type: custom:search-card
  - type: vertical-stack
    cards:
      - 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:
                  title: 灯光
                  content:
                    type: vertical-stack
                    cards:
                      - type: logbook
                        entities:
                          - sensor.number_lights_on
                        hours_to_show: 72
                        card_mod:
                          style:
                            .: |
                              ha-card {
                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              }
                      - 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;

                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              
                            }
          - 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:
                  title: 空调
                  content:
                    type: vertical-stack
                    cards:
                      - type: logbook
                        entities:
                          - sensor.number_climates_on
                        hours_to_show: 72
                        card_mod:
                          style:
                            .: |
                              ha-card {
                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              }
                      - 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;
                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              
                            }
          - 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:
                  title: 功率
                  content:
                    type: vertical-stack
                    cards:
                      - 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: 合相
                        card_mod:
                          style:
                            .: |
                              ha-card {
                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              }
                      - type: energy-usage-graph
                        card_mod:
                          style:
                            .: |
                              ha-card {
                                /* 删除默认卡样式 */
                                --ha-card-box-shadow: none;
                                --ha-card-background: none;
                                --ha-card-border-width: 0;
                              }
      - 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: custom:tabbed-card
options:
  defaultTabIndex: 0
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: tile
              entity: light.ke_ting_diao_deng
              name: 吊灯
              icon: mdi:chandelier
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: group.ktbd
              name: 壁灯
              icon: mdi:coach-lamp
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.ke_ting_an_cang_deng
              name: 暗藏灯
              icon: mdi:led-strip-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.ketingshedeng
              name: 射灯
              icon: mdi:light-recessed
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: group.1fzl
              name: 1F走廊
              icon: mdi:lightbulb-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: group.2fzl
              name: 2F走廊
              icon: mdi:lightbulb-variant
              tap_action:
                action: toggle
              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: tile
              entity: light.can_ting_diao_deng
              name: 吊灯
              icon: mdi:chandelier
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.cantingancangdeng
              name: 暗藏燈
              icon: mdi:led-strip-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.cantingshedeng
              name: 射灯
              icon: mdi:light-recessed
              tap_action:
                action: toggle
              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: tile
              entity: light.light_3ch_3c963a_light_1
              icon: mdi:lightbulb-variant
              name: 玄关
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.chufangzhudeng
              name: 主灯
              icon: mdi:lightbulb-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              name: 灯带
              entity: light.chu_fang_deng_dai
              icon: mdi:led-strip-variant
              tap_action:
                action: toggle
              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: tile
              entity: light.smart_plug
              name: 灯带
              icon: mdi:led-strip-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.smart_switch_4
              name: 轨道灯
              icon: mdi:led-strip
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.smart_switch_5
              name: 叁号筒灯
              icon: mdi:light-recessed
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.smart_switch_3
              name: 沿窗筒灯
              icon: mdi:light-recessed
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.2fbei_wo_wei_sheng_jian_deng_dai
              name: 卫生间灯带
              icon: mdi:led-strip-variant
              tap_action:
                action: toggle
              hold_action:
                action: more-info
            - type: tile
              entity: light.2fbeiwoweishengjianfangdeng
              name: 卫生间方灯
              icon: mdi:rhombus-outline
              tap_action:
                action: toggle
              hold_action:
                action: more-info
        - type: custom:mushroom-title-card
          title: ''
          subtitle: 环境
        - type: grid
          square: false
          columns: 2
          cards:
            - type: tile
              entity: cover.sonoff_10013b9c67
              features:
                - type: cover-position
            - type: tile
              entity: cover.sonoff_10013b9d82
              features:
                - type: cover-position
        - type: custom:mushroom-climate-card
          show_temperature_control: true
          name: 空调
          hvac_modes:
            - heat
            - cool
          entity: climate.2fbei_wo



WechatIMG235.jpg







评分

参与人数 1金钱 +8 收起 理由
summ99111 + 8 感谢楼主分享!

查看全部评分

回复

使用道具 举报

6

主题

81

帖子

492

积分

中级会员

Rank: 3Rank: 3

积分
492
金钱
411
HASS币
10
发表于 2024-3-21 23:09:25 来自手机 | 显示全部楼层
可以贴一下完整的仪表盘代码吗
回复

使用道具 举报

3

主题

185

帖子

3351

积分

论坛元老

Rank: 8Rank: 8

积分
3351
金钱
3166
HASS币
0
 楼主| 发表于 2024-3-22 08:01:40 | 显示全部楼层
wmhack 发表于 2024-3-21 23:09
可以贴一下完整的仪表盘代码吗

参考这个帖子
https://bbs.hassbian.com/forum.p ... peid%26typeid%3D100
回复

使用道具 举报

0

主题

608

帖子

2516

积分

金牌会员

Rank: 6Rank: 6

积分
2516
金钱
1908
HASS币
0
发表于 2024-3-22 09:49:15 | 显示全部楼层
不错不错,我抄一下概要部分 感觉不错
回复

使用道具 举报

0

主题

74

帖子

243

积分

中级会员

Rank: 3Rank: 3

积分
243
金钱
169
HASS币
0
发表于 2024-3-22 23:18:36 | 显示全部楼层
不错不错,感觉不错
回复

使用道具 举报

5

主题

68

帖子

358

积分

中级会员

Rank: 3Rank: 3

积分
358
金钱
290
HASS币
0
发表于 2024-4-1 09:39:03 | 显示全部楼层
谢谢分享~
回复

使用道具 举报

1

主题

51

帖子

204

积分

中级会员

Rank: 3Rank: 3

积分
204
金钱
153
HASS币
0
发表于 2024-8-17 14:16:16 | 显示全部楼层
谢谢分享
回复

使用道具 举报

0

主题

29

帖子

122

积分

注册会员

Rank: 2

积分
122
金钱
93
HASS币
0
发表于 2024-8-28 16:38:54 | 显示全部楼层

感谢分享,这个太漂亮了
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-24 02:52 , Processed in 0.212649 second(s), 34 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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