Hello, I would like to show you a way to animate your dashboards in the background. You will be all familiar with the Home Assistant login page and I actually find the background there very appealing. That’s why I was looking for a way to implement this on my dashboard. After some back and forth I found a solution. Using this method you can add the background to any dashboard.
Instructions:
-
Two things are necessary for the Particles Background. First you have to create a helper under Devices & Services with the type Switch and the name Button Background Dashboard. This means you can then easily show or hide the particle background using a switch. I have saved the switch in the Settings subpage.
-
The second is to create the files, simply copy all the files from my github (current release) from the “z-particles background” folder and add them to HA at www/particles/. You have to create the “particles” folder in advance at www.
-
Depending on which page you ultimately want to use the background, a conditional card must be inserted. The card remains empty for now and Card Mod puts it in the right place. The positioning of the card within the dashboard should be done at the end in the new design of HA. With the old design, it probably needs to be put at the beginning. The colors of the points, lines and the background can be edited in the css and in the app.js (don’t forget to clear the cache afterwards). The transparency is defined directly in the card.
The code for the conditional card looks like this:
type: conditional
conditions:
- condition: state
entity: input_boolean.button_background_dashboard
state: "on"
card:
type: iframe
url: /local/particles/background/index.html
aspect_ratio: 50%
card_mod:
style: |
ha-card {
border: none !important;
border-radius: 0px !important;
background: none !important;
box-shadow: none !important;
z-index: -1;
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity:0.3;
}
Have fun crafting. How do you like the background? I would be very happy to get some feedback.