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
#21
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
Reply
#22
Great great, but WHEN WILL YOU GIVE US NEW SOFTWARE? Smile
Reply
#23
Hi Pawel,

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

BR,

Erwin
Reply
#24
For me, HomeLYnk update will be perfect, Erwin. Do you now when it will be?
Reply
#25
Hi,

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

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

BR,

Erwin
Reply
#26
is this stable version?
Reply
#27
Hi,

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

Erwin
Reply
#28
Final polishing and it will be available Smile
Reply
#29
How to change the page when the screen-orientation changed? E.g. Page 1 for vertical and page 101 for horizontal.
Reply
#30
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
Reply
#31
(07.06.2016, 14:27)Erwin van der Zwart Wrote: 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...
Reply
#32
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
Reply
#33
(08.06.2016, 10:57)Erwin van der Zwart Wrote: 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.
Reply
#34
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
Reply
#35
(10.06.2016, 21:42)Erwin van der Zwart Wrote: 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;
Reply
#36
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
Reply
#37
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
Reply
#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
#39
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?
Reply
#40
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
Reply


Forum Jump: