GWT: gTraffic Timeline

I occasionally have a look at my GWT traffic mashup to make sure it’s still working. I was looking at it again tonight and was struck by how many good ideas it seems to have. Good ideas that no one else seems to have bothered to pick up on. As an example take a look at the view (as of tonight) for the Berkshire area.


I was clicking around to make sure that the data seemed up to date and kept clicking on long running Roadworks. If you only had that view then it would be a chore to determine what was new and what was long running except that you have the ability to flick over to the time-line. Looking at that I could see right away what the latest events were. The time-line view is not perfect but I am still amazed no one else has copied this idea cos I think this is genuinely useful.

gTraffic timeline

Another one is the zoom-in/zoom-out buttons on the infowindow. My implementation jumps down to the street view and then back up to the last selected zoom level. I know this has been used elsewhere in sites connected to me but I would have thought this would be more widespread as, again, it’s a useful functionality.

gTraffic zoom

Maybe it’s just me but I think there are some good ideas here which are not represented in current traffic web sites.

Blog: Opera

I am looking at this blog in Opera 9.25 and I have to say it looks miles better that Firefox or IE8. The screenshots are way sharper and it’s actually rendering the bullet points which Firefox seems to have stopped doing. My spelling is no beter though.

I like Opera but it doesn’t render Google Maps very well (slow). Also I have had some flaky experiences with Flash 9 although it was pretty zippy when I tried out the Modest Maps demo.

I have updates to make to the iFrame courtesy of ‘Max’ who has added the ability to render to a div (thanks Max). Also I recieved an email saying the Modest Maps demo wasn’t deleting markers which I discovered is a bug in the MM code. I fixed this but if you have access to Flex Builder you will discover it anyway You have to change:

