Custom JavaScript examples

[Erwin van der Zwart]

Another nice custom Javascript feature: Jump to page by object value (value = 1 -> page = #1, value = 100 -> page = #100)

Code:

$(function() {
 
 var PageNumberObject = Scada.encodeGroupAddress('1/1/1'); // Use 1 byte or 2 byte unsigned integer object !
 objectStore.addListener(PageNumberObject, function(obj, type) {
   
   // Condition to avoid jump to page of object value on visu load
        if(type == 'init'){
            // Exit function on first load, remove the return if you want to jump direct to the page on visu load
            return;
        }
   
   // Condition to jump to page of object value if page is not already there
        if( obj.datatype.major == 5 || obj.datatype.major == 6 ){
            if ( currentPlanId != obj.value ) {
                   showPlan(obj.value);
            }
        }
   
    });
});

BR,

Erwin van der Zwart

[Pawel]

Great great, but WHEN WILL YOU GIVE US NEW SOFTWARE?

[Erwin van der Zwart]

Hi Pawel,

I don't know what controller you use, if it's LM you have to ask Edgars (;

BR,

Erwin

[Pawel]

For me, HomeLYnk update will be perfect, Erwin. Do you now when it will be?

[Erwin van der Zwart]

Hi,

Here you can find our firmware v1.5 for homeLYnk.

http://www.schneider-electric.com/en/pro...3-homelynk

BR,

Erwin

[Pawel]

is this stable version?

[Erwin van der Zwart]

Hi,

Yes this is the official release of our new FW, also spaceLYnk has FW v1.2 as official release.
 
BR,

Erwin

[edgars]

Final polishing and it will be available

[buuuudzik]

How to change the page when the screen-orientation changed? E.g. Page 1 for vertical and page 101 for horizontal.

[Erwin van der Zwart]

Hi Buuuudzik,

Try this:

Code:

$(function(){

    function doOnOrientationChange(){
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        //alert('landscape');
        showPlan(101);
        break; 
      default:
        //alert('portrait');
        showPlan(1);
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
  
});

BR,

Erwin van der Zwart

[buuuudzik]

Hi Buuuudzik,

Try this:

Code:

$(function(){

    function doOnOrientationChange(){
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        //alert('landscape');
        showPlan(101);
        break; 
      default:
        //alert('portrait');
        showPlan(1);
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
  
});

BR,

Erwin van der Zwart

Thanks for your help but sory, I described this in a wrong way. The script should change actual page(vertical) to another(horizontal) when the orientation changed. This must be based on variables because this should change e.g. for page 1 -> page 101, page 2 -> page 102 etc... Or can be based on page names e.g. Home_V_1 -> Home_H_1, Home_V_2 -> Home_H_2, etc...

[Erwin van der Zwart]

Hi Buuudzik,


Give your landscape and portait plans the exact same name and use _V and _H on the end of the name and use this code as custom JavaScript:

Code:

$(function(){

 function OrientationChange(orientation){
   var currentplan_name = planStore[currentPlanId].name;
   var firstChars = currentplan_name.substr(0, (currentplan_name.length - 2));
   var lastChars = currentplan_name.substr(currentplan_name.length - 2);
   var newPlanName = 'Not Found'

   if (lastChars == '_V' && orientation == '_H'){
     var newPlanName = firstChars + '_H'
   }

   if (lastChars == '_H' && orientation == '_V'){
     var newPlanName = firstChars + '_V'
   }

   if (newPlanName != 'Not Found'){
     for (var key in planStore) {
       // skip loop if the property is from prototype
       if (!planStore.hasOwnProperty(key)) continue;
       var obj = planStore[key];
       for (var prop in obj) {
       // skip loop if the property is from prototype
         if(!obj.hasOwnProperty(prop)) continue;
         //console.log(prop + " = " + obj[prop]);
         if (obj.name == newPlanName){
           showPlan(obj.id);
         }
       }
     }
   }
 }

 function doOnOrientationChange(){
   switch(window.orientation)
   {
     case -90:
     case 90:
       OrientationChange('_H')
       break;
     default:
       OrientationChange('_V')
       break;
   }
 }

    window.addEventListener('orientationchange', doOnOrientationChange);

    // Initial execution if needed
    doOnOrientationChange();
 
});

That should do the trick (;

Good luck!

BR,

Erwin van der Zwart

[buuuudzik]

Hi Buuudzik,


Give your landscape and portait plans the exact same name and use _V and _H on the end of the name and use this code as custom JavaScript:

Code:

$(function(){

 function OrientationChange(orientation){
   var currentplan_name = planStore[currentPlanId].name;
   var firstChars = currentplan_name.substr(0, (currentplan_name.length - 2));
   var lastChars = currentplan_name.substr(currentplan_name.length - 2);
   var newPlanName = 'Not Found'

   if (lastChars == '_V' && orientation == '_H'){
     var newPlanName = firstChars + '_H'
   }

   if (lastChars == '_H' && orientation == '_V'){
     var newPlanName = firstChars + '_V'
   }

   if (newPlanName != 'Not Found'){
     for (var key in planStore) {
       // skip loop if the property is from prototype
       if (!planStore.hasOwnProperty(key)) continue;
       var obj = planStore[key];
       for (var prop in obj) {
       // skip loop if the property is from prototype
         if(!obj.hasOwnProperty(prop)) continue;
         //console.log(prop + " = " + obj[prop]);
         if (obj.name == newPlanName){
           showPlan(obj.id);
         }
       }
     }
   }
 }

 function doOnOrientationChange(){
   switch(window.orientation)
   {
     case -90:
     case 90:
       OrientationChange('_H')
       break;
     default:
       OrientationChange('_V')
       break;
   }
 }

    window.addEventListener('orientationchange', doOnOrientationChange);

    // Initial execution if needed
    doOnOrientationChange();
 
});

That should do the trick (;

Good luck!

BR,

Erwin van der Zwart

It works very good and this is what I need. Eventually is there a possibility to detect a mobile view _MV and _MH? Because unfortunately I can't prepare visualisation which will have apropriate icons for iPad and iPhone both. If there is no such possibility it will be ok but if there is it will helpful.

And second think:
Maybe do you know how change a color of the temperature text e.g. when actual is less than setpoint -> ORANGE, when actual is near setpoint -> white or default(don't change), when actual is more than setpoint -> BLUE.

[Erwin van der Zwart]

Hi,

Correction: See post below for first item.

The second item for color can be made easily by listener on object and change css on conditions.

See this post for starting point as it holds all the code you need, just adjust the css on the certain values:

http://forum.logicmachine.net/showthread.php?tid=319

BR,

Erwin

[MarkVersluis]

Hi,

I don't think its possible to detect difference between iPad or iPhone as they use same user agent and same resolution.

The second item for color can be made easily by listener on object and change css on conditions.

See this post for starting point as it holds all the code you need, just adjust the css on the certain values:

http://forum.logicmachine.net/showthread.php?tid=319

BR,

Erwin

They define Ipad or Iphone in the user agent

Code:

var isIpad = navigator.userAgent.match(/iPad/i) != null;

[Erwin van der Zwart]

Hi,

Thanks Mark for pointing that out!

Use _H_iPad and _V_iPad as suffix iPad pages
use _H_iPho and _V_iPho as suffix for iPhone pages
use _H_Desk and _V_Desk as suffix for all other devices  

Then the code will be like this:

Code:

$(function(){

 var isIpad = navigator.userAgent.match(/iPad/i) != null;
 var isIphone = navigator.userAgent.match(/iPhone/i) != null;
 
  function OrientationChange(orientation){
   var currentplan_name = planStore[currentPlanId].name;
   var firstChars = currentplan_name.substr(0, (currentplan_name.length - 7));
   var lastChars = currentplan_name.substr(currentplan_name.length - 7);
   var newPlanName = 'Not Found'

   if ((lastChars == '_V_iPad' || lastChars == '_V_iPho' || lastChars == '_V_Desk') && orientation == '_H_iPad'){
     var newPlanName = firstChars + '_H_iPad'
   }
   
   if ((lastChars == '_V_iPad' || lastChars == '_V_iPho' || lastChars == '_V_Desk') && orientation == '_H_iPho'){
     var newPlanName = firstChars + '_H_iPho'
   }
   
   if ((lastChars == '_V_iPad' || lastChars == '_V_iPho' || lastChars == '_V_Desk') && orientation == '_H_Desk'){
     var newPlanName = firstChars + '_H_Desk'
   }

   if ((lastChars == '_H_iPad' || lastChars == '_H_iPho' || lastChars == '_H_Desk') && orientation == '_V_iPad'){
     var newPlanName = firstChars + '_V_iPad'
   }
   
   if ((lastChars == '_H_iPad' || lastChars == '_H_iPho' || lastChars == '_H_Desk') && orientation == '_V_iPho'){
     var newPlanName = firstChars + '_V_iPho'
   }
   
   if ((lastChars == '_H_iPad' || lastChars == '_H_iPho' || lastChars == '_H_Desk') && orientation == '_V_Desk'){
     var newPlanName = firstChars + '_V_Desk'
   }

   if (newPlanName != 'Not Found'){
     for (var key in planStore) {
       // skip loop if the property is from prototype
       if (!planStore.hasOwnProperty(key)) continue;
       var obj = planStore[key];
       for (var prop in obj) {
           // skip loop if the property is from prototype
         if(!obj.hasOwnProperty(prop)) continue;
           //console.log(prop + " = " + obj[prop]);
           if (obj.name == newPlanName){
             showPlan(obj.id);
           }
         }
       }
     }
   }

    function doOnOrientationChange(){
    switch(window.orientation)
    {
    case -90:
    case 90:
       if (isIpad == true){
           OrientationChange('_H_iPad')
       } else if (isIphone == true){
           OrientationChange('_H_iPho')
       } else {
        OrientationChange('_H_Desk')
       }
    break;
    default:
    if (isIpad == true){
           OrientationChange('_V_iPad')
       } else if (isIphone == true){
           OrientationChange('_V_iPho')
       } else {
        OrientationChange('_V_Desk')
       }
    break;
    }
  }
        
 window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
});

BR,

Erwin

[Erwin van der Zwart]

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

[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

[Pawel]

I have question about doorbell script. Every thing is almost ok, but there is a problem with long push on mobile, because after pressing there is showing a menu. I try to use "taphold" jquery handler (https://api.jquerymobile.com/taphold/), but unfortunately jquerymobile isn't implemented. Am i right? There is some solution?

[Erwin van der Zwart]

Hi Buuudzik,

Here is a improved version of CSS script:

This version has offset parameter between setpoint and value (MinimalDifference)and detects automaticly how many items you have with additional class 'Temp"

The code is also more compact (;

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)[0].innerHTML ) > ( Number( $(".Setp_" + i)[0].innerHTML ) + MinimalDifference ) ){
         $(".Temp_" + i).css("color", highcolor);
       } else if ( ( Number( $(".Temp_" + i)[0].innerHTML ) + MinimalDifference ) < Number( $(".Setp_" + i)[0].innerHTML ) ){
         $(".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 van der Zwart