Map controls for a single image with OpenLayers

For a demo recently I needed to display a map, have pan/zoom controls, add markers and overlays etc etc. Google Maps (or similar) to the rescue right? Not in this case. Unfortunately the place wasn’t real, it was a location within the Battlefield 2 game being used for some simulation of research we were doing. Now I know it’s possible to use something like Google Maps to display my own map tiles etc but it looked complicated and I think I’d have to pretend I was working with real latitude/longitudes etc. Then I stumbled upon OpenLayers. I actually knew about OpenLayers before, as an open-source client-side library for mapping controls. What I didn’t realise was how flexible it was and that I could simply give it a single image and my own coordinate system and then let it do all the rest. This example from the handy list of OpenLayers examples demonstrates how it works in just a few lines of JavaScript. Perfect.

Programmatic page layouts using dojo and existing markup

The layout tutorials for dojo that I’ve seen all seem to fall into two categories:

  • Markup-based: adding dojoType properties to HTML elements in the markup
  • Programmatic: creating HTML elements in JavaScript

When using a toolkit such as dojo for layout rather than standard CSS, my preference would be to keep the dojo layout stuff entirely in JavaScript, separate from the markup, whilst still using HTML to describe my content. This allows an easy transition to/from dojo and CSS layout techniques, doesn’t clutter the markup with dojo specific stuff that would only be needed when JavaScript is enabled, and just provides a cleaner separation. I was sure this must be possible in dojo and it is; it just doesn’t seem to be well documented anywhere.
Continue reading

Presenting from a single canvas with HTML5

I’ve always been a fan of non-standard presentation techniques to help engage the audience. One that’s caught my eye recently is the idea of presenting from a single canvas, using a defined path but with the ability to digress. The two current offerings I know about for this technique are Prezi and JessyInk (see here and here for some comparisons between the two).

I figured that it would be nice to use some of the new features in HTML5/CSS3 to do this so you can just put together a standard HTML page (which is your 2D canvas – not to be confused with the new canvas element!) and have the traversing/zooming/rotating for free. This would also mean no need to require browser plug-ins (e.g. Flash for Prezi). SVG is a nice option but I’m guessing more people have standard HTML skills.

I’ve put together some code (called fivePrez for want of a better name), a rough attempt at doing some of this stuff. Unfortunately it currently only works on Firefox 4 which is still in beta. I haven’t even managed getting it working on Chrome because Webkit seems to do things differently (possibly positioning differences when you’ve scaled an element?). So if you have a version of Firefox 4 running, please try the demo. Otherwise, check out the video below. It’s not the best example but hopefully it gets the point across. Remember, the elements on the canvas are not moving/scaling/rotating into view, the canvas itself is moving so all the elements stay where they are in relation to each other.

Currently fivePrez works simply by including the fivePrez.js JavaScript file (and jQuery) and specifying (using JavaScript) a list of CSS selectors to define the path to traverse (e.g. fivePrez.setPath(['#element1', '#element2']);). Keyboard and mouse controls are option and work by including the appropriate keyboard/mouse script. The keyboard module allows you to traverse the path as follows (which should allow for using a remote clicker):

  • Right/Page Down: next
  • Left/Page Up: previous
  • Up: home (i.e. standard rendering for the page)

The mouse navigation allows you to double-click an element on the path to zoom straight to it.

