Homeydash.com, a Homey dashboard

Samsung db10d-t running web widget from Magic Info Express. Touch works fine. Can control my somfy blinds.

1 Like

Really good work !!
I just have onething missing and thats a forecast.
Can it be done in the future? Example from here
https://hjelp.yr.no/hc/en-us/sections/360000421433-Free-weather-data

Hello, one question to the developers :slight_smile:

I added some special code to the device tile for device class “thermostat”.
I have some Eurotronic Spirit thermostats. For these you can switch the mode in Homey app (a picker with some values, e.g. “Off” or “Heat”).
I added the click-event-listener for this tiles. This function toggles the tile on/off like normal switches.
In addition I added the setting of the device capability (switch the mode between Off and Heat in Homey).
homey.devices.setCapabilityValue({
deviceId: device.id,
capabilityId: ‘eurotronic_mode_spirit’,
value: ‘Off’,
})
All that is working well. But If I switch the mode in Homey app (or in Dashboard on another device), the tile is not switching its state (white/gray).

So my question: How is the event handling of device changes implemented in the dashboard?
I did not find something like registerCapabilityListener.
It would be great if someone could give me a hint or code sniplet to update the tile state on device changes in Homey :innocent:
Thanks!

You’ll have to find out which capability it uses and then use a device.makeCapabilityInstance on it like how its done here: https://github.com/daneedk/homeydash.com/blob/2f22e93271317de25943d17107f8cbde09d4979a/app/js/homeydash.app.js#L378

Also, add your device capability to this function so it will show the correct state when homeydash.com is openend: https://github.com/daneedk/homeydash.com/blob/2f22e93271317de25943d17107f8cbde09d4979a/app/js/homeydash.app.js#L1089

1 Like

Thank you for the examples.
I missed the device.makeCapabilityInstance. I’ll try it…

The second step I did (I think). I extended this method to add the special thermostat values to the tile.

If you are extending the dashboard for other devices and you need some information about eurotronic spirit devices, just write…I’ll try to help.

3 Likes

Hello again,

thanks Danee, it’s working now.
I’ve also seen that I had to give the value elements the id (value+device+capability) to get an auto updated value using your renderValues() method.