public function putMarker(id:String, location:Location, marker:DisplayObject=null):void
if (marker)
{ = id; // ***THIS IS MISSING LINE***
//if ( != id) throw new Error("marker name must match id");
markerClip.attachMarker(marker, location); // calls grid.putMarker as well
else {
grid.putMarker(id, __mapProvider.locationCoordinate(location),

According to Sinisa the deletion is ‘dog’ slow which is not good news if you need to plot and replot lots of markers.

Merry Christmas to everyone who reads this blog. I know there are a few who drop in from time to time as I look at the stats.

gTraffic is due an update maybe I’ll find the get up and go to get back into GWT and fix it’s shortcomings.

flexTraffic was a bit of an experiment. I would retire the GWT version of the site if the web stats weren’t so high. What I need to do is to recompile with a link to the Flash version. I spent a lot of time on the Python scripts..lots of time..being totally bloody minded and attempting to wrestle the TPEG xml down to something usable. More time than I spent writing the sites (html initially).

Python was my first exposure to a dynamic scripting language. I had used javascript before but I was using it in a way like a glue around what I was doing with html. If you are a java only or C++ programmer time to steer away from the shore and find yourself a project to try this stuff out. I may expand on this mibbe on later posts.

gwt-yui-ext is to be retired (as in deleted from Google Code) on 1st Jan 2008. It was fun and a good learning experience but it quickly turned into land of the ‘edge-case’ nightmares. My advice…don’t try and wrap a large javascript library with GWT it can’t be done successfully without a massive effort to chase a moving target. Better to try a small component like the Simile timeline. Good luck to the next guy. You will need it.

Simile Timeline : Update

Well it’s been a while but I have finally got around to making an update to the gwt simile timeline. I had a request back in Dec last year (06) to add in the ability to load XML directly from a text string instead of having to use the AJAX loading mechanism. I thought it would be easy but when I went to look at it it turned out to be a bit involved.

Basically the event source object, which is the object which holds the data for a timeline, expects an XML document object to be supplied to load the data from. The AJAX call back mechanism automatically generates such an object in the request.responseStream of HTTPRequest object. Generating one of these from xml text isn’t straightforward as each browser has a different way to do it and you don’t have access to whatever magic the HTTPRequest is doing under the covers to create one.

I have had to add in a couple utility functions (see TimelineHelper.js in the code). This has been tested with Firefox, IE7 and Opera. I have no idea if it will work with Safari, I suspect not.

So, there are new calls to the EventSource object

public void loadXMLText(String xmlText)
    EventSourceImpl.loadXMLText(xmlText, GWT.getModuleBaseURL(), this);


public void loadJSON(String json) 
    EventSourceImpl.loadJSON(json, GWT.getModuleBaseURL(),this);

The loadJSON was a user contrubution from the Google Code site (thanks jdwyah whoever you are).

I started off writing a fancy JSON callback implementation then I realised that there are enough AJAX callback frameworks out there to handle however you want to get your data into the application so I haven’t put anything like that in. It just clutters up the interface anyway.

Look at the function processTextData in the class to see an example of calling loadXMLText. It really couldn’t be easier.

I have bundled the latest MIT Simile timeline javascript code in with the source code zip. Keeping this locally makes the timeline boot up faster. Just be aware of this in case you have your own altered version.

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.


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.


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.


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.


– 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-yui-ext is my (partial) wrapper around (some) of the yui-ext components. The yui-ext library is built upon the YUI library by Yahoo which is a javascript library of routines for page layout and animation (among other things). Jack Slocum has taken this and developed an amazing set of controls including a layout with sliding panels and a blinding grid control which could take on any commercial library. So… I like his controls and I thought was it possible to wrap them in a way that GWT could use them? Well the answer is yes but now I am not so sure it was really worth the bother. On reflection I don’t think this is _entirely_ what Google had in mind for their JSNI mechanism. I suspect they were hoping that people would write cool controls like this in GWT. Well it aint happened yet so I suppose some of the gwt-yui-ext will suffice in the meantime.

I started off on this with the BorderLayout control and fairly quickly got something to work. A lot of debugging later I realised that basing the control upon a ‘ComplexPanel’ would do a lot of the things that I was having to reproduce in my code. One rewite later and it seem to be sortof complete with a few funnies hanging around:

– The right panel doesn’t seem to force a resize of the central panel unlike the left??
– Grabbing the split-panel resize bar is a bit hit and miss??

I was going to publish this then I had the thought ‘who actually wants this layout’. I can’t see it anywhere other than Jacks blog, where it integrates well, but I was still having a kind of ‘what’s the point’ feeling.

Enter the ‘grid’ control. Everyone loves a data grid. The yui-ext grid is a cracker with lots of functionality and looks the business.

So, I have made a start on this. The sorting function for the columns is the last piece of the jigsaw but I have held back to have a think about how to do this in a way that can hook into GWT and let people write their own.

Here is the demo. Either it’s good idea or a bad one. Developers please mail me at

Also, if you are interested in getting involved in implementing a particular feature then mail me.

GWT:Simile Timeline HOWTO

If you look up to the right under the ‘pages’ section you will find a link to a HOWTO page for the GWT Timeline which details all the information you should need to get up and running with the GWT Simile Timeline widget. Any feedback on this is welcome. I think I have covered (almost) all of the questions I have been asked about the widget so have a look.

For an instant idea of the GWT Simile Timeline click in the this link here Timeline Test

There is an existing issue about loading the timeline from a XML string but I have yet to find out how to do this. I _thought_ it was simple but it turns out it is not that easy! If anyone resolves this then mail me and you will be credited in the code. I want to know…


I have been working on a GWT Wrapper API for Jack Slocum’s javascript GUI component library yui-ext. In Jack own words this is a ‘library of reusable JavaScript widgets and classes that extend the Yahoo! UI Library’.

Sidu Ponnappa has an example of yui integration here but his drag and drop example doesn’t look like the sort of thing I would use (yet) and also layout managers are the major thing that drove me to start using GWT in the first place.

So, I have been casting an envious eye over Jacks particular layout manager for quite a while now and after the Simile Timeline GWT Wrapper I have started to get an eye for what can be wrapped easily and what can’t.

There is a lot to yui-ext but it’s usage can be boiled down to the examples on the documentation page which means that is my main target. So far it’s just the BorderLayout stuff and the theme setting but it’s getting there.

Here are some screenshots. I see my home town of Milngavie appears to be hemmed in by golf clubs.

Map tab


Map tab

You can zoom in using IE ctrl+/- or in Firefox right click and choose ‘View Image’.

I am hesitant to create a Google Code project as I am unsure (a) what Jack will make of this and (b) I don’t want to starting having to field questions about yui-ext when I am far from an expert (hey at least I’m honest).

I could have just published the layout manager as it was on the first cut but I went on to insert some real controls into the central panel (Google Map and GWT Simile Timeline). Quite a lot of redesign later (ComplexPanel based now) and I am struggling with the thorny issue of getting the controls to resize correctly into the central panel.

I don’t know when this will be ready for the big-time but I thought I’d point out that I am working on it anyway.

Roadworks and VMS

My web stats indicate not many people actually look at the VMS signs data layer which is probably just as well as there is an issue with the XML feed. The roadworks is not up to date either but this is less of an issue as they are mostly long running types of events which are unlikely to have changed much from 1 Dec when feeds went down.

I am working on this. v2.1 Online

I have finally integrated the GWT Simile timeline into the site. Clicking on a traffic region will cause the timeline tab to appear. The items on the tab are hooked into the map markers so that clicking on the severity icon from the timeline bubble will flip to the map tab and highlight the appropriate marker.

Basically you are now able to browse the traffic incidents both geographically and temporally which I think is a first for a road traffic site and may well be a first on the web as a whole.

I have changed the layout of the help tabs as well. Looks a bit better now.

GWT Timeline 1.1

I have fixed the issue with the timeline not drawing into the contained DIV. It turns out you have to set the view width of the DIV _before_ you attempt to create it. The example app source has been updated but the live version has not been updated as yet. There is an existing issue with viewing the control in Firefox/Mozilla browsers which is still outstanding.

Basically the client window size, as reported by the browser, is different whether depending on which tab you are on when you resize the browser window. From what I can see this is a known problem but it is only an issue if, like me, you are trying to get the component views to fit the available window.

I have not ported the new timeline over to the gTraffic site yet as I want to resolve this stuff first.

If you download the source for the timeline now you will get the ‘fixed’ version. Sorry to say this is still in a state of flux and you can expect more changes for now until I resolve this.

Next Page →