Not because it’s not useful, but because it’s just not very pretty. With all the text handling power Flash gives you, I’m sure they can do more. Hopefully they’ll fix this.

This project was a wonderful experience for me, mainly due to the fact I got to build a lot of it. This post is a bookmark for me, and runs though the technologies we used.

As a prototyping team, we get to make technology decisions that help us build stuff quickly. This affords us a lot of flexibility. So for this project we used a fairly common set of tools paired with bits and pieces to make our lives easier.

Ruby on Rails: This choice was because I have a lot of experience with the framework, and it is an ideal candidate for prototypes. In fact over the years it has been used to build some great internal tools at the BBC. Oh and I know it’s fine for production too incase you were wondering.

MySql database: Again, we have a lot of experience with this, so why change.

Apache WebServer: Familiar, and easy to setup. We run Passenger as well to make Rails deployment a breeze. Because the prototype has streaming media playback, we needed to compile in the ( H264 Streaming Module). This was a fairly simple process with good documentation. I actually think if I did the project again, I would plump for Nginx instead of Apache. Just because it is so lightweight and fast, but Apache worked just fine.

Build for browsers that support CSS3: Here’s an interesting one. So when building the pages, I realised that some of the complex design could be implemented just using CSS3, without the need to chop up images and create complex layouts. This did mean that “browsers” like I.E (at least < 9) and the like would not display the designs as expected. But hey, this is a prototype, so let's just save come complexity and do it the easy way.

As well as the technologies above, we also used Flash for our visualisations and the custom media player. We powered them using an API we built into the main site. We are lucky to have great Flash experts like Mr Bowley to build this stuff, and I even got the chance to dust off my own AS3 skills with one of the visualisations. Oh and finally, we used the jQuery javascript library for any client side trickery.

So, nothing too unusual there, or in the build really. We decided on our data model (which was influenced by the OntoMedia and ideas from the team) and url design up front, and created the database and subsequent models. We initially thought we could populate the database using provided documents (exel etc) but quickly realised this would be inadequate, and needed something quick and easy to allow data entry. Along came Typus. I highly recommend this project. It creates a simple but extendable CMS based on your Rails applications models. You also get user admin for free. We made some change to suit our project (If any of the Typus people are reading, I tried to feed back changes we made but couldn’t get your tests to run). I also wrote some filters for Paperclip so we could get all images sizes and styles from one upload.

Finally we first built an initial basic site. This was to test out initial layouts and get some understanding of how the site felt when we had real data. This layout was then tweaked and polished once we were happy.

So that was a whistle stop tour of how we built the prototype. What we ended up with was a very polished prototype, which we are all rather proud of. Current I only have screenshots to show, but hopefully that will only be temporary.

One final thing to note. We build this with a maximum of 5 people. The majority of the team were cross discipline. This really helps. It means that everyone understands what the other is doing without everyone having to work on the same area of the project. This was especially key on this project, as we built in from scratch in a very short period of time. I have been fortunate enough to work on some recent influential projects within the BBC, and all those projects had around 5 people working on them. 5 is clearly, the magic number.

So that’s a brief overview. Like I say up top, read the proper explanation on the R&D blog.

I like Google Chrome, it’s fast and simple and works as expected. It’s currently my main browser, and with Extensions, it’s likely to remain that way.

An extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and anything else you need — that adds functionality to the Google Chrome browser. Extensions are essentially web pages, and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5 local storage

I use a Mac so extensions have not been available to me, until that is the dev versions of Chrome started incorporating them. I installed it the other day, and thought I’d have a play at creating one. You can build them too, as their dev site is very helpful.

Using my standard use case, I have built an extension that displays BBC stations Now and Next information. Give it a whirl:

• Install BBC Now and Next Chrome extension

You can see what it looks like in action below.

It uses feeds from BBC Programmes, the upcoming feed and the lesser know service feed. So you install it, and choose the stations you are interested in. You then get to see what is on now and next when you click the BBC icon that appears in the browser bar. the results are clickable. You can click on the network icons to listen or watch live. You can click on the show images or heading to go to that shows programme page.

Oh, and if you’re interested in the code, it on available via my Github account.

Enjoy!

It’s a simple list of ingredients, that have a checkbox next to each item to mark when I have put it in my basket.

