|
From: <ma...@us...> - 2012-06-29 19:36:11
|
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.
|