Dutton's blog

DoshTracker Update #3 - First beta site live! Design change discussion.

It's severely limited in functionality, but I've replaced the temporary holding page with our first beta. At the moment it's little more than a layout prototype, but forms the foundation for everything else.

While I was messing about with the google maps integration, I discovered that the original 'window' based design (as used on the holding page, see below) was too confusing when displaying multiple windows and relied on the browser being maximised on a reasonable sized screen to be usable.

Original Window-based DoshTracker design

Because of this I've moved to a new design which you can now find in its place. The page is split into three panels;

Top Panel: Horizontally along the top. Contains the site logo, and a potential space for site messages and future advertising, this content is fixed to the user regardless of the state of the other dynamic panes.

User Navigation Panel: Vertically on the left hand side. Contains a dynamically generated tree based on the currently logged in user's data, so will contain entered notes, note hits and profile information. Clicking on the tree nodes will create new tabs in the 'Main Window'.

Main Window: The remainder of the page contains a tabbed view. Some tabs are fixed and contain general information (Welcome text, instructions, etc..) and some will be dynamically generated by user actions and can be closed. Some typical tabs envisaged are:

  • Welcome screen (fixed) - Welcoming the user to the site, site news.
  • Instructions (fixed) - How to use the site.
  • Statistics (fixed) - General stats on the site, total number of notes, total value, top ten users, notes, tracks, etc.
  • Register / Login (fixed) - To allow a user to register a new profile or login to an existing one.
  • Contact Form (fixed) - To allow a user to send comments and feedback to the site admin.
  • Note Entry (dynamic) - To allow a user to enter a new note into the system, will then display confirmation and previous hits for that note if found.
  • Note View (dynamic) - Displays details (location map, distance traveled, condition comments, etc.) for a selected note.
  • Profile Editor (dynamic) - To allow a user to view and amend their stored user profile information.

The tab panel supports scrolling as it is likely that the number of tabs may exceed the width of the screen.

The colour scheme is also under review, the blue 'DoshTracker' colour is ok, but the grey components are in the default extjs theme and so I plan to write up a new stylesheet to make it look more co-ordinated before the site goes fully live.

There are lots of additions to the site which are being developed in parallel so please return regularly, check out the development log on the site and this blog for more updates.

DoshTracker Update #2 - Ext JS and Google Maps API Integration

Shea Frederick on the extjs blog has produced a component which extends Panel and integrates with the Google Maps API here allowing you to display google maps anywhere you can use a Panel, that includes windows, viewports and layouts. This is great for the DoshTracker development as I can use this code to form the basis of the mapping displays, saving me a lot of code hacking and fiddling.

The issues I am having at the moment revolve around Google's geocoding of UK postcode data. For those who don't know, geocoding is the process of turning an address into longitude and latitude location information which can then be displayed on a map. It can be a bit hit or miss, especially in the UK where the physical area covered by a single postcode can vary widely but prior to Google providing this feature in its API, the only way of achieving this was to buy a horrendously expensive license from the Royal Mail (who own our postcodes, apparently?!?!?) making this an unfeasible option for DoshTracker.

It appears that the results you get back through the API functions are sometimes different to those you'd get typing in the same postcode into maps.google.com, a fact that they confirm in their original press release when they state that "(the) geocoder is not using the same resources as maps.google.com and may not return the same results",  but hats off to them anyway for providing the feature in the first place. For privacy reasons, I don't intend on displaying either the full postcode or a map at a sufficient zoom level to work out the precise location of notes entered into the system, so it may be that the accuracy provided by Google will suffice, but I'm designing the system to allow me to use other geocoding services in future.

In order to do this, I've separated the geocoding from the actual map display. A lot of code I've seen so far calls the geocoding functions when drawing the map in order to set the map center dynamically. This is unnecessary for me as DoshTracker will be using maps to display previously entered locations and so I plan to only geocode the hit's location when the new note or hit is added to the system and then to store that information in the database. This not only reduces the number of calls to the Google Maps API (reducing the chances of me exceeding their acceptable policies) but also means that I can substitute the geocoding component in the future with only minimal code changes.

I'm just ironing our a few bugs in the display but I'll be adding a new tab to the DoshTracker homepage over the weekend to allow you guys to test the geocoder. I'll be logging the geocoded results to a database for use in the eventual system so please feel free to geocode all of your common locations and let me know what you think. I'm particularly interested in feedback on the map zoom level and the accuracy of the results you get.

Update (13/03/2009): The most up to date version of this component is now being hosted here at Google Code.

Creating Excel .xls spreadsheets with PHP

A web-based statistics system I'm developing for a client needs the facility to dynamically generate Excel spreadsheets. The system runs on a Linux platform with a typical Apache, MySQL and PHP install and is hosted on a virtual server at a commercial hosting company so access to anything Microsoft or COM-like wasn't an option and I only had a basic PHP install available. Most web searches come up with solutions that rely on PEAR (such as the Spreadsheet_Excel_Writer module) but my hosts' PHP didn't support PEAR and they wouldn't let me install it.

Finally I came across Johann Hanne's port of the Perl Spreadsheet::WriteExcel module on his website and it's working brilliantly without any additional dependencies! Although his documentation is a little thin on the ground, he does provide some example scripts to get you going and as it's a direct port, you can still refer to the original Perl documentation.

Creating a simple spreadsheet in PHP is as simple as importing the writeexcel classes and setting up a new workbook and worksheet:

require_once "class.writeexcel_workbook.inc.php";
require_once "class.writeexcel_worksheet.inc.php";
My Big Ben photo in Schmap London Sixth Edition


I've just been sent an email by the guys at Schmap to let me know that my Big Ben photo on Flickr has been selected for inclusion in the newly released sixth edition of their Schmap London Guide. You can find the page with my photo on here.

Schmap produce free travel guides for destinations all over the globe containing maps, useful links, guided tours and reviews for shops, hotels, restaurants, bars, sights and attractions.

They are available both online through their website, with specially optimised versions for mobile devices such as the iPhone, iPod Touch and mobile phones or through their Schmap application which comes in both Windows and Mac flavours.

I'm chuffed to have had one of my photos selected for their London guide, there's a hell of a lot of London photos on Flickr!

Thanks guys!

Non-blocking keyboard input in C#

I know this one is pretty noddy, but these posts are as much a way of me storing code snippets I might need quickly in the future as any form of 'public service' so I'll post it anyway.

I quite frequently want to capture key presses in my apps, and to do this I use Console.ReadKey which returns a nice ConsoleKeyInfo object to tell me what's just been pressed. The problem is this call blocks until a key has been pressed and sometimes I don't want to block out the main execution thread or have to create a separate thread *just* to handle the keyboard input.

This is where Console's KeyAvailable property comes in.  It returns true if there is a key press available in the input stream without blocking allowing you to do something like:

while (true)
{
    if (Console.KeyAvailable)
    {
        ConsoleKeyInfo key = Console.ReadKey(true);
        switch (key.Key)
        {
            case ConsoleKey.F1:
                Console.WriteLine("You pressed F1!");
                break;
            default:
                break;
        }
    }
    // Do something more useful
}
© 2016 Richard Dutton. All rights reserved.