Saturday, August 09, 2008

London Underground WPF Demo

image A while back I did an internal presentation for Infusion on WPF – a short crash course to get people interested and familiar with the basics. For it, I wrote a couple of WPF applications, each of which addressed the same use case with a very different interface. The use case was simple enough:

Allow the user to select two London train stations and show shortest route between those stations.

I had grand plans to turn this into a much larger demo based on Composite WPF (Prism), but unfortunately have never had the time. Instead, I’m just going to post about it here in case anyone is interested in taking a look. First, I’ll briefly describe each of the projects in the solution.

Demo.Domain

This project contains a very simple domain layer as shown below:

image 

Any one station exists at a single coordinate and can have any number of lines running through it. It can connect with any number of other stations via a given line. A trip represents a hop from one station to another via a line. That’s pretty much it.

Demo.Service

This project defines a couple of services that are used by the UI layer.

image

The first service is the data service, which contains all the reference data describing the stations and their connections etcetera.

The second service – the route service – provides an interface by which callers can determine the shortest route between any two stations. The definition of “shortest” is left up to the specific service implementation. For the purposes of the demo, I wrote a single implementation based on Dijkstra’s algorithm which used the geographical distance between stations as the edge path cost. In other words, this service will tell you how to get from station A to station B whilst covering the shortest possible distance.

There’s also a simple service manager in this project, in lieu of anything more sophisticated (which may have been a distraction).

Demo.DataSuck

This project is just a helper tool. You don’t actually need to run it to see the demo. It takes the XML data file used by the data service and automates Google Earth to locate each station and record its coordinates. It saved me a lot of time because all I needed to do was fill in the Input.xml file and it would spit out the Data.xml file used in the service layer, complete with accurate coordinates.

UI

During the presentation, I actually wrote this project whilst explaining what I was doing. It’s a simple UI that allows the user to pick stations from two lists. They can then click on a button and the shortest route is displayed in a third list:

image

It’s far from perfect, but it demonstrated a number of core WPF concepts such as layout, data binding, commands, and data templating.

Demo.UI.Controls

This project contains a bunch of controls that are used by the second take on the UI (discussed below). Specifically, there’s a legend (which, for some inexplicable reason, I called “GraphLegend”), a control for showing directions, and a control showing a map.

Demo.Take2

This stupidly-named project is a second take on the UI that shows a more advanced, WPF-like approach to solving the use case. It uses the geographical information available for each station to position them in 2D space. It draws appropriately-colored lines between stations to represent the train lines. It supports zooming and panning. And the user can simply click on stations to see the shortest route between them, both graphically (see the green highlight) and textually.

It looks something like this:

image

Like I said, I had grand plans for this, including putting satellite imagery in the background and making the lines more true to form, but you know how it is ;)

Below, you can download the code as well as a few PowerPoint slides I put together for the presentation. Enjoy!

3 comments:

Indy said...

Kent,

It is very nice, kind and generous of you to share the code and presentations. Couple of things -

1. Which viewer do I use to open the presentation?

2. EARTHLib is referenced in Demo.DataSuck. I am assuming you are using Google Earth for the feature, have you considered using Virtual Earth?

Cheers,
indyfromoz

Kent Boogaart said...

Thanks for the kind words Indy. You should be able to use MS PowerPoint (2007) or OpenOffice to view the presentation.

Yes, I considered using VE but I had GE already installed. Since it's not really a big part of the demo, I just made a choice based on convenience.

Best,
Kent

Nathan said...

Hi Kent,

Just wanted to say thanks for the sample! I really like your v2 with the great visualizations, panning, zooming, and other wizardry.

- Nathan Allen-Wagner