I must be doing something wrong but i added a few (diswasher, dryer and washingmachine) as test to my dashboard, assigned a input_boolean to it for testing purpose but none of the animations is working?
I have al lthe requirements installed so have no clue what is going wrong.
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: blue
primary: Dishwasher
entity: input_boolean.vaatwasser
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
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); }
}
Mosher
September 26, 2023, 8:30am
8229
Hey,
could you please share this card YAML?
Thank you
Mosher
September 26, 2023, 8:31am
8230
Hey,
what cards for Progress and Graph do you use?
Could you please share YAML?
Thanks
cloudbr34k
September 26, 2023, 9:37am
8231
Hey all, for some reason i cant figure out (NFI really) why when I put my cards in horizontal stack, the chips at the bottom are not displayed when I exit the GUI
Code for anyone interested - https://pastecode.io/s/dwai9o2z
This has been posted many times recently, but how animations are applied changed a few months back.
see the updated animations below:
Hi @rhysb ,
i have made a general mushroom - card-mod styling guide that i have posted here . i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here.
i will …
post your yaml in the message itself.
people are not going to click a link no matter how trustworthy you may seem
I did do a search from bottom to top on terms like wobble, blink etc, tried several examples with chips and not but none of them worked. I did see your post but i thought it was a copy of rhysb’s post so skipped it.
Your updated versions work, thanks
1 Like
nodz
September 26, 2023, 1:47pm
8236
Amazing cards… Did anyone create a great looking card for vacuum?
cloudbr34k
September 26, 2023, 7:20pm
8237
The whole yaml is more than the supported character number lol
akeslo
September 26, 2023, 8:18pm
8238
Hi @Mosher
Progress is bar-card and graph is apexcharts-card.
Here is the YAML, let me know if you have any questions:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: 3D Printer
alignment: center
title_tap_action:
action: url
url_path: http://192.168.3.11:4408
subtitle: |
{{ states('sensor.creality_current_print_state') | title }}
- type: custom:button-card
entity: switch.creality_k1
size: 10%
color: purple
name: K1 Power Switch
show_state: true
confirmation: true
styles:
card:
- font-size: 14px
- font-weight: bold
- padding: 10px
icon:
- margin-bottom: 10px
- type: conditional
conditions:
- entity: sensor.creality_current_print_state
state: printing
card:
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-entity-card
entity: sensor.creality_print_duration
name: Active
primary_info: state
secondary_info: name
fill_container: false
icon_color: blue
- type: custom:mushroom-entity-card
entity: sensor.creality_slicer_print_duration_estimate
name: Projected
primary_info: state
secondary_info: name
fill_container: false
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.creality_slicer_print_time_left_estimate
name: Remaining
primary_info: state
secondary_info: name
fill_container: false
icon_color: orange
- type: custom:bar-card
name: Print Progress...
icon: mdi:clock-end
color: purple
animation:
state: 'on'
speed: 5
positions:
indicator: inside
name: inside
entities:
- entity: sensor.creality_progress
style: |-
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 10px;
}
ha-icon {
color: white;
}
- type: custom:webrtc-camera
url: rtsp://graincam:[email protected] /live
- type: custom:apexcharts-card
graph_span: 1h
header:
show: true
title: Temp
show_states: true
colorize_states: true
apex_config:
chart:
height: 150px
legend:
show: false
grid:
xaxis:
lines:
show: true
borderColor: '#555'
yaxis:
- opposite: true
decimals: 0
apex_config:
tickAmount: 2
all_series_config:
stroke_width: 2
float_precision: 0
series:
- entity: sensor.creality_extruder_temperature
name: Hotend
- entity: sensor.creality_extruder_target
name: Hotend Target
show:
in_chart: false
- entity: sensor.creality_bed_temperature
name: Bed
- entity: sensor.creality_bed_target
name: Bed Target
show:
in_chart: false
- entity: sensor.creality_chamber_temp
name: Chamber
color: green
style: |
ha-card {
color:white;
background-color: black;
}
.state {
display: block !important;
}
2 Likes
they display just fine on all devices for me:
even checked in a grid since that is what it looks like you have and it still works fine:
i would assume that you are accidentally forcing some height restriction on your vertical stack card somewhere as i note that you havent posted the full card for your entire stack.
cloudbr34k
September 26, 2023, 10:00pm
8240
Just click the link lol its not a scam mate
here is the card_mod part at the bottom of each card
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.0em;
--chip-icon-size: 0.5em
}
card_mod:
style: |
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
I checked, I cant find any card height restrictions
I did, and that is what i used to check. But what you posted is only the 1 card that i took a screenshot of. Not everything in your massive vertical stack card.
cloudbr34k
September 26, 2023, 10:03pm
8242
Still works just fine. but again. not your full card.
this is the full card you posted that you have issues with.
i understand trying to drill down to what you think is causing the issue, but clearly the individual parts seem to be working. just not put together
so post me the full card and we can try and work on it
cloudbr34k
September 26, 2023, 10:10pm
8244
this is the code for the 2 rooms in a horizontal stack,https://pastecode.io/s/z1ri0w5a
if I do a f5 cache refresh it temporarily fixes the problem until I go into edit mode
Look i dont know what you want me to do if you refuse to post the entire card.
i can see from the screenshot you sent that you have multiple things stacked on top of eachother.
a horizontal stack with 2 cards at the bottom. a card on top, another card on top of that, and some sort of title card on top of that. all in a stack of some kind (probably a vertical stack) if you dont post the full vertical stack i cant help you.
but honestly what is likely causing the issue is that you have all of these stacks in stacks in stacks.
i would take each of these cards out and place them seperately in your dashboard.
so the horizontal stack with 2 cards seperately. and the other cards on top of that seperately in your dashboard. not all in a vertical stack card like you have right now. your device might just not be able to load it in time.
- type: custom:mushroom-media-player-card
entity: media_player.music
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
- shuffle
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 == '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 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 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 == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.music
state: playing
card:
entity: media_player.music
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: |
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 is_state('media_player.music', 'playing') %}
background: url( '{{ state_attr('media_player.music', "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);
}
hallo @dimitri.landerloos
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: >-
Volgende: {{ state_attr
('sensor.limburg_net_eerst_volgende','Upcoming_day') }}
secondary: >-
{{ state_attr
('sensor.limburg_net_eerst_volgende','Upcoming_waste_types') }}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
#margin-top: -5px;
#margin-bottom: -5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-plastic
badge_icon: |
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
badge_color: orange
icon_color: |-
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
yellow
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
orange
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-residual
icon_color: >-
{% if state_attr('sensor.limburg_net_restafval', 'Days_until') ==
2 %}
yellow
{% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
== 1 %}
orange
{% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
== 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_restafval', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-organic
icon_color: |-
{% if state_attr('sensor.limburg_net_gft', 'Days_until') == 2 %}
yellow
{% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 1 %}
orange
{% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_gft', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-cardboard
icon_color: >-
{% if state_attr('sensor.limburg_net_papier', 'Days_until') == 2
%}
yellow
{% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 1
%}
orange
{% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 0
%}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_papier', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
picture: local/afvalbeheer/textiel-afval.png
icon_color: >-
{% if state_attr('sensor.limburg_net_textiel', 'Days_until') == 2
%}
yellow
{% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
1 %}
orange
{% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_textiel', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
top: 10px;
right: 60px;
}
