Blog

Pushbutton Shortlisted for Microsoft Prize

Pushbutton has been shortlisted with nine other entrants for a Microsoft-sponsored competition to design and develop an innovative, IPTV-based interactive application to run on the company’s Mediaroom Presentation Framework software, a widely deployed internet-based television platform.

The Pushbutton entry is a video-driven time line, providing broadcasters with a vehicle to present archive material of historic events, or as a time-based record of a live and unfolding event such as the Olympic Games or a major breaking news story.

Pushbutton’s Director of Interactive Development, James Cumberbatch, said “Our design provides a very simple and elegant way for viewers to access time-based video material. It is easy to think of content types that would benefit from the approach – from sport, to news and documentary.”

Managing Director of Pushbutton, Paula Byrne, added “We are very excited to have made the short list. Companies from all over the world have entered, so we know we are in good company. We have huge experience of providing selection interfaces for video offerings, and this shines through in the quality of our entry for the Microsoft competition.”

The winner will be announced at the Mediaroom Developers Conference in San Jose, USA, on October 15.

Pushbutton on Tour. Catch Us!

A busy Autumn conference season for Pushbutton, will see team members in Amsterdam and Brighton in September, and the US in October. Here is our schedule:-

September, 11-14. Amsterdam, attending IBC.

September, 20-23. Brighton, attending Flash on the Beach.

October, 13 – 15. San Jose, attending Microsoft Mediaroom Developers Conference.

If you are attending any of these events and would like to take the opportunity to meet someone from Pushbutton, drop an email to info@pushbutton.tv with your contact details and we’ll be in touch.

IPTV Ripe for Social Networking

In a most informative presentation to the Royal Television Society last night, Cisco’s Steve Brigden, said he believed that interactive TV apps that embraced social networking approaches would be big on IPTV.

In a wide ranging presentation that sought to explain the implications for the TV industry of the government’s ‘Digital Britain’ report, Brigden also gave over a good deal of his presentation to explain the nature of the looming bandwidth crunch.

He explained how video intensive applications such as BBC iPlayer, YouTube, and HULU are putting a strain on ISP cost structures – as business models struggle to cope with the exponential growth in usage from users watching streamed video content, often at high quality.

He added that it was his personal view that ‘all you can eat’ £10 a month broadband packages were possibly not sustainable when the consumer was expecting to consume so much bandwidth for this low cost.

Cisco is predicting that in less than four years more than 90% of consumer broadband bandwidth will be for video. BBC iPlayer alone, is already responsible for 7% of the UK’s bandwidth usage.

Low Poly Modelling for PV3D

One of the key areas of our new site is the featured work slot on the home page. To showcase our most recent project for Virgin Media we decided to produce an interactive 3D phone, using PaperVision3D, a short video of the application, and a phone model produced in Cinema 4D.

And so began a long period of experimentation. Having not used PV3D with models before (previous projects had been produced through crafty combinations of the inbuilt primitives rather than importing models), we were unsure where to pitch the level of model complexity vs Flash responsiveness in order to get the best user experience. Very soon it became clear that the simpler the model and the more responsive the Flash the better, even if the model suffered slightly because of it. We also learnt that with a smart combination of pre-baked lighting on the more complex parts of the model, and dynamic lighting in PV3D on simpler parts, you can create a very immersive experience with as little processor drain as possible.

Proof Of Concept Model – 503 Polys

Before we got stuck in and started modelling, we needed to make sure that what we wanted to do was feasible and responded well enough to give a decent user experience. Our first proof of concept model doesn’t really resemble a phone too much, but it was good enough to get a feel for performance. We decided to bite the bullet and go straight for a fully PV3D shaded test, to see if we could get away with real-time lighting.

You might be able to make out in the top left hand corner of the Flash screenshot that we’re pulling about 15 FPS using this model. Bearing in mind that this is fully lit in PV3D with gouraud shading, that’s not half bad.

First Model – 10594 Polys

Having become slightly gung-ho about the whole thing following the successful proof of concept, we threw everything we had at it and went for an ultra-detailed model, to discover where the performance/detail split was. 10594 polys is a lot for a PV3D model. We discovered this very quickly:

This test was coming in at 4 FPS. This definitely wasn’t going to be much fun for anyone to play around with. You can also see that PaperVision3D is having a really hard time z sorting all of those polygons, and there are some serious z fighting issues. Out of interest, we tried disabling the shading to see what element of the processing was going on shading vs simply drawing the model:

Only a 2 FPS increase, so it’s back to the drawing modelling board.

Second Model – 5460 Polys

If we halve the number of polys, will we double the performance? Nearly:

Taking the poly count down to roughly half increased the FPS from 4 to 7. Not a massive leap, but definitely encouraging. After reviewing our model, it became clear that we were using a lot of unnecessary polys to draw flat planes for the screen, and we had also detailed the back of the phone, when in practice, the user would only ever see the front. Here you can see we’re using 800 polygons to draw the flat screen area:

So it was clear we had a lot of room for optimisation, and we still needed to sort out those z fighting issues. On to the next model…

