This is how I do it (based on a post in here)
- type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
sort:
method: name
filter:
include:
- state: "unavailable"
options:
type: custom:mushroom-entity-card
secondary_info: none
- state: "Unavailable"
options:
type: custom:mushroom-entity-card
exclude:
- integration: ibeacon
Loved the roborock interface.
Can you share the code for it?
Also, how did you make the Mop Intensity and Route selections?
Sorry, Iām not very good at Node-RED. 
Can you explain how to do this?
Hi
I have a problem, my wife is home all day, what to doā¦
He he
I have a Person.card showing Home/Not Home, from the mobileā¦ But i thing iām missing somethingā¦
bc. if my wife is out, it still shows her as āHomeā.
Can someone guide/help me, so when my wife is out, then I can see her as āNot Homeā?
I do have these sensors:
zone.home
sensor.oneplust8_geocoded_location and sensor.oneplust8_wifi_connection (but both is not updating, these are 6 hours old and donāt track correct in history)
type: custom:mushroom-person-card
entity: person.linda
primary_info: none
secondary_info: none
use_entity_picture: true
icon_type: entity-picture
entity_picture: /local/......png
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('device_tracker.oneplust8', 'not_home') }}
}
you can do s.th like this if this is helpful
type: custom:auto-entities
filter:
include:
- domain: device_tracker
state: 'home'
attributes:
is_wired: false
options:
type: custom:mushroom-template-card
primary: "{{ state_attr(entity , 'friendly_name') }}"
secondary: >-
{{ state_attr(entity , 'ip') }} ,
{{ state_attr(entity , 'essid') }}
icon: "{{ state_attr(entity , 'icon') }}"
icon_color: blue
multiline_secondary: true
tap_action:
action: more-info
badge_icon: mdi:wifi
badge_color: green@fellipute, thanks! I will post the whole collective on Github. That is where I keep many of the things I have put together that folks would like to look at. Reason is itās too much code for here (cards, YAML + Automations + input_selects and such).
The mop intensity, route and vacuum speed are just helpers with the defined set of speeds.You can figure them out from this which is an automation that triggers when one of them changes to set the proper vacuum mode.
alias: Set Vacuum Mode
description: ""
trigger:
- platform: state
entity_id:
- input_select.vac_mop_intensity
- input_select.vac_speed
- input_select.vac_mop_route
condition: []
action:
- choose:
- conditions:
- condition: template
value_template: "{{trigger.entity_id == 'input_select.vac_mop_intensity'}}"
sequence:
- service: vacuum.send_command
data:
command: set_water_box_custom_mode
params: |
{% if states("input_select.vac_mop_intensity") == "Off" %}
{{ 200 }}
{% elif states("input_select.vac_mop_intensity") == "Low" %}
{{ 201 }}
{% elif states("input_select.vac_mop_intensity") == "Medium" %}
{{ 202 }}
{% elif states("input_select.vac_mop_intensity") == "High" %}
{{ 203}}
{% endif %}
target:
entity_id: vacuum.roborock_s7
- conditions:
- condition: template
value_template: "{{trigger.entity_id == 'input_select.vac_mop_route'}}"
sequence:
- service: vacuum.send_command
data:
command: set_mop_mode
params: |
{% if states("input_select.vac_mop_route") == "Standard" %}
{{ 300 }}
{% elif states("input_select.vac_mop_route") == "Deep" %}
{{ 301 }}
{% elif states("input_select.vac_mop_route") == "Deep+" %}
{{ 303 }}
{% endif %}
target:
entity_id: vacuum.roborock_s7
- conditions:
- condition: template
value_template: "{{trigger.entity_id == 'input_select.vac_speed'}}"
sequence:
- service: vacuum.send_command
data_template:
command: set_custom_mode
params: |
{% if states("input_select.vac_speed") == "Silent" %}
{{ 101 }}
{% elif states("input_select.vac_speed") == "Balanced" %}
{{ 102 }}
{% elif states("input_select.vac_speed") == "Turbo" %}
{{ 103 }}
{% elif states("input_select.vac_speed") == "Max" %}
{{ 104 }}
{% endif %}
target:
entity_id: vacuum.roborock_s7
mode: single
I probably could have used trigger.entity_id in the params but that would not save much code.
Try this
card_mod:
style: |
mushroom-shape-avatar {
{% if not is_state(config.entity, "home") %}
filter: grayscale(100%);
{% endif %}
}
I love this thread! So many great ideas and such a helpful community - Rhys you need the Mushroom equivalent of a Nobel Prize good sir 
Hopefully you all might be able to assist me in this one:
Iām trying to build this button here (mocked up)
However the bes Iāve managed to do is this:
Iāve built the above using the following yaml:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: |-
Current {{states ('sensor.master_bedroom_current_temp')}} Ā°C
Target {{states ('sensor.master_bedroom_target_temp')}} Ā°C
icon: mdi:bed-king
layout: vertical
icon_color: yellow
multiline_secondary: true
fill_container: false
card_mod:
style: |
:host {
--ha-card-border-color: rgba(0,0,0,0);
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: sensor.master_bedroom_faults
icon: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
mdi:check
{% else %}
mdi:exclamation-thick
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.master_bedroom_mode
icon: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
mdi:calendar-check
{% else %}
mdi:calendar-alert
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.chip-container {
flex-flow: column !important;
}
What I canāt work out is how to essentially adjust the column sizes on the stack-in-card so that the mushroom template card takes up 3/4 of the space and the chip cards only take up the necessary portion.
Is it that even the right method to achieve it?
Iām not sure if itās relevant but the button will be part of a 2x2 grid of the same buttons for the different rooms in my house.
Iāve trawled this topic and fiddled around plenty so my apologies for any frustration caused if itās an easy answer. I just canāt seem to figure it out! Many thanks guys
I styled about 9 chips on a chip card that are all warnings, ie outdoor motion, water leaks, garbage day, etc, but when I converted them to conditional chips, the styling stopped working. I currently have the card_mod at the parent level, so not sure if there is mushroom-conditional-chip, option or if I have to switch to styling the child method.
Thanks
@rhsyb you bloody legend. Is there a way to clean up the pixelation in the radial?
Windows (Edge):
iOS:
Or is depending on the browser?
You can add a slight blur between the colors to reduce the jaggies, like this:
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
Adding a Conditional Chip changes the selector. Have a look here:
Can you share your code ?
Sure.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: blue
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_cyan_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: red
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_magenta_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: yellow
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_yellow_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:water
icon_color: disabled
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_black_toner_remaining
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: green
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: '{{states((entity))}} %'
multiline_secondary: false
entity: sensor.mfc_9340cdw_fuser_remaining_life
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
Try something like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: |-
Current {{states ('sensor.master_bedroom_current_temp')}} Ā°C
Target {{states ('sensor.master_bedroom_target_temp')}} Ā°C
icon: mdi:bed-king
layout: vertical
icon_color: yellow
multiline_secondary: true
fill_container: false
card_mod:
style: |
ha-card {
width: 200%;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: sensor.master_bedroom_faults
icon: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
mdi:check
{% else %}
mdi:exclamation-thick
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_faults') %}
{% if state=='Nil' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.master_bedroom_mode
icon: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
mdi:calendar-check
{% else %}
mdi:calendar-alert
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_mode') %}
{% if state=='FollowSchedule' %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
right: 4px;
top: calc(25% - 6px);
}
.chip-container {
flex-flow: column !important;
}
Could you kindly tell me how to set the measurements of a person card?
you probably have to look at ease-in and ease-out
or check what the great Another take author did:
icon_fan2:
styles:
custom_fields:
icon:
- width: 75%
- margin-left: -3%
custom_fields:
icon: >
[[[
const path = `
<circle cx="25" cy="25" r="6.6"/>
<path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>
`;
const style = `
<svg viewBox="0 0 50 50">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(1080deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center;
fill: #9ca2a5;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.end_timeout {
fill: #9ca2a5;
}
</style>
`;
if (variables.state === 'on' && variables.timeout < 2000) {
return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
}
if (variables.state === 'off' && variables.timeout < 2000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (variables.state === 'on' && variables.timeout > 2000) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
oh that is nice! thanks for sharing.
I anchored it a bit (and took out some superflous () ):
type: custom:hui-element
card_type: horizontal-stack
cards:
- entity: sensor.epson_ink_level_black
icon_color: black
<<: &card
type: custom:mushroom-template-card
icon: mdi:water
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: >
{{states(entity)}} %
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
}
- entity: sensor.epson_ink_level_cyan
icon_color: cyan
<<: *card
- entity: sensor.epson_ink_level_magenta
icon_color: pink
<<: *card
- entity: sensor.epson_ink_level_yellow
icon_color: yellow
<<: *card
- entity: sensor.epson_ink_level_waste
icon_color: disabled
<<: *card
Didnt yet set the box shadow to none because for testing purposes I want it to stick out still (I dont want to use stack-in-card)
Note I had to use āpinkā for my magenta cartridge. Which was a bit of a surprise since magenta is an official htmlcolor name.
btw, look whatās happening, its flashing constantly
now trying to do the same for regular tile card, but that hasnāt been my luck yet. not sure how to find the correct dom on that.
type: tile
icon: mdi:water
name: ' '
vertical: true
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
ha-tile-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
}
This is the neatest room card Iāve personally seen so far with the left icon linking to the room page and the light button turning on the room lights, perhaps with the light % changed to the room temp would be good too. Iāve seen this image posted a few times in this thread but for the life of me I canāt find if anyone has posted any yaml for it! If anyone has then Iād appreciate a link! Thanks.