So I have built myself a simple Sinatra app that does just this:

• http://sl.whomwah.com
• Source Code

If you look at it on your iphone it will look styled, whereas on other devices it will just look simple and standard.

From the site you just need to post the url of a recipe you want the ingredients listed, for example the screenshot above is what happened when I posted this url into it:

• http://www.bbc.co.uk/food/recipes/database/spicychorizopennepas_84044.shtml

It’s very simple, give it a try, see what you think.

Ok, one thing I should note, is that I can’t be sure it will be 100% correct every time. This is a real pain, but out of may hands. The BBC recipe pages look very nice and all, but the most important part of the page “The Recipe” is not only terribly marked up, but it’s not consistent. I suspect this is due to being a free text field in a legacy CMS? but it means that when I get my application to try to look at it, and turn it into a list of ingredients, I can’t be sure of the structure and have to make a bunch of assumptions, which are sometimes wrong.

It would be great if this could be rectified, as we could then see lots of experiments like this out there. In fact with well marked up recipes, and there does appear to be a recipe markup spec:

• http://www.formatdata.com/recipeml/spec/recipeml-spec.html

People could build some great application around all this information.

I mentioned there that I needed to add some caching to the application, and also that it didn’t live anywhere. Well it now has caching (a feeds cached for a day) thanks to rack/cache and it now has a url:

• http://gw.whomwah.com

Which you can now use in your iCal enabled calendar, one of which is Google Calendar, which is used in the photo below where I have subscriber to:

• http://gw.whomwah.com/planner.ics?s=houseplants,greenhouse
• http://gw.whomwah.com/planner.ics?s=hedges

I was having some strange problems the other day, where Google Calendar was showing the calendar titles as long email addresses. I think this may be a Google Calendar index thing (anyone know?), as it appears to fix itself over time so ignore it.

I really like being in my garden, so I was looking at the BBC Gardening site the other day for some gardening tips. The hardest part for me, is the lack of experience I have in knowing what needs to be done and when.

The BBC Gardening website solves this by having a gardeners’ planner. Great I thought, there’s loads of really useful stuff in there. The problem is I have to keep going back to the site, to check what I’m suppose to be doing. As it’s a planner, it would be great of I could have this information to put in my own calendar, so I could see it along with other jobs I have to do. Even better if I could subscribe to this information, so if it ever changes, I’m kept up-to-date. Maybe they will provide this one day (I really think they should), but in the mean time I decided to roll my own:

I’ve created a web app that reads this planner data, and converts it into the iCal format that you can now subscribe to. It’s written using Sinatra, and I choose to run it under the awesome Passenger via mod_passenger. It’s currently not hosted anywhere (other than on my laptop), so you’ll have to run it on your own server. Maybe that will change if I can find somewhere to stick it, I’ll keep you posted. I think some caching may be needed before that happens though.

Once running on your computer of choice, you only really have one uri to stick in your calendar of choice. You can extend this uri by passing in section names to filter the information displayed in the calendar. Here’s a few examples:

# to subscribe to a calendar of everything ( quite big! )
http://mydomain.local/planner.ics
 
# to subscribe to a calendar of tips on just trees, ponds and wildlife
http://mydomain.local/planner.ics?s=trees,ponds,wildlife
 
# to view all the available sections
http://mydomain.local/

And here’s what it looks like in Apple’s iCal once you have subscibed:

Get your own copy of the app from github. You get up and running in the same way you would with any Sinatra/Passenger app. The structure and config file is already written, so you really just need to do the vhost and symlinking :

• Check the apps README file
• Get a copy of GWPlanner

Happy Gardening!

Head on over to the Radio Labs site to download and install on your machine. Please note though, it’s for OSX 10.6 Snow Leopard only.

Before we did that, I thought I’d have a little play. Tristan and Chris having been building a fun new game (Read more via the Radio Labs blog soon) which uses nowplaying data from BBC 6 Music to power it. Knowing when a track is starting and ending is also useful, so as a bit of fun, I wrote a little Ruby script that made the spotlights behave like traffic lights:

1. Green – when a track started playing
2. Flashing Amber – when a track was about to finish
3. Red – when the track finally finished

Photo by Tristan

