I feel like sharing this and hope someone finds it useful.
This is a little simplified.
Goal: To change the background image used during the day and night based on the sunrise and sunset time from forecast.io and the longitude and latitude of a display.
Using CMS 1.7.3, Client version 1.7 r53, and have only tried this on Android 4.2.2 clients.
Set a display’s Longitude and Latitude via the CMS.
Start a new layout and use the 5 day weather module.
Over-ride the template. in the first section labeled “Enter the template for the current forecast. For a list of substitutions click “Request Forecast” below.”, enter at the top of the section before anything else:
<body>
<script type="text/javascript">
var i = 0;
</script>
At the bottom of the section, make the last line:
</body>
The closing body tag(</body>) should be at the end of the section.
In the next section labeled “Enter the template for the current forecast. Replaces [dailyForecast] in main template.”, enter:
<script type="text/javascript">
if (i == '0') {
var current_time_ = new Date().getTime();
var current_time_ = Math.floor(current_time_ / 1000);
if (current_time_ < [sunriseTime]) {
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://<SERVER_DOMAIN>/<FOLDER_PATH>/<NIGHTTIME_IMAGE_NAME>)';
document.body.style.backgroundSize = '1920px 1080px';
document.body.style.backgroundRepeat = 'no-repeat';
} else if ((current_time_ > [sunriseTime]) && (current_time_ < [sunsetTime])) {
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://<SERVER_DOMAIN>/<FOLDER_PATH>/<DAYTIME_IMAGE_NAME>)';
document.body.style.backgroundSize = '1920px 1080px';
document.body.style.backgroundRepeat = 'no-repeat';
} else if (current_time_ > [sunsetTime]){
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://<SERVER_DOMAIN>/<FOLDER_PATH>/<NIGHTTIME_IMAGE_NAME>)';
document.body.style.backgroundSize = '1920px 1080px';
document.body.style.backgroundRepeat = 'no-repeat';
} else {
var tod_ = "Not Found";
}
}
i = 1;
</script>
Replace <SERVER_DOMAIN> with the actually domain name, such as www.abc.com, <FOLDER_PATH> with the needed path on the server, and <DAYTIME_IMAGE_NAME> and <NIGHTTIME_IMAGE_NAME> with the actual image names.
Also note that if your desired resolution is not 1920 x 1080, you should change those parameters as well.
In addition also note the images are pulled each time the layout shows. So it will eat some bandwidth. (Feature requested made to be able to pull from database media)