设为首页收藏本站
切换到窄版

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

 找回密码
 立即注册
『瀚思彼岸』» 智能家居技术论坛»论坛首页 › 〖HomeAssistant〗技术讨论区 › 『HomeAssistant』综合讨论区 › 蘑菇卡片分享
1234567下一页
返回列表 发新帖
查看: 10449|回复: 64

[UI界面] 蘑菇卡片分享

  [复制链接]
qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
发表于 2023-8-23 17:54:53 | 显示全部楼层 |阅读模式
本帖最后由 qiaofei828 于 2023-8-23 18:15 编辑

此贴只是搬运官方论坛的分享，经实测后发出。一般只需要替换代码中的实体即可使用。建议在使用前先安装应用“Mushroom Themes”主题。
由于本人水平有限，不能回答大家在使用中的问题。请大家自行交流。
达到效果需要以下卡片：
1、Mushroom
2、mini-graph-card
3、Vertical Stack In Card
4、card-mod
5、Stack In Card


《欢迎卡片》
作者：@rhysb
效果图：

欢迎卡

欢迎卡
代码：

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
          - type: conditional
            conditions:
              - entity: light.suo_you_deng
                state: 'on'
            chip:
              type: template
              icon: mdi:lightbulb
              content: >-
                {{ expand(states.light.suo_you_deng) | selectattr( 'state',
                'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: light.suo_you_deng
              icon_color: orange
          - type: conditional
            conditions:
              - entity: group.all_windows
                state: 'on'
            chip:
              type: template
              icon_color: grey
              icon: mdi:window-open
              content: >-
                {{ expand(states.group.all_windows) | selectattr( 'state', 'eq',
                'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.all_windows
          - type: conditional
            conditions:
              - entity: binary_sensor.men_chuang_chuan_gan_qi_zu
                state: 'on'
            chip:
              type: template
              icon_color: grey
              icon: mdi:door-open
              content: >-
                {{ expand(states.binary_sensor.men_chuang_chuan_gan_qi_zu) |
                selectattr( 'state', 'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: binary_sensor.men_chuang_chuan_gan_qi_zu
        card_mod:
          style: |
            :host {
              --ha-card-background: var(--card-background-color);
            }
      - square: false
        columns: 2
        type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: nam
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                alignment: start
                card_mod:
                  style: |
                    ha-card { 
                      margin-left: 8px;
                    }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state_not: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.fei_fei', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.fei_fei', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state_not: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.fei_fei', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.fei_fei', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state_not: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.fei_fei', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.fei_fei', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.fei_fei
                        state_not: home
                    chip:
                      type: entity
                      entity: person.fei_fei
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.fei_fei', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.fei_fei', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                alignment: end
                card_mod:
                  style: |
                    ha-card { 
                      margin-right: 8px;
                    }
      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           上午好, {{user}}!
          {% elif (time >= 12) %}
           下午好, {{user}}!
          {% elif (time >= 5) %}
           晚上好, {{user}}!
          {% else %}
           Hello, {{user}}
          {% endif %}
        subtitle: ''
      - type: custom:simple-weather-card
        entity: weather.wo_de_jia
        name: 我的家
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              background: none;
            }
      - 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: house
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: 灯光
            icon: mdi:lightbulb
            icon_color: amber
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: lights
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: 安防
            icon: mdi:shield
            icon_color: green
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: security
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: 媒体
            icon: mdi:speaker
            layout: vertical
            icon_color: red
            tap_action:
              action: navigate
              navigation_path: media
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: 网络
            icon: mdi:lan
            layout: vertical
            icon_color: cyan
            tap_action:
              action: navigate
              navigation_path: media
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(var(--rgb-primary-text-color), 0.01);
    }


评分

参与人数 5金钱 +39 收起 理由
954485679 + 5 感谢楼主分享！
自在 + 10 高手，这是高手！
hunl1986 + 4 赠人玫瑰，手留余香！
DDDear + 10 论坛有你更精彩！
sorrypqa + 10 感谢楼主分享！

查看全部评分

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-23 17:56:58 | 显示全部楼层
本帖最后由 qiaofei828 于 2023-8-23 18:14 编辑

《温湿度卡片》作者：@rhysb
效果图：

温湿度

温湿度
代码：

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.miaomiaoce_t2_d82f_temperature_humidity_sensor
        primary_info: state
        secondary_info: name
        name: 温度
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.miaomiaoce_t2_d82f_relative_humidity
        primary_info: state
        secondary_info: name
        name: 湿度
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.miaomiaoce_t2_d82f_temperature_humidity_sensor
        name: 温度
        color: var(--green-color)
      - entity: sensor.miaomiaoce_t2_d82f_relative_humidity
        name: 湿度
        color: var(--blue-color)
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-23 18:00:31 | 显示全部楼层
用图片代替图标
作者：@rhysb
效果图：

图片代替图标

图片代替图标
垂直代码：

type: custom:mushroom-template-card
icon: mdi
primary: 灯
secondary: '{{ ''开'' if is_state(entity, ''on'') else ''关'' }} '
entity: light.ping_ban_deng_switch
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
  style: |
    mushroom-card {
      background: var(--card-background-color) url( '/local/头像狐狸圆.png' ) no-repeat center 0px;
      background-size: 42px 42px;
      {% if is_state(config.entity, 'on') %}
      {% else %}
        filter: grayscale(100%);
      {% endif %} 
    }


水平代码：

type: custom:mushroom-template-card
icon: mdi
primary: 灯
secondary: '{{ ''开启'' if is_state(entity, ''on'') else ''关闭'' }} '
entity: light.chuang_tou_deng
fill_container: false
multiline_secondary: false
card_mod:
  style: |
    mushroom-card {
      background: var(--card-background-color) url( '/local/头像狐狸圆.png' ) no-repeat 0px center;
      background-size: 42px 42px;
      {% if is_state(config.entity, 'on') %}
      {% else %}
        filter: grayscale(100%);
      {% endif %} 
    }


圆角代码：

type: custom:mushroom-template-card
icon: mdi
primary: 灯
secondary: '{{ ''开'' if is_state(entity, ''on'') else ''关'' }} '
entity: light.ping_ban_deng_switch
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
  style: |
    mushroom-card {
      background: var(--card-background-color) url( '/local/头像狐狸圆.png' ) no-repeat center 0px;
      background-size: 42px 42px;
      {% if is_state(config.entity, 'on') %}
      {% else %}
        filter: grayscale(100%);
      {% endif %} 
    }
    ha-card {
      width: 66px;
      border-radius: 30px;
      margin-left: auto;
      margin-right: auto;
    }

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-23 18:11:07 | 显示全部楼层
调整模板卡字体大小
作者：@rhysb
效果图：

调整字体

调整字体
代码：

type: custom:mushroom-template-card
primary: 首要信息大小25
secondary: 次要信息大小16
icon: mdi:mushroom
layout: horizontal
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 25px;
      --card-secondary-font-size: 16px;
    }

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-23 18:24:23 | 显示全部楼层
灯光图标动画
作者：@rhysb
效果图：

亮度调节

亮度调节
代码：
[/size]
[size=2]type: custom:mushroom-light-card
entity: light.yeelight_ceiling_beiwo
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'on') %}
        --card-mod-icon: 
        {% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
        {% if light_level == 100 %}
          mdi:lightbulb-on
        {% elif light_level > 0 %}
          mdi:lightbulb-on-{{ light_level }}
        {% else %}
          mdi:lightbulb-on-outline
        {% endif %};
      {% else %}
        --card-mod-icon: mdi:lightbulb-outline;
      {% endif %}
    }


回复

使用道具 举报

kuoyeh

4

主题

81

帖子

714

积分

高级会员

Rank: 4

积分
714
金钱
633
HASS币
0
发表于 2023-8-23 21:27:31 | 显示全部楼层
好东西，多谢分享
回复

使用道具 举报

wbdownn

3

主题

280

帖子

2146

积分

金牌会员

Rank: 6Rank: 6

积分
2146
金钱
1866
HASS币
0
发表于 2023-8-23 22:15:34 | 显示全部楼层
漂亮，已经不想折腾了，，极简能用、不随更新而失效的就行了
回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-24 06:32:36 | 显示全部楼层
温湿度卡片
效果图：

温湿度

温湿度
代码：

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.miaomiaoce_t2_7342_temperature_humidity_sensor
        primary: 主卧温度
        secondary: >
          {{ states('sensor.miaomiaoce_t2_7342_temperature_humidity_sensor') |
          round(0) }}°C
        icon: mdi:thermometer
        icon_color: >-
          {% set value =
          states('sensor.miaomiaoce_t2_d82f_temperature_humidity_sensor') | int
          %}

          {% if value < 18 %}
            blue
          {% elif value < 28 %}
            light-green
          {% elif value < 40 %}
            red
          {% else %}
            green
          {% endif %}
        tap_action:
          action: more-info
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 150
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.miaomiaoce_t2_7342_temperature_humidity_sensor
                name: Temperature
            color_thresholds:
              - value: -10
                color: '#0000ff'
              - value: 18
                color: '#0000ff'
              - value: 18.1
                color: '#00FF00'
              - value: 28
                color: '#00FF00'
              - value: 28.1
                color: '#FF0000'
              - value: 40
                color: '#FF0000'
            hours_to_show: 24
            line_width: 3
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  --ha-card-border-width: 0;
                }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.miaomiaoce_t2_7342_relative_humidity
        primary: 主卧湿度
        secondary: >
          {{ states('sensor.miaomiaoce_t2_7342_relative_humidity') | round(0)
          }}%
        icon: mdi:water-percent
        icon_color: blue
        tap_action:
          action: more-info
      - type: custom:layout-card
        layout_type: masonry
        layout:
          width: 150
          max_cols: 1
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.miaomiaoce_t2_7342_relative_humidity
                name: Humidity
                color: '#2196f3'
            hours_to_show: 24
            line_width: 3
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  --ha-card-border-width: 0;
                }

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-24 06:40:38 | 显示全部楼层
仿米家卡片效果图：

仿米家

仿米家
代码：

square: false
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: light.yeelight_ceiling12_0x158d915c
        icon: null
        picture: /local/shebeitu1/客厅吸顶灯.png
        icon_color: null
        primary: 吸顶灯
        secondary: 客厅
        layout: horizontal
        tap_action:
          action: more-info
        double_tap_action:
          action: more-info
        hold_action:
          action: null
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: 45px;
                left: -65px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: 44px;
                left: -65px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            mushroom-shape-avatar$: |
              .picture {
                position: relative;
                left: 0px;
                top: -5px;
                }          
            .: |
              :host {
                --mush-icon-size: 60px;
              }
      - type: custom:mushroom-template-card
        primary: none
        icon_color: |
          {% if is_state(entity, 'on') %}
            #03A9F4
          {% else %}  
            grey
          {% endif %}
        icon: mdi:power
        secondary: none
        entity: light.yeelight_ceiling12_0x158d915c
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        fill_container: false
        card_mod:
          style:
            mushroom-shape-icon$: ''
            .: |
              ha-card {
                width: 60px;
                margin-left: auto;
                top: -85px;
                background: none;
              }
              :host {
                --mush-icon-size: 36px;
              }          
    card_mod:
      style: |
        ha-card {
          height: 118px ;

          margin-left: auto;
          margin-right: auto;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: fan.dmaker_p5c_e827_fan
        picture: /local/shebeitu1/风扇1x.png
        primary: 风扇
        secondary: 客厅
        layout: horizontal
        tap_action:
          action: more-info
        double_tap_action:
          action: more-info
        hold_action:
          action: null
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: 45px;
                left: -65px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: 44px;
                left: -65px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            mushroom-shape-avatar$: |
              .picture {
                position: relative;
                left: 0px;
                top: -5px;
                }          
            .: |
              :host {
                --mush-icon-size: 60px;
              }
      - type: custom:mushroom-template-card
        primary: none
        icon_color: |
          {% if is_state(entity, 'on') %}
            #03A9F4
          {% else %}  
            grey
          {% endif %}
        icon: mdi:power
        secondary: none
        entity: fan.dmaker_p5c_e827_fan
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        badge_color: null
        fill_container: false
        picture: null
        card_mod:
          style:
            mushroom-shape-icon$: ''
            .: |
              ha-card {
                width: 60px;
                margin-left: auto;
                top: -85px;
                background: none;
              }
              :host {
                --mush-icon-size: 36px;
              }          
    card_mod:
      style: |
        ha-card {
          height: 118px ;

          margin-left: auto;
          margin-right: auto;
        }
columns: 2

回复

使用道具 举报

qiaofei828

17

主题

113

帖子

1276

积分

金牌会员

Rank: 6Rank: 6

积分
1276
金钱
1163
HASS币
0
 楼主| 发表于 2023-8-24 06:55:40 | 显示全部楼层
本帖最后由 qiaofei828 于 2023-8-24 07:02 编辑

房间卡片效果图：

房间卡

房间卡
代码：
房间卡.zip (1.56 KB, 下载次数: 284)
回复

使用道具 举报

下一页 »
1234567下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-4-28 06:45 , Processed in 0.062639 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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