@rhysb can you plz help me with my query ?
@HelL5toKe These are super nice! Would you mind sharing your sensor templates? It seems you’re using a bunch of them for conditions and badge displays. I’m particularly interested in the number of lights on sensor — how do you determine this? Does it count bulbs or groups? Both? How do you exclude one or the other? Also, that Plex sensor! How did you do that? 
He literally shared his whole YAML in that same post lol.
Does anyone know how to capture the RGB color variable from a multi-color light strip, and pass that value through to the ping CSS animation? Basically, I have a Meross light strip that is attached to the TV. I have already got the automations to turn the light strip on and off based on the TV status, but I want to be able to change the color/see that its on. I don’t want a separate card just for this light, so I want to have it pulsing as an animation on my TV card as part of the larger stack in card.
I can get the icon to ping when the TV/light is turned on, and I can change the color of the icon/shape based on the RGB of the light, but I can’t figure out how to get the animation color to reflect what the light is.
Here is the code for just the animation as I currently have it (I know it says its currently green, but I cant figure out, aside from changing that to a different color hard coded, how to update that part.
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:television
icon_color: cyan
picture: ''
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
{% set status = states('light.smart_led_light_strip_msl320cp_main_channel') %}
{% if status == 'on' %}
animation: ping 2s linear infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
Thanks!
1 Like
hi,
can you share which weather card you are using there ? thank you.
Hey @davidnestico, here is a collapsible version.
Mushroom Collapsible Weather Bar Card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 66px auto 36px
margin: '-4px -4px -12px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: weather.weatherflow_hourly_based_forecast
icon_color: blue
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:hourly-weather
entity: weather.weatherflow_hourly_based_forecast
icons: false
label_spacing: '2'
num_segments: '12'
name: ' '
card_mod:
style:
weather-bar$: |
.main {
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
--color-clear-night: rgba(var(--mush-rgb-black), 0.2) !important;
--color-cloudy: rgba(var(--mush-rgb-grey), 0.2) !important;
--color-fog: var(--color-cloudy);
--color-hail: rgba(var(--mush-rgb-indigo), 0.2) !important;
--color-lightning: var(--color-rainy);
--color-lightning-rainy: var(--color-rainy);
--color-partlycloudy: rgba(var(--mush-rgb-blue), 0.2) !important;
--color-pouring: var(--color-rainy);
--color-rainy: rgba(var(--mush-rgb-indigo), 0.2) !important;
--color-snowy: rgba(var(--mush-rgb-white), 0.2) !important;
--color-snowy-rainy: var(--color-partlycloudy);
--color-sunny: rgba(var(--mush-rgb-yellow), 0.2) !important;
--color-windy: var(--color-sunny);
--color-windy-variant: var(--color-sunny);
--color-exceptional: rgba(var(--mush-rgb-amber), 0.2) !important;
}
.bar > div {
height: 42px !important;
}
.bar > div:first-child {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
.bar > div:last-child {
border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.bar > div > span {
text-shadow: none !important;
color: rgb(var(--primary-text-color));
font-size: 14px;
font-weight: bold;
}
.axes > div > .bar-block-bottom > .hour {
font-size: 12px;
font-weight: bolder;
}
.axes > div > .bar-block-bottom > .temperature {
font-size: 12px;
font-weight: bolder;
}
.axes {
margin-top: 10px !important;
}
.: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin: -8px -4px -4px -16px;
}
- type: custom:mushroom-template-card
entity: input_boolean.weather_bar_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
align-items: flex-end;
box-shadow: none;
}
mushroom-shape-icon {
--shape-color: none !important;
}
card_mod:
style: |
ha-card {
{{ 'height: 66px;' if is_state('input_boolean.weather_bar_dropdown', 'off') }}
}
16 Likes
Try something like this:
type: custom:mushroom-template-card
icon: mdi:television
icon_color: cyan
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
{% set status = states(config.entity) %}
{% if status == 'on' %}
animation: ping 2s linear infinite;
{% endif %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
}
@keyframes ping {
0% { box-shadow: 0 0 5px 1px rgba( {{r}}, {{g}}, {{b}}, 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
1 Like
That would require more than just CSS styling I’m afraid.
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
secondary: >-
{{ states.sensor.garage_temperature.state }} °C / {{
states.sensor.garage_humidity.state }} %
icon: mdi:car-back
icon_color: blue
multiline_secondary: true
primary: Garage
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Garage
content:
type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:banner-card
heading: 🌡 Klimaat
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: custom:mini-graph-card
entities:
- sensor.garage_temperature
hours_to_show: >-
${states["input_number.temperature_graph_hours"].state}
points_per_hour: 1
line_width: 4
font_size: 70
line_color: lightblue
align_state: center
show:
name: false
average: true
extrema: true
labels_secondary: false
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: custom:mini-graph-card
entities:
- sensor.garage_humidity
hours_to_show: >-
${states["input_number.temperature_graph_hours"].state}
points_per_hour: 1
line_width: 4
font_size: 70
align_state: center
show:
name: false
average: true
extrema: true
- type: entities
show_header_toggle: false
entities:
- entity: input_number.temperature_graph_hours
type: custom:numberbox-card
icon: mdi:poll
unit: h
- type: custom:banner-card
heading: 💡 Verlichting
- type: custom:mushroom-light-card
entity: light.garage
fill_container: false
use_light_color: false
show_brightness_control: true
primary_info: none
show_color_temp_control: false
layout: horizontal
- type: custom:mushroom-light-card
entity: light.garage
primary_info: none
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
layout: horizontal
3 Likes
ok… thank you for your help.
1 Like
Not per room, but whole house is done.
Mushroom low battery popup:
sensor:
- platform: template
sensors:
devices_with_low_battery:
friendly_name: 'Devices with Low Battery'
unit_of_measurement: devices
value_template: >-
{% set ignore_entities = [] %}
{{ states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count
}}
icon_template: >-
{% if is_state('sensor.devices_with_low_battery', '0') %}
mdi:battery-check
{% else %}
mdi:battery-alert
{% endif %}
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.devices_with_low_battery
state_not: '0'
chip:
type: template
entity: sensor.devices_with_low_battery
icon_color: red
icon: mdi:battery-alert
content: '{{ states(entity) }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Low Batteries
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: >
{% set battery_level = (states(entity) | int / 10) |
round(0) | int * 10 %} {% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
badge_icon: |-
{% set battery_level = states(entity) | int %}
{% if battery_level < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: red
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: null
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
37 Likes
Can i assume that you have the same kind for open window/doors and ligths on?
cool, is it ant other sources for working icons like that?
Hi,
first of all I am really impressed by this thread!
Until now I am only a “reader” of this channel and already found very helpful ideas for my HA dashboard.
Now I would like to modify the Mushroom Alarm Card with different icons and color code.
I already tried a lot with Card Mod but I don’t come to the preferred solution.
- The main icon (Mushroom State Icon?) shall be changed according to alarm status (with different icons)
- The icons for the 5 mushroom buttons (all alarm states are visible) shall be changed
- The color code shall be changed according to alarm status
- The size of each of the mushroom button icons shall be increased
The main question: How do I modify the Mushroom State Icon and the Mushroom Button Icons at the same time? I only managed to modify one of both.
Here is my current code that does not work properly:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmsystem
states:
- armed_home
- armed_away
- armed_night
- armed_vacation
- armed_custom_bypass
layout: vertical
card_mod:
style:
mushroom-button:nth-child(5)$: |
ha-icon {
--card-mod-icon: mdi:shield-account-outline;
}
.: |
mushroom-shape-icon {
{% if states(config.entity) == "disarmed" %}
--card-mod-icon: mdi:shield-off;
{% elif states(config.entity) == "armed_away" %}
--card-mod-icon: mdi:shield-home;
{% elif states(config.entity) == "armed_home" %}
--card-mod-icon: mdi:shield-lock;
{% elif states(config.entity) == "armed_night" %}
--card-mod-icon: mdi:shield-moon;
{% elif states(config.entity) == "armed_vacation" %}
--card-mod-icon: mdi:shield-airplane;
{% elif states(config.entity) == "armed_custom_bypass" %}
--card-mod-icon: mdi:shield-account;
{% elif states(config.entity) == "triggered" %}
--card-mod-icon: mdi:shield-alert;
{% endif %}
}
Thank you very much in advance!
1 Like
That looks awesome. Do i add the sensor to my configuration.yaml or how does it exactly work? Thanks for all your help here 
1 Like
Is there a way to use mdi icons from this site? tried playing around with it but cant get it to work. That would be aweseome since u can configure the icons directly on the page.
Yes, add the sensor to your configuration.yaml.