gTraffic.info v2.1 Online

I have finally integrated the GWT Simile timeline into the gTraffic.info 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.

GWT Simile Timeline Wrapper v1.0

To view demo application using GWT Simile Timeline wrapper go here.

This a GWT wrapper around the Simile Timeline javascript control. This will let you write timelines in java like this.

If you use the GWT code I would be interested in hearing from you. There are a couple of issues to note:

– The timeline control draws itself into a DIV generated by the widget. There seems to be an issue around at which point the DIV is attached to the actual document DOM. The exact details of what is going on here are a little unclear to me but I spent a lot of time trying to get to the bottom of this without much success. If you follow the way that the example app does things you will be okay. Attempting to call any of the timeline api functions before the DIV has been attached to the DOM will result in a failure.

– There are layout issues with the example where it doesn’t quite fit the page under Firefox. This is exactly the sort of thing that I have spent hours in the past sweating over. It will get fixed but it’s not the end of the world. The reason all the resizing code is in there is to handle maintaining the timeline view when the the help tab is selected. Gimme a break this is only version 1.0

The full source code for wrapper and example app is available here.

GMap v1.0 gone. GWT Simile Timeline

So that’s it the version 1.0 Google map is gone. I managed to complete the GWT rewrite of gTraffic just ahead of this. The uk version of the site has been forwarded to the new site (it use to point to the old for comparison purposed).

I have completed the port of Simile Timeline control to GWT. You can get it from here though I haven’t finished the example application yet. Anyone wanting to use this really needs the sample app to see how it’s done. There are hooks into the AJAX xml fetching code to allow the developer to catch the xml as it goes past. You can use this feature to render the dataset items to other visual elements like a list or tree.

