This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Custom JavaScript examples
#38
(12.06.2016, 22:36)Erwin van der Zwart Wrote: 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 functionWink
Reply


Messages In This Thread
Custom JavaScript examples - by edgars - 13.04.2016, 11:27
RE: Custom JavaScript examples - by edgars - 15.04.2016, 10:06
RE: Custom JavaScript examples - by buuuudzik - 16.04.2016, 18:53
RE: Custom JavaScript examples - by Joep - 21.03.2024, 09:26
RE: Custom JavaScript examples - by buuuudzik - 21.04.2016, 17:39
RE: Custom JavaScript examples - by buuuudzik - 25.04.2016, 08:53
RE: Custom JavaScript examples - by buuuudzik - 25.04.2016, 13:11
RE: Custom JavaScript examples - by Pawel - 26.04.2016, 19:23
RE: Custom JavaScript examples - by Pawel - 27.04.2016, 07:03
RE: Custom JavaScript examples - by Pawel - 27.04.2016, 08:05
RE: Custom JavaScript examples - by edgars - 28.04.2016, 08:30
RE: Custom JavaScript examples - by buuuudzik - 07.06.2016, 13:15
RE: Custom JavaScript examples - by buuuudzik - 08.06.2016, 06:47
RE: Custom JavaScript examples - by buuuudzik - 10.06.2016, 12:55
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 06:27
RE: Custom JavaScript examples - by buuuudzik - 01.09.2016, 08:20
RE: Custom JavaScript examples - by Pawel - 13.06.2016, 06:59
RE: Custom JavaScript examples - by buuuudzik - 07.10.2016, 13:58
RE: Custom JavaScript examples - by admin - 13.06.2016, 09:02
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 09:36
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 12:21
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 13:43
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 16:52
RE: Custom JavaScript examples - by buuuudzik - 13.06.2016, 20:32
RE: Custom JavaScript examples - by gtsamis - 14.06.2016, 07:04
RE: Custom JavaScript examples - by admin - 14.06.2016, 07:31
RE: Custom JavaScript examples - by admin - 01.07.2016, 07:46
RE: Custom JavaScript examples - by admin - 01.07.2016, 10:18
RE: Custom JavaScript examples - by buuuudzik - 06.10.2016, 10:04
RE: Custom JavaScript examples - by admin - 07.10.2016, 17:38
RE: Custom JavaScript examples - by buuuudzik - 07.10.2016, 19:41
RE: Custom JavaScript examples - by buuuudzik - 10.10.2016, 13:17
RE: Custom JavaScript examples - by buuuudzik - 08.10.2016, 16:35
RE: Custom JavaScript examples - by buuuudzik - 08.10.2016, 19:01
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 06:36
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 15:32
RE: Custom JavaScript examples - by buuuudzik - 09.10.2016, 17:44
RE: Custom JavaScript examples - by admin - 10.10.2016, 09:24
RE: Custom JavaScript examples - by admin - 10.10.2016, 09:32
RE: Custom JavaScript examples - by admin - 10.10.2016, 13:34
RE: Custom JavaScript examples - by buuuudzik - 10.10.2016, 13:41
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 09:59
RE: Custom JavaScript examples - by admin - 11.10.2016, 10:21
RE: Custom JavaScript examples - by admin - 11.10.2016, 10:46
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:44
RE: Custom JavaScript examples - by admin - 11.10.2016, 12:51
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:53
RE: Custom JavaScript examples - by admin - 11.10.2016, 12:54
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 12:57
RE: Custom JavaScript examples - by admin - 11.10.2016, 13:04
RE: Custom JavaScript examples - by buuuudzik - 11.10.2016, 13:10
RE: Custom JavaScript examples - by buuuudzik - 13.10.2016, 12:57
RE: Custom JavaScript examples - by buuuudzik - 31.10.2016, 11:12
RE: Custom JavaScript examples - by cekca - 02.11.2016, 08:17
RE: Custom JavaScript examples - by admin - 02.11.2016, 11:23
RE: Custom JavaScript examples - by cekca - 02.11.2016, 14:28
RE: Custom JavaScript examples - by admin - 08.11.2016, 13:05
RE: Custom JavaScript examples - by buuuudzik - 05.12.2016, 19:11
RE: Custom JavaScript examples - by admin - 07.12.2016, 11:04
RE: Custom JavaScript examples - by Roman - 16.12.2016, 13:49
RE: Custom JavaScript examples - by admin - 16.12.2016, 14:58
RE: Custom JavaScript examples - by Roman - 16.12.2016, 15:38
RE: Custom JavaScript examples - by AEK - 22.01.2018, 07:01
RE: Custom JavaScript examples - by AEK - 22.01.2018, 08:48
RE: Custom JavaScript examples - by admin - 16.12.2016, 16:01
RE: Custom JavaScript examples - by FatMax - 24.12.2016, 00:08
RE: Custom JavaScript examples - by buuuudzik - 24.12.2016, 07:57
RE: Custom JavaScript examples - by Roman - 10.01.2017, 16:00
RE: Custom JavaScript examples - by AEK - 12.01.2017, 09:04
RE: Custom JavaScript examples - by buuuudzik - 16.01.2017, 16:30
RE: Custom JavaScript examples - by Pawel - 19.01.2017, 11:30
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 16:25
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 21:16
RE: Custom JavaScript examples - by buuuudzik - 19.01.2017, 21:58
RE: Custom JavaScript examples - by buuuudzik - 20.01.2017, 17:36
RE: Custom JavaScript examples - by admin - 21.01.2017, 07:35
RE: Custom JavaScript examples - by buuuudzik - 21.01.2017, 07:45
RE: Custom JavaScript examples - by buuuudzik - 25.01.2017, 06:10
RE: Custom JavaScript examples - by admin - 25.01.2017, 07:20
RE: Custom JavaScript examples - by rocfusion - 04.05.2017, 19:08
RE: Custom JavaScript examples - by admin - 18.05.2017, 05:54
RE: Custom JavaScript examples - by buuuudzik - 19.05.2017, 08:40
RE: Custom JavaScript examples - by admin - 19.05.2017, 09:05
RE: Custom JavaScript examples - by Gadjoken - 08.06.2017, 07:59
RE: Custom JavaScript examples - by David - 08.06.2017, 13:27
RE: Custom JavaScript examples - by admin - 08.06.2017, 17:21
RE: Custom JavaScript examples - by josep - 08.06.2017, 17:48
RE: Custom JavaScript examples - by baggins - 10.12.2017, 10:04
RE: Custom JavaScript examples - by Daniel - 11.12.2017, 10:28
RE: Custom JavaScript examples - by baggins - 11.12.2017, 11:06
RE: Custom JavaScript examples - by Daniel - 11.12.2017, 11:15
RE: Custom JavaScript examples - by baggins - 11.12.2017, 11:48
RE: Custom JavaScript examples - by admin - 11.12.2017, 11:52
RE: Custom JavaScript examples - by baggins - 11.12.2017, 12:25
RE: Custom JavaScript examples - by admin - 22.01.2018, 11:53
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 09:39
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 18:51
RE: Custom JavaScript examples - by gdimaria - 02.03.2018, 20:23
RE: Custom JavaScript examples - by mischa - 15.12.2020, 23:28
RE: Custom JavaScript examples - by buuuudzik - 04.03.2018, 21:14
RE: Custom JavaScript examples - by buuuudzik - 05.03.2018, 08:13
RE: Custom JavaScript examples - by buuuudzik - 06.03.2018, 07:17
RE: Custom JavaScript examples - by Mrinj - 24.03.2018, 20:29
RE: Custom JavaScript examples - by admin - 25.03.2018, 05:46
RE: Custom JavaScript examples - by Mrinj - 25.03.2018, 09:29
RE: Custom JavaScript examples - by Mrinj - 25.03.2018, 09:55
RE: Custom JavaScript examples - by DGrandes - 29.04.2019, 16:32
RE: Custom JavaScript examples - by admin - 29.04.2019, 17:00
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 10:28
RE: Custom JavaScript examples - by admin - 30.04.2019, 11:59
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 13:40
RE: Custom JavaScript examples - by admin - 30.04.2019, 14:04
RE: Custom JavaScript examples - by DGrandes - 30.04.2019, 15:38
RE: Custom JavaScript examples - by jlfneira - 08.08.2019, 08:45
RE: Custom JavaScript examples - by tecnorte - 01.04.2020, 11:09
RE: Custom JavaScript examples - by khalil - 05.07.2021, 08:08
RE: Custom JavaScript examples - by Daniel - 03.03.2020, 10:22
RE: Custom JavaScript examples - by Daniel - 03.03.2020, 10:56
RE: Custom JavaScript examples - by Hosutech - 06.03.2020, 07:47
RE: Custom JavaScript examples - by admin - 06.03.2020, 08:06
RE: Custom JavaScript examples - by gtsamis - 06.10.2020, 08:57
RE: Custom JavaScript examples - by admin - 06.10.2020, 09:18
RE: Custom JavaScript examples - by gtsamis - 06.10.2020, 09:41
RE: Custom JavaScript examples - by admin - 16.12.2020, 08:02
RE: Custom JavaScript examples - by mischa - 16.12.2020, 08:18
RE: Custom JavaScript examples - by admin - 16.12.2020, 08:25
RE: Custom JavaScript examples - by serkank - 26.04.2021, 09:37
RE: Custom JavaScript examples - by admin - 26.04.2021, 09:51
RE: Custom JavaScript examples - by serkank - 26.04.2021, 11:16
RE: Custom JavaScript examples - by tigi - 29.06.2021, 16:26
RE: Custom JavaScript examples - by admin - 29.06.2021, 16:46
RE: Custom JavaScript examples - by tigi - 07.07.2021, 09:09
RE: Custom JavaScript examples - by admin - 18.08.2023, 12:24
RE: Custom JavaScript examples - by admin - 18.08.2023, 13:02

Forum Jump: