quaderno

My task as a programmer seems mostly to be throwing forms at knowledge workers. I fool myself in thinking that a workflow engine is the panacea when deciding when and what form to present the user.

Workflows are supposed to be adaptable, the forms at the emerged tips even more so. “Can you add a text field here ?”.

In workflow technology, there seems to be this grail where the business user is knowledgeable enough to modify a process definition, and knowledgeable enough to modify a form. Defining a process has a strong taste of programming, and form building hints at hierarchical data structures. It’s a struggle to get right either of them.

…

I came up with a javascript library named quaderno that takes as input a form template written in a DSL (minilanguage is perhaps a better appellation) and a data dictionary, renders the form, and then, when the user is done, produces the updated data dictionary.

This template :

tabs
  tab "general"
    text_input name
    text_input age
    select gender [male, female]
  tab "appointments"
    box appointments.*^
      date .date
      text_input .goal
      text_area .comment

Will produce a form that looks like :

The second tab is gathering data in an “appointments” array. The suffix .*^ indicates that elements of the array, can be added and removed (+ and – merged into a *) and reordered at will (^).

This is a sample output, once the user has entered his values and the produce() function of quaderno somehow got called :

{ "name": "Toto",
  "age": "33",
  "gender": "male",
  "appointments": [
    { "date":"2010/9/18", 
      "goal":"general checkup", 
      "comment": "(and tell him to quit smoking)" } ] }

This example is visible at http://ruote.rubyforge.org/quaderno/viewer.html?sample=3, there is also another sample at http://ruote.rubyforge.org/quaderno/viewer.html.

I use quaderno for highly adaptable forms, whether they are part of a workflow or not. Perhaps I should not say “adaptable”, but “I trust other people enough to let them modify the forms”.

(at first, I had wanted to have three modes, form use, form view and form edit, but the last mode was a bit hard to maintain and the result was awful to use and to look at. I had come up with something better in terms of edition with the initial version, but I couldn’t get to show the link between data and fields. This 3rd version of quaderno is a back to the basics version, with this tiny DSL that moves away from WYSIWYG and exposes the data/form structure)

Quaderno is a MIT licensed javascript library. It’s not a solution, it’s a tool.

http://ruote.rubyforge.org/quaderno/viewer.html
http://github.com/jmettraux/quaderno

 

hanabi

Hanabi is a small presentation tool.

You load hanabi.js, you create an empty canvas with a given id, you point it to the image and give it a list of points :

  var source = 'path/to/my_image.png';
  var points = [
    { x: 504, y: 340, zoom: 0.5, r: Math.PI * 2 },
    { x: 504, y: 340, zoom: 3.5, r: Math.PI * 2, stop: false },
    { x: 641, y: 260, zoom: 2.0, r: Math.PI * 2 },
    { x: 832, y: 191, zoom: 2.0, r: Math.PI * 2 },
    { x: 977, y: 173, zoom: 2.0, r: Math.PI * 2 },
    { x: 1035, y: 297, zoom: 2.0, r: Math.PI * 2 },
    { x: 1037, y: 383, zoom: 4.0, r: Math.PI * 1.75 },
    { x: 497, y: 335, zoom: 2.0, r: Math.PI * 2 },
    { x: 696, y: 513, zoom: 2.0, r: Math.PI * 2.1 },
    { x: 914, y: 501, zoom: 2.0, r: Math.PI * 2 },
    { x: 363, y: 391, zoom: 2.0, r: Math.PI * 1.9 },
    { x: 86, y: 451, zoom: 2.0, r: Math.PI * 2 },
    { x: 506, y: 336, zoom: 2.0, r: Math.PI * 2 },
    { x: 321, y: 31, zoom: 2.0, r: Math.PI * 0.2 },
  ];
  Hanabi.init('can', source, points);

Then you click your way through the image.

http://github.com/jmettraux/hanabi

 

For the real thing : http://prezi.com

 

pilatus for yahoo pipes

I just updated the activity page for Ruote (warning it needs some CSS love). It’s populated with the result of a Yahoo Pipe that gathers the feeds of Ruote’s activity, be it on github, the users mailing list or this blog.

It all happens on the client side. I’ve written a small javascript library called Pilatus to which you give the URL of a pipe and the id of the HTML div element to fill and that’s all.

  <script src='/pilatus.js'><script>

  <div id='feed'></div>

  <script>
    Pilatus.loadAndRender(
      "feed",
      "http://pipes.yahoo.com/pipes/pipe.run?_id=XGwyd_LA3RGNSAMs6icw5g");
  </script>

Nothing special. License is MIT, washing my hands.

the js : http://github.com/jmettraux/pilatus/tree/master/public/pilatus.js
the project : http://github.com/jmettraux/pilatus

fluo as process editor

I took the time to enhance the fluo javascript library used in ruote-web, a demo Ruby on Rails application wrapping OpenWFEru ruote.

The previous version of fluo (as currently used in the online demo of ruote-web) was abusing the browser layout abilities (css float). This new version relies on a unique canvas. It looks nicer (at least for me) and it is not vulnerable to browser layout quirks (people integrating fluo were complaining about it and also about css collisions).

Fluo itself was only meant for rendering graphically ruote process definitions in a browser. My development bench for it slowly turned into some kind of “browser based process editor”. It’s minimalistic for now, but you can already have a look at it.

There is a unique ‘screen’ with a left pane showing the process definition itself and a right pane showing it renderer graphically via fluo. You can edit the process definition, in the browser.

Next things I’ll add : “paste”, better “save as” capability, loading of remote process definitions (URIs), link to documentation, expressions and attributes ‘suggestions’, …

Ruote-fluo source is at http://github.com/jmettraux/ruote-fluo
Ruote-fluo online demo is at http://difference.openwfe.org:4567/?pdef=pdef_ttt.xml

Note : this new fluo is Firefox 3 only, as it uses the text drawing capabilities of this fine browser (the previous fluo was using a float div on top of the canvases to add text).