rhysb
December 8, 2022, 11:41pm
4351
Try like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dishwasher
secondary: >-
{{ states(entity)}} kWh / ${{ (states(entity) | float * 0.21) | round(2)
}}
icon: mdi:dishwasher
entity: sensor.dishwasher_plug_overall_kwh
tap_action:
action: more-info
layout: horizontal
icon_color: blue
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 90px;
top: -45px;
left: -25px;
}
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.dishwasher_hourly_kwh
icon: mdi:meter-electric
icon_color: lime
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_daily_kwh
icon: mdi:meter-electric
icon_color: light-green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
1 Like
cloudbr34k
December 9, 2022, 12:01am
4352
Thank you!
Card height?
And how do i cut the icon so its not in the bottom chip row
1 Like
rhysb
December 9, 2022, 12:07am
4353
With clip-path: inset(0 0 0 0); like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
clip-path: inset(0 0 0 0);
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 90px;
top: -45px;
left: -25px;
}
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
ha-card {
clip-path: inset(0 0 0 0);
}
2 Likes
cloudbr34k
December 9, 2022, 12:14am
4354
Great, thank you, gives me something to play with!
1 Like
cloudbr34k
December 9, 2022, 12:36am
4355
Cheers, one last one sorry, how do i increase overall carrd height?
rhysb
December 9, 2022, 12:52am
4356
Like this:
ha-card {
clip-path: inset(0 0 0 0);
height: 90px !important;
}
1 Like
rolfokevin
December 9, 2022, 12:59am
4357
Any way to put that same Christmas tree logic into a chip? I tried my hand at it, and while the animations do all work still, after throwing in the width and top, it doesn’t line up as nicely as your icons. Can this even be done with a chip? TIA
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pine-tree
icon_color: green
- type: template
icon: mdi:star-four-points
icon_color: yellow
- type: template
icon: mdi:grain
icon_color: red
- type: template
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
mushroom-template-chip:nth-child(4)$: |
ha-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: 198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
rhysb
December 9, 2022, 3:48am
4359
Just added a bit more polish on my Mushroom Media Player (I can’t help myself). Now with all-new rounded album art corners.
Update is in original post here
24 Likes
wgumaa
December 9, 2022, 7:59am
4360
Hey Rhys, Going to start out by saying that I really love your stuff!
I set out to animate a chip card using the “boing” feature you made.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cloud-download-outline
icon_color: green
content: |2-
{{states('sensor.speedtest_download') }} Mbit/s
Down
entity: sensor.speedtest_download
tap_action:
action: more-info
card_mod:
style: |
.content {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
The whole chip bounces. Is there a way to make the icon only bounce and not the entity (text and values)? Or is that not possible on chips?
Maybe you have a better option for displaying download/upload/ping for my internet connection.
1 Like
Jorge101
December 9, 2022, 12:37pm
4361
It looks amazing, thank you for all the work you do. and sorry that I ask for more, can you add a way to add cover art image from a local file if the media playing dose not have. Thank you again.
1 Like
Hi!
swifty
December 9, 2022, 1:56pm
4363
Thanks, been having a play with this today and it seems to work but only if I hold the button… if I just click it the animation stops playing as soon as the mouse button is released.
Is there any way to force it to finish up the animation ?
Here is what I have so far;
- type: custom:mushroom-template-card
primary: ''
secondary: Leave
icon: mdi:hand-wave-outline
layout: vertical
icon_color: green
tap_action:
…
Anyone know if this is possible ? - I’ve been playing around again today and just can’t seem to get the animations to run unless the button is held down.
Hello, thank you for your beautiful animations. How can i stop animation when entity’s state is off?
1 Like
Tsar
December 9, 2022, 2:26pm
4365
Glad to hear I’m not the only one
jvalst
December 9, 2022, 2:38pm
4366
@rhysb should really get his own github page with all the fancy stuff he makes. Damn really lovin it!
4 Likes
rak
December 9, 2022, 3:32pm
4367
Wow. Thanks a ton. This makes my Dashboard perfekt.
Upper left some chips to show major points I need to know about my house. Say the Tesla is below 30% and not plugged to the wallbox … red chip which points me to those critical conditions. Like atm with the open garage door.
Room cards with chips for the major lights etc for each room. Calendar, cameras, temperatures. Sonos boxes playing, but only those which are master. If you pair two … only one cover is shown ,-).
I consider this final. Achieved most of what I wanted.
The last loopwhole were the big icons for the room cards. Brilliant. Thank you. I learned so much in this thread. Love it.
7 Likes
Tyfoon
December 9, 2022, 4:56pm
4368
So I have implemented to ‘floating chip’ (arrow left upper corner) which is very (!) useful on mobile to go back to the homepage.
However on desktop it is annoying to have it there, as it messes up the layout. See example screenshot below where it would be much nicer to either align TV room - dining - hallway OR to have the floating chip disappear but only on desktop (but leave it on mobile)
Anybody any suggestions how to get either of these options done?
Tehlo
December 9, 2022, 6:49pm
4369
Might I ask what your code is to make the cards see through/glass like? Looks awesome!
With layout-card you can show/hide cards based on screen width or whether it’s a touch screen. You’ll have to change the dashboard to be based on layout-card instead of the default masonry view, but layout-card also has a masonry option.
2 Likes
