WARNING: 2023.4.0b0 or newer break Animated Background

[dreimer1986]

As many things on the WebUI were overhauled completely and more will come with future versions most of the paths the addin docks onto are not on the former locations anymore. Thus the whole addin is DEAD. Maybe someone who already forked it and did some tinkering wants to look into that?

[dreimer1986]

I found a few lil things:

Root = Root && Root.querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver"); This is the new line 59. Then it explodes on: function removeDefaultBackground(node, current_config) function restoreDefaultBackground(node)

It even tries to load the background, but something in there causes it to endless loop. It has problems reading View_Layout.style.background as View_Layout is null now. I hacked around it a bit and now it works fine...

//removes lovelace theme background
function removeDefaultBackground(node, current_config) {
  var background = 'transparent';
  if (current_config.background) {
    background = current_config.background;
  }
  if (node.style.background != background) {
    node.style.background = background;
  }
}

//restores lovelace theme background
function restoreDefaultBackground(node) {
  node.style.background = null;
}

THIS IS A UGLY HACK. I CAN'T FIX IT ANY BETTER. Maybe someone else has interest in it.

[dreimer1986]

Another day, another broken background video... Edited Line 59 above to fit in the newest shoes for >=2023.4.0b4...

[sammyh2506]

Hopefully someone can have a look. Spent a lot of time a few weeks ago getting this to work exactly as I wanted, stood back to admire and them boom, 2023.4!!!! Don't have the expertise to even know where to begin, so hoping someone does. Tried replacing the lines of code with yours @dreimer1986 but still dead. 😔

[CAVACO-PT]

yes , can someone help out on this please !!!

[TRusselo]

confirmed broken 2023.4 Code Owner has had 0 activity on github since 2020. he might be offline/ passed away.

[dreimer1986]

That's the problem. He died.... https://www.gofundme.com/f/home-assistant-community-remembers-villhellm

[dreimer1986]

Btw, I used CardMod, too to get my stuff woking as I want it to. Maybe this is your problem? It's quite broken atm either. I fixed most parts by now except the sidebar. Maybe the styles.js I made with some help and some tinkering helps you all out? https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js

Here the discussion I opened a few minutes ago. https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1338

[dreimer1986]

Btw. I went on and uploaded my "fix" here. https://raw.githubusercontent.com/dreimer1986/lovelace-animated-background/master/dist/animated-background.js

[TRusselo]

Btw. I went on and uploaded my "fix" here. https://raw.githubusercontent.com/dreimer1986/lovelace-animated-background/master/dist/animated-background.js

might be worth forking / fixing.

HACS has been notified of this addon being broken and wont be fixed. If another dev, forks/fixes, they can re-submit to HACS for their fork to be added to HACS library

[CAVACO-PT]

@dreimer1986 , i changed my code to yours , and still not working , do i need to do anything else ??

[dreimer1986]

Btw, I used CardMod, too to get my stuff woking as I want it to. Maybe this is your problem? It's quite broken atm either. I fixed most parts by now except the sidebar. Maybe the styles.js I made with some help and some tinkering helps you all out? https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js

Btw, I used CardMod, too to get my stuff woking as I want it to. Maybe this is your problem? It's quite broken atm either. I fixed most parts by now except the sidebar. Maybe the styles.js I made with some help and some tinkering helps you all out? https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js

Likely the removal of the default wallpaper is broken. I just "fixed" the fatal errors in my code. Rest is quite above my skills.

[CAVACO-PT]

Well i disabled animated wallpaper , and added a static picture , if anyone forks this and fixes it please let us know , it was awesome , i would love do contribute to have it back

[lloydbayley]

Such a shame. I enjoyed my animated backgrounds. Was humbled to hear the author had passed away. Thanks for the excellent addon.

[dreimer1986]

Did anyone try to add my styles.js to the Dashboard resources as workaround? As I said... It works for me that way. ONLY my transparent sidebar does not, but this never worked out of the box with this addon.

This is my current state. Settings → Dashboards → Three dots → Resources → Add it there. Mine for example is in www folder, thus you write "/local/styles.js" there. It's a Java Script module, NOT a style sheet!

[CAVACO-PT]

@dreimer1986 i tried to add it , and i t didnt work !!! i will try again after i clean it , can u share what u posted on the dashboard i had this

