Dynamic background image for clock view based on current weather?

[jpbaril]

I would like that the background image of the clock view shows an image of the current weather, eg: raining, cloudy, partially cloudy, sunny, snowy, clear night, cloudy night, etc.

So very similar to the feature of having the little weather icon in the corner but now also applied to the background image.
It's probably not that difficult but I'm lost with all that coding.

Any ready-to-be-copied code that I could use to achieve that ?

[dinki]

This can be done, I think, with some javascript to set the background image in the view. You would need to create a dictionary with a corresponding image for each mdi icon for the weather. Then in your javascript you would need to match the mdi icon for the current weather to that icon in the dictionary and pull the correct image and display it.

That's how I would approach it. Do know that you would also have to select images that looked good behind the forecast or you'll have a hard time reading it.

[jpbaril]

Well, that's what I meant by "I'm lost". 🤣
I'm no developer... 😨

[EyeVisionsNL]

we only talked about the weather page and dynamic background based on the weather status. So I made this. You must put pictures in the weather folder in the backgrounds folder. I'm not sure if I have all the weather statuses like this.
"variables:
background: |
[[[
const weather = states['yourweatherentitity'].state;
const backgrounds = {
"clear-night": "/local/viewassist/backgrounds/weather/clear-night.jpg",
"cloudy": "/local/viewassist/backgrounds/weather/cloudy.jpg",
"fog": "/local/viewassist/backgrounds/weather/fog.jpg",
"hail": "/local/viewassist/backgrounds/weather/hail.jpg",
"lightning": "/local/viewassist/backgrounds/weather/lightning.jpg",
"lightning-rainy": "/local/viewassist/backgrounds/weather/lightning-rainy.jpg",
"partlycloudy": "/local/viewassist/backgrounds/weather/partly-cloudy.jpg",
"pouring": "/local/viewassist/backgrounds/weather/heavy-rain.jpg",
"rainy": "/local/viewassist/backgrounds/weather/rain.jpg",
"snowy": "/local/viewassist/backgrounds/weather/snow.jpg",
"snowy-rainy": "/local/viewassist/backgrounds/weather/snow-rain.jpg",
"sunny": "/local/viewassist/backgrounds/weather/sunny.jpg",
"windy": "/local/viewassist/backgrounds/weather/windy.jpg",
"windy-variant": "/local/viewassist/backgrounds/weather/windy-variant.jpg",
"exceptional": "/local/viewassist/backgrounds/weather/extreme.jpg"
};
return backgrounds[weather] || "/local/viewassist/backgrounds/weather/default.jpg";
]]]
"

[jpbaril]

Thanks. I'll try to figure out what to do with that code.

[EyeVisionsNL]

It is the beginning of the dashboard. in this case the weather page.

After this, some shadows for text so that they are also visible on the dark/light background like this.
text-shadow: 1px 1px white

[dinki]

Yes. This is what I was talking about. Nice work.

[dinki]

@jpbaril You can find @EyeVisionsNL submission here:
https://dinki.github.io/View-Assist/docs/community-contributions/cc-views/weatherdynamic

[jpbaril]

Thanks a lot @EyeVisionsNL ! I'll try that.