examples/dotparser/DotToJson.js examples/dotparser/index.html examples/dotparser/philo.dot examples/dotparser/sample.dot examples/dotparser/unix-mod.dot examples/spring_layout.html examples/wire_tooltips.html js/Layout.js @@ -5,8 +5,14 @@ To get the latest version, please visit http://javascript.neyric.com/wireit Version 0.4.1 not released yet +TODO: + * Layer.onChangeEvt (+implementation in WiringEditor for saved state, + implementation in Layouts) + Changeset: + * Spring Layout (experimental) (+examples) + * Wire mouse events + * Adapters for WiringEditor (removed the complicated SMD & YUI-RPC stuff) * Bug fix for wire positioning using FormContainer * Added drawing method 'bezierArrows' (early alpha) VERSION.txt @@ -19,10 +19,10 @@ body { } #top .logo { - font-family: cursive; + /*font-family: cursive; + color: #3366CC;*/ font-size: 30px; font-weight: bold; - color: #3366CC; padding-left: 10px; padding-top: 4px; } css/WireItEditor.css @@ -1,16 +1,17 @@ var demoLanguage = { + // Set a unique name for the language languageName: "meltingpotDemo", - - smdUrl: '../../backend/php/WiringEditor.smd', + // inputEx fields for pipes properties propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title", typeInvite: "Enter a title" } }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } ], + // List of node types definition modules: [ - + { "name": "FormContainer", "container": { examples/WiringEditor/demo.js @@ -62,9 +62,6 @@ div.Bubble div.body { <script type="text/javascript" src="../../lib/yui/json/json-min.js"></script> <script type="text/javascript" src="../../lib/yui/button/button-min.js"></script> - -<script type="text/javascript" src="../../lib/yui-rpc.js"></script> -  <script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script> <script src="../../lib/inputex/js/Field.js" type='text/javascript'></script> examples/WiringEditor/index.html @@ -5,7 +5,6 @@ var jsBox = { language: { languageName: "jsBox", - smdUrl: '../../backend/php/WiringEditor.smd', propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title", typeInvite: "Enter a title" } }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } examples/jsBox/jsBox.js @@ -26,9 +26,6 @@ <script type="text/javascript" src="../../lib/yui/json/json-min.js"></script> <script type="text/javascript" src="../../lib/yui/button/button-min.js"></script> - -<script type="text/javascript" src="../../lib/yui-rpc.js"></script> -  <script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script> <script src="../../lib/inputex/js/Field.js" type='text/javascript'></script> examples/logicGates/index.html @@ -1,116 +1,116 @@ var logicGatesLang = { - + // Set a unique name for the language languageName: "logicGates", - - smdUrl: '../../backend/php/WiringEditor.smd', + // inputEx fields for pipes properties propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Name", typeInvite: "Enter a title"} }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } ], + // List of node types definition modules: [ - { - "name": "AND", + { + "name": "AND", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_and.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_and.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } - }, + }, - { - "name": "OR", + { + "name": "OR", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_or.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_or.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "NOT", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_not.png", - "terminals": [ - {"name": "_INPUT", "direction": [-1,0], "offsetPosition": {"left": -12, "top": 23 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 117, "top": 23 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "NOT", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_not.png", + "terminals": [ + {"name": "_INPUT", "direction": [-1,0], "offsetPosition": {"left": -12, "top": 23 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 117, "top": 23 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "NAND", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_nand.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 }, "ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "NAND", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_nand.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 }, "ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "XOR", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_xor.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "XOR", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_xor.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "A", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/A.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "A", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/A.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "B", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/B.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "B", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/B.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "C", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/C.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - } + { + "name": "C", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/C.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + } ] }; examples/logicGates/logicGates.js @@ -32,7 +32,8 @@ div.blockBox { float: left; position: relative; z-index: 5; - background-color: rgb(255,200,200); + /*background-color: rgb(255,200,200);*/ + border: 1px solid #aaa; opacity: 0.8; padding: 10px; font-weight: bold; examples/wires_and_terminals.html images/terminals.png @@ -18,10 +18,10 @@ ul li { font-size: 13px;} #headbar { background-image: url(res/logo-wireit.jpg); height: 223px; margin: 0; padding: 0; } -#navigation { position: absolute; margin: 6px 0 0 380px; } -#navigation li { margin: 0; display: inline; margin-right: 30px;} -#navigation li a { color: white; text-decoration: none; font-size: 14px; } -#navigation li a:hover { color: #cccc33; text-decoration: underline; } +/*.navigation { }*/ +.navigation li { margin: 0; display: inline; margin-right: 30px;} +.navigation li a { color: #999999; text-decoration: none; font-size: 14px; } +.navigation li a:hover { color: #cccc33; text-decoration: underline; } #layout { width: 80%; } #layout td.left { width: 55%;} @@ -31,11 +31,11 @@ ul li { font-size: 13px;} p.title { font-weight: bold; font-size: 22px;} td.left ul { list-style-image: url(res/star.png); } -div.appBox { width: 100%; height: 144px; position: relative; margin-top: 10px; } -div.appBox p { position: absolute; left: 160px; top: 10px; font-size: 18px; text-decoration: none;} +div.appBox { width: 100%; /*height: 144px;*/ position: relative; margin-top: 10px; } +div.appBox p { position: absolute; left: 130px; top: 0px; font-size: 18px; text-decoration: none;} div.appBox a {text-decoration: none;} -div.appBox p span {color: #aaa;font-size: 12pt;} -div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;} +div.appBox p span {color: #aaa;font-size: 11pt;} +div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} </style> </head> @@ -44,15 +44,21 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;} <div id='headbar'> - <ul id="navigation"> + <ul class="navigation" style=" position: absolute; margin: 6px 0 0 380px;"> <li><a href="http://javascript.neyric.com/wireit">Home</a></li> <li><a href="http://github.com/neyric/wireit/">GitHub[Git]</a></li> - <li><a href="http://neyric.lighthouseapp.com/projects/25048-wireit/tickets?q=all">Issues</a></li> + <li><a href="http://neyric.lighthouseapp.com/projects/25048-wireit">Issues</a></li> <li><a href="doc/index.html">Documentation</a></li> <li><a href="http://javascript.neyric.com/blog/category/wireit/">Blog</a> <a href="http://javascript.neyric.com/blog/feed/"><img src="doc/rss.png" border="0"/></a></li> <li><a href="http://groups.google.com/group/wireit/">Forums</a></li> </ul> + + <div style="position: absolute; top: 80px; left: 750px; font-size: 90%; line-height: 30px;"> + <img src='http://www.twitter.com/favicon.ico' alt="twitter" /> follow <a href="http://twitter.com/wireit">WireIt on Twitter</a><br /> + <img src="http://delicious.com/favicon.ico"> bookmark on <a href="http://del.icio.us/url/651a56650c753830645ecf46fb036db6">Del.icio.us</a><br /> + <img src='http://github.com/favicon.ico' alt="twitter" /> follow <a href="http://github.com/neyric/wireit/tree/master"> on GitHub</a> + </div> </div> @@ -61,18 +67,11 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;} <tr> <td class="left"> - <p class="title">About</p> - - <p>   WireIt is an open-source javascript library to create <b>web wirable interfaces</b> for <b>dataflow applications</b>, <b>visual programming languages</b> or <b>graphical modeling</b>.</p> - - <p>   It supports all <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade Browsers</a>. Please report your issues with specific browsers in <a href="http://groups.google.com/group/wireit/">the forum</a>.</p> - <p>   It uses the <a href="http://developer.yahoo.com/yui/">YUI library</a> (2.7.0) for DOM and events manipulation, and <a href="http://excanvas.sourceforge.net/">excanvas</a> for IE support of the canvas tag.</p> +  - <p class="title">What's new in 0.4 ?</p> - <ul> - <li>The <a href="examples/WiringEditor/">WiringEditor</a>, a full-blown interface to use <i>visual languages</i>.</li> - </ul> - + <p style="font-size: 130%;">WireIt is an open-source javascript library to create <b>web wirable interfaces</b> for <b>dataflow applications</b>, <b>visual programming languages</b>, <b>graphical modeling</b>, or <b>graph editors</b>.</p> + + <br /> <center> <div style="width:425px;text-align:left" id="__ss_1057012"> @@ -84,40 +83,49 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;} </object> </div> </center> - - <p class="title">Documentation</p> - <p>   WireIt comes with an exhaustive <a href="doc/index.html">API documentation</a> built with <a href="http://developer.yahoo.com/yui/yuidoc/">YUI Doc</a>,<br/> and the following <b>examples</b> :</p> + <p class="title">Presentation</p> + + <p>Here are the main component classes (bottom-up order):</p> + + <ul> + <li>Wire - create wires in browsers</li> + <li>Terminal - wire endpoints and edition widget</li> + <li>Container - general "box" containing one or more terminals</li> + <li>Layer - handle multiple containers and wires</li> + <li>WiringEditor - single-page editor for your <i>visual language</i>.</li> + </ul> -  - <div class="appBox" style="margin-left: 30px;margin-top: 30px;"> - <a href="examples/wires_and_terminals.html"> - <img src="res/demo1.png" class="reflect" border="0" alt="Learn Wires, Terminals"/> - <p><span>learn</span><br/><span class="big">Wires, Terminals</span></p> - </a> - </div> + <p>Different types of Container are provided :</p> + <ul> + <li>ImageContainer - use images as graph nodes</li> + <li>FormContainer - build form containers based on <a href="http://javascript.neyric.com/inputex/">inputEx</a> forms</li> + </ul> + <p>You can create your own container by subclassing the base <i>Container</i> class, and still benefit from the drop-in use of the WiringEditor in your web application.</p> -  - <div class="appBox" style="margin-left: 30px;"> - <a href="examples/WiringEditor/"> - <img src="res/wiringEditor.png" class="reflect" border="0" alt="Learn Containers, WiringEditor"/> - <p><span>learn</span><br/><span class="big">Containers, WiringEditor</span></p> - </a> - </div> + <p>The WiringEditor requires a connection to a database to use save/load features. You can customize it using adapters. A default adapter is provided, which uses JSON-RPC through ajax calls, and a PHP/MySQL backend.</p> - <ul> -  - <li><a href="examples/presentation.html">Interactive presentation</a></li> - <li><a href="examples/dd_and_animation.html">Using animation</a></li> - <li><a href="examples/wire_events.html">Using events</a></li> + <p>WireIt supports all <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade Browsers</a>. Please report your issues with specific browsers in <a href="http://groups.google.com/group/wireit/">the forum</a>. It uses the <a href="http://developer.yahoo.com/yui/">YUI library</a> (2.7.0) for DOM and events manipulation, and <a href="http://excanvas.sourceforge.net/">excanvas</a> for IE support of the canvas tag.</p> + + + + <p class="title">Documentation</p> + + + <ul> + <li><a href="doc/index.html">API documentation</a> built with <a href="http://developer.yahoo.com/yui/yuidoc/">YUI Doc</a></li> + <li><a href="http://wiki.github.com/neyric/wireit">Wiki</a></li> </ul> - + + <p>You can also get some help on the <a href="">forum</a>. Please report your issues or feature request at <a href="http://neyric.lighthouseapp.com/projects/25048-wireit">LightHouse</a>.</p> + + <p>Deeper hacking into WireIt might require some knowledge in the libraries used :</p> + <ul> + <li><a href="http://javascript.neyric.com/inputex">inputEx documentation</a></li> + <li><a href="http://developer.yahoo.com/yui/">YUI documentation</a></li> + </ul> </td> @@ -126,33 +134,34 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;}  <p class="title">Download</p> - <p style="text-align:center;font-weight:bold; font-size:15px;background-color:#EEEEEE;-moz-border-radius: 10px; padding: 5px;-webkit-border-radius: 10px;"><a href="http://cloud.github.com/downloads/neyric/wireit/WireIt-0.4.0.zip">Download WireIt 0.4.0</a><br/><span style="font-size: 70%; font-weight: normal;">(WireIt-0.4.0.zip - 7.8MB - <a href="VERSION.txt">changeset</a>)</span></p> + + <div style="text-align:center;font-weight:bold; font-size:15px;background-color:#EEEEEE;-moz-border-radius: 10px; padding: 10px;-webkit-border-radius: 10px;"> + <a href="http://cloud.github.com/downloads/neyric/wireit/WireIt-0.4.0.zip">Download WireIt 0.4.0</a><br/> + <span style="font-size: 70%; font-weight: normal;">(WireIt-0.4.0.zip - 7.8MB - <a href="VERSION.txt">changeset</a>)</span> + </div>  <p>WireIt is released under the <a href="license.txt">MIT License</a>.</p> <p>Clone from <a href="http://github.com/neyric/wireit/">GitHub</a>: <span style="font-size: 80%;">git clone git://github.com/neyric/wireit.git</span></p> -  - - - <p class="title">WireIt-based projects</p> - <ul> - <li><a href="http://tarpipe.com">Tarpipe</a> - share content across social applications</li> - <li><a href="http://github.com/LeifW/pipescape/tree/master">Pipescape</a> - a WireIt interface to <a href="http://www.w3.org/TR/xproc/">XProc</a></li> - <li><a href="http://graphpipes.de/">Graphpipes</a> - easy way to aggregate semantic data</li> - </ul> + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- + "> + <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> + <img alt="" border="0" src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" width="1" height="1"> + </form> + </center> - <p class="title">Applications</p> + <p class="title">Featured examples</p>  <div class="appBox"> <a href="examples/planarGame/planarGame.html"> - <img src="res/planar.gif" class="reflect" border="0" alt="Click to play now !"/> + <img src="res/planar.gif" class="reflect" border="0" alt="Click to play now !" width="107" height="81" /> <p><span>Play the</span><br/><span class="big">Planar Game</span></p> </a> </div> @@ -161,7 +170,7 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;}  <div class="appBox"> <a href="examples/jsBox/jsBox.html"> - <img src="res/jsBox.gif" class="reflect" border="0" alt="Click to try jsBox !"/> + <img src="res/jsBox.gif" class="reflect" border="0" alt="Click to try jsBox !" width="107" height="81" /> <p><span>visual javascript demo</span><br/><span class="big">jsBox</span></p> </a> </div> @@ -169,19 +178,85 @@ div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;}  <div class="appBox"> <a href="examples/logicGates/index.html"> - <img src="res/logicGates.png" class="reflect" border="0" alt="Click to try jsBox !"/> + <img src="res/logicGates.png" class="reflect" border="0" alt="Click to try jsBox !" width="107" height="81" /> <p><span>WiringEditor demo</span><br/><span class="big">Logic Gates</span></p> </a> </div> + +  + <div class="appBox"> + <a href="examples/wires_and_terminals.html"> + <img src="res/demo1.png" class="reflect" border="0" alt="Learn Wires, Terminals" width="107" height="81" /> + <p><span>learn</span><br/><span class="big">Wires, Terminals</span></p> + </a> + </div> + - <img src='http://www.twitter.com/favicon.ico' alt="twitter" /> Follow <a href="http://twitter.com/wireit">WireIt on Twitter</a><br /><br /> - <img src="http://delicious.com/favicon.ico"> Bookmarks on <a href="http://del.icio.us/url/651a56650c753830645ecf46fb036db6">Del.icio.us</a><br /><br /> - <img src='http://github.com/favicon.ico' alt="twitter" /> Follow <a href="http://github.com/neyric/wireit/tree/master"> on Github</a> +  + <div class="appBox"> + <a href="examples/WiringEditor/"> + <img src="res/wiringEditor.png" class="reflect" border="0" alt="Learn Containers, WiringEditor" width="107" height="81" /> + <p><span>learn</span><br/><span class="big">Containers, WiringEditor</span></p> + </a> + </div> + + <p>More examples :</p> + + <ul> + <li><a href="examples/inputex/">inputEx containers (beta)</a></li> + <li><a href="examples/creating_terminals.html">Creating terminals and wires</a></li> + <li><a href="examples/changing_directions.html">Changing terminal direction</a></li> + <li><a href="examples/presentation.html">Interactive presentation</a></li> + <li><a href="examples/dd_and_animation.html">Using animation</a></li> + <li><a href="examples/wire_events.html">Wire mouse events</a></li> + <li><a href="examples/wire_tooltips.html">Wire context menu</a></li> + <li><a href="examples/spring_layout.html">Spring Layout</a></li> + <li><a href="examples/dotparser/">Dot parser</a></li> + </ul> + + + <p class="title">WireIt-based projects</p> + <ul> + <li><a href="http://tarpipe.com">Tarpipe</a> - share content across social applications</li> + <li><a href="http://github.com/LeifW/pipescape/tree/master">Pipescape</a> - a WireIt interface to <a href="http://www.w3.org/TR/xproc/">XProc</a></li> + <li><a href="http://graphpipes.de/">Graphpipes</a> - easy way to aggregate semantic data</li> + </ul> </td> </tr> + + <tr> + <td class="left"> + <p class="title">Community</p> + + <div style="width: 400px; margin: 0 auto;"> +  + <script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"LobH_yRv3hGeK14sIDfpSg","_btype":"list"}</script> + </div> + </td> + <td class="right"> + <div style="width: 400px; margin-top: 70px;"> +  + <script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"9rzgvyVv3hG33WbbU1y0Jw","_btype":"list"}</script> + </div> + </td> + </tr> </table> -<p style="font-size: 8pt;">Copyright (c) 2007-2009 <a href="http://javascript.neyric.com/">Eric Abouaf</a></p> + +<div style="font-size: 8pt; color: #999999; background-color: #222222; border-top: 2px solid black; padding: 10px; margin-top: 20px;"> + + <ul class="navigation"> + <li><a href="http://javascript.neyric.com/wireit">Home</a></li> + <li><a href="http://github.com/neyric/wireit/">GitHub[Git]</a></li> + <li><a href="http://neyric.lighthouseapp.com/projects/25048-wireit">Issues</a></li> + <li><a href="doc/index.html">Documentation</a></li> + <li><a href="http://javascript.neyric.com/blog/category/wireit/">Blog</a></a></li> + <li><a href="http://groups.google.com/group/wireit/">Forums</a></li> + </ul> + + <p style="font-size: 90%; margin-top: 20px;">Rails is released under the <a href="license.txt" style="color: white;">MIT license</a>.</p> +</div> + </center> <script type="text/javascript"> index.html @@ -562,7 +562,7 @@ WireIt.Terminal.prototype = { // Create the DIV element this.el = WireIt.cn('div', {className: this.options.className} ); if(this.options.name) { this.el.title = this.options.name; } - + // Set the offset position var pos = this.options.offsetPosition; if(pos) { js/Terminal.js backend/php/WiringEditor.smd backend/php/test.html 41536b0f3c56a9ece6c96f51f5fe96bdb8dc5763 neyric eric.abouaf@gmail.com http://github.com/neyric/wireit/commit/930672bf68b723cdd2db44af219163c3e0a8140b 930672bf68b723cdd2db44af219163c3e0a8140b

2009-07-13T03:13:59-07:00

Layouts (experimental) + examples for wire events and layouts 9a0531aa3b5e3bf51b73e9d095ea37752fdfda06 neyric eric.abouaf@gmail.com