To control the lights we’re using ROSC open sound control for Ruby. It’s very good, but required building to install, and the interface is nice, but not simple enough if all you’re doing is turning a light on or off and changing it’s colour. So in order to make the script even more simple, I thought I’d write a little http proxy so that your could control the lights by just going to a url. It meant even the non-programmers could have fun replicating disco lighting. The urls look like this:

http://spotlights.local/all/green
http://spotlights.local/all/rgb120-12-200
http://spotlights.local/all/off
http://spotlights.local/all/random

The proxy is written using Sinatra. I love Sinatra. If you thought prototyping was simple with Rails, well with Sinatra + Passenger it takes simplicity to a whole new level.

You can download the lightcontroller source from Github as normal, you’ll have to tweak a few settings for your needs. You may even find it a useful template for controlling something else.

I’ve just released a new version of TellyBox, version 1.4. This version pulls in all the new features from sister app RadioAunty, plus a few news ones specific to TellyBox.

If you didn’t know, TellyBox is a Mac app that allows you to watch live and catchup BBC Television (Uk users only I’m afraid). It uses the BBC iPlayer to actually display the telly, but wraps it all up into a native Mac application.

Like I mentioned above, new features include Twitter support and scheduling as per RadioAunty. I recommend reading this post to get more information on these. As well as them, the new features specific to TellyBox are:

1. I have removed the default channel entry from the preferences. The app now just remembers what channel you last watched.
2. The close button, and zoom buttons (red and green) now work.
3. A brand new app icon (designed by David Wilson)

I’m really pleased with the icon. I know David spent a lot of time designing it, and for a first application icon, I think it’s awesome. I also knew the effect I wanted. I really liked the idea of the icon being a mini telly showing you exactly what you are watching in the main screen. It seems Mac icons can make or break an app, so I’m hoping this one can only help.

It’s actually quite a simple effect to achieve. It’s just about building layers. I use CGWindowListCreateImage to take a screen grab of what’s playing over time. When I have a new grab, I then construct the dock icon, using the grab at the bottom, then a version of the app icon with a transparent screen to give the glass effect, and finally the channel logo. If you minimize the app, or change windows using spaces, then the icon will change to the BBC test card.

Download TellyBox from the project page on Github, or if you already have the app installed, then you should get a request to update automagically.

1. Select your Favourite Station – Choose from all the BBC National radio stations. You can listen to them in Normal RealPlayer or the much higher quality ACC streams. Make your decision via the preferences screen.

2. Minimise the radio – I didn’t think people generally stare at the player whilst they are listening, so you can now minimise it like you can with iTunes, using ^ cmd Z or the window menu. You can also tweak the width whilst minimised. You will also see that the window title shows the current show playing. This updates along with the schedule as time goes on. More on this next.

3. View the schedule – In the Schedule menu, you will see the day schedule for the station you are listening to (using data from BBC programmes). You will see a tick next to the show you are currently listening. You will also see that some shows are clickable. This is stuff you can listen to, that is available to catchup in iPlayer, it also displays how long left that show is available in iPlayer for. This schedule updates as you listen throughout the day.

4. Twitter support and other preferences – The preferences window gives you the chance to change some of RadioAunty’s settings and turn on others. From the top, we have updates. Turning this on allows you to receive updates to the application when they become available. Next is default station. This allows you to choose a default station to open with (I think this may be removed next release, and the app will just remember what you last listened to. Next is audio quality. It’s best to stick to high quality, but those streams are only available in the UK, so if you are listening abroad you will have to choose normal quality. Finally Twitter support. Opting in means that as you listen, details about what you are listening to will be sent to the @radioandtvbot account on Twitter. If you supply your twitter username, this will be added to the tweet instead of the default, which is your computer login FullName. The screenshot below next shows you what gets sent.

5. A nice dynamic app icon – The wonderful Tim Broom made the current icon. The icon changes, showing the network you are currently listening to.

6. Growl support – If you use Growl, then RadioAunty will notify you when a show starts playing. If you choose the twitter support it will also notify you when this information is sent to twitter.

Next then. I’m going to be transferring the twitter and scheduling stuff over to TellyBox (A Mac app that allows you to watch live and catchup BBC Television). So watch out for the updates. Then I think lastfm integration is on the cards. It’s be nice to scrobble what tracks you are listening to.