Forecast.io Background that Changes with Sunrise and Sunset

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)

3 Likes

that doesnt still display the weather does it ?

how possible to switch background, but still display the weather ontop ?

It only changes the background image of a region in this example.

We use this and set the region as z-index 1. Then other regions on top with higher z-indexes, of which, if you wanted, could contain a weather module.

Note that z-indexes are a bit touchy in 1.7.x, so be prepared to spend a little time getting and keeping the z-indexes in the order you want. Also the z-indexes or overlapping regions are not supported on anything other then the Android clients at the moment, if I remember correctly. (We only run Android clients)

Tested and Still works on 1.8