Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW!

Рет қаралды 54,350

Күн бұрын

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

Пікірлер: 115

@SmartHomeJunkie Жыл бұрын

What do you think of Animated Mushroom Cards? And did you implement it yourself? Let me know in the comments!

@davidr521 5 ай бұрын

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!

@horaciohermosillo3417 4 ай бұрын

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.

@BallsworthBallsbury Жыл бұрын

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

@SmartHomeJunkie Жыл бұрын

Wow! That is a very big compliment! Thank you so much for that!

@bat3332 Жыл бұрын

@@SmartHomeJunkie very small compliment to the big amount of work you put in . you deserve it

@riesmoos Жыл бұрын

Yes, stunning ! Love the animated washer. Thanks for the tip. Great video again !

@jumbleblue Жыл бұрын

I really appreciate your thorough and clean explanations. Thank you!

@johntisbury Жыл бұрын

Looks like fun, that's now on my to-list list. Thank you.

@adifoto6362 Жыл бұрын

Love the video. Thanks for sharing.

@sevagjb Жыл бұрын

Very nice idea, modern and makes the dashboard cool😎 Thanks Ed

@jaap7374 Жыл бұрын

Very nice video with an emphasis on inspiration with a good idea of the complexity while leaving the details to the documentation.

@grahamshaw5531 Жыл бұрын

I will be off work from Tuesday until next Saturday. I might just have the time to have a go at this. Thanks

@ianrobson9612 Жыл бұрын

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.

@SmartHomeJunkie Жыл бұрын

That's great to hear!

@chunkster29 Жыл бұрын

you can use mushroom entity card as well and the animations still work

@eduardobodega5886 Жыл бұрын

Awesome Ed, thanks

@BeardedTinker Жыл бұрын

Great video Ed. Makes me want to do something about my UI :D

@Bianchi77 Жыл бұрын

Creative video, well done, thanks for sharing it :)

@limp15000 Жыл бұрын

Wow this is great ! Will do a quick test now on my mushroom dashboard :)

@SmartHomeJunkie Жыл бұрын

Let me know if it worked for you and show your results!!!

@Manu_67 4 ай бұрын

Ed you Rocks! Thx for your work

@DutchCorvette Жыл бұрын

Thanks for this video it's really helpful

@osborne82 Жыл бұрын

BRILLIANT video , many thanks. i know what im doing this week lol

@SmartHomeJunkie Жыл бұрын

Please show me the results when you're finished!

@johnnynobels 2 ай бұрын

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

@ronzoot602 Жыл бұрын

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 :)

@dragoscaragea5307 Жыл бұрын

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!

@amyg7851 9 ай бұрын

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 :(

@brianredmond7891 Жыл бұрын

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.

@matteodamiani9705 Жыл бұрын

Great work! thank you so much! do you think is possible to performe same washing machine animation with icons in custom button card?

@Petersoniq Жыл бұрын

Thank you for your animation examples. Did you have same example have animate icon base on numeric sensor - like temperature?

@SmartHomeJunkie Жыл бұрын

You can just change the if statement to check on the temperature sensor value and you'll be fine.

@AceBoy2099 6 ай бұрын

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

@piotrzadrozynski7197 Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

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.

@westcoastpyro9769 Жыл бұрын

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.

@MichaelRnnChristensen Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

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.

@JasperJanssen Жыл бұрын

Okay, this is super clever and cool - but I will not be doing it, at least not for now.

@frason85 Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

Hmmmz, I did not experience that before. Maybe it's because of a theme you use?

@frason85 Жыл бұрын

@@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.

@frason85 Жыл бұрын

@@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.

@robertvasey Жыл бұрын

@@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; }

@PeterLindh Жыл бұрын

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.

@SmartHomeJunkie Жыл бұрын

I think so yes. You have to fiddle with the position value I guess.

@PeterLindh Жыл бұрын

@@SmartHomeJunkie I have tried without success and would be grateful if someone with more knowledge could guide me.

@SmartHomeJunkie Жыл бұрын

@@PeterLindh Change top: -99px; to top: -117px; and you should be fine.

@christian1603 Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

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.

@christian1603 Жыл бұрын

@@SmartHomeJunkie Everything is better in the morning...typo found 😀

@SmartHomeJunkie Жыл бұрын

@@christian1603 Classic!

@Avico78 Жыл бұрын

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 ?

@SmartHomeJunkie Жыл бұрын

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.

@Avico78 Жыл бұрын

@@SmartHomeJunkie thanks , it would be great if could prepare a tutorial about customization non mushroom cards ,again thanks for your work!

@SanilSahadevan Жыл бұрын

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

