Setting up a development environment

From HbbTV Developer
Jump to: navigation, search

If you want to start developing HbbTV-Applications, there are useful tools that can provide you with helpful information. The following tools will make the development process easier and can be seen as an addition for developers to test and debug their apps:

  • FireHbbTV: A browser plugin that allows you to display your app directly in Firefox
  • Opera TV Emulator: Emulates a SmartTV on your computer, using a virtual machine

Besides the fact that FireHbbTV and Opera TV Emulator are helpful for HbbTV-Application development, it has to be clear that they can't be seen as a proper HbbTV environment. There are a lot of things these tools can do, but they don't offer the full capacities and facilities that a certified HbbTV device will provide. The differences and possibilities of FireHbbTV and the Opera Emulator will be described in the particular sections. To make sure that Applications will run under real conditions, a suitable HbbTV environment with an HbbTV compliant DVB playout is needed. How to set up such an environment, can be found in the section Setting up a HbbTV environment.

The FireHbbTV Browser-Plugin

FireHbbTV Plugin
Firebug Plugin
Hello World App

FireHbbTV is an easy and fast solution to display your application directly in a browser window. Therefore, FireHbbTV uses a browser profile that is, to some extent, similar to HbbTV devices. That browser profile enables Firefox to interpret the CE-HTML language and display your application.

To get started, download the plugin and follow the installation guide. Use this link or simply navigate to Firefox -> Add-Ons and enter “FireHbbTV” into the search bar.

After installing the plugin, Firefox will be able to recognize HbbTV-Applications and interprets them similar to SmartTVs. In addition to the FireHbbTV plugin, it is very handy to use a debugging tool that displays errors or problems. FireBug, a debugging plugin for Firefox, will provide you with feedback about any syntax or runtime errors that the browser encounters. Get the plugin here, or navigate to Firefox -> Add-Ons and enter “FireHbbTV” into the search bar.

By clicking on the FireBug symbol that appears after the installation on the right upper side of your browser, Firefox will open a debugging window that will give you information about syntax or runtime problems within your app. Now Firefox is ready to interpret and display HbbTV-Applications. To demonstrate this, you can use this very basic "Hello world"-Application and try to open it with Firefox. Simply drag the HelloWorld.html file into a browser tab. Now Firefox will automatically display the application, using the FireHbbTV plugin.

Furthermore FireHbbTV is able to emulate some of the functionalities of a SmartTV. On the upper part of the window there is a tool bar with many useful settings. For example the remote control that gives you the possibility to navigate through your application, as well as the possibility to send Stream Events.

As described earlier, FireHbbTV is a useful tool that can give you a feeling of what the HbbTV browser profiles are capable of. But it does neither provide a fully compliant HbbTV browser profile nor should it be taken as a reliable testing environment for HbbTV-Applications. For example the application manager, that needs to be interpreted by an HbbTV compliant browser, will not be interpreted by FireHbbTV. Also when it comes to videos, FireHbbTV does not bring as many capabilities to play back different codecs or video formats, as a SmartTV. So if your Application will work with FireHbbTV, it does not need to run in HbbTV devices.

Opera HbbTV Emulator

Opera Remote Control
Generate AIT
VirtualBox Hello World

The software company Opera is implementing and developing an HbbTV compliant browser for SmartTVs. Hence, there are some HbbTV devices that integrate and use the Opera HbbTV browser. In order to run and test applications, Opera provides a virtual machine image that emulates a SmartTV. The emulator can be retrieved here. Unpack the provided files and store them on your local file system. The emulator needs a virtualiser like VirtualBox in order to run. So download the appropriate version of VirtualBox for your operating system here and follow the installation guide. The next step is to open the Opera HbbTV Emulator.vbox-File with your VirtualBox. This file can be found in the folder where you stored your Opera HbbTV Emulator files.

Before you can start the emulator, you have to decide where your application is stored. Because HbbTV and therefore Opera provides two delivery ways that can be used to load the app:

  • The first one is, to store the application on a server and access it over the internet. If this is the case, no further adjustments in VirtualBox have to be applied.
  • The other way is to define a shared folder where the application will be stored, that can be accessed by VirtualBox. To do so, you'll have to create two folders on your local drive system. Name the first folder 'share'. The second should be created within the share folder and should be named 'carousel'. It doesn’t matter where you store these folders, as long as you don’t forget the folder paths. Your application has to be stored in the 'carousel'-folder in order to access it by VirtualBox. Therefore, VirtualBox has to be configured. Click on settings -> shared folders and add a new shared folder. Add the path to the shared folder you just created and make sure that the read-only option is unchecked. Now the folder can be accessed.

Let’s start the emulator by simply clicking on the start button in the upper menu of VirtualBox. After launching the virtual machine, a new window with a video will appear. This window is your emulated SmartTV where your application will be shown.

Opera provides also a remote control that can be used to navigate through the app, or to load new applications into the emulator. To access this remote control open a new browser tab and enter 'http://localhost:5555'.

To open applications, click on the small "globe" button in the web section of the remote control to open the "Generate AIT" window.

  • if your app is stored on a web server, the URL has to be entered in the upper field, and the lower field, where the transmission type is specified, has to be set to "HTTP"
  • if your app lies in a shared folder, enter the name of your HTML file (e.g. 'HelloWorld.html') into the upper field. The field for the transmission type has to be set to "Object Carousel". Make sure that all files of your application are copied into the carousel-folder.

By clicking on the "Generate AIT"-button, the application will be loaded and displayed within the emulator window.

Also the Opera TV Emulator does not bring all facilities that a SmartTV will provide and therefore can not be seen as a proper test environment for HbbTV-Applications.