animated_background: default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4 entity: weather.cavaco state_url: clear-night:

• https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4
• https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4
• https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
• https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4 cloudy:
• https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
• https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
• https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
• https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
• https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
• https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4 fog:
• https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4
• https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4 mostlycloudy:
• https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4
• https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4
• https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4 partlycloudy:
• https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
• https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
• https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
• https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
• https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
• https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4 rainy:
• https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4 sunny:
• https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4
• https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4
• https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4
• https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4
• https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4

[dreimer1986]

Mine will not help you much. I just use random backgrounds:

animated_background:
  enabled: true
  debug: true
  default_url:
    - /local/animated_backgrounds/1.mp4
    - /local/animated_backgrounds/2.mp4
    - /local/animated_backgrounds/3.mp4
    - /local/animated_backgrounds/4.mp4
    - /local/animated_backgrounds/5.mp4
    - /local/animated_backgrounds/6.mp4
    - /local/animated_backgrounds/7.mp4
    - /local/animated_backgrounds/8.mp4
    - /local/animated_backgrounds/9.mp4
    - /local/animated_backgrounds/10.mp4
    - /local/animated_backgrounds/11.mp4
    - /local/animated_backgrounds/12.mp4
    - /local/animated_backgrounds/13.mp4
    - /local/animated_backgrounds/14.mp4
    - /local/animated_backgrounds/15.mp4
    - /local/animated_backgrounds/16.mp4
    - /local/animated_backgrounds/17.mp4
    - /local/animated_backgrounds/18.mp4
    - /local/animated_backgrounds/19.mp4
    - /local/animated_backgrounds/20.mp4
    - /local/animated_backgrounds/21.mp4
    - /local/animated_backgrounds/22.mp4
    - /local/animated_backgrounds/23.mp4
    - /local/animated_backgrounds/24.mp4
    - /local/animated_backgrounds/25.mp4
    - /local/animated_backgrounds/26.mp4
    - /local/animated_backgrounds/27.mp4
    - /local/animated_backgrounds/28.mp4
    - /local/animated_backgrounds/29.mp4
    - /local/animated_backgrounds/30.mp4
    - /local/animated_backgrounds/31.mp4
    - /local/animated_backgrounds/32.mp4
    - /local/animated_backgrounds/33.mp4
    - /local/animated_backgrounds/34.mp4
    - /local/animated_backgrounds/35.mp4
    - /local/animated_backgrounds/36.mp4
    - /local/animated_backgrounds/37.mp4
    - /local/animated_backgrounds/38.mp4
    - /local/animated_backgrounds/39.mp4
    - /local/animated_backgrounds/40.mp4
    - /local/animated_backgrounds/41.mp4
    - /local/animated_backgrounds/42.mp4
    - /local/animated_backgrounds/43.mp4
    - /local/animated_backgrounds/44.mp4
    - /local/animated_backgrounds/45.mp4
    - /local/animated_backgrounds/46.mp4
    - /local/animated_backgrounds/47.mp4
    - /local/animated_backgrounds/48.mp4
    - /local/animated_backgrounds/49.mp4
    - /local/animated_backgrounds/50.mp4
    - /local/animated_backgrounds/51.mp4
    - /local/animated_backgrounds/52.mp4
    - /local/animated_backgrounds/53.mp4
    - /local/animated_backgrounds/54.mp4
    - /local/animated_backgrounds/55.mp4
    - /local/animated_backgrounds/56.mp4
    - /local/animated_backgrounds/57.mp4
    - /local/animated_backgrounds/58.mp4
    - /local/animated_backgrounds/59.mp4
    - /local/animated_backgrounds/60.mp4
    - /local/animated_backgrounds/61.mp4
    - /local/animated_backgrounds/62.mp4

[CAVACO-PT]

@dreimer1986 ok , i think after all cleaned up it started to work with your styles.js ,

I hope someone continues this , but thank you for the fix at least

Thank you

[AndrewSpec]

Did anyone try to add my styles.js to the Dashboard resources as workaround? As I said... It works for me that way. ONLY my transparent sidebar does not, but this never worked out of the box with this addon.

This is my current state. Settings → Dashboards → Three dots → Resources → Add it there. Mine for example is in www folder, thus you write "/local/styles.js" there. It's a Java Script module, NOT a style sheet!

Got it working with your fix. Thanks!

