Posts Tagged 'Add new tag'

A new kind of widget, a leaf…

One of the major areas of development in the iido application will be the custom interface. Though typically in designing a user interface I would try to avoid the creation of non-standard (and therefore non-familiar) interface components, because of the interactive requirements of the iido application some custom components are inevitable.

The first of these components being examined is the leaf widget, which is actual a sort of cross between a standard window and a general purpose flow diagram box. The reasons for calling this new hybrid widget a leaf is that,

  • it represents a leaf of paper (all be it a feature rich leaf of paper),
  • it floats on the interface surface (can be thrown and spun),
  • it can be linked to other leaves via one or more branch (ok, I’m pushing the anologies here, but you get the idea).

Those of you who’ve had the (I’ll say…) experience of working with me will be use to me trying to over add meaning to names, but it’s only a working title for the time being so indulge me.

At the current time what Andy and I are looking at prototyping is user interaction with widgets, and in the short-term we’re concentrating on transformation, the following image provides an overview of the how a user might be able to move, rotate and resize a leaf widget.

Transformation of leaf widgets

The leaf widget will provide move, rotate and resize functionality all via a single mouse button, regions around the border of the leaf will provide the user with access to the various transformations. Regions will only appear once the user mouses over the leaf widget, and will (as can be seen in the image) be highlighted (including a guide) once they are activated by a mouse click.

I’m going to be putting together a basic prototype of the leaf widget in Python and Qt over the next few weeks, the source will be made available to those who are interested in running it, I’ll also provide a video for those less adventurous.

Again, all feedback and ideas greatly appreciated. It’s been really good to hear what people see as requirements for such an application, and I’d really like to know what people think of the non-standard transfomation idea.

A simple JS gallery

Yet another small JS library that I’ve produced as part of a current project. This time it’s a simple Javascript picture gallery that supports a sliding thumbnail flow. This replaces an earlier design that used dragging instead of sliding – as a friend kindly pointed out to me, this was annoying since it meant to activate an image you had to double click.

I wont have any excuses to produce more JS libraries now for a little bit (oh dam!), and though I’m really not a fan of Javascript I would recommend the JQuery library (and it’s plugins), which has made the last few days of development bearable.

 

To customize your gallery modify the picture-gallery.html and picture-gallery.css files, for documentation see the picture-gallery.js and picture-gallery-setup.html files.

Download gallery.zip

The download contains a picture-gallery-setup.html file, open/view this for the demo. Tested in IE 6/7, Firefox, Opera and Safari.