Custom JavaScript examples

[buuuudzik]

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

When temperature or setpoint is in the Objects with some unit e.g. '°C' there must be additional lines for delete this unit from the text.

This could be in this way:

Code:

     // Loop to items to set CSS      for (i = 1; (i-1) < TempValueItems; i++) {        // Set conditions for Setp_nr and Temp_nr        temperature = ( $(".Temp_" + i).html() ).slice(0, -2);        setpoint = ( $(".Setp_" + i).html() ).slice(0, -2);                        if ( temperature > ( setpoint + MinimalDifference ) ){          $(".Temp_" + i).css("color", highcolor);                } else if ( ( temperature + MinimalDifference ) < setpoint ){          $(".Temp_"  + i).css("color", lowcolor);                  } else {          $(".Temp_" + i).css("color", defaultcolor);        }      }    }  }