I’ve also implemented a callback option to allow you to be notified when an item on the path is being moved to / away from as follows:

  function (viewId, viewSelector) {
    // View displayed
  function (viewId, viewSelector) {
    // View hidden

This is useful for e.g. starting/stopping video as I do in my example.

The code generally works by finding the element using the CSS selector provided in the path, determining the element’s current position, rotation etc and then performing a CSS transform on a parent container (generated by fivePrez) so all elements move with each other and the selected element is moved to the centre of the window and rotated appropriately.

Obviously this is very rough round the edges but interesting for a proof of concept. I might give it a go for my next speaking engagement if I’m confident it’ll do the trick. The main problems at present seem to be to do with editing rather than viewing; ideally it would at least have some user interface controls and the ability to drag around the canvas with the mouse.

Worth noting that Google have put together a nice example using HTML5 as a presentation technology to demonstrate the new standard (and Chrome of course).

Installing Firefox beta nightlies in Ubuntu

There’s a handy PPA for installing Mozilla Firefox nightly builds on Ubuntu but as well as the Firefox 4 builds, it also contains Firefox 3 nightly builds. Thanks to Dom I learned how to reduce the priority of the Mozilla daily PPA using pinning so packages from the standard repositories take priority over any from the Mozilla one, even with a higher version number. Instructions are as follows (tested on Ubuntu 10.04):

First add the PPA. Then edit /etc/apt/preferences.d/ubuntu-mozilla-daily-pin-400 and /var/lib/synaptic/preferences (the latter to ensure ‘Mark all upgrades’ in Synaptic does the same as Update Manager / apt-get) to contain the following:

Package: *
Pin: release o=LP-PPA-ubuntu-mozilla-daily
Pin-Priority: 400

Now the firefox-4.0 and firefox-4.0-gnome-support packages are theoretically ready to be installed. However, I had some installation issues which were solved by created a couple of files:

  • /usr/bin/firefox-4.0sudo (link to the executable using ‘ln -s /usr/lib/firefox-4.0b2pre/firefox-4.0 /usr/bin/firefox-4.0‘)
  • /usr/lib/firefox-4.0b2pre/firefox-4.0-restart-required.update-notifier (just create an empty file)

Now your Firefox 4 nightly build should be regularly updated and can be run by executing the firefox-4.0 command. Your existing stable Firefox 3 build should be unaffected.

Using Jena as a SPARQL endpoint

I’ve been involved in a few projects at work over the last couple of years that have made use of Semantic Web technologies (triple stores, RDF, OWL, SPARQL etc). For most of these I’ve made of ARC, a really great PHP library by Ben Nowack for interacting with RDF and triple stores. As great as ARC is, it does have a few drawbacks such as being limited to MySQL triple stores, some issues with OPTIONAL queries and it doesn’t entirely support the SPARQL specification.

For these reasons and for general flexibility, my current project wanted to be able to easily swap the underlying triple store from ARC to Jena as needed so I needed to investigate how to expose a Jena triple store as a SPARQL endpoint. After working this out, I now really really appreciate how easy ARC makes this.

Jena doesn’t appear to ship with the ability to expose the ARQ SPARQL processor as a SPARQL endpoint and hence you need to make use of a separate piece of software called Joseki. The following is the list of things I needed to do to get this working in my environment. Note that your setup may have different requirements and also I may have completely misunderstood the best way of doing this!

  1. Setup a database to use as your triple store and get a JDBC driver so Joseki can interact with it from Java
  2. Download and extract Joseki
  3. Add the JDBC driver to the Joseki classpath (e.g. for Windows by adding the following line to bin\joseki_path.bat: set CP=%CP%;C:\my_jdbc_driver\my_jdbc_driver.jar)
  4. Add the following to joseki-config.ttl:
       rdf:type            joseki:Service ;
       rdfs:label          "My Project SPARQL/Update" ;
       joseki:serviceRef   "sparql/myproject/update" ;
       joseki:dataset       ;
       joseki:processor    joseki:ProcessorSPARQLUpdate .
       rdf:type            joseki:Service ;
       rdfs:label          "SPARQL" ;
       joseki:serviceRef   "sparql/myproject/read" ;
       joseki:dataset       ;
       joseki:processor    joseki:ProcessorSPARQL_FixedDS .
       rdf:type            ja:RDFDataset ;
       rdfs:label          "My Project" ;
       ja:defaultGraph      .
       rdf:type            ja:RDBModel ;
       ja:connection       [
                             ja:dbType "MySQL" ;
                             ja:dbURL           ;
                             ja:dbUser         "myproject-database-username" ;
                             ja:dbPassword     "myproject-database-password" ;
                             ja:dbClass        "com.mysql.jdbc.Driver"
                            ] ;
       ja:reificationMode    ja:minimal ;
       ja:modelName        "DEFAULT" .
  5. Set the JOSEKIROOT environment variable to the location you extracted Joskei
  6. Run Joseki (from it’s directory) by executing bin/rdfserver.bat

Note that I wanted to be able to make use of SPARUL to update data using the SPARQL endpoint. In ARC I can use SPARQL+ (which is effectively the same for my purposes) on the same endpoint as normal SPARQL queries. For Joseki however, I needed to expose two different endpoints, one for standard SPARQL queries and one for updating.

The one thing I haven’t yet worked out how to do it to be able to use named graphs in my Jena triple store when inserting data. I discovered that the SPARUL update specification requires you to create the graph first (unlike ARC’s SPARQL+) but executing e.g. CREATE GRAPH <http://mygraph/&gt; seems to fail silently as any following INSERT INTO <http://mygraph/&gt; statement fails saying that the graph doesn’t exist. Something to keep investigating. It may be something to do with support for the different types of Jena store (RDB, SDB, TDB, etc) which I don’t fully understand yet (I think my instructions above are using RDB which appears to be old but I couldn’t get TDB or SDB working at all).

So all in all I’m pleased to have worked out how to set this up but I will most certainly continue to use ARC where possible as Jena environments seem unnecessarily complex (although this might simply be because it tends to support the W3 specifications fully!).

Wireless on a Dell Mini 10v in Ubuntu 9.10

I installed the Ubuntu 9.10 Netbook Remix release candidate on my new Dell Mini 10v and the wireless didn’t work out of the box. I think this is because there isn’t an open source driver and Ubuntu doesn’t ship with proprietary drivers installed. Now the 9.10 has been released this problem may have disappeared, but in case anyone else sees this, the way to solve it is to install the proprietary wireless driver (Broadcom STA) yourself.

This is pretty easy using the Ubuntu restricted drivers tools: Ubuntu Menu -> System -> Hardware Drivers (in the 2nd box of applications). Note that you’ll need an Internet connection to actually install this so hopefully you can make use of a wired connection temporarily! When I initially installed this driver there were actually two to choose from but it was the Broadcom STA driver that worked. Now I only see a single option available.

Hardware Drivers

Indicator applet API changes in Ubuntu 9.10

The API for the indicator applet has changed in Karmic and a little internal IBM Python application that I’ve written stopped working. Only a couple of minor changes were needed but trying to track down exactly what these were was not as easy a task as I’d have liked.

Creating the indicator
The class used to represent an indicator appears to have changed from IndicatorMessage to Indicator so I threw in the following code to try the new one and fallback to the old one:

  # Ubuntu 9.10 and above
  indicator = indicate.Indicator()
  # Ubuntu 9.04
  indicator = indicate.IndicatorMessage()

Drawing attention
Previously, indicators automatically made the indicator applet draw your attention with a green dot. In Karmic the green dot appears to have been replaced with a change of the envelope colour to black but it is no longer automatic. To make this work you need to set the draw-attention property:

indicator.set_property('draw-attention', 'true');

Note that they’ve also added a count property to display how many notifications are from the same source.

Building .deb packages for Python applications

Building .deb packages for Python applications

Recently I wanted to build a .deb package for an internal IBM application I was writing so that users could easily install it and also so we could distribute them through some internal repositories. This proved a bit harder than I expected so this is a quick summary of how I ended up doing it. Note that your requirements might be entirely different!

The first thing to do is to create the files required by the packaging process. I discovered that the dh_make command can create a load of sample files that can be used as part of this process. To do this, create a directory in the format [package-name]-[version] (e.g. my-great-app-1.0) and run dh_make from within it (I specified ‘s’ for single binary when prompted). This will create a load of sample files in a ‘debian’ subdirectory. Delete any of these you don’t need (which is probably most of them); I kept the following:

  • changelog – change history for all versions of the app (keep to the format specified by the Debian Policy Manual)
  • compat – no idea why I needed this but things don’t work properly later if I don’t
  • control – the details of the package you are creating (see the specification for all configuration options)
  • dirs – the list of directories in which your app will install files (e.g. /usr/bin, /usr/share/pyshared/my-great-app, /usr/share/applications)
  • README.Debian – the README for your app
  • rules – a MakeFile with instructions for how to create the package (for my Python app the important bit here was in the ‘install’ section; here I created a $(CURDIR)/debian/my-great-app subdirectory and copied all files into it as if it were /, e.g. binary to $(CURDIR)/debian/my-great-app/usr/bin/my-great-app)

Once I’d created all those files and put them in my-great-app/packaging/debian and my source in my-great-app/src I created a simple build script my-great-app/bin/build. This looked something like the following:


export VERSION=1.0
export DEBFULLNAME="Gareth Jones"
export DEBEMAIL=""

cd ../build
sudo rm -rf my-great-app*
mkdir -p my-great-app-$VERSION
cp -u ../src/*.py ../src/*.desktop ../src/*.ico ../packaging/my-great-app my-great-app-$VERSION
tar -czf my-great-app-$VERSION.orig.tar.gz my-great-app-$VERSION/
cd my-great-app-$VERSION
mkdir debian
cp -u ../../packaging/debian/* debian/
gksu dpkg-buildpackage

This should create you a my-great-app_1.0-1_all.deb and the my-great-app_1.0-1_i386.changes, my-great-app_1.0-1.dsc and my-great-app_1.0-1.tar.gz files your repository maintainer might want.

A really useful video I found for helping me fill in the contents of the debian control files (and getting me through the whole process) was here. Definitely worth checking out if you need to do this yourself.

PackageKit presentation

On Wednesday we had the pleasure of Richard Hughes joining us at Hursley to talk about PackageKit. I’ve heard of it but never quite bothered finding out any more than the name but having gone to the presentation I’m pretty glad. PackageKit is (yet another) attempt at making software updating/installation easier on Linux. There are many existing tools for this already but PackageKit seems to be particularly interesting because it’s not actually trying to replace anything; it works with and makes use of the existing tools whilst providing some real value on top. Below is a very quick summary of Richard’s presentation.

Existing stuff

  • Good packaging formats
  • Depency solvers, downloaders and UIs bolted on
  • Can’t have automatic updates (needs password authentication)
  • Can’t use fast-user switching (lock out install applications/databases)
  • Errors/warnings in English only and really confusing to average user
  • Installation is done by package names not application names (many to many relationships)
  • Can power down during update – bit dangerous!

PackageKit implementation

  • The ‘glue’
  • Integrates with existing tools (including dependency mangement etc)
  • Improves authentication (uses PolicyKit – fine grained control)
  • System activited daemon (only running when you need it)
  • Only need to write simple integration between tools and PackageKit (doesn’t even need to be complete and done for most tools already) plus thin UI
  • Uses DBUS (two layers – one for full control, one “just do it”)
  • Applications can integrate directly (e.g. install clipart from openoffice)
  • Installation/update by application not package (users know what it is they’re installing!)
  • Doesn’t allow shutdown during installs

PackageKit project

  • Easy to contribute (git with anonymous access – merged to release daily)
  • Rapid development (roughly one minor release per month)
  • Shipped with Fedora 9 (and others)
  • Strong interest from OpenMOKO, Ubuntu (and others)

I’ve installed an old-ish release on my Ubuntu machine (straight from the repositories) and it looks pretty good. Definitely gonna pay attention to this project, it looks like a big step in the right direction.

Building a RESTful Web application with PHP

Recently I’ve been putting together a Web application for a research project. I decided it was about time I really looked properly into REST so my Web interfaces are better structured. I won’t go into all the benefits here, you can read for yourself. Suffice to say it seems like a good approach to take.

This is quite a long article and you might only be interested in some of it so here are the sections:

If you have an suggestions for improvement, please let me know – this was a first attempt!
Continue reading