I’ve actually made a few enhancements to this, so may post that up a little later once I’m on a computer.
The conditional card is a built in HA card, can look up the docs for it.
But judging here, you need to tab that line in a bit (but not sure if that’s just the forum formatting), but it should be in-line with the type above it
OK, i think i now understand, the one tab was missing.
And i understand u create an entity which is controlling the dropdaoen Box input_boolean.thermostat_dropdown
But where is this set? i feel that this is my problem now…
But let’s wait for your update, as i really like what you did there. 
Thank you in advance!
Hello @SteffenDE
I need some help, it occurs that lastseen does not work, but I believe it is due to having 2 tracking devices in the code (iphone and iphone_ping), but I only have 1 tracking device.
I use samsung android devices.
Thanks, your post reminded me that I’ve wanted to do this for a while.
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:countertop-outline
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 20px !important;
position: absolute;
top: 0px;
left: 75px;
overflow: visible !important;
white-space: normal !important;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -30px;
top: -0px;
height: 20px;
}
.: |
:host {
--mush-icon-size: 120px;
--primary-text-color: #a0a0a0
}
ha-card {
height: 75px !important;
}
nice card man ! can you pleas share you code ?
I’ve just installed a shelly1pm to my washing machine and tumble drier.
Any nice mushroom cards and code out there? Maybe some automation too?
hello @rhysb first of all very nice that you have made this media player very nice and handy i have adjusted it a bit to my taste now i have a question is it possible if i use my sonos for tv sound then i get black in the screen where normally the picture comes from the song would it be possible to do this based on everything the media title is on TV is this status so know it but just don’t know how to add it? thanks in advance!
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_beam
icon: mdi:play
use_media_info: true
use_media_artwork: true
show_volume_level: true
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_title') %}
{% if media_type == 'TV' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@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(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 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;
}
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, 'playing') %}
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 == 'TV' %}
aspect-ratio: 16 / 9;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- 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 {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-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') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 58px
margin: '-14px 0px -8px -4px;'
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_beam
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
box-shadow: none;
margin-right: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:television-speaker
alignment: end
name: tv mode
tap_action:
action: call-service
service: script.sonos_tv_mode
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:speaker-multiple
alignment: end
name: Groep sonos aan
tap_action:
action: call-service
service: script.g
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:speaker
alignment: end
name: Groep sonos uit
tap_action:
action: call-service
service: script.gv
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:shuffle-variant
alignment: end
name: shuffel aan
tap_action:
action: call-service
service: script.sonos_shuffel_on
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:shuffle-disabled
alignment: end
name: shuffel uit
tap_action:
action: call-service
service: script.sonos_shuffel_off
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:numeric-5-box
alignment: end
name: volume 5%
tap_action:
action: call-service
service: script.sonos_volume_op_5
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:numeric-10-box
alignment: end
name: volume 10%
tap_action:
action: call-service
service: script.sonos_volume_op_10
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:fast-forward-15
alignment: end
name: volume 15%
tap_action:
action: call-service
service: script.sonos_volume_op_15
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: action
icon: mdi:dice-d20
alignment: end
name: volume 20%
tap_action:
action: call-service
service: script.sonos_volume_op_20
data: {}
target: {}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 10px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: grid
square: false
columns: 4
cards:
- type: custom:mushroom-template-card
entity: script.sonos_beam_christmas_hits
primary: Kerst-Hits
secondary: ''
icon: phu:christmas-tree
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_release_radar
primary: R-Radar
secondary: ''
icon: mdi:music
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_top_50_be
primary: Top50BE
secondary: ''
icon: mdi:music
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_top_50_nl
primary: Top50NL
secondary: ''
icon: mdi:music
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_hot_hits_be
primary: HothidsBE
secondary: ''
icon: mdi:music
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_discover_weekly
primary: D-Weekly
secondary: ''
icon: mdi:music
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_party_mix_2_vm
primary: PMix2VM
secondary: ''
icon: mdi:music-box-outline
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_party_mix_3_vm
primary: PMix3VM
secondary: ''
icon: mdi:music-box-outline
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_party_mix_4_vm
primary: PMix4VM
secondary: ''
icon: mdi:music-box-outline
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_party_mix_5_vm
primary: PMix5VM
secondary: ''
icon: mdi:music-box-outline
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_nieuwste_nummers
primary: NieuwsN
secondary: ''
icon: mdi:heart-circle-outline
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_music_macky_gee
primary: MackyGee
secondary: ''
icon: mdi:heart-pulse
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_radio_qmusic_belguim
primary: Qmusic
secondary: ''
icon: mdi:radio
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_radio_top_radio
primary: TOPRadio
secondary: ''
icon: mdi:radio
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_radio_top_techno
primary: TOPTechno
secondary: ''
icon: mdi:radio
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_radio_top_versuz
primary: TOPVersuz
secondary: ''
icon: mdi:radio
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
- type: custom:mushroom-template-card
entity: script.sonos_beam_radio_top_retroarena
primary: TOPretroA
secondary: ''
icon: mdi:radio
tap_action:
action: toggle
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
--icon-symbol-size: 32px;
--icon-size: 64px;
}
here are the possible if sonos is on tv source
playing
source_list: TV
group_members: media_player.sonos_beam, media_player.sonos_ra
volume_level: 0.04
is_volume_muted: false
media_content_id: x-sonos-htastream:RINCON_48A6B83ABBD601400:spdif
media_content_type: music
media_title: TV
shuffle: false
repeat: off
queue_size: 1
icon: phu:sonos-beam
friendly_name: Sonos Beam
supported_features: 981567
source: TV
Hello,
Could someone help me out? I am having a lot of trouble trying to archieve the following :
Currently I have with card_mod a gradient background of 3 preset colors, until know I have not been able to print a sensor variable inside the style code. I would like to have these colors to be updated by the actual light color. I have already made sensors to get the RGB state.
Is there maybe a way with the mushroom card themself to set a gradient with sensors as variable? instead of using the style gradient method?
- type: custom:mushroom-template-card
primary: Outdoor
secondary:
icon: mdi:nature
entity: switch.outdoor
icon_color: blue-grey
hold_action:
action: toggle
card_mod: null
style: |
ha-card {
{% if states('switch.outdoor') == 'on' %}
background-image: linear-gradient(to right, #f0eb6d, #fffeb7, #f0eb6d);
{%- else -%}
background-color: #f5f5f5;
{%- endif %}
}
Hope someone can help me out!
Thanks in advance.
Hi, I posted the code under the image for the tricksy icon sizing, the rest is just standard lights.
Is it possible to use template in tap_action? like below
- type: custom:mushroom-template-card
primary: ''
secondary: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
Boost ON
{% else %}
Boost OFF
{% endif %}
icon: mdi:radiator
layout: vertical
tap_action:
action: call-service
service: climate.set_preset_mode
data:
preset_mode: |
{% if is_state_attr('climate.room_climate_office', 'preset_mode', 'boost') %}
none
{% else %}
boost
{% endif %}
target:
entity_id: climate.room_climate_office
icon_color: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
red
{% else %}
disabled
{% endif %}
hello which card is this then wall it is not standard is it? don’t know this map where all those little icons from above and stuff? would you like to share the code? thanks in advance!
Here’s the whole of my kitchen card…
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:door
icon_color: |-
{% if is_state('binary_sensor.kitchen_door_contact','on') %}
red
{% elif is_state('binary_sensor.kitchen_door_contact','off') %}
green
{% else %}
disabled
{% endif %}
- type: template
icon: >-
{% if is_state('binary_sensor.kitchen_presence_occupancy','on') %}
mdi:motion-sensor
{% else %}
mdi:walk
{% endif %}
icon_color: >-
{% if is_state('binary_sensor.kitchen_presence_occupancy','on') %}
red
{% elif is_state('binary_sensor.kitchen_presence_occupancy','off') %}
green
{% else %}
disabled
{% endif%}
- type: template
icon: mdi:thermometer
icon_color: orange
use_entity_picture: false
content: 'n/a'
entity: sensor.kitchen_sensor_temperature
- type: template
icon: mdi:water-percent
icon_color: light-blue
use_entity_picture: false
content: 'n/a'
entity: sensor.kitchen_sensor_humidity
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: open 6s ease-in-out infinite;' if is_state('binary_sensor.kitchen_door_contact', 'on') }}
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{{ 'animation: clip 2s infinite;' if is_state('binary_sensor.kitchen_presence_occupancy', 'on') }}
}
{% if is_state('binary_sensor.kitchen_presence_occupancy', 'on') %}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.shape {
animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-red), 0.3); }
50% { --shape-color: rgba(var(--rgb-red), 0.2); }
}
{% endif %}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding-top: 5px;
}
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:countertop-outline
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 20px !important;
position: absolute;
top: 0px;
left: 75px;
overflow: visible !important;
white-space: normal !important;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -30px;
top: -0px;
height: 20px;
{% if is_state('light.kitchen_lights', 'on') %}
--shape-color: rgba(var(--rgb-orange), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% endif %}
}
.: |
:host {
--mush-icon-size: 120px;
--primary-text-color: #a0a0a0
}
ha-card {
height: 75px !important;
}
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-template-card
name: Coffee Machine
entity: switch.coffee_machine
icon: mdi:coffee-maker
icon_color: '{{ ''brown'' if is_state(entity, ''on'') else ''disabled'' }}'
primary_info: none
secondary_info: none
layout: vertical
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
}
@keyframes java {
0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
}
.: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
- type: custom:mushroom-template-card
name: Dishwasher
entity: switch.dishwasher
icon: mdi:dishwasher
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
primary_info: none
secondary_info: |-
{% if is_state(entity, 'on') %}
{{ states('sensor.dishwasher_power') | round(0) }} W
{% else %}
Off
{% endif %}
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if states('sensor.dishwasher_power') | int > 5 }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
- type: custom:mushroom-template-card
name: Quooker Tap
icon: mdi:faucet-variant
entity: switch.quooker_tap
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: boil 500ms infinite;' if is_state(config.entity, 'on') }}
}
@keyframes boil {
0%, 100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
- type: grid
square: false
columns: 1
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Kitchen Lights
icon: mdi:ceiling-light-multiple-outline
entity: light.kitchen_lights
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.kitchen_lights
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.kitchen_lights
state: 'on'
card:
type: custom:stack-in-card
columns: 4
mode: horizontal
keep:
background: true
border_radius: true
margin: true
cards:
- type: custom:mushroom-light-card
name: Cabinet LEDs
entity: light.kitchen_cabinet_leds
icon: mdi:led-strip
primary_info: none
secondary_info: none
layout: vertical
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-light-card
name: RGB
entity: light.kitchen_rgb
icon: >-
{% if is_state('light.kitchen_rgb','on') %}
mdi:led-strip-variant
{% else %}
mdi:led-strip-variant-off
{% endif %}
show_brightness_control: false
show_color_control: false
collapsible_controls: false
use_light_color: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon: mdi:led-strip-variant;
{% else %}
--card-mod-icon: mdi:led-strip-variant-off;
{% endif %}
}
- type: custom:mushroom-light-card
name: Wall LEDs
entity: light.kitchen_wall_leds
show_brightness_control: true
collapsible_controls: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon:
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
mdi:lightbulb-on
{% elif light_level > 0 %}
mdi:lightbulb-on-{{ light_level }}
{% else %}
mdi:lightbulb-on-outline
{% endif %};
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
{% endif %}
}
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-light-card
name: Ceiling LEDs
entity: light.kitchen_ceiling_leds
show_brightness_control: true
collapsible_controls: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon:
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
mdi:lightbulb-on
{% elif light_level > 0 %}
mdi:lightbulb-on-{{ light_level }}
{% else %}
mdi:lightbulb-on-outline
{% endif %};
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
{% endif %}
}
ha-card {
box-shadow: 0px 0px;
}
state_color: true
show_header_toggle: false
Hello, anybody an idea how to reduce the space between the chips-cards?
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Carport
secondary: |-
{% set state=states('binary_sensor.outdoor_carport_tur_contact') %}
{% if state=='off' %}
geschlossen
{% elif state=='on' %}
geöffnet
{% elif state=='unavailable' %}
unbekannt
{% endif %}
picture: /local/images/icons/aqara_door_01.png
entity: binary_sensor.outdoor_carport_tur_contact
layout: hor
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
ha-card {
background: none;
--chip-box-shadow: none;
--chip-background: none;
margin-top: 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.outdoor_carport_tur_battery
content: '{{ states(''sensor.outdoor_carport_tur_battery'') }} %'
icon: |-
{% set bl = states('sensor.outdoor_carport_tur_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set bl = states('sensor.outdoor_carport_tur_battery') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.outdoor_carport_tur_linkquality
content: '{{ states(''sensor.outdoor_carport_tur_linkquality'') }} LQI'
icon: >-
{% set bl = states('sensor.outdoor_carport_tur_linkquality') | int
%}
{% if bl < 81 %} mdi:signal-cellular-outline
{% elif bl > 80 %} mdi:signal-cellular-1
{% elif bl > 128 %} mdi:signal-cellular-2
{% elif bl > 192 %} mdi:signal-cellular-3
{% else %} mdi:progress-question
{% endif %}
icon_color: >-
{% set bl = states('sensor.outdoor_carport_tur_linkquality') | int
%}
{% if bl < 81 %} red
{% elif bl > 80 %} orange
{% elif bl > 128 %} yellow
{% elif bl > 192 %} green
{% else %} red
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.outdoor_carport_tur_last_seen
content: >-
vor {% set up_time = as_timestamp(now()) -
as_timestamp(states.sensor.outdoor_carport_tur_last_seen.state) %}
{% set minutes = (up_time // 60) | int %}
{% set hours = (minutes // 60) %}
{% set days = (hours // 24) %}
{% set weeks = (days // 7) %}
{% set minutes = (minutes % 60) %}
{% set hours = (hours % 24) %}
{% set days = (days % 7) %}
{% macro phrase(value, name) %}
{%- set value = value %}
{%- set end = ' ' if value > 1 else '' %}
{{- '{} {}{}'.format(value, name, end) if value | int > 0 else '' }}
{%- endmacro %}
{% set text = [ phrase(weeks, 'Wochen'), phrase(days, 'Tagen'), phrase(hours, 'Stunden'), phrase(minutes, 'Minuten') ] | select('!=','') | list | join(', ') %}
{% set last_comma = text.rfind(',') %}
{% if last_comma != -1 %}
{% set text = text[:last_comma] + ' und' + text[last_comma + 1:] %}
{% endif %}
{{ text }}
icon: mdi:eye
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: 7px;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Carport
secondary: |-
{% set state=states('binary_sensor.outdoor_carport_tur_contact') %}
{% if state=='off' %}
geschlossen
{% elif state=='on' %}
geöffnet
{% elif state=='unavailable' %}
unbekannt
{% endif %}
icon: |-
{% set state=states('binary_sensor.outdoor_carport_tur_contact') %}
{% if state=='off' %}
hue:room-front-door
{% elif state=='on' %}
mdi:door-open
{% elif state=='unavailable' %}
mdi:progress-question
{% endif %}
entity: binary_sensor.outdoor_carport_tur_contact
icon_color: |-
{% set state=states('binary_sensor.outdoor_carport_tur_contact') %}
{% if state=='off' %}
green
{% elif state=='on' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.outdoor_carport_tur_battery
content: '{{ states(''sensor.outdoor_carport_tur_battery'') }} %'
icon: |-
{% set bl = states('sensor.outdoor_carport_tur_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set bl = states('sensor.outdoor_carport_tur_battery') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.outdoor_carport_tur_linkquality
content: '{{ states(''sensor.outdoor_carport_tur_linkquality'') }} LQI'
icon: >-
{% set bl = states('sensor.outdoor_carport_tur_linkquality') | int
%}
{% if bl < 81 %} mdi:signal-cellular-outline
{% elif bl > 80 %} mdi:signal-cellular-1
{% elif bl > 128 %} mdi:signal-cellular-2
{% elif bl > 192 %} mdi:signal-cellular-3
{% else %} mdi:progress-question
{% endif %}
icon_color: >-
{% set bl = states('sensor.outdoor_carport_tur_linkquality') | int
%}
{% if bl < 81 %} red
{% elif bl > 80 %} orange
{% elif bl > 128 %} yellow
{% elif bl > 192 %} green
{% else %} red
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
thanks man !
You should be able to, according to Service Calls - Home Assistant (and the section after that for the data itself) I recall having seen “data_template:” instead of “data”, but I could be wrong.
If not you can call a script that does have the templated service call.
I remember at some point data_template isn’t necessary anymore.
BTW, from this doc I noticed that tap_action might not use template at all. so I guess a script is the only way.
I assume this can’t be done since no new update for this? Just want to confirm.
i wrote this script, but it always results boost. is there any syntax error?
climate_boost_toggle:
alias: Climate Boost Toggle
sequence:
- service: climate.set_preset_mode
data:
preset_mode: >-
{% if is_state_attr("{{climate_entity}}", 'preset_mode', 'boost') %}
none
{% else %}
boost
{% endif %}
target:
entity_id: "{{climate_entity}}"
mode: single
calling it like this:
service: script.climate_boost_toggle
data:
climate_entity: climate.room_climate_office