# Homeydash.com, a Homey dashboard

**URL:** <https://community.homey.app/t/homeydash-com-a-homey-dashboard/13509>\
**Category:** Apps\
**Tags:** app, dashboard\
**Created:** [May 22, 2019, 3:39pm UTC](https://community.homey.app/t/homeydash-com-a-homey-dashboard/13509 "2019-05-22T15:39:28Z")\
**Posts on this page:** 1\
**Showing post:** 648

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [October 15, 2019, 3:28pm UTC](https://community.homey.app/t/homeydash-com-a-homey-dashboard/13509/648 "2019-10-15T15:28:30Z")

</div>

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);
					}
				}
			});
			
			}
	}
```

---

_[View the full topic](https://community.homey.app/t/homeydash-com-a-homey-dashboard/13509)._