Nice thanks!!!
1 Like
So I’m really liking the card, question is, can you make an “expandable” version?
Like I’d love just the bar with the current condition (rain) to only show, and then when tapped or a dropped down arrow tapped it expands the card with the temperatures.
Just trying to make it a little smaller to save some space here.
EDIT: I think ill also remove the top weather card since I have yous but still an expandable version would be cool so I can have both.
Hey, how are you producing that weather info using Mushroom?
1 Like
@rhysb
if all the media options are selected then the above is the default layout. On clicking the speaker/volume button the below layout is shown.
is there a way to keep this as the default layout and on clicking the speaker/volume button the first layout is shown?
2 Likes
I just built my first template chip card. In the following code, if I remove the “W” from the end of the content template, and the state of the sensor is zero (and only if it’s zero), the state doesn’t appear at all on the chip. If I add anything at all, like the “W”, the zero shows up. What am I missing?
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.myenergi_bayview_power_charging
icon: mdi:car-arrow-left
icon_color: |-
{% set charging=states(entity) %}
{% if charging | int != 0 %}
{% set state=states('sensor.myenergi_bayview_power_import') %}
{% if state | int > 200 %}
red
{% else %}
green
{% endif %}
{% else %}
default
{% endif %}
content: '{{ states(entity) }} W'
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
Like this:
3 Likes
@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