Sam Starling
19 February 2011

RadioVIS Slides with HTML

This is a bit of an introduction to what I made at the RadioDNS Hackday in Geneva on 15th February. If you just want the code, you can skip to the end!

Once you’re all set up with your infrastructure to serve RadioVIS, what you’re essentially left with is a nice blank canvas to fill with content — but it’d be a bit boring to just fill it with static images. What you really want to do is create some dynamic slides that pull through information (like now playing data) from various places and put that together in a way that looks decent.

To do this you need to use some kind of imaging library like GD or PIL, which in layman’s terms lets you write a set of instructions to construct an image. However, there’s a couple of problems with most of these libraries. Firstly, the instructions for putting together these images can be a bit fiddly — it’s all absolute co-ordinates, and you have to write your own clever methods to do things like text wrapping. Secondly, the font rendering is a bit rubbish with lots of jagged edges and some odd transparency.

Before the RadioDNS Hackday in Geneva last week, I had a cunning idea. Web browsers (and especially Safari) do a great job of rendering fonts, and we can do lots of CSS3 wildness like 3D transforms and drop shadows. Plus, HTML and CSS are a bit more accessible for Joe Public to understand and create. So why not code up our slides in HTML, and then transform that into an image?

Here’s an example of the kind of image the program makes:

Because the program uses WebKit, we’re taking full advantage of lots of nice CSS3 bits like gradients, rotation, box-shadow and @font-face.

I’ve put the code up on Github — it’s a bit messy at the moment, and you’ll need a few things like pyobjc. I’m pretty sure this will only work on a Mac, unfortunately, but the project is still young. There’s a few examples of templates in there to give you an idea of how it works. Comments, bug reports and pull requests are all welcome!