(13.06.2016, 09:18)Erwin van der Zwart Wrote:

(13.06.2016, 09:02)admin Wrote: You can also replace [0].innerHTML with jQuery's .html()

Thanks Admin,

The code will be like this then:

Here is the final sample for changing color with css based on setpoint and actual value difference.

Give the first setpoint these additional classes 'Setp Setp_1', the 2nd 'Setp Setp_2', the 3th 'Setp Setp_3' etc

Give the first actual these additional classes 'Temp Temp_1', the 2nd 'Temp Temp_2', the 3th 'Temp Temp_3' etc  

So all setpoints will have 2 additional classes (Setp and Setp_nr) and all actuals will have 2 additional classes (Temp and Temp_nr)

Make sure to use incredimental sequense 1,2,3,4,5 etc. without gaps as Temp_nr and Setp_nr (the number makes the match between both)

Put this code in your custom JavaScript:

Code:

$(function(){
 
 // Set color values
 var defaultcolor = $('.Temp').css("color") // Use color that is default set on the object
 var highcolor = 'rgb(0, 153, 204)' // Blue
 var lowcolor = 'rgb(204, 153, 0)' // Orange
 
 // Function to change colors on values
 function CheckSetpointandValue(){
   // Check if and how many elements there are with additional class 'Temp'
   if ($(".Temp").length > 0){

     // Set number of items to loop through based on additional class 'Temp' items
     var TempValueItems = $(".Temp").length // Determine number of compare items
     
     // Set difference between actual and setpoint to change color
     var MinimalDifference = 0.5 // Determine minnimal difference between setpoint and actual temperature
   
     // Loop to items to set CSS
     for (i = 1; (i-1) < TempValueItems; i++) {
       // Set conditions for Setp_nr and Temp_nr
       if ( Number( $(".Temp_" + i).html() ) > ( Number( $(".Setp_" + i).html() ) + MinimalDifference ) ){
         $(".Temp_" + i).css("color", highcolor);
       } else if ( ( Number( $(".Temp_" + i).html() ) + MinimalDifference ) < Number( $(".Setp_" + i).html() ) ){
         $(".Temp_"  + i).css("color", lowcolor);
       } else {
         $(".Temp_" + i).css("color", defaultcolor);
       }
     }
   }
 }  
 
 // Check for changes on value of item with Temp
 $('.Temp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
 // Check for changes on value of item with Setp
 $('.Setp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
 // Initial execution
 CheckSetpointandValue();
 
});

BR,

Erwin

(07.10.2016, 17:38)admin Wrote: Try replacing Number(...) calls with parseFloat(...). Then it won't matter whether you have units/suffix set or not.

(07.10.2016, 19:41)buuuudzik Wrote:

(07.10.2016, 17:38)admin Wrote: Try replacing Number(...) calls with parseFloat(...). Then it won't matter whether you have units/suffix set or not.

It works good So this is ready. I've checked also the possibility of using one pair (Temp_1 and Setp_1) in a few places, when you have actual temperature presented in a few places. You must add to every 2, 3, 4 etc. actual temp only 'Temp_x' and it works.


Only it not work on iPhone 5s and iPad Air2 when temperature is on the widget. On PC it working also on the widget. Do you know what could be the reason?