I’m pleased to announce the latest version of WireIt, namely 0.5.0.

This release had 2 major goals:

• Enhance the WiringEditor
• Documentation documentation documentation

The WiringEditor received a lot of attention: by providing a full-page
editor, people have been able to start prototypes very quickly for
their projects. However, we needed to improve the way we connect this
editor to the backend, and that’s what we’ve done, through “adapters”.

I’m even very proud of this idea because… it’s not mine ! Big thanks to this insightful comment from Jonathan Lister and hurray for open-source communities!

Concerning the documentation, although we already had a full API
documentation and many examples, it was still missing some guidelines.
I therefore wrote the WireIt guide: http://javascript.neyric.com/wireit/guide.html

Of course, we also have some minor improvements :

• the new InOutContainer
• Wire mouse events
• some experimental layout options

You can view the complete changeset at:

http://javascript.neyric.com/wireit/VERSION.txt

And of course download the library from the home page: http://javascript.neyric.com/wireit/

Have fun !
Eric

What’s new in version 0.4.0 ?

• inputEx integration: inputEx is another of my YUI libraries, to create fields and forms. Through a new class called “FormContainer”, you can now build WireIt containers using the advanced forms options from inputEx. The value is saved at the layer level for you through Layer.getWiring

• WiringEditor: This is my favorite feature. While still largely incomplete, the Wiring Editor provide a full-blown interface to create visual languages. It takes care of most of the interface you might want to build a visual editor on top of WireIt. The language definitions are written in JSON, I hope this will greatly reduce the learning curve of WireIt.  The transparent ajax communication with the database is handled through a SMD webservice using YUI-RPC. WireIt provides a simple php backend that stores the JSON wiring states in MySql (used for the demos on wireit’s website).

• new options:
  • terminals position in containers: {top: , left: , right: , bottom: } instead of [x,y]
  • Terminal.alwaysSrc : force this terminal to be the source element in every connected wires
  • Container.preventSelfWiring : prevent connections between two terminals of this container

• Four Wire methods for handling mouse events. You can override them for a custom use :
  • onWireClick
  • onWireIn
  • onWireOut
  • onWireMove

• API Documentation with YUI Doc (much more precise on properties and events)

• Layer Map is now clickable and draggable. It will move the linked layer accordingly.

• IE Bug fix ! (finally)

• Moved to github for git repository and better wiki

It’s now pretty easy to build visual languages applications. (or at least, prototype them…).

You can follow some projects on http://github.com/neyric/wireit/network. I’m especially looking forward to LeifW XProc Visual Editor

Here is a little presentation that I published on WireIt’s homepage :

We received queries on the inputEx forum to switch our repository to Git.

The YUI library recently moved to GitHub, so I decided to move both of the YUI-based libraries, inputEx and WireIt, to the same plateform.

Here are the two new repositories: inputEx and Wireit.

The GitHub interface is friendly, it displays nice stats, has a cool API, and Git ! (But I’m missing a ticket system)

The good news is that it is really easy to import a SVN repository, and keeps the commit history.

See you on GitHub !

Ah… and Happy New Year !

On June 19th, WireIt was removed from distribution for copyright infringements. After discussions with the Yahoo! User Interface and Yahoo! Pipes teams, a project started to provide the wiring widgets as a YUI module. (Note: I don’t work for Yahoo! so it is NOT an official annoucment…)

I’m very happy with this decision and I can’t wait having this integrated into YUI. However, the quality concerns of YUI requires very detailed attention to cross-browser support and YUI integration. It will take some time before it appears on the YUI roadmap.

Meanwhile, I’ve been contacted by many WireIt users, who where anxious about using code with copyright infringements, and about seing no more bugfixes/new features. Therefore, I decided to release this new version that does not contain any coprighted code/assets anymore !

If you use WireIt <= 0.2.1, you MUST upgrade to 0.3.0.

WireIt get sponsored !

Among WireIt users, Tarpipe decided to sponsor the WireIt library. I am grateful to them, for helping revive the project.

What’s new in version 0.3.0 ?

• Removed copyrighted images and code
• New drawing methods (straight lines and arrows, thanks to Marcin Iwa?ski)
• CanvasElement class (WireIt.Wire now inherits this class)
• Scissors class (for the scissors widget)
• LayerMap-beta (minimap to visualize/naviguate the layer)
• API Documentation much nicer and usable
• WireIt.Layer: “clear” and “setWiring” methods
• Bug fixes (including the much awaited positionning issue)

I also started an interactive presentation, to demonstrate WireIt features.

Have fun !

However, it is good news for WireIt and YUI developpers: the component might be adapted into a YUI widget in a close future.

Subscribe to the rss feed to keep in touch with the project.

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 !

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