I just insert the thermostate code here, so can take some parts if you need it.
There is a small extention for the coloring of values. The value itself is changed by renderValues(), the color is changed inside the additional makeCapabilityInstance codes - inserted here to pevent changing the code on more lines than necessary.

	if(device.class == 'thermostat'){
		//		Temperatur anzeigen
		if ( device.capabilitiesObj && device.capabilitiesObj.measure_temperature 
				&& device.capabilitiesObj && device.capabilitiesObj.target_temperature ){
			var $tempM = document.createElement('div');
			$tempM.classList.add('tempMeasure');
			$tempM.id = 'value:'+device.id + ":measure_temperature";
			//var $tempS = document.createElement('div');
			//$tempS.classList.add('tempState');

			var integer = Math.floor(device.capabilitiesObj.measure_temperature.value)
			n = Math.abs(device.capabilitiesObj.measure_temperature.value)
			var decimal = Math.round((n - Math.floor(n))*10)/10 + "-"
			var decimal = decimal.substring(2,3)
			$tempM.innerHTML  = integer + "<span id='decimal'>"+decimal+"°</span><br/>"
		
			if (device.capabilitiesObj.measure_temperature.value <= device.capabilitiesObj.target_temperature.value) {
				$tempM.style.color = 'red';
				//$tempS.innerHTML = 'heating';
				//$tempS.style.color = 'red';
			  }
			  else {
				$tempM.style.color = 'blue';
				//$tempS.innerHTML = 'off';
				//$tempS.style.color = 'blue';
			  }

			var $tempT = document.createElement('div');
			
			$tempT.classList.add('tempTarget');
			$tempT.id = 'value:'+device.id + ":target_temperature";
			
			var integer = Math.floor(device.capabilitiesObj.target_temperature.value)
			n = Math.abs(device.capabilitiesObj.target_temperature.value)
			var decimal = Math.round((n - Math.floor(n))*10)/10 + "-"
			var decimal = decimal.substring(2,3)
			$tempT.innerHTML  = integer + "<span id='decimal'>"+decimal+"°</span><br/>"
			
			$deviceElement.appendChild($tempM);
			$deviceElement.appendChild($tempT);
			//$deviceElement.appendChild($tempS);
			
			//eventhandler for temperature change
			//MeasureTemperature hast to be processed special because of coloring the value 
			//depending on measure/target values
			device.makeCapabilityInstance('measure_temperature', function(value){
				var $deviceElement = document.getElementById('device:' + device.id);
				if( $deviceElement ) {
					var $valueElement = document.getElementById('value:' + device.id + ":measure_temperature");
					if (device.capabilitiesObj.measure_temperature.value <= device.capabilitiesObj.target_temperature.value) {
						$valueElement.style.color = 'red';
					}
					else {
						$valueElement.style.color = 'blue';
					}
				}
			});
			device.makeCapabilityInstance('target_temperature', function(value){
				var $deviceElement = document.getElementById('device:' + device.id);
				if( $deviceElement ) {
					var $valueElement = document.getElementById('value:' + device.id + ":measure_temperature");
					if (device.capabilitiesObj.measure_temperature.value <= device.capabilitiesObj.target_temperature.value) {
						$valueElement.style.color = 'red';
					}
					else {
						$valueElement.style.color = 'blue';
					}
				}
			});
			
		}
		
		//var $mode = document.createElement('div');
		//$mode.classList.add('thermostatMode');
		if ( device.capabilitiesObj.eurotronic_mode_spirit ){
			if ( device.capabilitiesObj.eurotronic_mode_spirit.value == "Off" ){
				//$mode.innerHTML  = "Off";
				//$mode.style.color = 'red';
				$deviceElement.classList.toggle('on', false);
				
			}
			else{
				//$mode.innerHTML  = "On";
				//$mode.style.color = 'green';
				$deviceElement.classList.toggle('on', true);
			}
			//$deviceElement.appendChild($mode);

			//Click-Event for Icon for changing thermostate mode on touch/click
			$deviceElement.addEventListener('click', function() {
				if ( nameChange ) { return } // No click when shown capability just changed
				if ( longtouch ) {return} // No click when longtouch was performed
				if ( device.capabilitiesObj.eurotronic_mode_spirit.value == "Off" ){
					//$deviceElement.classList.toggle('on', true);
					homey.devices.setCapabilityValue({
						deviceId: device.id,
						capabilityId: 'eurotronic_mode_spirit',
						value: 'Heat',
					}).catch(console.error);
				}
				else{
					//$deviceElement.classList.toggle('on', false);
					homey.devices.setCapabilityValue({
						deviceId: device.id,
						capabilityId: 'eurotronic_mode_spirit',
						value: 'Off',
					}).catch(console.error);
				}
			});
			//register eventhandler for mode change
			device.makeCapabilityInstance('eurotronic_mode_spirit', function(value){
				var $deviceElement = document.getElementById('device:' + device.id);
				if( $deviceElement ) {
					if ( device.capabilitiesObj.eurotronic_mode_spirit.value == "Off" ){
						$deviceElement.classList.toggle('on', false);
					}
					else{
						$deviceElement.classList.toggle('on', true);
					}
				}
			});
			
			}
	}

(How) can you make groups on the Homeydash? I searched and read this post post I probably overlooked it somehow :confused:. Thanks for helping me!

Hello Mitch,
you mean the panels for different device types like thermostats like shown in my screenshot above? For users of homeydash.com it’s not possible.
It’s only possible on a self hosted version (own webserver or NAS) after modifying the html and javascript code.
If you have a selfhosted version, I can show you the code you have to adapt.
Ronny

2 Likes

Hi Ronny, I indeed reffered to your screenshot :slight_smile: . Unfortunately I’m not that IT-technical and I also don’t have a selfhosted version :confused: . Thanks though!

Any news about adding a Iframe / link or something for Weather Forecast ?

As said before, I will not extend homeydash.com beyond Homey’s built-in capabilities.

3 Likes

Why not do it the other way around, and implement HomeyDash inside a iframe in a custom website containing a weather forecast.

1 Like

Maybe in Node-Red dashboard :slight_smile:

Is it possible to hide alarm clocks without remove them in Homey? I use two alarms whit names that i use in flows so i don’t want to remove them in Homey, but i don’t whanna see them on the dashboard. I hope there are possibilities

U can create an extra user. Just for the dashboard. And only show the things and flows you want.

1 Like

Thanks for your reply. I gonna try that

why is the token expireing all the time?

homeydash.com
Token Expired. Please log-in again.

I have 4 devices i use this on but after some time i get this message on all of them and i need to generate a new token and replace all shortcuts to it…

Athom has stated the token only changes/expires when the password of the account is changed, if you didn’t do that please contact Athom.

Password of my homey account has not been changed since release early 2016, already had to make like 5 new tokens since the release of homeyink/dash, will report to athom, but am i the only one that get this token problem?

1 Like

Did you log off from Homey with this user in other applications (developer site)? Perhaps because of something like this you need a new login? Is the token after the login the same like last time?