WireIt Presentation http://javascript.neyric.com/wireit WireIt version 0.5.0 Eric Abouaf – august 2009
What is it ? <ul><ul><li>Javascript framework to create «web wirable interface»
Uses the  YUI Library
Open source,  MIT license
Supports all major browsers </li></ul></ul>
What's in it ?
What's it for ? <ul><ul><li>Any « wirable interface » :
Workflow
Visual Programming
Dataflow
Database querying
Mashups
Graph editors
... </li></ul></ul>
Examples «  tarpipe  makes it easy to share content across different social media applications. »
Examples « The Planar Game: Arrange the vertices such that no edges overlap. »
Examples «  Graphpipes  is a simple and easy way to aggregate semantic data. By using drag'n'drop you are able to create S...
Examples «  PBX Editor : Create voice menus with a few clicks » (not done with WireIt, just an example...)
Examples JsBox: Proof of concept for visual programming
How to edit wires ? 1. Start dragging from a terminal 2. Drop on an other terminal 3. Click on the scissors to cut the wires
How does it work ? <ul><li>Canvas tag to draw wires with bezier curves
Upcoming SlideShare
Loading in …5
×

Wire It 0.5.0 Presentation

93,186 views

Published on

Presentation of the WireIt Library (v 0.5.0)

Published in: Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
93,186
On SlideShare
0
From Embeds
0
Number of Embeds
92,678
Actions
Shares
0
Downloads
79
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Wire It 0.5.0 Presentation

  1. 1. WireIt Presentation http://javascript.neyric.com/wireit WireIt version 0.5.0 Eric Abouaf – august 2009
  2. 2. What is it ? <ul><ul><li>Javascript framework to create «web wirable interface»
  3. 3. Uses the YUI Library
  4. 4. Open source, MIT license
  5. 5. Supports all major browsers </li></ul></ul>
  6. 6. What's in it ?
  7. 7. What's it for ? <ul><ul><li>Any « wirable interface » :
  8. 8. Workflow
  9. 9. Visual Programming
  10. 10. Dataflow
  11. 11. Database querying
  12. 12. Mashups
  13. 13. Graph editors
  14. 14. ... </li></ul></ul>
  15. 15. Examples «  tarpipe makes it easy to share content across different social media applications. »
  16. 16. Examples « The Planar Game: Arrange the vertices such that no edges overlap. »
  17. 17. Examples «  Graphpipes is a simple and easy way to aggregate semantic data. By using drag'n'drop you are able to create SPARQL-queries and reuse them later in your networked graphs. » (proof of concept, early beta)
  18. 18. Examples «  PBX Editor : Create voice menus with a few clicks » (not done with WireIt, just an example...)
  19. 19. Examples JsBox: Proof of concept for visual programming
  20. 20. How to edit wires ? 1. Start dragging from a terminal 2. Drop on an other terminal 3. Click on the scissors to cut the wires
  21. 21. How does it work ? <ul><li>Canvas tag to draw wires with bezier curves
  22. 22. excanvas for IE support
  23. 23. YUI magic
  24. 24. InputEx form library </li></ul>
  25. 25. Terminals & Wires properties
  26. 26. Containers Image Containers Form Containers (using inputEx ) Inputs/outputs Containers + create your own Extend the base Container class
  27. 27. WiringEditor A full-page interface for common WireIt uses.
  28. 28. WiringEditor A full-page interface for common WireIt uses. 1. Define your visual language (modules + WiringEditor options) 3. Process/Interpret/Translate the wiring JSON 2. Edit « wirings » in your language DB storage WiringEditor Adapter
  29. 29. JSON Language Definition { // Language name languageName: &quot;jsBox&quot;, // JSON inputEx definition for the properties form propertiesFields: [ {&quot;type&quot;: &quot;string&quot;, inputParams: {&quot;name&quot;: &quot;name&quot;, label: &quot;Title&quot; } }, {&quot;type&quot;: &quot;text&quot;, inputParams: {&quot;name&quot;: &quot;description&quot;, label: &quot;Description&quot;} } ], // JSON Modules definition modules: [ … ] }
  30. 30. JSON Module Definition { // Module name &quot;name&quot;: &quot;comment&quot;, // Container JSON properties &quot;container&quot;: { // Container class &quot;xtype&quot;: &quot;WireIt.Container&quot;, // Terminals config : &quot;terminals&quot;: [ { &quot;name&quot;: &quot;inputA&quot;, &quot;direction&quot;: [0,1], &quot;offsetPosition&quot;: {&quot;left&quot;: 86, &quot;bottom&quot;: -15}, &quot;ddConfig&quot;: { &quot;type&quot;: &quot;output&quot;, &quot;allowedTypes&quot;: [&quot;input&quot;] } }, ... ], // Other container options &quot;title&quot;: &quot;Comment&quot;, ... } }
  31. 31. Wiring JSON - output example { // List of module instances &quot;modules&quot;: [ { &quot;config&quot;: { &quot;position&quot;: [130,28] }, &quot;name&quot;:&quot;myModule1&quot;, }, { &quot;config&quot;: { &quot;position&quot;: [270,280] }, &quot;name&quot;:&quot;myModule2&quot;, } ], // List of wire instances &quot;wires&quot;: [ { &quot;src&quot;: { &quot;moduleId&quot;:0, &quot;terminal&quot;:&quot;out&quot;}, &quot;tgt&quot;: { &quot;moduleId&quot;:1,&quot;terminal&quot;:&quot;in&quot;} } ], // Properties form value &quot;properties&quot;: { &quot;description&quot;:&quot;A wiring example&quot;, &quot;name&quot;:&quot;ExampleModule&quot; } } myModule1 myModule2
  32. 32. Adapters <ul><li>Ajax Adapter (REST or custom RPC)
  33. 33. Gears (useful for prototyping)
  34. 34. JSON-RPC (+demo PHP/MySQL backend) </li></ul>
  35. 35. Ressources <ul><ul><li>Home page and Download
  36. 36. http://javascript.neyric.com/wireit
  37. 37. The guide
  38. 38. http://javascript.neyric.com/wireit/guide.html
  39. 39. Source repository and bug tracker on GitHub </li></ul></ul>http://github.com/neyric/wireit/ <ul><ul><li>Forums </li></ul></ul>http://groups.google.com/group/wireit/ <ul><ul><li>Blog
  40. 40. http://javascript.neyric.com/blog/category/wireit/ </li></ul></ul>
  41. 41. Thanks ! Eric Abouaf [email_address] http://javascript.neyric.com/blog

×