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

[<ma...@us...>]

Revision: 897
          http://openautomation.svn.sourceforge.net/openautomation/?rev=897&view=rev
Author:   mayerch
Date:     2012-06-29 19:36:04 +0000 (Fri, 29 Jun 2012)
Log Message:
-----------
Added tools to automatically modify a SVG that is used as a backdrop in 2D pages:

Pipe-O-Matic:
  When a SVG group has a class "pipe_group" it's contained paths will be modified to look like a pipe or tube

Flow-O-Matic:
  When a SVG groups has a class "show_flow" the path will be modified to show a "fluid".
  When it additionally has a class "flow_active" this "fluid" will show a flowing motion.

Note: it is allowed to have multiple paths in a group. This can be used to show a crossing. If one path consists out of multiple subpaths a crossing would look like a connection.
This effect can be seen in the 2d3d demo config

Modified Paths:
--------------
    CometVisu/trunk/visu/lib/templateengine.js
    CometVisu/trunk/visu/media/demo_2d_backdrop_red_pot.svg

Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js	2012-06-25 21:05:12 UTC (rev 896)
+++ CometVisu/trunk/visu/lib/templateengine.js	2012-06-29 19:36:04 UTC (rev 897)
@@ -386,6 +386,110 @@
     }
   }
   
+  $('embed').each( function () {
+    this.onload = function(){ 
+      var svg = this.getSVGDocument();
+      
+      // Pipe-O-Matic:
+      var pipes = svg.getElementsByClassName('pipe_group');
+      $(pipes).each( function(){ 
+        var pipe_group = this;
+        $(this).find('path').each( function(){
+          var path = this;
+          var halfsize = parseInt( parseFloat( path.style.strokeWidth ) / 2 );
+          var opacity = 0.15;
+          for( var width = halfsize-1; width > 0; width-- )
+          {
+            opacity -= 0.1/halfsize;
+            var n = path.cloneNode();
+            n.className.baseVal += ' pipe-o-matic_clone';
+            n.style.strokeWidth = width * 2;
+            n.style.stroke = '#ffffff';
+            n.style.strokeOpacity = opacity;
+            pipe_group.insertBefore( n, path.nextElementSibling );
+          }
+        });
+      });
+    
+      // Flow-O-Matic: add Paths
+      var segmentLength = 40;
+      var pipes = svg.getElementsByClassName('show_flow');
+      $(pipes).each( function(){ 
+        var pipe_group = this;
+        var length = 0.0;
+        $(this).find('path').each( function(){
+          var path = this;
+          if( path.className.animVal.split(' ').indexOf( 'pipe-o-matic_clone' ) > 0 ) return;
+          var stroke = path.style.stroke;
+          var r, g, b;
+          if(stroke[0] == '#' )
+          {
+            r = parseInt( path.style.stroke.substring( 1, 3 ), 16 );
+            g = parseInt( path.style.stroke.substring( 3, 5 ), 16 );
+            b = parseInt( path.style.stroke.substring( 5, 7 ), 16 );
+          } else if( stroke.indexOf( 'rgb(') == 0 )
+          {
+            var colors = stroke.replace(/[^0-9,.]*/g, '' ).split(',');
+            r = colors[0];
+            g = colors[1];
+            b = colors[2];
+          }
+          var rTarget = 0; // this color should be somehow user setable - but how?
+          var gTarget = 0;
+          var bTarget = 0;
+          function toHex( v ) { var ret = parseInt( v ).toString( 16 ); return (ret.length<2)?'0'+ret:ret; }
+          for( var i = segmentLength/2; i > 0; i -= 2 )
+          {
+            var factor = 1-i/(segmentLength/2);
+            var offset = (length+segmentLength/2-i) % segmentLength;
+            var low = 2*i;
+            var high = segmentLength - low;
+            var n = path.cloneNode();
+            n.className.baseVal += ' flow-o-matic_clone';
+            n.style.stroke = '#' + toHex( r*factor+rTarget*(1-factor) ) + toHex( g*factor+gTarget*(1-factor) ) + toHex( b*factor+bTarget*(1-factor) );
+            if( high > offset )
+            {
+              n.style.strokeDasharray = [ high - offset, low, offset, 0 ];
+            } else {
+              n.style.strokeDasharray = [ 0, low - (offset - high), high, offset - high ];
+            }
+            n.style.strokeDashoffset = length % (0.5*segmentLength);
+            pipe_group.insertBefore( n, path.nextElementSibling );
+          }
+          length += path.getTotalLength();
+        });
+      });
+      
+      // Flow-O-Matic: add CSS
+      // helper for multiple bowser support
+      function createKeyframe( name, content )
+      {
+        return '@keyframes '         + name + " {\n" + content + "}\n" +
+               '@-moz-keyframes '    + name + " {\n" + content + "}\n" +
+               '@-webkit-keyframes ' + name + " {\n" + content + "}\n";
+      }
+      var keyframes = createKeyframe( 'move', 
+        "from {  stroke-dashoffset: " + segmentLength + ";  }\n"
+      + "to   {  stroke-dashoffset: 0;  }\n" );
+      function createCSSRules( style, value )
+      {
+        return style + ': ' + value + ";\n"
+          + '-moz-' + style + ': ' + value + ";\n"
+          + '-webkit-' + style + ': ' + value + ";\n";
+      }
+      keyframes += ".flow_active path {\n"
+        + createCSSRules( 'animation-duration'       , '3s'       )
+        + createCSSRules( 'animation-name'           , 'move'     )
+        + createCSSRules( 'animation-timing-function', 'linear'   )
+        + createCSSRules( 'animation-iteration-count', 'infinite' )
+        + "}\n";  
+        var s = svg.createElementNS( 'http://www.w3.org/2000/svg', 'style' );
+        s.setAttribute('type','text/css');
+        s.textContent = keyframes;
+        $( 'svg', svg ).prepend( s );
+    };
+  });
+  
   visu.subscribe( ga_list );
   $(window).trigger('resize');
   $("#pages").triggerHandler("done");

