Panel Update
I have been suffering with analysis paralysis over the redesign of the list panel on the main page of gTraffic.info. I knew what I wanted to do but was unsure as to how to go about it. One of the main changes was to add the ability to sort the elements of the panel depending on the cell e.g severity, road, description.
My initial thought was to use something like mochikit. I had a play about with this but found it was difficult to just ‘drop’ in. This was partly because of my use of an iframe to hold the panel but also because it was a pretty non-trivial(understatement) to work up something that could do what I wanted based on the example given. I’m not knocking it though I think it is pretty clever and might yet go back to it.
Instead I decided to do what I had been putting off and have a ‘closer look’ at XSL. The original XSL code I used was ‘adapted’ from Dom Ramseys site here. Dom is a very clever guy and was one of the first people (possibly _the_ first) to use XSL for this in a Google maps ‘mashup’. I knew his site from the bbc backstage prototypes list as he posted his up the day after mine much to my chagrin as his was miles better than my inital effort. I can’t tell if he is still doing things this way as his site is presently stuffed. Anyway, I had a loose understanding of what was going on and in a way it was a perfect fit in the sense that all you had to do was paste the XML into the iframe along with the XSL to format it.
And so to now. I have rewritten the panellist.xsl file to ’sort’ the elements based on a road tag in the XML. This wasn’t easy and I spent a good few hours on it even though the resulting file itself is small. Anyone interested in the file can find it here. I am pretty chuffed with this as it uses some more advanced features of XSL in particular the ’sort’ and some fairly whacky parameter passing code to get the element ‘id’ passed down though the XSL templates.
Using this also meant updating the Python code which builds the XML files for traffic, roadworks and VMS to include a ‘road’ tag. I used Pythons regular expression library to extract this from the appropriate feeds.
import re
patternRoad = re.compile('[a-z]+\\d+', re.IGNORECASE)
def matchRoad(description):
match = patternRoad.match(description)
road ='---'
if (match!=None):
road = match.group()
return road
Now when you look at the panel you should see that the elements where the road is mentioned are sorted in alphabetic descending order. I have done it this way to ensure that motorways (M-roads) are always mentioned first.
This is only a first step. The next is to redesign the panel to have a header which will trigger the ordering when the appropriate column is clicked. There is a sample of something to do this here. As a developer you always have a feel when you have cracked a problem and I think I have finally got the measure of this one.
I notice that I have broken the background colour for the panel under I.E. I. Have patience I.E users I will fix this tomorrow when I have more time.
Comments
Leave a Reply