@SmartHomeJunkie Жыл бұрын

These are the css tags in the code of the webpage.

@SanilSahadevan Жыл бұрын

@@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..

@SmartHomeJunkie Жыл бұрын

@@SanilSahadevan I will put it on the list.

@SanilSahadevan Жыл бұрын

@@SmartHomeJunkie thank you

@MBI_BOY 7 ай бұрын

I couldn't get the bounce animation to work with card-mod. Having the updated yaml available would help me.

@SmartHomeJunkie 7 ай бұрын

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.

@gambler3k Жыл бұрын

can u make a template chip with conditional and still animate icons?

@ziezoenie-2023 Жыл бұрын

This would be interesting yes :)

@capbrantz4935 Жыл бұрын

Nice video, but looks difficult this time

@SmartHomeJunkie Жыл бұрын

Yes, it looks difficult, but if you give it time, I hope you will see that it's not so bad.

@carlopic6610 10 ай бұрын

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

@SmartHomeJunkie 10 ай бұрын

I explained in the description of the video how to fix that. Also the download code contains the fixes.

@carlopic6610 10 ай бұрын

@@SmartHomeJunkie Thank you, Carlo italy...You are great

@SmartHomeJunkie 10 ай бұрын

☺@@carlopic6610

@michaelmastromatteo8196 7 ай бұрын

@@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.

@mrfixitpa 21 күн бұрын

With the purchase of this code, does it include the boolean code also needed on some of these?

@SmartHomeJunkie 21 күн бұрын

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.

@JonteRiele Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

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.

@JonteRiele Жыл бұрын

Did you have time already to check this?

@andjohansen83 9 ай бұрын

Did you find a solution for this? I have the same issue on companion app with android though@@JonteRiele

@andjohansen83 9 ай бұрын

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.

@RobvanKoningsbruggen Жыл бұрын

This is gone keep me soo busy 😂

@SmartHomeJunkie Жыл бұрын

Yep, I'm afraid so... ;)

@marcopaolidds Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

You need to hook into the right css tag.

@BruhMan_5 9 ай бұрын

Even though it's not worth it since they're so small, is it possible to animate the icon badges also

@SmartHomeJunkie 9 ай бұрын

Yes, I think it is if you address the right css selector.

@MrDenisJoshua Жыл бұрын

So definitely and honesty... witch dashboard you use actually please ? Dwain or else ? Thanks for the video

@SmartHomeJunkie Жыл бұрын

I use a custom-made dashboard with Mushroom cards mostly.

@MrDenisJoshua Жыл бұрын

@@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.

@SmartHomeJunkie Жыл бұрын

@@MrDenisJoshua No, it's not minimalist. It's Mushroom.

@MrDenisJoshua Жыл бұрын

@@SmartHomeJunkie Ok... but the question now is... can I combine the Minimalist Dashboard with Mushroom ? Thanks again

@SmartHomeJunkie Жыл бұрын

@@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.

@sonicloud3149 Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

Yes, there are multiple ways. Good idea for a future video!

@DIPDIPOTATOCHIP Жыл бұрын

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.

@DIPDIPOTATOCHIP Жыл бұрын

As this is in a nice compact locationm you could add other keyframes and add a elseif 😊

@IBetraye 11 ай бұрын

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); } }

@IBetraye 11 ай бұрын

Just figured it out by using the ha-state-icon selector > ha-icon. You might want to adjust that in your guide as well?

@SmartHomeJunkie 11 ай бұрын

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.

@eilifiversen6200 Жыл бұрын

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?

@SmartHomeJunkie Жыл бұрын

Oh that's an interesting idea! If I find the time I will look into it myself too.

@westcoastpyro9769 Жыл бұрын

I would also love to know how to do this. I haven't gotten the badge going yet - just the larger icon.

@DonClassifieds Жыл бұрын

hi just donated to this on your shop link. code does not work says Custom element doesn't exist please advise🙁

@SmartHomeJunkie Жыл бұрын

You probably didn’t install a custom component. Did you install the Mushroom cards?

@DonClassifieds 11 ай бұрын

I still can get it to work installed all mushroom cards show but no animation please advise@@SmartHomeJunkie

@DonClassifieds 11 ай бұрын

got it working had to update v1.2 @@SmartHomeJunkie

@DonClassifieds 11 ай бұрын

hi now ive got the animated icons working how do I add my devices to the icons?@@SmartHomeJunkie

@user-mfsc-2024 Жыл бұрын

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

@SmartHomeJunkie Жыл бұрын

You don't need card-mod to change the icon color. You can just enter the icon color in the card itself.