Tweet, Tweet

I'm not a fan of all the social networking sites that seem to be so popular with everyone from lonely teenagers to top level management with nothing better to do then twitter all day. Whilst I haven't signed up to any of these sites I have just posted my first tweet.

To try and raise the profile of the GATE group, GATE now has accounts on both Twitter and Facebook (I refuse to create an account on Facebook so don't expect to see me on there) and we are being encouraged to use them to inform the community about our work. Not sure how often I'll tweet (I'm told that it should be about once a week) but you'll know that the tweets are mine as they will end [MG].

Enjoy?

Bringing QuickTime to the Wii

OK so while the title is true it is rather misleading. Let me explain.

I have a web application that contains QuickTime movies (film trailers) and I wanted to make sure that if the user of the site didn't have QuickTime installed they could still see the movies. My main reason for this is that I wanted the site to work fully when viewed through the web browser on the Wii and the Wii doesn't support QuickTime.

The solution is to try and use QuickTime but if it isn't installed then to convert, on the fly (using FFmpeg), the QuickTime movie to an FLV file and then play this back in a Flash based movie player (specifically the JW FLV Player) that will work on the Wii.

Now I know that there are a number of systems available that use the web browser on the Wii to turn it into a media player but these are all huge systems with their own front and back end code and didn't seem like a reasonable starting point for what I wanted. A few people have also tried to work on a small scale and do what I wanted to achieve but from my perspective their approaches suffered from two problems 1) none of them used servlets as the back end code and I was already committed to using Tomcat and 2) they all had problems with seeking within the resulting FLV movies. So I set out to solve both of these problems.

It's taken me a few days to get something that works but I'm now happy enough with the code to release it into the wild for others to play with and improve upon. Unfortunately I can't easily show you a demo as the machine hosting this blog doesn't provide me with the ability to run server side scripts but you can download the entire example which when unzipped provides a complete Tomcat webapp.

---

v0.4 (08/04/2011): Updated to the newest version of JW FLV Player, fixed numerous bugs and re-factored the code to make it more flexible and maintainable. This release should be much more usable then the previous ones.

v0.3 (14/03/2010): Fixed a bug that was causing an error on the Wii and updated the JW FLV Player to the newest version. The code is now also being hosted (and built by Hudson) along with the rest of my projects.

Updated 02/12/2008: I've cleaned up a lot of the server side code to make it easier to understand and maintain. I've also updated the bundled copy of FFmpeg to a much newer build. Finally I've updated the version of the QuickTime embedding script to the newest version.

Easy Map Embedding

Every since starting the development of TagME I've been thinking about finding an easy way of showing the geotagged photos on my blog. Now it is quite easy to display a KMZ file in Google Maps (and of course Google Earth) using the simple method Google provides. Unfortunately this method doesn't allow you to access all the features of the Google Maps API. So to allow me more flexibility I've written some javascript to allow for easy map embedding. Here is the script in action:

To achieve this you need to have already loaded the Google Maps API and then in the head section of your page load my KMLMapLoader. The when you want to embed a map you create a DIV to contain it. For example, to create the map I showed above you add the following to your page:

<div kml="http://www.dcs.shef.ac.uk/~mark/blog/blog_files/journeys/to_work_updated.kmz"
    zoom="11" latitude="53.4717" longitude="-1.511993"
    maptype="G_PHYSICAL_MAP"
    config="map.addControl(new GLargeMapControl());"
    style="border: 1px solid black; width: 600px; height: 700px;">
</div>

It is reasonable straightforward but here is an explanation of the different attributes you can set:

kml

This should be the URL of the KML or KMZ file you wish to display on the map.

latitude

The latitude of the centre of the map.

longitude

The longitude of the centre of the map.

zoom

The zoom level (level 0 shows the whole earth, each increase in zoom level increase the area seen be a power of 2).

maptype

The map type. The default is the street level map, but you can specify any of the types Google supports. Note that id you specify G_SATELLITE_3D_MAP and the Google Earth plugin isn't installed then rather than an error message the script will revert to using G_SATELLITE_MAP

config

If specified this should be JavaScript that will be executed once the map has been initialised. The map itself is available in the variable map and this can be used to further configure the map (for example adding a large map control rather than the default small control the script uses).

Only the kml attribute is required, but to set the location of the map latitude, longitude and zoom must all be specified.

The script actually does a little more than loading the map, it also provides a fix for a bug in the current version of the Google Maps API. When loading a KMZ file the images etc are accessed through a server side script. Unfortunately the API uses a relative URL to point to this script and so KMZ files display properly if loaded through the main Google Maps website but not when loaded using the API. KMLMapLoader adds code to fix this bug which you can reuse even if you don't want to use the loading facilities.

reCAPTCHA

I've never really been a fan of CAPTCHA as a way of checking that I am human. Unfortunately, I fully appreciate that they are an important way of cutting down on spam etc. There are a number of different CAPTCHA systems, some of which are better than others.

reCAPTCHA is my favourite system as I feel like I'm doing something useful as well as proving that I'm human. The aim of reCAPTCHA is to help in the digitization of old books. Put simply each CAPTCHA consists of two words; one is a normal CAPTCHA to which the answer is known and the other is a scanned word from a book which OCR couldn't properly recognise. If you can solve the first then they assume that you can solve the OCR problem as well. Once the same word has been presented to a few people they can determine the correct word with a high degree of accuracy.

They provide code and tools to help you add reCAPTCHA to your own site. They also provide a really simply e-mail hiding service. As an example here is a link to one of my e-mail addresses.

Simple QuickTime Movie Embedding

QuickTime has a very useful "Export for Web" feature that can produce a number of different versions of the same movie targeted at different devices. As well as the different versions of the exported movie it produces a web page with instructions and an example of how to embed the movie in your own website. This is a great but, as far as I am concerned, the way Apple have chosen to embed QuickTime movies in web pages has a number of drawbacks:

• The markup needed to embed a single movie is quite extensive, requiring a JavaScript function call and a noscript tag to manually embed a player when JavaScript is disabled.
  
• Their solution uses two rather large JavaScript files and a style sheet. These files are not ridiculously large but they seem very over engineered for solving what is in essence a very simple problem.
• The appearance of the embedded movie when JavaScript is disabled is different, most notably no clue is given that it is in fact a movie which can be played by clicking upon it.
• There is no simple way of customizing the way in which the movie is embedded in the web page.

So I've put together a solution which attempts to address all of these issues making it both easier to embed QuickTime movies into pages within your website as well as giving you more control over their appearance.

I've put together a demo page with a number of examples, but to give you an idea of what you can do, how about the option to watch the trailer for Fracture or WALL-E.

Updated 26/10/2008: I've added a check to see if QuickTime is installed so that we don't even try to embed it if it isn't there.

Updated 07/11/2008: I've removed code that worked around the Eolas patent as a) I don't think it is really needed and b) it was causing two instances of QuickTime to be embedded in IE which resulted in audio problems. Thanks to Jonathan for pointing out the IE problem.

Updated 27/11/2008: Added the ability to provide either a re-direct URL or a function to be called when the user clicks to play a movie if they don't have QuickTime installed.

Updated 30/11/2008: A very minor update to allow the URL of the QuickTime movie to contain parameters.

Updated 02/12/2008: Added the ability to place links to the QuickTime movies outside of the DIV in which they will be played. Thanks to Stephen for the suggestion.

Updated 14/10/2009: Updated the CSS styles to include the standard CCS3 opacity as new versions of Firefox no longer respect the -moz-opacity setting. Also the script now ensures that the DIV in which the movie will be played is fully within the viewable area by scrolling the page if necessary.

Updated 26/11/2010: Added support for showing alternative HTML content if QuickTime is not installed. Thanks to Niklas Olofsson for the suggestion.

if (window.opera && opera.wiiremote)

While my current readership maybe small (4 at last count) it is diverse. As such I'm sorry that some posts maybe of absolutely no interest to some. For example, today's post is probably relevant to only 1 of my readers!



Object detection is considered the best way of implementing cross browser JavaScript -- that is check to see which methods are available and then use the correct combination to achieve whatever it is you are trying to do.

Detecting the Opera web browser is easy as it's the only browser to implement the window.opera object. The Nintendo Wii console has an Opera web browser but until yesterday I had no idea how to recognise it as different to the PC version of Opera without looking at the user agent string, which can be easily spoofed.

It turns out, however, that Opera on the Wii has extra objects that allow access to details of the Wiimotes -- opera.wiiremote. So we can use this to detect when we are running JavaScript on the Wii by checking for window.opera && opera.wiiremote.

Of course we can do much more than just detect that we are running on the Wii. As far as I can tell the only thing that can't be detected are the values from the accelerometers. There are a number of demo pages as well as a simple game called Wii Roll that you can try.

Of course you can't develop web pages on the Wii so testing web pages will mean trekking backwards and forwards between your PC and the Wii. Of course someone else has already thought of this and developed a wiiremote emulator script so that you can develop and test on your PC.

CSS Selectors

When I first started to setup this blog I made a number of changes to the standard template I choose to use. One of the things I wanted to be able to do was add representative icons to links to show their file types. You may already have seen this in my post on the BBC iPlayer, but in case you missed it here is another link to the solution I provided in that posting. Now assuming that you are reading this in Internet Explorer 7, Firefox, Opera or Safari there should have been a little zip icon following that link. If your using some other browser here is what the link should look like in a screenshot of the link in the iPlayer post:
This is achieved using CSS attribute selectors. Basically I have a CSS rule that checks the destination of every link and if it ends in .zip then it adds the little icon. There are six easy to use CSS attribute selectors that allow you to match attributes in different ways: starts with, ends with, contains, is exactly equal to, has the attribute, match one item in a space separated list.

So that I don't have to pollute my main template file with lots of rules just to show an example of each I've put together a separate demo page. If you want more details than there are in the demo then take a look at the CSS3 Selectors specification, which defines these attribute selectors as well as a whole load of others.

If you intend to use any of these CSS rules it is worth remembering that to get them to work at all in Internet Explorer not only do you have to be using version 7 but you must ensure that your HTML page specifies the HTML 4.01 strict doctype, because in quirks mode IE totally ignores all these CSS rules.

Color Hunter

As anyone who knows me is probably aware when it comes to choosing color schemes, don't ask me! I really can't tell when two colors just really do not go together. This has of course resulted in some really bad websites in the past.

So I was trying to alter the template for this blog and was looking for some new colors. Now I'm still not happy with the layout and style but I did come across a really useful website -- Color Hunter.

Color Hunter produces color palettes from images. For example, give it a picture of a sunset and you will get five colors that are predominate in the picture which you can then use as a palette somewhere else knowing that in at least one other place they have been seen together. You can also search using a HTML color code to find palettes that include a given color.

If that was all the site did then it's use would of course be limited. It's one truly clever feature is to let you search by photo tags. So I wanted a color palette that had something to do with coffee, so I search for coffee and I'm now using the colors you see on this site from palette #49310.

I'm still not convinced by the color scheme I chose, but at least now I know where I'll be looking next time I need a color palette!