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
Why not use simple input boolean for each area and then one script that builds the list of rooms based on the input boolean state?
alias: Run Vacuum
sequence:
- service: roborock.vacuum_clean_segment
data_template:
segments: |
{% set vacrooms = namespace(roomid=[]) %}
{% for rooms in state_attr('sensor.roborock_rooms','rooms') -%}
{% if is_state(rooms.boolean,'on') %}
{% set room = rooms.id %}
{% set vacrooms.roomid = vacrooms.roomid + [room] %}
{% endif %}
{%- endfor %}
{{ vacrooms.roomid }}
target:
entity_id: vacuum.roborock_s7
mode: single
icon: mdi:robot-vacuum
With a series of input booleans created from a REST sensor and a local JSON file (probably a better way):
{
"rooms": [
{
"name": "kitchen",
"boolean": "input_boolean.vac_kitchen",
"id": "17"
},
{
"name": "dining_room",
"boolean": "input_boolean.vac_dining_room",
"id": "16"
},
{
"name": "foyer",
"boolean": "input_boolean.vac_foyer",
"id": "18"
},
{
"name": "laundry",
"boolean": "input_boolean.vac_laundry",
"id": "20"
},
{
"name": "living_room",
"boolean": "input_boolean.vac_living_room",
"id": "19"
},
{
"name": "master_bedroom",
"boolean": "input_boolean.vac_master_bedroom",
"id": "21"
},
{
"name": "master_bathroom",
"boolean": "input_boolean.vac_master_bathroom",
"id": "22"
},
{
"name": "guest_bathroom",
"boolean": "input_boolean.vac_guest_bathroom",
"id": "23"
}
],
"points": [
{
"name": "sink",
"x": 17989,
"y": 25491
}
]
}
And
##
## Roborock Rooms
##
- platform: rest
name: roborock_rooms
resource: http://192.168.1.245:8123/local/Roborock/roborock.json
value_template: "{{ now() }}"
json_attributes:
- rooms
- points
I select one or more rooms and push āCleanā which runs the āRun Vacuumā script. One additional script turns off the buttons when the vacuum returns to the dock.
5 Likes
Hello all,
Not sure if this is the right spot for thisā¦so please kindly correct me if Iām wrong!
After recent updates to HA, Mushroom Card, Card Mod, etc. Iāve noticed that my chip-card automations no longer work.
Apparently there is some language adjustments but I have not had success finding documentation on these changes.
Hoping someone has a good idea on how to resolve this.
Please see below my setup:
And the below code that powers it:
I know itās a lot, so please focus on the last lines for the card mod, just wanted to show it all in case itās helpful at all (a lot of tap-actions have been removed as there is a character limit here!)
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.m
use_entity_picture: true
- type: entity
entity: person.r
use_entity_picture: true
- type: template
icon: |-
{% if is_state('input_boolean.alarm_switch', 'on') %}
mdi:home-alert
{% else %}
mdi:security
{% endif %}
entity: alarm_control_panel.blink_cameras
icon_color: >-
{% if is_state('input_boolean.alarm_switch', 'on') %}
red
{% elif is_state('alarm_control_panel.blink_cameras', 'armed_away')
%}
green
{% elif is_state('alarm_control_panel.blink_cameras', 'disarmed') %}
blue
{% endif %}
content: >-
{% if is_state('input_boolean.alarm_switch', 'on') %}
INTRUDER!
{% elif is_state('alarm_control_panel.blink_cameras', 'armed_away')
%}
Armed
{% elif is_state('alarm_control_panel.blink_cameras', 'disarmed') %}
Disarmed
{% endif %}
- type: entity
entity: counter.chore_counter
name: Chores Completed!
icon: mdi:vacuum
use_entity_picture: false
- type: weather
entity: weather.home
show_conditions: false
show_temperature: true
- type: entity
entity: sensor.processor_use
- type: template
icon: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone',
'unavailable') or
is_state('binary_sensor.closet_motion_sensor_iaszone','unavailable')
or is_state('binary_sensor.foyer_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.hallway_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.office_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.kitchen_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.living_room_motion_sensor_iaszone','unavailable')
%}
mdi:emoticon-confused-outline
{% elif is_state('binary_sensor.motion_sensors', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
entity: binary_sensor.motion_sensors
icon_color: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone',
'unavailable') or
is_state('binary_sensor.closet_motion_sensor_iaszone','unavailable')
or is_state('binary_sensor.foyer_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.hallway_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.office_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.kitchen_motion_sensor_iaszone','unavailable')
or
is_state('binary_sensor.living_room_motion_sensor_iaszone','unavailable')
%}
red
{% elif is_state('binary_sensor.motion_sensors', 'on') %}
yellow
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: timer.laundry_tts_second_reminder
state: active
chip:
type: template
entity: timer.laundry_tts_second_reminder
icon: mdi:washing-machine-alert
icon_color: red
content: Laundry!?
tap_action: null
- type: conditional
conditions:
- entity: timer.laundry_tts_first_reminder
state: active
chip:
type: template
entity: timer.laundry_tts_first_reminder
icon: mdi:washing-machine
icon_color: yellow
content: null
tap_action: null
- type: template
icon: |-
{% if is_state('media_player.speakers', 'on') %}
mdi:speaker-wireless
{% elif is_state('media_player.speakers', 'playing') %}
mdi:speaker-wireless
{% else %}
mdi:speaker
{% endif %}
entity: media_player.speakers
icon_color: |-
{% if is_state('media_player.speakers', 'on') %}
blue
{% elif is_state('media_player.speakers', 'playing') %}
blue
{% else %}
grey
{% endif %}
- type: entity
entity: button.tab_a8_load_start_url
name: Reload
content_info: name
tap_action:
action: toggle
- type: template
entity: sensor.days_since_fed_leo
icon: mdi:snake
content: |
{{states('sensor.days_since_fed_leo')}} days ago
icon_color: |-
{% if states('sensor.days_since_fed_leo') |int >13 %}
red
{% elif states('sensor.days_since_fed_leo') |int >7 %}
yellow
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Did you feed Leo?
content:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: input_boolean.fed_leo_switch
name: Tap here if you fed Leo!
size: 40px
style: |
ha-card {
background: radial-gradient(rgb(0,0,0, 0%) 45%, rgb(0,0,0, 50%));
border: none;
}
- type: entities
style: |
ha-card {
background: radial-gradient(rgb(0,0,0, 0%) 45%, rgb(0,0,0, 50%));
border: none;
}
entities:
- entity: input_datetime.tank_heater_on_time
name: Tanks On
- entity: input_datetime.tank_heater_off_time
name: Tanks Off
- entity: switch.tank_lights
title: 'Tank Heaters '
show_header_toggle: false
- type: template
entity: binary_sensor.garage_door_sensor_opening
icon: >-
{% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
mdi:garage-alert
{% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
%}
mdi:garage
{% endif %}
icon_color: >-
{% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
red
{% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
%}
green
{% endif %}
content: >-
{% if is_state('binary_sensor.garage_door_sensor_opening', 'on' ) %}
Garage Open!
{% elif is_state('binary_sensor.garage_door_sensor_opening', 'off' )
%}
{% endif %}
tap_action:
action: more-info
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: rotation 3s linear infinite;' if is_state('alarm_control_panel.blink_cameras', 'armed_away') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
{{ 'animation: pulse 0.7s infinite; transform-origin: 50% 90%' if is_state('input_boolean.alarm_switch', 'on')}}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(2); }
17% { transform: scale(2.5); }
25% { transform: scale(3.5); }
33% { transform: scale(1.5); }
60% { transform: scale(1); }
}
mushroom-template-chip:nth-child(10)$: |
ha-icon {
{{ 'animation: boing 2s infinite; transform-origin: 50% 90%' if is_state('media_player.speakers', 'on') or is_state('media_player.speakers', 'playing') }}
}
@keyframes boing {
0% {transform: scale3d(1, 1, 1); }
10% {transform: scale3d(1.5, 0.75, 1); }
15% {transform: scale3d(0.75, 1.5, 1); }
20% {transform: scale3d(1.25, 0.85, 1); }
30% {transform: scale3d(0.95, 1.15, 1); }
40% {transform: scale3d(1.5, 0.95, 1); }
60% {transform: scale3d(1, 1, 1; }
}
mushroom-template-chip:nth-child(7)$: |
ha-icon {
{{ 'animation: pulse 3s linear infinite; transform-origin: 50% 60%;' if is_state('binary_sensor.motion_sensors', 'on') }}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
mushroom-template-chip:nth-child(12)$: |
ha-icon {
{{ 'animation: pulse 0.7s infinite; transform-origin: 50% 90%' if states('sensor.days_since_fed_leo') |int >13}}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.5); }
17% { transform: scale(1.75); }
25% { transform: scale(2); }
33% { transform: scale(1.5); }
60% { transform: scale(1); }
}
view_layout:
grid-area: header
show:
mediaquery: '(min-width: 800px)'
In your scenario try and just change all that say ha-icon to ha-state-icon then clear your app/browser cache.
I cannot believe it was that simple!
I canāt thank you enough. Thank you so much @dimitri.landerloos
1 Like
Canāt for the life of me get some of the animations working. Tried the spin example, but all I get is a static icon. Oddly, if I do something like St. Nick, I get only half of the animation ā¦ no clue why. Is it something to do with my config or am I missing something somwhere?
Any way to replicate this with mushroom? This is from minimalist.
Hi Dimitri,
I think it will work, I needed to add these additional scripts for all buttons instead of just one 
I will keep you posted, but for know, I think it might work.
Thanks a lot !
Kr,
Bart
Hi @kbrown01,
Looks very interesting, and eager to try it out. Could you also share a glimps of you buttons page and the script to āresetā the buttons ?
Thanks a lot in advance !
Kr,
Bart
Hi All,
First of all thanks for these great cards and the input from the community. See below for my dashboard.
I have an easy questions (i hope) which I need some help with:
I use a honeywell evohome heating system. I can control heating etc. I have a heat page link called temp (see dashboard), this brings you to a subpage with all the heat controls per room. These are mushtroom climate cards.
How do I get the TEMP icon on the main dashboard to be GREY (off) when all the rooms are set to 15c ? The issue is that the HVAC mode always says HEAT, so I canāt use that trigger. I need it to look at the temp and if itās below 15 ā then grey icon, if above 15 ā (itās on and icon should be red).
Note: I can only get the temps from the heating system with the command below. There is no entity sensor available for current temp. So I would need to make something with the code below but change icon color based on output < > 15c
{{ state_attr(āclimate.keukenā, ācurrent_temperatureā) }}Ā°C
type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.bosch_bijkeuken_deur
icon: mdi:door
secondary_info: none
name: Bijkeuken
fill_container: false
primary_info: none
- type: custom:mushroom-lock-card
entity: lock.garage
name: Garage
icon: mdi:garage
secondary_info: none
primary_info: none
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.home
layout: vertical
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/verwarming
show_temperature_control: false
primary_info: name
secondary_info: none
fill_container: true
name: Temp
Same as the first question, but then for each individual room show red/grey icon. See code below.
- title: Verwarming
path: verwarming
icon: mdi:heating-coil
subview: true
badges: []
cards:
- type: custom:mushroom-climate-card
entity: climate.keuken
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.woonkamer
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.hoofdslaapk
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.kamer_fleur
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.kamer_sanne
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.speelkamer
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.werkkamer
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
- type: custom:mushroom-climate-card
entity: climate.zolder
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
@rhysb Hi, I am trying your animation examples and something is not working right, for example Pouring animation is not working. Seems like ha-icon variable does not respond at all.
Another radiator animation is working halfway:
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
Only .shape PING animation is working and ha-icon is not working, any ideas?
- Your climate entity will likely have an attribute called
temperature. This is the target temp you have set. you can therefore do this:
Code
mushroom-shape-icon {
--icon-symbol-size: 0.6em;
{% if state_attr(config.entity, 'temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
- Same thing, just use your individual climate entites.
Check the updated animations here:
Try the updated animations:
Thanks Dimitri - see my code above, where would I insert this? I donāt have the mushroom-shape-icon line on either pages?
By using the following code I can get the temp:
{{ state_attr(āclimate.keukenā, ācurrent_temperatureā) }}Ā°C
Where would I need to integrate that in your code?
Sorry. Thought you would already have some card mod in there didnt really check.
- type: custom:mushroom-climate-card
entity: climate.keuken
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr(config.entity, 'temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
Keep in mind there is a big difference between the current_temperature and temperature attributes. The current temp is unsurprisingly the temp it currently is in the room, not what it is set to (what you asked for in your first post is when set to 15). Temperature attribute is the temp target you have set.