Background Image not working

[tintinmaster]

Since the latest commit, my image just isn't loading. I have a black background with the text:
"Loading background photo...".
The strange thing I realized is, that my pi does not send a query to unsplash.(Checked with Pi-Hole, unsplash is whitelisted)
But when I open the Magic Mirror² on my other pc, the background image is loading.
Before my pull it worked just fine

[tintinmaster]

It worked on release 1.1.0 - 2019-1-21

[delightedCrow]

Interesting, are you getting any errors?

[joberbr]

I am also having the same issue. I am not seeing any errors. It says "loading background photo" when I start the MM through pm2 and npm start but when I start it with npm start dev it works fine.

[delightedCrow]

hmm, now that is a curious bug!
Can someone try setting the config option autoDimOn: false in the WallberryTheme config and see if the issue still occurs? It could be bug with the new auto dim feature and I'm wondering if disabling it will fix it

[joberbr]

tried autoDimOn: false and I am still getting a black background.

[delightedCrow]

well, at least that's consistent :) thank you for trying.
The more I think about this the more mystified I am about why it would load fine in dev mode but not when booted regularly (and why it seems to work fine on some installs but not others). I can't seem to reproduce this in serveronly mode on my mac, or on my raspberryPi 3b mirror so far, so I'm wondering if it's an environment issue or something.
(a shot in the dark here, but just in case), maybe try a software update and reboot?

[joberbr]

i think it has something to do with the wallberry theme collection. i switched the collection and it works fine.

[delightedCrow]

SWEET! can you tell me what collections you had before and after?

[joberbr]

i used collection 2589108 before and now I am using 217461

[delightedCrow]

If you switch back to 2589108 can you get it to fail again?
Edit: I suppose I should say can you get it to fail consistently with the 2589108 collection (I still can't recreate the bug for some reason)

[joberbr]

yes when I switch back it fails to load the background photo

[delightedCrow]

awesome! do you mind posting your config (minus api keys) so I can see what options you have set? Thanks for your detective work!

[joberbr]

{ module: "WallberryTheme", position: "fullscreen_below", config: { unsplashAccessKey: "xxx", collections: "2589108", autoDimOn: false } },

[vincep5]

strange.. mine too was all black after the git pull of the latest code. I tried pm2 to restart the MagicMirror and it didnt help. I had to do a full reboot for it to display the images again.

[tintinmaster]

After I changed my collection and restartet the Mirror it worked
{ module: "WallberryTheme", position: "fullscreen_below", // Required Position config: { unsplashAccessKey: "", // REQUIRED collections:"2203755",// "327760", updateInterval: 600000, orientation: "landscape", resizeForScreen: "true", backgroundOpacity: 1, brightImageOpacity: 0.85, autoDimOn: true, addBackgroundFade: [] } },
When I change back to my old collection it's still black.
And when i try to use collection 2589108 , the collection used by @joberbr , I get an API error "No photos found"

[delightedCrow]

@tintinmaster I think your API error for no photos found might be due to the fact that the collection 2589108 doesn't have any landscape photos, so Unsplash can't find any relevant photos in it to display

I'm still baffled why sometimes certain collections cause the black screen for some people, and why rebooting sometimes works. Thanks for the info, I will keep investigating

[delightedCrow]

if anyone wants to try out the latest on the dev branch, it contains some extra error handling that might help diagnose the issue

[vincep5]

Access to Image at 'https://images.unsplash.com/photo-1534196511436-921a4e99f297?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1016&h=1856&fit=crop&ixid=eyJhcHBfaWQiOjQ1MjEwfQ' from origin 'http://0.0.0.0:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.

[joberbr]

I am not getting any error messages. It is still not working like it did previously.

[vincep5]

Mine was from the Dev Toolbar. If you VNC into your Raspberry Pi and press the ALT key. There are menus where you can enable the Dev Toolbar and it will give some messages from the MM

[joberbr]

Thanks. Yes. I am getting the same error.

[delightedCrow]

Aha, the plot thickens :D
Very odd that the CORS issue would be intermittent and that rebooting, changing collections, or starting in dev mode would get occasionally get around it... It makes me wonder if it's somehow not applying the new CORS rule to background images that were cached before the code update (seems weird, but this is a weird bug).
Does force-reloading (in the view menu, or CTRL+SHIFT+R) help? Not sure if there's another way to make Electron clear its cache/ local storage.

[joberbr]

So I went into the developer tool > application > cookies and cleared them all. And it worked but when I rebooted it went back to the black screen.

[delightedCrow]

thanks for testing @joberbr!
I've finally been able to confirm this behavior too at least once, looks like we're on the right track with it being a bug in how Electron caches images. Clearing cookies/force reload will work until you reboot, but it turns out Electron is VERY persistent (lol) and I had to manually clear its cache to stop the problem persisting across reboots.
On my pi the Electron stores its cache at /home/pi/.config/Electron/Cache. Deleting everything in that folder seems to fix the issue permanently.

[joberbr]

Yes. That worked for me also. Thanks so much for your persistence.

[vincep5]

Yes, thanks, that is also working for me too. Strange

[delightedCrow]

yay, that was definitely a bizarre edge case. Thanks, everyone for testing :)

[tintinmaster]

This is a very strange problem xD

[Oetzmann]

Thanks 👍
That solved my problem :)