Tutorials

Hello World Application

Interaction with the remote control

Handling the broadcast a/v object

Basic Screen Logger

Overview about HbbTV architecture

Running a HbbTV application on a hybrid terminal

Common mistakes to avoid

HbbTV 2.0.2 Explained

HbbTV 2.0.3 Explained

Hello World Application

What shall we create?

A minimal HbbTV application that aims to be compatible across a widest range of terminals that displays a Hello world! message on screen:

This app will not feature remote control interaction (e.g. show / hide itself on red button press) or other features and will showcase a minimum HbbTV app skeleton. Hello world! message is shown on screen immediately without the need for any user action. The application consists of:

  • hello-world.html HTML document holding the application scene
  • hello-world.css CSS document holding the application scene styling
  • hello-world.js JavaScript file holding the application logic

Full source code is available here: https://github.com/HbbTV-Association/Tutorials/tree/main/hello-world

Let’s dive into hello-world.html. We start with:

as is required by chapter A.2.6.2 MIME type and DOCTYPE of the ETSI TS 102 796 V1.1.1 standard.

Head section:

<head>
    <title>Hello world app</title>
    <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />
    <link rel="stylesheet" href="hello-world.css" />
    <script type="text/javascript" src="hello-world.js"></script>
</head>

The Content-Type is also set as defined in standard to “application/vnd.hbbtv.xml+xhtml; utf-8”. Within <head> we include our CSS and JS.

Body section:

The onload attribute calls our app entry function sayHello(). The <body> should always include the  application/oipfApplicationManager embedded object which we will use within our application logic to acquire the Application object, as set by standard.

Each application has an associated DOM Window object by default. This Window object is initially marked hidden to avoid screen flicker during application start-up. Once loaded, the application then typically calls the show() method of the Application object.

It is good practice for application scene to use a container <div>, which in our example is <div class=”safe_area” id=”app_area”> to define a graphic safe area for content authoring as recommended in chapter 10.1.3 Graphic safe area (informative) of the standard. We put our Hello world! Message in the center of the graphics safe area.

Now, let’s start inspecting the hello-world.css document.

We set the body to be transparent, so we see the live broadcast going on in the background. We also set the body size as defined in standard.

We then set the style for the application/oipfApplicationManager embedded object:

We choose to define the graphic safe area for content authoring as recommended in chapter 10.1.3 Graphic safe area (informative) of the standard. The background colour is set to better distinguish the Hello world! message on screen:

Finally, we set the Hello world! message style:

Observe that the font-family set is a font  which is supported by the standard.

Finally, let us dive into application logic:

We only have one function defined, which is our app entry function sayHello(). It attempts to acquire the Application object, which should always be possible on a HbbTV terminal.  The Application object is acquired using the getOwnerApplication() method of the application/oipfApplicationManager embedded object as described in the Annex A (normative): OIPF DAE Specification Profile of the standard. Once the Application object is acquired its show() method can be called in order to make our application visible on screen.