Project Updates #1

After getting gwt-jsviz out the door I feel it’s time to take stock of my current list of on-going projects.

    gwt-jsviz

The gwt-jsvix API wrapper was something that I had been putting some time into on and off for quite a while so I am glad to have the first revision up and running. Already I have found stuff that I want to put into it. It’s just a case of getting round to it. The first version is purely a wrapper for the existing code, nothing else. I have a tabbed version of the demos but there is issues with this that I can see are going to take a wee while to resolve so anyone who wants to use this with GWT will have to stick with the vanilla version for now. It might seem a strange thing to bring to GWT but as soon as I saw Kyles demo of the music mashup I could see the potential for applying this to a combination of the Yahoo REST search API and the Timeline.There, I have given the game away and now someone will beat me to it. I am not surpised that Kyle Scholtz has been snapped up by Google as he is clearly a clever guy.

    gwtsimiletimeline

I am quite proud of this as it was my first open source project and it’s probably the most complete. The core javascript ‘widget’ is beautifully written by the guys at MIT and it’s no surprise that it was relatively easy to wrap up and slots into GWT with very little effort. I have received a request to enable the timeline to read it’s XML from a text string and this is what I hope to put some time into. My gut feeling is that it’s ‘doable’ and will extend the core component in pure GWT fashion.

    gwt-yui-ext

This is the most interesting (and time consuming) of all the GWT wrapper API’s I have attempted. I had a look at the source javascript, at the time I was writing the timeline stuff, and concluded that it was ‘doable’. In reality this has the the most real GWT code of them all as the way that it works involves manipulating the RootPanel DOM to hook into GWT.

I started off with the most complex of the demos the BorderLayout. This proved a good idea as a lot of what I gleaned from doing this went into the BasicDialogPanel and LayoutDialogPanel.

I have focussed on the original demos as this is the acid test for wrapping them to the GWT platform. There is still work to do on the current list of demos which is why I haven’t put them into a new release. Anyone wanting the code for these should just go to the source trunk and get the latest source image.

I am a bit undecided on the targets for this library. There are a a few bugs in the current demos which need addressing so I think I will try to get those fixed for now.

    WORK IN PROGRESS

– gwtsimiletimeline: Timeline to read text XML

– gwt-jsviz: JSViz to have tabbed example.

– gwt-yui-ext:
. DialogPanel and LayoutDialog have bug where the background can become the focussed view stopping any further interaction with the main dialog.
.There are issues with the resizable component namely, the transparent handles doesn’t work under IE and the animation for the control doesn’t work at all. I might drop some of this stuff from the next release.
.The grid need a better example of inserting data.
.The dialog examples need to show non-modal dialogs.

Not too onerous a list.

    Other Stuff

I had started to look at integrating Flex with GWT using the FABridge. I have big ideas for this but little time so we’ll see how it goes.

Also, I knocked together an example of integrating MapBuilder with GWT which I will get around to adding to the links on the top right in due time.

    In conclusion

I think that probably the best way to proceed will be to try and incorporate as much of this technology into the gtraffic site. It’s a great test bed and I can see ways that all this stuff could fit into it (yes even gwt-jsviz, just you wait and be amazed/baffled).

gwt-jsviz

I am pleased to announce that version 0.0.1 of th gwt-jsviz GWT Wrapper API has gone online.

JSViz is a javascript library which lets you create visualisations of data as a 2D graph of nodes.

The gwt-jsviz library is a GWT Wrapper API around the JSViz javascript.

You can find it here.

    Background

I had started a version of the GWT wrapper classes for a previous version of Kyles JSViz library but I was also working on a wrapper for the Simile Timeline control here.

I had a feeling I could integrate the timeline into the GWT Road traffic site I had developed so I was focusing on that.

Every time I came back to look at the JSViz wrapper code I was having to get my head around how it hung together again and it was slow going.

What kick-started development was when 0.3.3 of the JSViz library came out. I had a look over the code and realised that Kyle had redesigned it to separate the graph rendering into a few rtns. It was obvious to me that I could ditch most of the existing wrapper code I had generated and focus on hooking in the GWT layer into these callbacks. If you examine the source code you will see that each graph type only has to implement the IGraphRender interface i.e.

public interface IGraphRender
{
        public Layout create(JSVizWidget widget);

        public void render(JSVizWidget widget);

        // ------------------------------

        public NodeConfig model(DataGraphNode dataNode);

        public Element view(DataGraphNode dataNode, 
                   SnowflakeNode modelNode);

        public EdgeProperties viewEdgeBuilder(DataGraphNode dataNodeSrc,
                   DataGraphNode dataNodeDest);

}

The tricky bit was hooking into the javascript to install the callbacks. Have a look at ‘ForceDirectedLayoutImpl’ and ‘SnowflakeLayoutImpl’ classes to see how this works.

Not only was the design simpler but I though it would be cool if you could use GWT widgets instead of just pure ‘img’ elements. If you can make the nodes widgets then you can get all sort of goodies associated with GWT like tooltips, popup dialogs etc. The issue here was that I would have to write my own drag and drop handler for the widgets to track them on the view and update the JSViz data structures. This final code looks straightforward but it was probably the one piece of code I poured most of my time into getting to work and I think it’s still a little flaky.

    Demos

The ‘Random Circuit’ and ‘Snowflake’ demos are re-implementations of the ones from Kyles blog but done in GWT. The ‘Random Circuit – GWT Image Widget uses GWT Image objects for the graphics. It has an tooltip listener hooked into it which will display the image url when you pass the mouse over an image. The tooltip could be anything really I just used the url for the demo.

The important point about these demos is not that they are just fun to try out but in imagining what you can do with this sort of visualisation. The point of this project (in case you hadn’t got the point yet in all my rambling) is that you can put together a force directed or snowflake type graph in JAVA by implementing the rtns in
‘IGraphRender’ and deploy it as a web application. You can do it using a great tool like Eclipse where you can run and debug your application just like you would a normal app.

The demos are also linked to on the project page:

The original JSViz site is here.