[Openautomation-svn] SF.net SVN: openautomation:[996] CometVisu/trunk/visu

[<pe...@us...>]

Revision: 996
          http://openautomation.svn.sourceforge.net/openautomation/?rev=996&view=rev
Author:   peuter
Date:     2012-09-01 13:49:15 +0000 (Sat, 01 Sep 2012)
Log Message:
-----------
new approach to improve the scaling on different screen sizes, only enabled on mobile devices to imitate the old behavior. Can be enabled via config using <pages enable_column_adjustment="true">
* the approach tries to calculate the maximum amount of columns that can be displayed in one line and reduces this value if needed

Modified Paths:
--------------
    CometVisu/trunk/visu/lib/templateengine.js
    CometVisu/trunk/visu/visu_config.xsd
    CometVisu/trunk/visu/visu_config_metal.xml

Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js	2012-09-01 13:35:43 UTC (rev 995)
+++ CometVisu/trunk/visu/lib/templateengine.js	2012-09-01 13:49:15 UTC (rev 996)
@@ -38,6 +38,9 @@
 var scrollSpeed;
 
 var resizeAfterScroll = false;
+var defaultColumns = 12;
+var minColumnWidth = 150;
+var enableColumnAdjustment = false;
 
 visu = new CometVisu('/cgi-bin/');
 visu.update = function( json ) { // overload the handler
@@ -145,32 +148,79 @@
   return value;
 }
 
