Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW!
ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2024
- This video is going to change the way your dashboard looks in Home Assistant. Forever. Let me rephrase that. Starting today, your dashboard will look Awesome, just awesome with these ANIMATED MUSHROOM CARDS!
NOTE: Since version 3.0.0 of Mushroom cards, the CSS has changed. You need to replace ha-icon with ha-state-icon. You also need to change the structure of the code because the structure of the DOM has changed.
For instance:
card_mod:
style: |
ha-state-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('input_boolean.airconditioning_power', 'on') }}
}
And another change since version v3.0.5:
CHANGE --icon-animation: TO animation:
⭐ You can download the UPDATED code that I created for this video at: ko-fi.com/s/1f154c6358 ⭐
Links referred to in this video:
* Install HACS: • Install HACS in Home A...
* How To Cycle Through Scenes Like Hue Using a Button in Home Assistant: • How to Cycle through S...
* Create your own Garden Watering System: • How to Create YOUR OWN...
* You've Got Mail in Home Assistant: • You've Got Mail in Hom...
* How To Monitor Your Washing Machine: • How To Monitor Your Wa...
* Material Design Icons site: materialdesignicons.com/
* CSS Clip Path Generator: www.cssportal.com/css-clip-pa...
* More examples of animated mushroom cards: community.home-assistant.io/t...
Blog version: www.smarthomejunkie.net/creat...
⭐⭐⭐
* Join this channel to get access to perks: 📺 / smarthomejunkie
* Please consider becoming my patron 🏅 at / smarthomejunkie
* Or please support me by buying me a ☕ at ko-fi.com/smarthomejunkie/
⭐⭐⭐
My Devices: github.com/smarthomejunkie/My...
Instagram: / smarthomejunkie
Twitter: / smarth0mejunkie
Facebook: / smarthomejunkie
TikTok: / smarthomejunkie
Discord: / discord
Music by:
* 2TECH-AUDIO: 2tech-audio.bandcamp.com/
00:00:00 Introduction
00:01:34 Install Card-Mod
00:02:43 Explain the animated chips
00:03:04 Edit the chips card
00:07:11 Download the MDI icon for polygon use
00:07:47 Apply the clip path to our animation
00:09:25 Create the animated airconditiong card
00:10:05 Create the animated scenes cards
00:11:09 Edit the animated Light Mushroom cards
00:12:03 Create the Animated Sprinkler Card and the Animated Washing Machine Card
00:12:55 Create the Washing Machine Animated Card
#homeassistant #animation #animated #animateddashboard #dashboard #mushroom #tutorial #smarthome #homeautomation - แนวปฏิบัติและการใช้ชีวิต
![CAMPปลิ้น | EP.77[2/2] "รับทราบ" แก๊งเพื่อนรัก 10 ปี ที่ไปไหนก็มีตำนาน!](http://i.ytimg.com/vi/ifc0ofD51B0/mqdefault.jpg)
What do you think of Animated Mushroom Cards? And did you implement it yourself? Let me know in the comments!
Ed - another great video!
Perhaps I missed it, but I'm trying to use the mushroom-climate-card and animate the icon, and I'm unable to figure it out. Any ideas?
(ED)IT (pun intendED): I figured it out!
These mushroom cards are awesome and makes HA look great but is there a way to change the color of the card instead of just the icon based on the state? not sure if I didn't see it.
Ed, your HA tutorials are the best on the Internet! It's clear you put a lot of thought and effort into editing them so they're informative and easy to follow, even for complex topics like this. Thank you for all you do! You are a gift to this community, my friend
Wow! That is a very big compliment! Thank you so much for that!
@@SmartHomeJunkie very small compliment to the big amount of work you put in . you deserve it
Yes, stunning ! Love the animated washer. Thanks for the tip. Great video again !
Looks like fun, that's now on my to-list list. Thank you.
I really appreciate your thorough and clean explanations. Thank you!
Very nice idea, modern and makes the dashboard cool😎
Thanks Ed
Very nice video with an emphasis on inspiration with a good idea of the complexity while leaving the details to the documentation.
Love the video. Thanks for sharing.
Great video Ed. Makes me want to do something about my UI :D
Ed you Rocks! Thx for your work
Awesome Ed, thanks
Creative video, well done, thanks for sharing it :)
Another great video. I am really glad I opted to use home assistant and found your videos. They along with another presenter have helped me immensly in getting my house automation and the dashboards looking and performing well. The good part is I am just getting started and so there is so much more to learn.
That's great to hear!
I will be off work from Tuesday until next Saturday. I might just have the time to have a go at this. Thanks
you can use mushroom entity card as well and the animations still work
Thanks for this video it's really helpful
Wow this is great ! Will do a quick test now on my mushroom dashboard :)
Let me know if it worked for you and show your results!!!
BRILLIANT video , many thanks. i know what im doing this week lol
Please show me the results when you're finished!
Great video about the use of the powerfull card mod. Would appreciatie more about that. E.g. A tutorial on how to modify the standard to-do card using card mod would be appreciated
Great tutorial. Is it possible to have a more in depth explanation of how the multiple CSS elements inside the mushroom card work? For example I’d like to edit the TV volume bar in the media mushroom card and I can’t seem to be able to find what/how exactly it should be edited. Thanks!
Great work! thank you so much! do you think is possible to performe same washing machine animation with icons in custom button card?
I looked this up to try and figure out how to make an animated garage door icon (color and image, open/closed, and in-between). Guess I'll have to watch this a couple more times along with my pc next to me to try and figure it out
Great video! Is it possible to animate other icons similarly, or only mushroom card icons? I'm using a paper-buttons-row card for displaying my sprinklers and I would like to animate the sprinklers as you did.
Hi Ed,
Loving this - thanks so much for the detailed tutorial.
I know you're also a Dwains Dashboard user - just wondering if you'd managed to get animated icons working on DD? I've got a whole heap of custom animations working on my test dashboard (standard lovelace), but as soon as I try to transfer to Dwains Dashboard none of it works :(
Thank you for your animation examples. Did you have same example have animate icon base on numeric sensor - like temperature?
You can just change the if statement to check on the temperature sensor value and you'll be fine.
Weer een leuk leerzaam filmpje , Zou je ook eens kunnen uitleggen hoe je een 2`HA kunt laten lopen naast je goede verzie ? , Gewoon een test verzie zeg maar . Enne ga zo verder :)
This is fantastic and I'm going to add this heavily into my new dashboard. However I really want to be able to animate the badges in the mushroom template cards... Say add a spinning fan badge for my furnace. The main icon is the dancing flame, but i want the badge to show a fan spinning when the system's fan is on.
Been trying to isolate it in developer tools.
Found the div.icon and the slot marked "badge" but my css is really not very good so I'm struggling to transfer that information to the yaml to make it work.
Really cool. One question about performance of Dwain Dashboard with such cards? Dwain's dashboard with a lot of hidden entities is really lagging on older tablets, so what will happen if I use animations?
I'm not sure if this will work with Dwains Dashboard to be honest. But, performance shouldn't be an issue using CSS. It's really lightweight.
Super nice - thanks. I almost made it all way through implementing my own nice version in my own home assistant, but the tumble dryer is bugging me. I find it extremely hard to create the clip-path for the icon with the inner circle removed using the "CSS Clip-Path Generator". I'm creating a similar animation using the "heat-pump" icon, trying to make the inner fan spin. The clip-path for the inner circle ("icon 2") is easy, but I'm unable to do the trick without the inner circle ("icon 1"). Is there a trick I have missed?
I can totally understand. If you recreate the polygon of the washing machine on the washing machine icon on the CSS Clip Path Generator site, you'll see how that one is created and that will give you a hint on how to create your own for the heat pump! You can recreate this with a custom polygon on that site.
Thanks for your excellent videos and tutorials!
Is there a way to make the animation with the washing machine work even if I add "secondary:" with info from for example a temperature sensor? Adding that line puts the center of the icons in different positions.
I think so yes. You have to fiddle with the position value I guess.
@@SmartHomeJunkie I have tried without success and would be grateful if someone with more knowledge could guide me.
@@PeterLindh Change top: -99px; to top: -117px; and you should be fine.
Great, just what I needed!
One question though: how can you achieve what you did with the 3 entity buttons (cozy, cold, green) with template buttons?
Great to hear. I'm not sure what you mean. You can use Template Mushroom cards as well, just like how I used it for the Airconditioning button.
@@SmartHomeJunkie Everything is better in the morning...typo found 😀
@@christian1603 Classic!
Nice one 👍Just did the washing machine animation, but I'm a bit disappointed to see that the icon color is more saturated with the stacked cards. Maybe because there are two semitransparent icons on top of each other, making it less transparent? Any tips on this? Looks weird with another card next to it with a "different" color, although I've chosen the same color for the icon. Can i remove the background color from the icon on the second card somehow?
Hmmmz, I did not experience that before. Maybe it's because of a theme you use?
@@SmartHomeJunkie I've tried the Mushroom themes, noctis and some other themes, all with the same effect. Its obvious if i set the top position of the cards slightly offset that the overlapping part is more opaque.
I've "solved" it for now setting the icon_color for the animated card to ' ', which makes the "laundry" part of that icon black, but the rest gets no color, so the "laundry" part stays black and the rest amber ss set in the first card.
@@SmartHomeJunkie Tweaked it a little, using a conditional card showing the animated card, so the washing machine looks empty when not running 👍 Posted a video with the increased opacity problem aswell if you'd want to see what I mean.
@@frason85 I had the same issue and spent an embarrassing amount of time trying to solve... but finally found a solution. Using developer tools in the browser I noticed in the mushroom-shape-icon that background-color was being inherited from a parent element "shape". So if you reference .shape in your CSS and set background-color to transparent it should be solved.
mushroom-shape-icon$: |
ha-icon {
clip-path: polygon(blah blah blah);
background-color: none;
}
.shape {
background-color: transparent !important;
}
I couldn't get the bounce animation to work with card-mod. Having the updated yaml available would help me.
I understand your frustration. It can be tricky to get animations to work sometimes. I've added some hints to the description of this video to handle the changes that were made in Home Assistant.
excellent , thanks much , i tried to impelment it on single simple "button" card but didnt work for , can i add card_mod to "button" card ?
This tutorial only works on mushroom cards because the CSS points Mushroom CSS tags in the code. If you want to do this for a simple button, you need to point to the CSS of that button instead.
@@SmartHomeJunkie thanks , it would be great if could prepare a tutorial about customization non mushroom cards ,again thanks for your work!
Thank you so much ... all of these excellent tips... works a treat.. my dashboard looks good... btw i have a doubt... these examples.. I have followed them to the word.. but i don't understand how you get these element names... like.. mushroom-template-chip, mushroom-shape-icon, ha-icon.. etc.. how can i retrieve those names
These are the css tags in the code of the webpage.
@@SmartHomeJunkie.. Will you be able to make a short video on how to retrieve those tags and how to use them in the cards for different styles editing... Im kind of stuck in one of your other videos with grid layout for dashboard... And using grid areas..
@@SanilSahadevan I will put it on the list.
@@SmartHomeJunkie thank you
can u make a template chip with conditional and still animate icons?
This would be interesting yes :)
Hi, Great video!
I was checking your Washing Machine animation and the way you position the second icon on top of the first.
I got it working like you have and it looks good on my browser on my laptop.
In the companion app (iPhone) it isn't. The second icon, the animating circle, seems to be positioned too high.
Do you have the that as well? Any suggestions to fix this for both?
That shouldn't be the case. Is have to double check in the companion app, but it should behave the same way. I'll get back to you as soon as I've seen this behavior at my end.
Did you have time already to check this?
Did you find a solution for this? I have the same issue on companion app with android though@@JonteRiele
I found that setting top: -95px did the trick on companion app. However this screws up the layout on normal browser. So not really sure why is behaves different on browser and app.
With the purchase of this code, does it include the boolean code also needed on some of these?
The code is the save as what I show in the video. It's just for your convenience and to say thank you for your sponsoring donation.
how to make it work over an "Horizontal Stack Card Configuration"? i can not manage to work it out using your code. it miss the "chips:" line, but where to insert it? could I show you the code?
You need to hook into the right css tag.
Even though it's not worth it since they're so small, is it possible to animate the icon badges also
Yes, I think it is if you address the right css selector.
Okay, this is super clever and cool - but I will not be doing it, at least not for now.
Really nice video, have played around with animations a bit now, and want to spin a badge icon in a mushroom template card, but i cant find a way to apply the animation to that part. In my head replacing this:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('binary_sensor.some_sensor', 'on') }}
}
with :
card_mod:
style:
mushroom-badge-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('binary_sensor.some_sensor', 'on') }}
}
should work, but it dosent, anybody know if it is possible to animate the badge icon?
Oh that's an interesting idea! If I find the time I will look into it myself too.
I would also love to know how to do this. I haven't gotten the badge going yet - just the larger icon.
Great guide! I've followed it to create a mushroom template card in which the adguard shield icon flips when i click it, but it does not seem to work. The animation does work for a chip card, but i'd like to show some text below the icon so i went for a template card. Any idea what i'm doing wrong?
Thanks in advance!
type: custom:mushroom-template-card
entity: switch.adguard_home_protection
layout: vertical
primary: |-
{% if is_state('switch.adguard_home_protection', 'on') %}
Filtering
{% else %}
Off
{% endif %}
icon: |-
{% if is_state('switch.adguard_home_protection', 'on') %}
mdi:shield-check
{% else %}
mdi:shield-alert
{% endif %}
icon_color: |-
{% if is_state('switch.adguard_home_protection', 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
{{ 'animation: rotateYp .25s linear;' if is_state('switch.adguard_home_protection', 'on') }}
}
@keyframes rotateYp {
0% { transform: rotateY( 60deg); }
20% { transform: rotateY( 120deg); }
40% { transform: rotateY( 180deg); }
60% { transform: rotateY( 240deg); }
80% { transform: rotateY( 300deg); }
100% { transform: rotateY( 360deg); }
}
ha-state-icon {
{{ 'animation: rotateYn .25s linear;' if is_state('switch.adguard_home_protection', 'off') }}
}
@keyframes rotateYn {
100% { transform: rotateY( 360deg); }
80% { transform: rotateY( 300deg); }
60% { transform: rotateY( 240deg); }
40% { transform: rotateY( 180deg); }
20% { transform: rotateY( 120deg); }
0% { transform: rotateY( 60deg); }
}
Just figured it out by using the ha-state-icon selector > ha-icon. You might want to adjust that in your guide as well?
I already did that in the description of the video. Also the code that can be downloaded is changed as well so that it works with the latest version of the Mushroom cards.
if you only want to have it animate when its on/open, or whatever you can do this
card_mod:
style: |
@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.25, 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); }
}
ha-icon {
animation:
{%- set sensor = states('binary_sensor.front_door_sensor') %}
{%- if sensor == 'on' %}boing 3s linear infinite; transform-origin: 50% 90%;
{%- endif %}
}
bascially I change the icon color and all the other text and icon info in the usual place, but just added this to the bottom of the card, and it animates the boing only when the door is open.
As this is in a nice compact locationm you could add other keyframes and add a elseif 😊
I have some family and friends I’d like to add to HASS as people. I’d like to make them have access to my HASS system but only want them to see a particular dashboard. I don’t want them to see anything other than allow them to open my gate and front door. I have all this for myself, but of course I have total access. I don’t want my family and friends to see anything but what I want them to see and use. Is there a way to have multi-user, but with restricted permissions?
Yes, there are multiple ways. Good idea for a future video!
Hi, thanks to you I met Rhys and his animated cards. I used them but I realized that lately many no longer work on Home assistant. Have you understood why they no longer work?
I hope you have noticed this too and maybe find a solution.
Thank you, Carlo italy
I explained in the description of the video how to fix that. Also the download code contains the fixes.
@@SmartHomeJunkie Thank you, Carlo italy...You are great
☺@@carlopic6610
@@carlopic6610 Salve Carlo, sei italiano ? Se si, tu sei riuscito a far funzionare le animazioni ? Se si, mi fai sapere come, per favore ? Grazie mille.
So definitely and honesty... witch dashboard you use actually please ? Dwain or else ?
Thanks for the video
I use a custom-made dashboard with Mushroom cards mostly.
@@SmartHomeJunkie Do you have a video please ? it's the Minimalist maybe ?
I ask cause I wanto to start play with the dashboard and I still don't know witch to choose.
I started with Dwain Dashboard, but I need something more, and I dont like ta fact that I must have the home page with all that area 😞
Thanks a lot again.
@@MrDenisJoshua No, it's not minimalist. It's Mushroom.
@@SmartHomeJunkie Ok... but the question now is... can I combine the Minimalist Dashboard with Mushroom ?
Thanks again
@@MrDenisJoshua I never used minimalist, but as far as I know, with mushroom you can get diet of the dance results as with minimalist, but much easier.
hi just donated to this on your shop link. code does not work says Custom element doesn't exist please advise🙁
You probably didn’t install a custom component. Did you install the Mushroom cards?
I still can get it to work installed all mushroom cards show but no animation please advise@@SmartHomeJunkie
got it working had to update v1.2 @@SmartHomeJunkie
hi now ive got the animated icons working how do I add my devices to the icons?@@SmartHomeJunkie
for testing and simplicity i just add two template chips and simple css code to change the icon color. But it didnt work.
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: switch.ac_conditioner
hold_action:
action: none
icon: mdi:fan
content: Adrian
tap_action:
action: toggle
icon_color: ''
- type: template
double_tap_action:
action: none
entity: switch.ac_conditioner
icon: mdi:fan
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
color: green;
}
`
the 2nd icon wont change to green
You don't need card-mod to change the icon color. You can just enter the icon color in the card itself.
Nice video, but looks difficult this time
Yes, it looks difficult, but if you give it time, I hope you will see that it's not so bad.
This is gone keep me soo busy 😂
Yep, I'm afraid so... ;)
Keep getting "No card type found"
Mushroom is installed.
You made a mistake in the card YAML
As Mushroom version 3.0.0+ this how-to is not working anymore. You need to change the ha-icon to ha-state-icon and change the DOM
Yes, As I already stated in the description of this video.
Where is the link to Rhys post that inspired you? (01:05)
In the description.