[TRusselo]

Btw. I went on and uploaded my "fix" here. https://raw.githubusercontent.com/dreimer1986/lovelace-animated-background/master/dist/animated-background.js

this did not work for me. i replaced original file with your code, rebooted HA, and nothing. tried clearing cache, ect.

[dreimer1986]

Read the report COMPLETELY and try ALL steps needed. You missed exactly one. Otherwise it would sort of work again. IMO reading these less than 20 messages in here (One with a step by step manual for the missing step) is no massive task I can not ask you to do first. Don't you agree?

[TRusselo]

Read the report COMPLETELY and try ALL steps needed. You missed exactly one. Otherwise it would sort of work again. IMO reading these less than 20 messages in here (One with a step by step manual for the missing step) is no massive task I can not ask you to do first. Don't you agree?

I appologize, i was mistaken, your post (which i quoted), only linked to a single .js file. and says IS the "fix" your own post might be causing part of your frustration. when i see a "fix" posted, i assume previous steps are no longer required.

my bad for assuming though.

im still not clear on the "steps" 1 install card mod 2 edit card mod styles.js 3 edit animated-background.js ? PROFIT?

[listlesslife]

@dreimer1986

Did anyone try to add my styles.js to the Dashboard resources as workaround? ...

Settings → Dashboards → Three dots → Resources → Add it there. Mine for example is in www folder, thus you write "/local/styles.js" there. It's a Java Script module, NOT a style sheet!

It worked for me, although I named it something other than styles.js. I can see that confusing me somewhere down the line. Anyway, thank you very much for the fix. Hopefully future updates don't break it.

[Opontios]

@dreimer1986

Did anyone try to add my styles.js to the Dashboard resources as workaround? ...

I added your styles.js to resources. This ended up in a complete fix only on the iOs app. On android it didn't do anything and in the Chrome browser the background showed up only in the upper line in one of my themes only, called 'Transparent', but not in the 'Yourname' theme that I was always using. If I choose the default theme, nothing shows up. Then I red your post here: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1338 and did everything as you described here: https://github.com/dreimer1986/yourname_card_mod But nothing changed. So my questions are:

1. In your version of animated background the animation doesn't change according to the weather condition, AFAIU, because there's no weather entity defined, right?
2. The styles.js that you use here https://github.com/dreimer1986/yourname_card_mod is not the same file you advise to use here https://github.com/Villhellm/lovelace-animated-background/issues/56, so which one should be used for the fix? Thanks in advance.

[dreimer1986]

First regarding the Android does not work problem. (@Opontios) Go to the Home Assistant App settings and wipe the Cache there. ONLY the cache, not the rest. Otherwise all settings are gone, too. This will help. If any other Browser causes mess, you have to do the same in theory, wipe the Cache. In Chrome for example you push F12 to open the Dev Console and while it's open, right click on the refresh button and the menu you get... Choose the last selection there. And if this still fails you have luck... Chrome hates it to completely wipe the Cache and this means you have to do evul things to get it done. If this is needed, ping me here. ^^

Works fine on Android App, you just have to believe me here that it is animated ^^

Regarding the weather part. I never wanted the weather to affect my background, I wanted a random one. That's why I skipped the complete entity selection. So yes, no entity and thus no influence of weather. But in theory this still should work.

Regarding which file to use... Errr, you need both. Let me explain. (@Opontios @TRusselo) https://raw.githubusercontent.com/dreimer1986/lovelace-animated-background/master/dist/animated-background.js is the addon itself. The one with a fatal error hackfixed by me. This belongs to: \config\www\community\lovelace-animated-background aka the folder where HACS would put it, too. (Yes you can just add my repo as HACS custom repo as it supports the HACS API. Or you copy that file over the current one you already have.)

https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js is the file fixing the stuff I am skill wise unable to fix in the code of the addon itself. It's a Java Script file editing the CSS of your HA page. What to do with this one is explained here: https://github.com/Villhellm/lovelace-animated-background/issues/56#issuecomment-1499162569 (And yes, this one is still needed to be manually installed even when you used HACS for getting my Theme Repo.)

Phew, I hope I did not miss anyone ^^ Ah and before I forget... @TRusselo you still took it personal. Meeeeh ^^ Sry for that

[lloydbayley]