+function adjustColumns() {
+  if (enableColumnAdjustment==false) return false;
+  
+  var factor = window.devicePixelRatio || 1;
+  var widthNavbarLeft  = $( '#navbarLeft' ).css('display')!='none' ? $( '#navbarLeft' ).width(): 0;
+  var widthNavbarRight = $( '#navbarRight' ).css('display')!='none' ? $( '#navbarRight' ).width() : 0;
+  var width = $( 'body' ).width() - widthNavbarLeft - widthNavbarRight - 1; // remove  an additional pixel for Firefox
+  width=width/factor;
+
+  var $main = $( '#main' );
+  var newColumns = $main.data('columns');
+  newColumns = (Math.ceil(width/minColumnWidth) % 2)>0 ? Math.ceil(width/minColumnWidth)+1 : Math.ceil(width/minColumnWidth); 
+  newColumns = Math.min(defaultColumns,newColumns);
+  if (newColumns>defaultColumns/2 && defaultColumns>newColumns) newColumns = defaultColumns;
+
+  if (newColumns!=$main.data('columns')) {
+    $main.data({'columns': newColumns} );
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
 /*
  * Make sure everything looks right when the window gets resized. 
  * This is necessary as the scroll effect requires a fixed element size
  */
-function handleResize(skipScrollFix) {
+function handleResize(resize, skipScrollFix) {
   var uagent = navigator.userAgent.toLowerCase();
   var widthNavbarLeft  = $( '#navbarLeft' ).css('display')!='none' ? $( '#navbarLeft' ).width(): 0;
   var widthNavbarRight = $( '#navbarRight' ).css('display')!='none' ? $( '#navbarRight' ).width() : 0;
   var width = $( 'body' ).width() - widthNavbarLeft - widthNavbarRight - 1; // remove  an additional pixel for Firefox
 
+  var $main = $( '#main' );
   if (/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(uagent)) {
-    $( '#main' ).css( 'width', width );
+    $main.css( 'width', width );
     $( '#pageSize' ).text( '.page{width:' + (width-0) + 'px;}' );
     // do nothing
   } else {
-    var height = $( window ).height() - $( '#main' ).position().top;
+    var height = $( window ).height() - $main.position().top;
     if ($( '#navbarBottom' ).css('display')!='none') {
       height-= $( '#navbarBottom' ).outerHeight(true)-1;
     }
     if ($( '#bottom' ).css('display')!='none') {
-      height-= $( '#bottom'       ).outerHeight(true) - 1;
+      height-= $( '#bottom' ).outerHeight(true) - 1;
     }
-    $( '#main' ).css( 'width', width ).css( 'height', height );
+    $main.css( 'width', width ).css( 'height', height );
     $( '#pageSize' ).text( '.page{width:' + (width-0) + 'px;height:' + height + 'px;}' );
   }
-  skipScrollFix===undefined && main_scroll != undefined && main_scroll.seekTo( main_scroll.getIndex(), 0 ); // fix scroll
+  if (skipScrollFix===undefined) {
+    if (adjustColumns()) {
+      var allContainer = $('.widget_container');
+      allContainer.each(function(i, e) {
+        var $e=$(e);
+        var ourColspan = $e.children('*:first-child').data('colspan');
+        var areaColspan = $e.parentsUntil('#centerContainer').last().data('columns') || defaultColumns;
+        var ourWidth = Math.min(100,ourColspan/areaColspan*100);
+        $e.css('width', ourWidth+'%');
+      });
+      // and elements inside groups
+      var adjustableElements = $('.group .widget_container');
+      adjustableElements.each(function(i, e) {
+        var $e = $(e);
+        var areaColspan = $e.parentsUntil('#centerContainer').last().data('columns') || defaultColumns;
+        var groupColspan = Math.min(areaColspan,$e.parentsUntil('.widget_container', '.group').data('colspan'));
+        var ourColspan = $e.children('.widget').data('colspan');
+        var ourWidth = Math.min(100,ourColspan/groupColspan*100);  // in percent
+        $e.css('width', ourWidth+'%');
+      });
+    }
+    // main_scroll != undefined && main_scroll.seekTo( main_scroll.getIndex(), 0 ); // fix scroll
+  }
 }
 $( window ).bind( 'resize', handleResize );
 
@@ -209,6 +259,18 @@
   predefinedDesign = $( 'pages', xml ).attr("design");
   
   scrollSpeed = $( 'pages', xml ).attr("scroll_speed");
+  if ($('pages',xml).attr('enable_column_adjustment')=="true") {
+    enableColumnAdjustment = true;
+  }
+  else if (/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(navigator.userAgent.toLowerCase())) {
+    enableColumnAdjustment = true;
+  }
+  if ($('pages',xml).attr('default_columns')) {
+    defaultColumns = $('pages',xml).attr('default_columns');
+  }
+  if ($('pages',xml).attr('min_column_width')) {
+    minColumnWidth = $('pages',xml).attr('min_column_width');
+  }
 
   // design by url
   if ($.getUrlVar("design")) {
@@ -356,27 +418,27 @@
   
   create_pages(page, 'id_0');
   
-
+  adjustColumns();
   // all containers
-  if (!/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(navigator.userAgent.toLowerCase())) {
-    var allContainer = $('.widget_container');
-    allContainer.each(function(i, e) {
-      var ourColspan = $(e).children('*:first-child').data('colspan');
-      var areaColspan = $(e).parentsUntil('#centerContainer').last().data('columns') || 12;
-      var ourWidth = ourColspan/areaColspan*100;
-      $(e).css('width', ourWidth+'%');
-    });
-  
+  var allContainer = $('.widget_container');
+  allContainer.each(function(i, e) {
+    var $e = $(e);
+    var ourColspan = $e.children('*:first-child').data('colspan');
+    var areaColspan = $e.parentsUntil('#centerContainer').last().data('columns') || defaultColumns;
+    var ourWidth = Math.min(100,ourColspan/areaColspan*100);
+    $e.css('width', ourWidth+'%');
+  });
     // and elements inside groups
     var adjustableElements = $('.group .widget_container');
     adjustableElements.each(function(i, e) {
-      var groupColspan = $(e).parentsUntil('.widget_container', '.group').data('colspan');
-      var ourColspan = $(e).children('.widget').data('colspan');
-      var ourWidth = ourColspan/groupColspan*100;  // in percent
-      $(e).css('width', ourWidth+'%');
+      var $e = $(e);
+      var areaColspan = $e.parentsUntil('#centerContainer').last().data('columns') || defaultColumns;
+      var groupColspan = Math.min(areaColspan,$e.parentsUntil('.widget_container', '.group').data('colspan'));
+      var ourColspan = $e.children('.widget').data('colspan');
+      var ourWidth = Math.min(100,ourColspan/groupColspan*100);  // in percent
+      $e.css('width', ourWidth+'%');
     });
-  };
-  
+    
   // setup the scrollable
   main_scroll = $('#main').scrollable({keyboard: false, touch: false}).data('scrollable');
   main_scroll.onSeek( updateTopNavigation );
@@ -667,7 +729,7 @@
   });
   $(window).trigger('scrolltopage',page_id);
   if (resizeAfterScroll) {
-    handleResize(true);
+    //handleResize(null,true);
     resizeAfterScroll=false;
   } 
 }

Modified: CometVisu/trunk/visu/visu_config.xsd
===================================================================
--- CometVisu/trunk/visu/visu_config.xsd	2012-09-01 13:35:43 UTC (rev 995)
+++ CometVisu/trunk/visu/visu_config.xsd	2012-09-01 13:49:15 UTC (rev 996)
@@ -99,6 +99,9 @@
       <xsd:attribute name="design" type="xsd:string" use="required" />
       <xsd:attribute name="scroll_speed" type="xsd:decimal" use="optional" />
       <xsd:attribute name="max_mobile_screen_width" type="xsd:decimal" use="optional" />
+      <xsd:attribute name="min_column_width" type="xsd:decimal" use="optional" />
+      <xsd:attribute name="default_columns" type="xsd:decimal" use="optional" />
+      <xsd:attribute name="enable_column_adjustment" type="xsd:boolean" use="optional" />
     </xsd:complexType>
   </xsd:element>
 

Modified: CometVisu/trunk/visu/visu_config_metal.xml
===================================================================
--- CometVisu/trunk/visu/visu_config_metal.xml	2012-09-01 13:35:43 UTC (rev 995)
+++ CometVisu/trunk/visu/visu_config_metal.xml	2012-09-01 13:49:15 UTC (rev 996)
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="metal"
-  xsi:noNamespaceSchemaLocation="visu_config.xsd">
+  xsi:noNamespaceSchemaLocation="visu_config.xsd" enable_column_adjustment="true">
   <meta>
     <plugins>
       <plugin name="gweather" />
@@ -141,7 +141,6 @@
         <address transform="DPT:16.001" variant="">12/1/0</address>
       </info>
       <switch mapping="OnOff" styling="GreyGreen">
-        <layout colspan="3" />
         <label>Follow me</label>
         <address transform="DPT:1.001" variant="">12/1/6</address>
       </switch>

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.