The GWT version allows you to create timelines in Java like so:


    	ArrayList bandInfos = widget.getBandInfos();
    	ArrayList bandHotZones = widget.getBandHotZones();
    	ArrayList bandDecorators = widget.getBandDecorators();
    	EventSource eventSource = widget.getEventSource();

    	Theme theme = widget.getTheme();
        theme.setEventLabelWidth(400);
        
        // ---------------------------------------------------------------
        // HotZones, two events too close together so we are going to 
        // 'stretch' the time along them to make the gap between them
        // larger but still maintain the flow of time.
        // ---------------------------------------------------------------
        HotZoneBandOptions hotZone1Opts = HotZoneBandOptions.create();
        hotZone1Opts.setStart("2280 BC");
        hotZone1Opts.setEnd("1930 BC");
        hotZone1Opts.setMagnify(2);
        hotZone1Opts.setUnit(DateTime.CENTURY());
        hotZone1Opts.setMultiple(2);
        bandHotZones.add(hotZone1Opts);
        
        // ---------------------------------------------------------------
        // Band Decorators
        // ---------------------------------------------------------------
        
        // Phase 1
        SpanHighlightDecoratorOptions phase1Opts = 
                 SpanHighlightDecoratorOptions.create();
        phase1Opts.setStartDate("2900 BC");
        phase1Opts.setEndDate("2700 BC");
        phase1Opts.setColor("FFC080");
        phase1Opts.setOpacity(50);
        phase1Opts.setStartLabel("Phase");
        phase1Opts.setEndLabel("");
        phase1Opts.setTheme(theme);
        SpanHighlightDecorator phase1decorator = 
                SpanHighlightDecorator.create(phase1Opts);
        bandDecorators.add(phase1decorator);        

        // Phase 2
        SpanHighlightDecoratorOptions phase2Opts = 
                SpanHighlightDecoratorOptions.create();
        phase2Opts.setStartDate("2900 BC");
        phase2Opts.setEndDate("2400 BC");
        phase2Opts.setColor("#FFC08F");
        phase2Opts.setOpacity(50);
        phase2Opts.setStartLabel("");
        phase2Opts.setEndLabel("");
        phase2Opts.setTheme(theme);
        SpanHighlightDecorator phase2decorator = 
                SpanHighlightDecorator.create(phase2Opts);
        bandDecorators.add(phase2decorator);        

        // Phase 3
        SpanHighlightDecoratorOptions phase3Opts = 
                SpanHighlightDecoratorOptions.create();
        phase3Opts.setStartDate("2600 BC");
        phase3Opts.setEndDate("1600 BC");
        phase3Opts.setColor("#FFC000");
        phase3Opts.setOpacity(50);
        phase3Opts.setStartLabel("");
        phase3Opts.setEndLabel("");
        phase3Opts.setTheme(theme);
        SpanHighlightDecorator phase3decorator = 
                SpanHighlightDecorator.create(phase3Opts);
        bandDecorators.add(phase3decorator);        
        
        PointHighlightDecoratorOptions startPointOpts = 
                 PointHighlightDecoratorOptions.create();
        startPointOpts.setDate("4000 BC");
        startPointOpts.setColor("#FFC080");
        startPointOpts.setOpacity(50);
        startPointOpts.setTheme(theme);
        PointHighlightDecorator startPointDecorator = 
                  PointHighlightDecorator.create(startPointOpts); 
        bandDecorators.add(startPointDecorator);
        

        PointHighlightDecoratorOptions endPointOpts = 
                 PointHighlightDecoratorOptions.create();
        endPointOpts.setDate("1600 BC");
        endPointOpts.setColor("#FFC080");
        endPointOpts.setOpacity(50);
        endPointOpts.setTheme(theme);
        PointHighlightDecorator endPointDecorator = 
                 PointHighlightDecorator.create(endPointOpts); 
        bandDecorators.add(endPointDecorator);
        
        // ---------------------------------------------------------------
        // Bands
        // ---------------------------------------------------------------
        
        BandOptions topOpts = BandOptions.create();
        topOpts.setWidth("5%");
        topOpts.setIntervalUnit(DateTime.CENTURY());
        topOpts.setIntervalPixels(200);
        topOpts.setShowEventText(false);
        topOpts.setTheme(theme);
        topOpts.setDate("3701 BC");

        BandInfo top = BandInfo.create(topOpts);
        top.setDecorators(bandDecorators);
        bandInfos.add(top);

        // Bands
        BandOptions bottomOpts = BandOptions.create();
        bottomOpts.setWidth("95%");
        bottomOpts.setTrackHeight(1.3f);
        bottomOpts.setTrackGap(0.1f);
        bottomOpts.setIntervalUnit(DateTime.CENTURY());
        bottomOpts.setIntervalPixels(50);
        bottomOpts.setShowEventText(true);
        bottomOpts.setTheme(theme);
        bottomOpts.setEventSource(eventSource);
        bottomOpts.setDate("3701 BC");
        bottomOpts.setZones(bandHotZones);
        bottomOpts.setTimeZone(0);

        BandInfo bottom = BandInfo.createHotZone(bottomOpts);
        bottom.setDecorators(bandDecorators);
        bandInfos.add(bottom);

        bottom.setSyncWith(0);
        bottom.setHighlight(true);

And that’s it.

This is the timeline for Stonehenge. I wanted to include a dataset not already used. This has all the features of the existing control.

I hope to finish the example this weekend.

Timeline screenshot.

Here is a screenshot of Simile timeline implemented in GWT.

Timeline

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

The timeline can indicate at a glance if there are a lot of long running events like roadworks in a region or if there are many events groups around the same point in time. Events grouped together can sometimes be related like an accident then causing congestion.

gTraffic v2.0

New version of site has been deployed. The original site has been completely rewritten using GWT. There are a number of outstanding issues to resolve but nothing that effects the usability of the site. I intend to write more about my experience of using GWT in future posts. The old site was about to go kaput because it was using version 1 of the Google map so I have brought this site out now to avoid any hiccups in service.

Much to my disappointment the coolest feature of the site didn’t make this cut. I have implemented the MIT Simile Timeline javascript control using GWT. This was being used to display regional traffic events so that it was possible to examine each events temporal position amongst its neighbours. I just could not get it to draw itself into it’s parent tab properly. I will get this working if it kills me.

The help pages under IE don’t seem to take on the correct styling.

The position of all the UI elements is sometimes a little off when going into the site with blank browser cache.

You can still access the old site though www.gtraffic.co.uk.

Anyway more tomorrow…