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: https://ko-fi.com/s/1f154c6358
Links referred to in this video:
* Install HACS: https://youtu.be/Q8Gj0LiklRE
* How To Cycle Through Scenes Like Hue Using a Button in Home Assistant: https://youtu.be/nBdDdC2jVUc
* Create your own Garden Watering System: https://youtu.be/e8mlJBce3uQ
* You've Got Mail in Home Assistant: https://youtu.be/-4KGdPh6ur0
* How To Monitor Your Washing Machine: https://youtu.be/ZGLcDmm8Fp8
* Material Design Icons site: https://materialdesignicons.com/
* CSS Clip Path Generator: https://www.cssportal.com/css-clip-path-generator/
* More examples of animated mushroom cards: https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3240
Blog version: https://www.smarthomejunkie.net/create-stunning-animated-mushroom-cards-on-your-dashboard-now
* Join this channel to get access to perks:
https://www.youtube.com/c/smarthomejunkie/join
* Please consider becoming my patron
at https://www.patreon.com/join/smarthomejunkie
* Or please support me by buying me a
at https://ko-fi.com/smarthomejunkie/
My Devices: https://github.com/smarthomejunkie/MyDevices
Instagram: https://www.instagram.com/smarthomejunkie/
Twitter: https://www.twitter.com/smarth0mejunkie
Facebook: https://www.facebook.com/smarthomejunkie/
TikTok: https://www.tiktok.com/@smarthomejunkie
Discord: https://discord.gg/at8v5hW
Music by:
* 2TECH-AUDIO: https://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