Homeydash.com, a Homey dashboard

Apps
,
665

Just played a little bit with the virtual camera devices in homey…and wondered why not use this to get a rain radar in Homeydash…

Perhaps this is something for Danee for the next versions to implement. I added the code in my selfhosted version.

I added a URL to a rainradar to a virtual camera in Homey App. Homey doesn’t support GIF images, but some URLs with animated GIFs are working, some not. The Homey-App only displays these GIFs as a static image.

I added some line of code to renderDevices()

	if(device.class == 'camera'){
		$deviceElement.style.backgroundImage = 'url('+device.settings.url+')';
		$deviceElement.style.backgroundSize = 'cover';
		$deviceElement.style.backgroundPosition = 'center';
		//$deviceElement.style.webkitMaskImage = 'url('+device.settings.url+')';
		
		$deviceElement.addEventListener('click', function() {
			if ( nameChange ) { return } // No click when shown capability just changed
			if ( longtouch ) {return} // No click when longtouch was performed
			$infopanel.innerHTML = '';
			var $infopanelCamera = document.createElement('div');
			$infopanelCamera.id = "infopanel-camera";
			$infopanelCamera.innerHTML = '';
			$infopanel.appendChild($infopanelCamera);
			$infopanelCamera.style.backgroundImage = 'url('+device.settings.url+')';
			$infopanel.style.visibility = 'visible';
			//reload image after 10min
			timeout = setTimeout(function() {
				$infopanelCamera.style.backgroundImage = 'url('+device.settings.url+')';
			}, 600000)
		});
	}

The style attributes (CSS):
#infopanel-camera {
background-size:contain;
background-repeat: no-repeat;
height: 69vh;
width: 70vw;
background-position-x: center;
background-position-y: center;
opacity: 1;
}

This code addes the image from the camera device (better: from the URL set in device settings) as background to the tile in Homeydash.
A click on the tile opens the infopanel with the picture inside.

The camera devices with the image from the URL (the background is animated):

01
01691×290 47.4 KB

The panel with the fullsize picture (animated):

02
021079×642 90.3 KB

You can’t see it here, but these pictures are animated GIFs showing a animation over the last hours (denepnding on the service which is serving the pictures).

Here are some URLs which are ok (for Germany):

http://www.wetter24.de/meteo/automatic-gif/radar.teaser/radar_de_teaser.gif
https://radar.wetterkontor.de/wk/v3/radar_rx_vorschau.gif
https://www.niederschlagsradar.de/image.ashx?type=loop1stunde
https://www.7-tage-wetter.de/wetter/regenradar/radarfilm.gif

These URLs (forecast) are not working:

https://www.niederschlagsradar.de/images.aspx?srt=loopvorhersage&jaar=-3
http://www.meteox.de/images.aspx?jaar=-3&soort=exp
They are not accepted in Homey App (error message: image/gif not supported).

Of course you can add your ip cameras as favorite device and see the camera picture in the tile background and full size after one click at the tile.

Addition: URL for the Netherlands:

Correction: Homey app is checking the content type of the http response case sensitive.
If the URL is returning image/gif all is right. URLs returning image/GIF are not accepted. =>feature request is created to support upper case values :wink:

9 Likes