Maybe I donāt read something, but my mushroom animation doesnāt work . I just copy/paste your code, install card-mod plugin via HACS but itās doesnāt workā¦ for example with the basic fan animation :
Look at my post with updated animations. How animations are applied changed months ago.
1 Like
This explains how these symbols work 
2 Likes
Does anybody know how to minimize the delay between clicking the up or down arrow on a mushroom number card and the actual update of the input number value ? Iāve already tried to lower the values of āmush-slider-tresholdā and āmush-input-number-debounceā with card-mod and in my theme but the delay of approximately 2 seconds wonāt change.
Iām trying to use custom:mushroom-select-card as an overlay to a custom:button-card.
Essentially, I just want the select-option part to be visible once the card is clicked, the rest should be transparent.
Iām pretty close to the result (see code below) but two issues remain:
1- can the ābottom barā be hidden / made transparent?
2- is it possible to custom size the clickable zone so it covers the full card (see gray zone when cursor hovers the card)? Iāve tried changing the font size hoping it would expand the zone but it doesnāt.
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 25% 25% 25% 25%
grid-template-areas: |
"A1 A2 A3 A4"
cards:
- type: horizontal-stack
view_layout:
grid-area: A1
cards:
- type: custom:button-card
name: ' '
entity: input_select.ir_command_ac2_mode
show_state: true
show_entity_picture: true
entity_picture: \local\!MYDATA\WEATHER\temperature2.png
styles:
card:
- font-size: 2rem
- font-weight: bold
icon:
- height: 4rem
- width: 4rem
- type: horizontal-stack
view_layout:
grid-area: A1
cards:
- type: custom:mushroom-select-card
entity: input_select.ir_command_ac2_mode
secondary_info: none
icon_type: none
fill_container: true
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: none !important
}
.mdc-select__selected-text {
color: transparent !important;
}
.mdc-select__dropdown-icon {
fill: transparent !important;
}
.: |
ha-card {
background: none;
}
1 Like
I dont normally just figure out the answer for people, but i liked the use case so here you go!
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 25% 25% 25% 25%
grid-template-areas: |
"A1 A2 A3 A4"
cards:
- type: horizontal-stack
view_layout:
grid-area: A1
cards:
- type: custom:button-card
name: ' '
entity: input_select.bedroom_fan_direction
show_state: true
show_entity_picture: true
entity_picture: \local\!MYDATA\WEATHER\temperature2.png
styles:
card:
- font-size: 2rem
- font-weight: bold
icon:
- height: 4rem
- width: 4rem
- type: horizontal-stack
view_layout:
grid-area: A1
cards:
- type: custom:mushroom-select-card
entity: input_select.bedroom_fan_direction
secondary_info: none
icon_type: none
fill_container: true
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: none !important;
border-radius: 20px !important;
}
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
.mdc-line-ripple::after {
border-bottom-width: 0px !important;
}
.mdc-select__selected-text {
color: transparent !important;
}
.mdc-select__dropdown-icon {
fill: transparent !important;
}
.mdc-select {
position: absolute !important;
width: 100% !important;
--select-height: 97px;
top: 0%;
right: 0%;
}
.: |
ha-card {
background: none;
}
i had to set the position to absolute for the dropdown, so it may not work well in grids. but since its already in a layout card, perhaps it will, who knows! 
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
removes the line before you clicked.
.mdc-line-ripple::after {
border-bottom-width: 0px !important;
}
removes the blue line from after you have clicked.
2 Likes
Amazing. Thanks for the extra mile. Glad you like the use case =)
This will be a great building block for my dashboard. Thank you!
Just to improve my search skills, was this documented in your guide or elsewhere?
1 Like
Not really. i have a section for the selection value in the select card in my guide. but it doesnt mention removing the line.
Select Card is in the same post as the person card.
then go to the selection value sections of this post.
i did answer the question regarding the line removal recently here:
so perhaps i will update my guide to include it
1 Like
Hi all,
Iām using mushroom-entity-buttons to highlight which rooms my vacuum should clean. I had the intention that every button would light up when I press it, but unfortunately they all light up when I press only one.
Is it possible because they all refer to the same script (but with different parameters) ?
Does anyone have a clue how to change that ?
Hereās my code:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: bartjessie
entity: script.jarvis_room_cleaner
icon_height: 30px
icon: mdi:bed-king-outline
layout: vertical
name: Master
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: joosarne
entity: script.jarvis_room_cleaner
icon_height: 30px
icon: mdi:bed-queen-outline
layout: vertical
name: Pubers
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: bentjesse
entity: script.jarvis_room_cleaner
icon_height: 30px
icon: mdi:bed-single-outline
layout: vertical
name: Kids
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: hallway
entity: script.jarvis_room_cleaner
icon_height: 30px
icon: mdi:hanger
layout: vertical
name: Gang
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: berging
entity: script.jarvis_room_cleaner
icon_height: 30px
layout: vertical
icon: mdi:vacuum-outline
name: Berging
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_room_cleaner
service_data:
room: kitchen
entity: script.jarvis_room_cleaner
icon_height: 30px
icon: mdi:silverware-fork-knife
name: Keuken
layout: vertical
columns: 4
square: false
Thanks a lot in advance !
Kr,
Bart
Yes. it will be because your entity is the same script. your tap action has no bearing on what the card does. it is the fact that the script is being ran that changes the state of the entity in your card, which is the same between all cards.
I would make the amount of scripts you need for each card. they can even do identical things and you can keep your service data as is, if you like. but the scripts need to be different if you are referring to them in in this way as your entity.
Thanks Dimitri,
The only problem is, as far as I think itās a problem, is that the script is needed to fill up a queue. With other words, more buttons can be pushed at the same time that fill the queue. Donāt know if āa script per buttonā will result in the same.
Iāll show you the script below:
jarvis_room_cleaner:
alias: Jarvis Room Cleaner
max: 20
mode: queued
fields:
room:
name: room
required: true
selector:
select:
options:
- bathroom
- bedroom
- hallway
- kitchen
- living_room
- joosarne
- bentjesse
- berging
sequence:
- choose:
- conditions:
- condition: or
conditions:
- condition: state
entity_id: vacuum.jarvis
state: cleaning
- condition: state
entity_id: vacuum.jarvis
state: error
sequence:
- wait_for_trigger:
- platform: state
entity_id: vacuum.jarvis
to: returning
- platform: state
entity_id: vacuum.jarvis
to: docked
continue_on_timeout: false
timeout: 01:30:00
- service: vacuum.send_command
target:
device_id: xxxxxxxxxxxxxxxxxxx
data_template:
command: app_segment_clean
params: >
{% set room_id = states("input_number.roborock_room_enum_" + room)
| int(0) %} {{ room_id }}
- wait_for_trigger:
- platform: state
entity_id: vacuum.jarvis
to: returning
- platform: state
entity_id: vacuum.jarvis
to: docked
continue_on_timeout: false
timeout: 01:30:00
- conditions:
- condition: or
conditions:
- condition: state
entity_id: vacuum.jarvis
state: returning
- condition: state
entity_id: vacuum.jarvis
state: docked
- condition: state
entity_id: vacuum.jarvis
state: idle
sequence:
- service: vacuum.send_command
target:
device_id: xxxxxxxxxxxxxxxxxxxx
data_template:
command: app_segment_clean
params: >
{% set room_id = states("input_number.roborock_room_enum_" + room)
| int(0) %} {{ room_id }}
- wait_for_trigger:
- platform: state
entity_id: vacuum.jarvis
to: returning
- platform: state
entity_id: vacuum.jarvis
to: docked
continue_on_timeout: false
timeout: 01:30:00
default: []
Kr,
Bart
This may not be good advice, but a script can run a script. so again maybe make a script per button, but each just calls your main script?
sounds like plan ! Iāll give it a try and report back with feedback
thx again !
still related to the same overlay card:
not a big deal but wondering if this is also customizable;
once a selection is made, the mushroom select card stays āselectedā (greyed out) unless you click elsewhere.
Any way to hide / make this transparent as well? Thanks!
1 Like
this should do it. but then your hover is also gone.
.mdc-select__ripple::before {
background: none !important;
}
you could add a new hover back like this:
.mdc-select__anchor:hover {
background-color: rgba(var(--rgb-grey), 0.05) !important;
}
1 Like
Perfect. Thank you!
Unfortunately, the HA-alerts do not work in the template-card:
e.g.
<ha-alert alert-type="error"> Your alert text </ha-alert>
Can I integrate them by other code or is it possible to integrate them?
Iāve made a button-specific script to call the main script after push of the button, but all buttons are still activated, probably because of the fact that the script calls the same entity.
jarvis_bathroom:
alias: Jarvis Bathroom
sequence:
- service: script.jarvis_room_cleaner
data:
room: bathroom
And the script behind my bathroom button:
- type: custom:mushroom-entity-card
tap_action:
action: call-service
service: script.jarvis_bathroom
entity: script.jarvis_bathroom
type or paste code here
So, this doesnāt work and I canāt figure out why not
Kr,
Bart
Can you show me the yaml for the entire card please?
Spotify Card V3 with Room Presence
Page Properties:
- White and Dark Theme Ready.
- 2 different card styles for white and dark template in one single card!!
- Design changes on white theme.
- Switch between white and dark modes with one click
- Beatiful artwork design for every song.
- Room Presence. Start the music in your last entered room (More effective on single occupancy)
- Media Player controls
- Music Follow. Let the music follow you around the house automatically.
- Hidden playlist. Activate your favorite songs with a single click.
- Exclusively designed for Spotify control.
- Ambilight animations. Glowing light in all over the card.
- Browser Mode integration.
- Minimalistic design. You can hide spotify playlist.
- The playing media player is highlighted in a circle.
- Rewind - Forward your music.
- Developed on the basis of Amazon Echo devices but you can also use it with any other media player type.
- Can easily be installed with the given manual
You can find the page code and ultra-detailed user manual in the link below.:
11 Likes