WireIt is a JavaScript framework for creating "web wirable interfaces". It uses the YUI library and supports major browsers. WireIt allows users to visually connect modules by dragging and dropping wires between terminals. The framework provides tools for building visual programming, workflows, dataflows, and other "wirable interfaces". Users can define their own visual languages by specifying modules and properties. WireIt outputs wiring configurations as JSON that can then be processed and stored in databases.

1. WireIt Presentation http://javascript.neyric.com/wireit WireIt version 0.5.0 Eric Abouaf – august 2009

3. Uses the YUI Library

4. Open source, MIT license

5. Supports all major browsers

6. What's in it ?

8. Workflow

9. Visual Programming

10. Dataflow

11. Database querying

12. Mashups

13. Graph editors

14. ...

15. Examples « tarpipe makes it easy to share content across different social media applications. »

16. Examples « The Planar Game: Arrange the vertices such that no edges overlap. »

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. Examples « PBX Editor : Create voice menus with a few clicks » (not done with WireIt, just an example...)

19. Examples JsBox: Proof of concept for visual programming

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

22. excanvas for IE support

23. YUI magic

24. InputEx form library

25. Terminals & Wires properties

26. Containers Image Containers Form Containers (using inputEx ) Inputs/outputs Containers + create your own Extend the base Container class

27. WiringEditor A full-page interface for common WireIt uses.

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. JSON Language Definition { // Language name languageName: "jsBox", // JSON inputEx definition for the properties form propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title" } }, {"type": "text", inputParams: {"name": "description", label: "Description"} } ], // JSON Modules definition modules: [ … ] }

30. JSON Module Definition { // Module name "name": "comment", // Container JSON properties "container": { // Container class "xtype": "WireIt.Container", // Terminals config : "terminals": [ { "name": "inputA", "direction": [0,1], "offsetPosition": {"left": 86, "bottom": -15}, "ddConfig": { "type": "output", "allowedTypes": ["input"] } }, ... ], // Other container options "title": "Comment", ... } }

31. Wiring JSON - output example { // List of module instances "modules": [ { "config": { "position": [130,28] }, "name":"myModule1", }, { "config": { "position": [270,280] }, "name":"myModule2", } ], // List of wire instances "wires": [ { "src": { "moduleId":0, "terminal":"out"}, "tgt": { "moduleId":1,"terminal":"in"} } ], // Properties form value "properties": { "description":"A wiring example", "name":"ExampleModule" } } myModule1 myModule2

33. Gears (useful for prototyping)

34. JSON-RPC (+demo PHP/MySQL backend)

36. http://javascript.neyric.com/wireit

37. The guide

38. http://javascript.neyric.com/wireit/guide.html

40. http://javascript.neyric.com/blog/category/wireit/

41. Thanks ! Eric Abouaf [email_address] http://javascript.neyric.com/blog