Custom JavaScript examples

[buuuudzik]

Hi Buuudzik,

Here is a 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)

Put this code in your custom JavaScript:

Code:

$(function(){    // Set color values  var defaultcolor = $('.Temp').css("color")  var highcolor = 'rgb(0, 255, 0)'  var lowcolor = 'rgb(128, 128, 255)'    // Function to change colors on values  function CheckSetpointandValue(){        // Set conditions for Setp_1 and Temp_1    if  ( $(".Temp_1")[0].innerHTML ==  $(".Setp_1")[0].innerHTML){        $(".Temp_1").css("color", defaultcolor);    } else if ( $(".Temp_1")[0].innerHTML > $(".Setp_1")[0].innerHTML){        $(".Temp_1").css("color", highcolor);    } else if ( $(".Temp_1")[0].innerHTML < $(".Setp_1")[0].innerHTML){        $(".Temp_1").css("color", lowcolor);    }        // Set conditions for Setp_2 and Temp_2    if  ( $(".Temp_2")[0].innerHTML ==  $(".Setp_2")[0].innerHTML){        $(".Temp_2").css("color", defaultcolor);    } else if ( $(".Temp_2")[0].innerHTML > $(".Setp_2")[0].innerHTML){        $(".Temp_2").css("color", highcolor);    } else if ( $(".Temp_2")[0].innerHTML < $(".Setp_2")[0].innerHTML){        $(".Temp_2").css("color", lowcolor);    }        // Set conditions for Setp_3 and Temp_3    if  ( $(".Temp_3")[0].innerHTML ==  $(".Setp_3")[0].innerHTML){        $(".Temp_3").css("color", defaultcolor);    } else if ( $(".Temp_3")[0].innerHTML > $(".Setp_3")[0].innerHTML){        $(".Temp_3").css("color", highcolor);    } else if ( $(".Temp_3")[0].innerHTML < $(".Setp_3")[0].innerHTML){        $(".Temp_3").css("color", lowcolor);    }      }      // 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();   });

All items with additional class 'Setp' and 'Temp' are monitored on changes and wil execute the function. Based on values the css of the correct item (Temp_nr) will be changed

If you have more then 3 items then you need to add them inside the function CheckSetpointandValue().

BR,

Erwin van der Zwart

Very nice function

Unfortunately this script isn't working on LM Load Balancer