Modified: CometVisu/trunk/visu/media/demo_2d_backdrop_red_pot.svg
===================================================================
--- CometVisu/trunk/visu/media/demo_2d_backdrop_red_pot.svg	2012-06-25 21:05:12 UTC (rev 896)
+++ CometVisu/trunk/visu/media/demo_2d_backdrop_red_pot.svg	2012-06-29 19:36:04 UTC (rev 897)
@@ -15,7 +15,7 @@
    <!--
    <script xlink:href="../lib/jquery.js" type="text/javascript"></script>
    -->
-   <script xlink:href="../lib/jquery.js" type="text/javascript"></script>
+   <script xlink:href="../dependencies/jquery.js" type="text/javascript"></script>
    <script xlink:href="../lib/cometvisu-client.js" type="text/javascript"></script>
    <script xlink:href="../transforms/transform_default.js" type="text/javascript"></script>
    <script xlink:href="../transforms/transform_knx.js" type="text/javascript"></script>
@@ -104,6 +104,25 @@
       </cc:Work>
     </rdf:RDF>
   </metadata>
+  <g class="pipe_group show_flow flow_active">
+    <path
+       d="m 425.8384,434.07799 c 0.6364,13.41532 0.56549,30.8791 23.95269,30.62832 70.12255,-0.7519 97.23888,7.42707 137.96865,-25.07085 40.86838,-32.60851 18.35681,-90.8422 -8.26522,-94.98813 -31.80211,-4.95265 -34.86451,66.70935 -17.88672,88.88153 15.40697,20.12076 128.71885,35.91591 131.11642,-17.03335 2.48464,-54.87234 -47.01995,-52.65006 -46.5036,-3.61604"
+       id="pipe1"
+       class="pipe"
+       style="fill:none;stroke:#ff0000;stroke-width:20;" />
+    <path
+       d="m 646.22062,410.07947 c -1.31084,48.2736 65.27818,36.38289 67.80232,36.63966"
+       id="pipe2"
+       class="pipe"
+       style="fill:none;stroke:#ff0000;stroke-width:20;" />
+  </g>
+  <g class="pipe_group">
+    <path
+       d="m 692.79659,112.28814 c 0,29.25237 -26.08511,52.9661 -58.26272,52.9661 -32.1776,0 -58.26271,-23.71373 -58.26271,-52.9661 0,-29.252371 26.08511,-52.966103 58.26271,-52.966103 32.17761,0 58.26272,23.713732 58.26272,52.966103 z"
+       id="pipe1"
+       class="pipe"
+       style="fill:none;stroke:#0000ff;stroke-width:20;" />
+  </g>
   <path
      d="m 524.85653,400.57388 a 100,37.795274 0 0 1 -200,0 100,37.795274 0 1 1 200,0 z"
      id="path3029-8"

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