Thanks for your efforts on the hackfix @dreimer1986. As you say, it's not meant to be perfect but at least it gets partial working back again! Happy here in Australia!

Viel Grüße an Bayern

[BertrumUK]

Ok, this is how I got this new file to work for me even though I just modified the original HACS installed file but that would still not work.

1, Install animated-background by copying the new animated-background.js to /www/animated-background.js replacing any previous versions of the file. Mine was in a community folder under www but this did not work.

2, Go to resources - three dots top right of your main page , Edit Dashboard , three dots , Manage resources. Search for and remove any old animated background resources then add the URL /local/animated-background.js as a javascript module.

3, Ctrl & F5 to clear your browser cache and the Animated Wallpapers should restore. In the App you may need to clear the front end cache but a pulldown refresh worked for me.

[dreimer1986]

WHAT?! See? ... That I meant with Browser cache is evil! I have no way right now to verify, but as I already witnessed evil things thanks to Cache I believe in your words.

[rbogdanov]

I found a few lil things:

Root = Root && Root.querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver"); This is the new line 59. Then it explodes on: function removeDefaultBackground(node, current_config) function restoreDefaultBackground(node)

It even tries to load the background, but something in there causes it to endless loop. It has problems reading View_Layout.style.background as View_Layout is null now. I hacked around it a bit and now it works fine...

//removes lovelace theme background
function removeDefaultBackground(node, current_config) {
  var background = 'transparent';
  if (current_config.background) {
    background = current_config.background;
  }
  if (node.style.background != background) {
    node.style.background = background;
  }
}

//restores lovelace theme background
function restoreDefaultBackground(node) {
  node.style.background = null;
}

THIS IS A UGLY HACK. I CAN'T FIX IT ANY BETTER. Maybe someone else has interest in it.

Thanks for this. I'm forked and add this changes. It realy works. Root = Root && Root.querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver");

[sshimko]

@dreimer1986 thanks for the forking and fixing this! I removed the original lovelace-animated-background repo, added a custom repo pointing to https://github.com/dreimer1986/lovelace-animated-background/, installed it, and reloaded the dashboard.

Everything works! Tested on Firefox on macOS, native app on Android, and Fully Kiosk Browser on Android. No cache issues encountered with that approach. I wonder if the gzip'd version of the js file is still being fetched if people aren't first removing the whole thing?

It might be useful to add the info regarding removing the old one and adding your repo as a custom HACS repo to your first post at this point :)

[dreimer1986]

Still I fell for the stupid Cache as it seems... Looks like the CSS modding is not needed indeed. I don't get it, I wiped the Cache, changed all kind of stuff, did dozens of Beta Updates of HA and this stupid Cache kept this ONE ADDON?! As I just forked to show what I did to make it run again in this report here, I never even tried to switch to my own repo tbh. This really seems to force a reset of one specific part of the Cache. I removed my CSS tinkering and it does a nice job. Still no way for me to get the sidebar transparent, but this is another story as the addin NEVER had this feature and I always had to use some CSS hacking ^^

But beware: I do not plan to maintain the repo, I had LUCK to get it working at all again. This is far beyond my skills with all the CSS shadow root madness used by HA.

[Opontios]

@dreimer1986 Thanks for the detailed explanation. The strangest thing with my current setup after doing everything that was mentioned here is that when I connect from my local WiFi network on my android phone from the app, everything works, but if I turn off the wifi and the phone stays on mobile internet, after reopening the app there's no background. This is not happening in iOS, I checked already. How can the hack be connection type related?

[dreimer1986]

It cannot. But I have random top bar looking not correct problems, too. With and without my former hacking it was.

EDIT:

There is a setting for video Auto play... Maybe this is your problem?

[CAVACO-PT]

Still I fell for the stupid Cache as it seems... Looks like the CSS modding is not needed indeed. I don't get it, I wiped the Cache, changed all kind of stuff, did dozens of Beta Updates of HA and this stupid Cache kept this ONE ADDON?! As I just forked to show what I did to make it run again in this report here, I never even tried to switch to my own repo tbh. This really seems to force a reset of one specific part of the Cache. I removed my CSS tinkering and it does a nice job. Still no way for me to get the sidebar transparent, but this is another story as the addin NEVER had this feature and I always had to use some CSS hacking ^^

