Has anyone made a sprinkler card by any chance??
Im looking to to show the target amount of water to use and then a slider bar that slowly fills up with the water being consumed?? Thoughts?
Thank you for that.
This is possible to change the position of the primary or secondary text in the card?
Iām currently using the Mushroom chips person card to show the presence status of person entities and have uploaded a picture for each person entity. It displays their picture with the little home/work badge which is cool.
But I also have some input_select helpers with various states such as āJust Left, Just Arrived, Home, Awayā along with various automations so I can get a little more information on the presence of people instead of just āHomeā or āAwayā.
Iām trying to figure out a way of combining the mushroom chips person card idea while being able to display the state of the input_dropdown so I can see the extended state of the person since the default chips card seems to be limited to only showing the state of the person entity.
I think maybe I can do this with a the chips template card since it supports templating for the āpictureā attribute but I canāt find an example of templating that would show the picture of a person entity. They all just reference a local picture youāve put in your config directory somewhere (and I havenāt been able to find a location for the person entity pictures).
If any of this makes sense, anyone tried something similar or know of a way of displaying a person entityās picture using templating?
lovelace-mushroom/template.md at main Ā· piitaya/lovelace-mushroom Ā· GitHub
Edit: found my solution in a previous post.
I like this style. Can you share your code?
I have created a new Room Card. Light bar and chips are all conditional. Lightbar only appears when a light status is on. The chips are also invisible and only appear when an event like motion occurs. Ä°tās compact and minimal. I hope you all enjoy it.
type: custom:stack-in-card
square: false
columns: 1
cards:
- type: custom:layout-card
layout: masonry
cards:
- type: grid
columns: 3
square: false
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
picture: /local/png/sofa.png
secondary: |
Lights:š”{{ states('sensor.open_light_salon') }}
Temp: š”ļø {{ states('sensor.hue_motion_temp_salon') }} Ā°C
entity: group.salon
tap_action:
action: toggle
fill_container: false
layout: vertical
multiline_secondary: true
card_mod:
style: |
ha-card {
--icon-size: 68px;
background-size: 55px 40px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: conditional
conditions:
- entity: light.salon
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.salon
use_light_color: true
show_brightness_control: true
icon_type: none
primary_info: none
secondary_info: none
layout: vertical
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
padding: 0px 11px 11px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-state-light: 255, 152, 0;
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_sensor_3_motion_3
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.berkan_s_echo_dot
state: playing
chip:
type: template
icon_color: green
icon: mdi:music
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background: #1a1a2a;, 1.25);
{% if is_state('light.light_group_salon', 'on') %}
{% else %}
background: rgba(var(--rgb-primary-background-color), 0.3);
{% endif %}
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.salon', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
margin-top: -12px;
box-shadow: none;
}
Edit: If you want to get total number of open lights or any other devices in a room just add this template sensor to your configuration.yaml or sensor.yaml file(If you have seperated it). Save and restart HA.
#GÄ°YSÄ°
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set total = 0 %}
{% if is_state('switch.dressing_room_lokal_tuya', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('switch.dressing_room_lokal_tuya_empty', 'on') %}
{% set total = total + 1 %}
{% endif %}
{{total}}
The code is simple. You can add the entity numbers seperately. Lets say if you have 2 switches and 1 lights the code should be like this.
#GÄ°YSÄ°
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set total = 0 %}
{% if is_state('switch.dressing_room_lokal_tuya', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('switch.dressing_room_lokal_tuya_empty', 'on') %}
{% set total = total + 1 %}
{% endif %}
{% if is_state('light.office, 'on') %}
{% set total = total + 1 %}
{% endif %}
{{total}}
4 Likes
Iāve been using the following format (from Counts the lights on - #205 by Vrrroem)
Also, no need to restart HA when adding (or editing) a template sensor, just use the reload Templates option in Dev Tools
#GÄ°YSÄ°
- platform: template
sensors:
giysi_cihazlar:
value_template: >-
{% set lights = ['switch.dressing_room_lokal_tuya',
'switch.dressing_room_lokal_tuya_empty',
'light.office' ] %}
{{ expand(lights) | selectattr('state','eq','on') | list | count }}
1 Like
@sebbaT I decided to redo this one properly 
Mushroom Media Player with Volume:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
background-size: 100% 100%;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
.actions {
display: block !important;
}
mushroom-button {
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
display: flex;
margin-right: 0px !important;
margin-bottom: var(--spacing) !important;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%) opacity(60%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
15 Likes
what is {{ states(āsensor.muted_colorā) }}, can you share the code?
Greetings
Moss
Colors are extracted from the album art using Node-Red. Have a look here:
1 Like
Short question. How is the syntax when I just want to show the state of an attribute for this chip badge
i tried this but no luck
content: ā{{ state_attr(āāsensor.unifi_gateway_wlanāā, āānum_userāā }}ā;
Like this:
content: "{{ state_attr('sensor.unifi_gateway_wlan', 'num_user') }}";
1 Like
Iāve been following this thread to get my chips animated and making good progress. I do have one issue, when the āmonitorā chip animation is used it is moving the chip lower on the card. Any ideas what could be causing this?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: >-
{{ states("sensor.master_bedroom_temperature_2") | round(0) }} Ā°F / {{
states("sensor.master_bedroom_humidity") | round (0) }} %
entity: group.master_bedroom_lights
icon: >-
{% if is_state('group.master_bedroom_lights', 'on') or
is_state('input_boolean.probably_sleeping', 'on') %}
mdi:bed
{% else %}
mdi:bed-empty
{% endif %}
icon_color: >-
{% if is_state('group.master_bedroom_lights', 'on') or
is_state('input_boolean.probably_sleeping', 'on') %}
green
{% else %}
blue
{% endif %}
tap_action:
action: navigate
navigation_path: master_bedroom
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dard-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: >-
{% if is_state('media_player.master_bedroom_display', 'playing') %}
mdi:speaker {% else %} mdi:speaker-off {% endif %}
icon_color: >-
{% if is_state('media_player.master_bedroom_display', 'playing') %}
blue {% endif %}
entity: media_player.master_bedroom_display
tap_action:
action: more-info
- type: conditional
conditions:
- entity: media_player.master_bedroom
state_not: playing
chip:
type: template
icon: mdi:monitor-off
entity: media_player.master_bedroom
tap_action:
action: more-info
- type: conditional
conditions:
- entity: media_player.master_bedroom
state: playing
chip:
type: template
icon: mdi:monitor
entity: media_player.master_bedroom
tap_action:
action: more-info
- type: template
icon: mdi:fan
icon_color: >-
{% if is_state('fan.master_bedroom_ceiling_fan', 'on') %} green {%
endif %}
entity: fan.master_bedroom_ceiling_fan
tap_action:
action: toggle
hold_action:
action: more-info
- type: template
icon: mdi:ceiling-light
icon_color: >-
{% if is_state('switch.master_bedroom_ceiling_light', 'on') %} yellow
{% endif %}
entity: switch.master_bedroom_ceiling_light
tap_action:
action: toggle
- type: template
icon: mdi:lamp
icon_color: >-
{% if
is_state('light.in_wall_smart_toggle_dimmer_master_bedroom_lamp','on') %}
yellow
{% endif %}
entity: light.in_wall_smart_toggle_dimmer_master_bedroom_lamp
tap_action:
action: toggle
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.ally_bedroom_speaker', 'playing') }}
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.3) 100%); }
}
mushroom-template-chip:nth-child(4)$: |
ha-icon {
{{ 'animation: rotation 1.5s linear infinite;' if is_state('fan.master_bedroom_ceiling_fan', 'on') }}
}
@keyframes rotation {
0% {transform: rotate(0deg);
}
100% {transform: rotate(360deg);
}
}
3 Likes
Hi,
Iām using the Lock card for my SwitchBot Lock. How can I get the door state into the card like it is shown in the reference screens:
I canāt find a configuration setting for that. The SwitchBot Lock has a binary sensor for indicating the open- or closed-state of the door.
mushroom/ui newbie hereā¦
trying to use some Hue scenes on a chip, are we supposed to mention the scene twice? Once in the entity (also to have it show its entity_picture), and once under the action?
- type: custom:mushroom-chips-card
chips:
- entity: scene.marte_gedimd
<<: &chip_scene
type: entity
use_entity_picture: true
content_info: none
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.marte_gedimd
- entity: scene.marte_nachtlampje
<<: *chip_scene
- entity: scene.marte_helder
<<: *chip_scene
- entity: scene.marte_herfstgoud
<<: *chip_scene
with the latter under target, I get an error in the config when clicking ā¦ unfortunately this would also mean I can not use the yaml anchor, but thats a minor issue
they are displayed alright (still need to fix the ugly border margin), and the scene is activated.
Seems odd we need to use the entity twice though, please help me out?
Hello ! 
A new Mushroom version is released.
It adds a new card for select and input_select entity 
and actions for title card to easily navigate between your views.
Happy update and thank you to contributors and supporters 
23 Likes
I have tried several css intigrations to change the colour of the whole button when the light is active but so far no succes. Is there a way to change the colour of the compleet light button when the light is on?
Iāve installed 2.5.1 but canāt use the select card in yaml. Iāve done a refresh, cache clear and restart.
Am I missing something ?
Custom element doesnāt exist: mushroom-select-card
type: custom:mushroom-select-card
entity: select.workshop_uplights_preset
name: Preset
Change card background is what you mean?
card_mod:
style: |
ha-card {
background: rgba(var(--mush-rgb-amber), 0.2);
}I want the whole card to change colour when the light is on and back to default when its off