I made a few updates this week-end. They mostly concern the Container
and Layer classes.

Here are the changes:

• new Layer.getWiring function to save the state of the wiring. It
  can be customized by overriding Container.getConfig
• jsBox updated to use the Layer.getWiring function
• no default width for containers so they can auto-adjust to the
  content
• Layer.addContainer and Layer.addWire now returns the created
  instance
• Added the method Container.redrawAllWires and
  Terminal.redrawAllWires
• Added Layer.removeAllContainers
• adds a “body” div to the container
• CSS updates on Containers and Layers
• adds a focus CSS class on the last mousedown-ed container in the
  layer
• bugfixes (events “addWire” and “removeWire” added to WireIt.Layer,
  offset in the connections)

I just released the new 0.2.0 version. You can download it here.

Here are the main changes:

• 2 new classes were added: WireIt.Container and WireIt.Layer
  Every project you might start using WireIt needs a widget that could contain Terminals, and that could be moved around. This is the goal of WireIt.Container.
  The Layer class creates a DIV element that can contain multiple containers and wires. It will be useful to save the state of the containers and connections between the terminals. (It also provide an extensible frame with scrollbars.)
• Custom events added to create richer interactions when editing the wires.
• A minified version built with YUI Compressor.
  This javascript minifier is almost perfect: I just wish you could have multiple input files…
  The result file is just below 20k.
• jsBox: This is a sample application using WireIt.
  Create boxes containing javascript functions, connect them together, and run your program !
• Many new configuration options, configurable CSS class names, and some new methods in the Wire and Terminals classes.

Don’t forget to give your feedback in the forum !

Have fun !

I’m pleased to announce the first release of WireIt (version 0.1) !

WireIt is a javascript library that allows you to create cool wires like Yahoo Pipes. It is built upon:

• the CANVAS tag to render the wires
• the YUI Library v2.3.1
• excanvas for IE support

It comes with some examples (see the home page) and an application example, the Planar Game.

Why would you make such a library ? After playing a lot with Yahoo! Pipes, I realized how powerful it was to create mashups. I was already used to visual programming Languages like PureData or Mac OS Automator, but they’re definitly not able to do mashups.

However, Yahoo Pipes has this big inconvenient to run your pipes on their web servers. It has at least two disadvantages. First, it means we will always be restricted to the modules and types they implemented. You could always create a restful webservice and wrap it into a pipe, but the execution time blows up. Second disadvantage, you have to be careful with your data privacy. Indeed, I would like to create some Mashups that could mix with my private data in a more secure way.

That’s how I started to develop a Yahoo pipes-like application, and how I ran into this stumble block: “How the hell did they do those pipes ?”.

Waiting for your feedback,
Eric