But beware: I do not plan to maintain the repo, I had LUCK to get it working at all again. This is far beyond my skills with all the CSS shadow root madness used by HA.

we thank you @dreimer1986 for all your help , we understand , its beyond my skils also, otherwise i would take it , hope someone can keep it going that has the jedi skils for this project !!

[rbogdanov]

Still I fell for the stupid Cache as it seems... Looks like the CSS modding is not needed indeed. I don't get it, I wiped the Cache, changed all kind of stuff, did dozens of Beta Updates of HA and this stupid Cache kept this ONE ADDON?! As I just forked to show what I did to make it run again in this report here, I never even tried to switch to my own repo tbh. This really seems to force a reset of one specific part of the Cache. I removed my CSS tinkering and it does a nice job. Still no way for me to get the sidebar transparent, but this is another story as the addin NEVER had this feature and I always had to use some CSS hacking ^^

But beware: I do not plan to maintain the repo, I had LUCK to get it working at all again. This is far beyond my skills with all the CSS shadow root madness used by HA.

I send u pull request. Added transparent for cards.

[neopilou]

Thank @dreimer1986 for you fix, I just added "margin-bottom: -5px" to the ".bg-video" class, to make the vertical bar disappear

[sammyh2506]

A big thank you to all of you who have considerably more knowledge than me and got this all working again. I know not what magic you used, but magic it was indeed. 😂

[dreimer1986]

If someone has some magic for me, I would be very happy... Before the new update I was able to get my sidebar transparent and the video showed as background... Not anymore. Looks a bit like the sidebar is now somehow shrinking the size to draw on... https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/4798?u=daniel_reimer My red result proving that is seen a bit down below...

[dreimer1986]

Soo, I was a bit crazy and mad yesterday. I updated my JS script to replace the addin for me. The addin was not deep enough in the tree of shadow roots to touch the sidebar anymore after 2023.04. So I went all the way down to "body" and attached my hackery there. The main idea came from the addin source except I don't use a iFrame for it, but a normal node. Likely it's ONLY a solution for my needs though... Playing video as background works fine even with a rudimentary randomizer, but no weather dependency and no other trickery. Main idea is to set the theme background to transparent and you are where you have to be.

[dreimer1986]

Just to let you know about the recent stuff. I started a weather feature and it seems to work mostly fine already. It has one contra though. You need a long term token in HA to use it. I only found one way to get a entity state where the script runs and that's the exit/entrance aka the external API. Working with it is no big problem though and the positive aspects of this approach are just worth it IMO. Otherwise... it's a bit different to configure AND needs help by the theme. I made some differences on mine recently to get anything in a perfect shape. This work needs to be done for your themes, too. Lil howto will follow though. Where to set what to transparent or switching from rgb to rgba etcetc. End result will be almost 100% of HA has a animated background then. Only two places are bad... HACS and the Add-on Manager. Both use iFrames and thus are behaving strange.

https://user-images.githubusercontent.com/29841368/232247600-2a7b0ba7-4f45-471e-b3f6-67aa767f48be.mp4

P.S. Yes, this is the SETTINGS menu!

P.P.S. Work on themes sounds like big work, but it's just a few things need a change. Most important... background image will be set to transparent. Well... A obvious one ^^ That way I did not have a single video load error or flashing through original background etcetc at all since I started polishing up my new solution.

https://github.com/dreimer1986/yourname_card_mod

[dreimer1986]

I am done. Whenever you feel like you wanna tinker around, https://github.com/dreimer1986/yourname_card_mod/blob/master/README-script.md. I opened the Issues Page there aswell as Discussions. (Same for my fork from this addon) So if you have questions, problems, requests or suggestions, feel free to flood both of them to your liking ^^ Maybe I even could add more features from the addon in there, but for now. You get what you see ^^

Ah even if you plan to keep your addon, I roamed around flixel.com quite a bit to get a few more weather conditions filled. Feel free to use the new entries on your addin, too. Only hail and exceptional are missing now.

[lolouk44]

@dreimer1986 thanks for the forking and fixing this! I removed the original lovelace-animated-background repo, added a custom repo pointing to https://github.com/dreimer1986/lovelace-animated-background/, installed it, and reloaded the dashboard.

I can confirm this worked for me too. Thanks @dreimer1986

[mansouryaacoubi]

@dreimer1986 Your fix works like a charm. Danke dir! 👍