The Cool Wall is Back

For those of you who are fans of the BBC show Top Gear, you may remember the Cool Wall, and now you can get your very own Cool Wall along with the launch of IE9 beta and BBC’s Top Gear site.

I have been very fortunate to be a member in the team to develop and deliver this site alongside Christopher Owczarek, Martin Grayson, Jag Dua, Sam Gates, Steve Loader, Tom Eddings and Simon Middlemiss. For this blog post I would like to point out some of the key features of the site and a little about the technologies used.

When you get to the site you see one of the first cool features of IE9 and HTML 5, which is the embedded video. This comes out of the box with IE9, and does not require any other addins such as Silverlight or Flash to play. The second cool thing is the HTML 5 canvas, it isn’t obvious here what we are using the canvas for, but one thing it allows is transforms of visuals. What we are doing here is projecting our html video onto a canvas which will render the images, but also add a rotate transform to it. While this is quite a subtle change, the application of filters and other transforms allows very powerful modifications which would only be possible in Silverlight or Flash based sites which, again would require an addin.

 

As we move on to create our Cool Wall, we are presented with a list of cars we can choose to place onto the wall, we have added some transforms and animations to show the names and a slightly bigger image of the cars. We have also added some rotation on these cards of the cars to make it look more like the actual Cool Wall from the show. The hardware graphics acceleration of IE9 also allows a much smoother animation of the car positions when clicking between “My Wall” the “Community” wall and the “TG Rating” or Top Gear wall. The other cool feature of IE9 and HTML 5 is Local Storage; when a user has created a Cool Wall, and they go away from the site, they would expect the Cool Wall to be how they left it when they return. By utilizing the local storage aspect of IE9 we are able to easily convert the positions of the cars into a JSON format for storage and then read it back from Local Storage when we come back to the site.

 

By clicking on a car a flyout with more car details appears detailing some car stats, such as price range, acceleration, maximum speed, miles per miles per gallon, the rating of the car from the show and a quote from the show about the car. We have also added the JavaScript DeepZoom control which allows you to examine the high resolution image of each car in great detail, there are also some hotspots at the bottom right of the DeepZoom picture which shows some interesting parts of the cars. Another note here is the speed in which IE9 is able to render the Deep Zoom images, and this is especially noticeable when the control is in “Full Page” mode by clicking the fourth button on the bottom right inside the image.

 

Another feature of the flyout is a video from the show, like the Cool Wall video at the start of the page, this uses the inbuilt video player with the IE9 tags, so again no addin’s are required to view these videos, another plus point is all the controls on these videos come out of the box with IE9, so you don’t have to spend time designing and developing a custom video player for your site.

 

 

One of the main things about the cool wall is the differences of opinions, which is why it is possible to share your Cool Wall via Facebook. By clicking on the Connect button with the Facebook logo.

 

When you are signed into Facebook, you will be able to share your wall with your friends, and see any friends who already have walls.

Being signed in means that you will also be adding your opinion to the community wall, which takes an average of the user’s ratings of cars. The final tab along the top is the TG Rating, or Top Gear Wall. This relates directly to the rating given from the show and the TG Rating shown on the car’s flyout.

Try it out!

You can get the beta of IE9 from https://www.beautyoftheweb.com to try out today, and you can create your own Cool Wall at https://www.topgear.com/coolwall