Third Model – 2228 Polys

With this model, we started thinking a little differently. By removing the flat front plane from the 3D model and drawing it as a primitive in Actionscript, we could reduce the number of polys and also render the primitive plane and 3D model surround on separate Viewport Layers, which should sort out our z fighting. We also removed all of the parts of the model which the user wouldn’t see, which reduced our model to a thin slice of the front of the phone:

With the FPS now back up to 10, we’re starting to make some progress. It was clear that we needed to be quite brutal with our modelling in order to get decent performance, and a quick test with a colour material rather than gouraud shading showed that we could save some more processor cycles by being smarter with our shading:

Fourth Model – 1298 Polys

We recreated the model from scratch and rethought the lighting. By baking the lights in Cinema 4D into the texture and using it as a Bitmap Material in PV3D, we could get some nice looking lighting without wasting processor cycles. In order to keep the feeling of dynamic lighting however, we kept the flat primitive plane on the front of the phone lit real-time with gouraud shading. This gave us a happy medium – performant code and a decent looking model:

We were really happy with this result, the model looks great and we’re up to 17 FPS, which is quicker than our original proof of concept. The moral of the story? Keep the poly count as low as possible. The difference between modelling for real-time 3D in Flash and prerendered 3D for video is huge, and takes a bit of getting used to. However, with the right approach, you can get something which looks performs well and looks even better.

Simulating TV Remotes in AS3

A lot of the work we do involves building PC/Mac based demos of planned interactive TV services. The most common requirement when building these is to simulate the buttons found on a standard TV remote, using a computer keyboard (so R is mapped to the red button on the remote, Enter is mapped to the select/ok button on the remote, etc).

This isn’t a difficult task to accomplish using standard keyboard event handlers, but it’s not a particularly nice way to do it. Also, new mappings will often need to be added at a late stage in the project (e.g. mapping Space to select, in addition to Enter), or support will need to be added for soft key codes for a mobile demo, or any number of other complications. To streamline this process, we came up with the InputController class.

You can download the class here: InputController. Usage instructions are included in the class, and also below:

Usage

In order to make things as simple as possible, and to allow you to listen to the input controller from anywhere in your app, it is defined as a static class. You need to initialise the InputController class before using it, in order to pass it a reference to the stage. This just requires one line of code:

InputController.init(stage);

You can then listen for InputEvents from the InputController, in the same way as you would any other class:

InputController.addEventListener(InputEvent.BUTTON_DOWN, _buttonDownHandler);

In your event handler, you can then check the name of the button which was pressed, to see which action you need to perform:

//
// Handle a button being pressed
private function _buttonDownHandler(event:InputEvent):void
{
if(event.buttonName == InputButtonNames.UP)
{
// Do something
}
else if (event.buttonName == InputButtonNames.DOWN)
{
// Do something else
}
else if (event.buttonName == InputButtonNames.SELECT)
{
// Do something else
}
}


The InputButtonNames class contains the names of common buttons which appear on TV remotes. Feel free to add your own names to this class as necessary.

Key/Button Mappings

InputController comes pre-configured with the most common mappings you will need to use for simulating a TV remote with your computer keyboard. However, if you need to add your own, it’s really easy.

Find the _initKeyMappings() method, and take a look at how a mapping is defined:

// Select button
_mappings[Keyboard.SPACE] = InputButtonNames.SELECT;
_mappings[Keyboard.ENTER] = InputButtonNames.SELECT;


To add your own, just choose the key you want to map, and the InputButtonNames constant you want to map it to. You can also define your mappings numerically:

// R to RED
_mappings[82] = InputButtonNames.RED;

Hopefully that should be everything you need to know. If you have any questions, please feel free to ask them in the comments section.

Multi-tap Javascript Library

Pushbutton has developed an elaborate multi-tap text entry Javascript library for the Microsoft Mediaroom IPTV browser.

Multi-tap text entry with a remote control is a critical feature in most Interactive TV applications; so that users can register, enter personal details etc… Passwords and credit card transactional data need additional functionality so multi-tap characters are securely asterisked out after a short time delay.

It is likely that this library will assist any future applications requiring multi-tap text entry, when the IPTV browser does not have this feature built in.

You can view the demo here: Multi-tap demo.
You can download the files here: Multi-tap files.

After launching the demo, give it a go – try pressing your keyboard numbered keys several times in the text field and you should see the textfield cycle through letters.

Usage instructions are outlined below:

Usage

- The HTML requires two script files: tvkeys.js and multitap.js.
tvkeys.js handles basic mapping of TV remote keys.
multitap.js is the main script for handling multitap functionality.

- The HTML input field needs the following onkeydown and onkeypress handlers:

onkeydown="return(!Multitap(event, this));"
onkeypress="return(!Multitap(event, this));"

In order to support password protected text fields, we used two textfields, one as above which takes the focus, the other is hidden by default and placed on top at the same xy coordinates. It unhides and displays asterisks a few seconds after each user input.

I hope this library is of use to your iptv projects, let us know if you have any questions.

L