(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

(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

(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

(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