蘑菇卡片分享
本帖最后由 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);
}
本帖最后由 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
用图片代替图标
作者：@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;
}
调整模板卡字体大小
作者：@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;
}
灯光图标动画
作者：@rhysb
效果图：
代码：
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 %}
}
好东西，多谢分享 漂亮，已经不想折腾了，，极简能用、不随更新而失效的就行了 温湿度卡片
效果图：
代码：
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;
}
仿米家卡片效果图：
代码：
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 于 2023-8-24 07:02 编辑
房间卡片效果图：
代码：