Hello world

From HbbTV Developer
Jump to: navigation, search

For your first HbbTV application you need to create a HTML, a JavaScript and a CSS file. Copy the following lines into a file named HelloWorld.html and save it somewhere in your file system. You could also simply download the zip file, including all documents you need, from our server and unzip it somewhere on your computer.
Download: HelloWorld.zip

<?xml version="1.0" encoding="UTF-8" ?>

 <!--As DOCTYPE either the strict XHTML declaration or "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd" shall be used as described in the HbbTV-standard: A.2.6.2.-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <!--Required XML-namespace as described in the HbbTV-standard: A.2.6.2.-->

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
   <!--Required MIME content type as described in the HbbTV-standard: A.2.6.2.-->
   <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />
   <script type="text/javascript" src="HelloWorld.js"></script>
   <link rel="stylesheet" href="HelloWorld.css" />
   <title>Hello World HbbTV Application</title>

  </head>

  <body onload="initApp();">

   <div>
    <!--ApplicationManager extracts information out of the AIT (such as lifecycle, autostart, etc.)-->

    <object style="width:0; height:0; position: absolute;" id="appMan"
    type="application/oipfApplicationManager"></object>
   </div>

   <div class="safe_area" id="app_area">

    <div id="background_plane"></div>
    <div id="header_field"></div>
    <div id="content_field"></div>
    <div id="info_field"></div>

    <div id="logo_field">
     <img id="tvring_logo" src="logo_tvring.png" alt=""></img>
     <img id="irt_logo" src="logo_irt.jpg" alt=""></img>
    </div>

   </div>

  </body>

</html>


Now copy this lines into a file named HelloWorld.js and save it in the same folder as before.

/*

* Institut für Rundfunktechnik (IRT | www.irt.de) Germany, 2014
* Demo of simple HbbTV Application realised within the EU founded TV-Ring project.
* contact: contact@hbbtv-developer.com
*/

var header= "";
var content= "";

function initApp()
{
  app_area = document.getElementById("app_area");
  info_field = document.getElementById("info_field");

  header = "Hello World!";
  content = "This is a simple HbbTV-Application that will be displayed on every SmartTV" + "<br/>" + "More
     information on how to develop Apps for connected TV-devices that use the HbbTV standard can be
     found on www.hbbtv-developer.com."

  document.getElementById("header_field").innerHTML = header;
  document.getElementById("content_field").innerHTML = content;

  // make <div>-container elements visible
  app_area.style.visibility = "visible";
  info_field.style.visibility = "hidden";

  //Needs to be called within broadcast related applications as expected
  //within the HbbTV specification 6.2.2.4
  Application.show(); }


Now copy these last few lines into an empty text document named HelloWorld.css and save it in the specific folder. After that you could go on like it is explained in the sections:

* {
  padding: 0;
  margin: 0;
}

body
{
  /* most backgrounds are transparent, but there is at least one terminal which has a white
  color as the default background*/
  background-color: transparent;

  /*we explicitly set the size of the body element. This avoids a browser to show
  scroll bars or that pages are floating if they are bigger than the logical screen size */
  width: 1280px;
  height: 720px;
  overflow: hidden;
}

/* set application area invisble as initial state */
div#app_area
{
  visibility: hidden;
}

div.safe_area
{
  position: absolute;

  /* Border of the safe area: 10% 5% 80% 90 */
  left: 128px; top: 36px; width: 1024px; height: 648px;
}

a
{
  /* According to the OIPF DAE specification this shall prevent that a browser draws
  its default highlighting */
  outline-style: none;
  text-decoration: none;
}

#info_field
{
  background-color: #FFFFFF;
  color: #000000;
  position: absolute;
  top: 0;
  right: 0; text-align : center;
  font-size: 12px;
  text-align: left;
  padding: 8px;
  border: solid 1px #000000;
}

#background_plane
{
  position: absolute;
  /* Border of the safe area: 10% 5% 80% 90% */
  left: 0px; top: 0px; width: 1024px; height: 648px;
  background: white;
  opacity: .80;
}


#header_field
{
  position: relative;
  width: 50%;
  margin-top: 130px;
  left: 50%;
  margin-left: -25%;
  padding: 20px;
  text-align: center;
  font-size: 40px;
  color: white;
  background: rgba(0,0,255,0.4);
}

#content_field
{
  position: relative;
  width: 50%;
  margin-top: 30px;
  left: 50%;
  margin-left: -25%;
  padding: 20px;
  text-align: left;
  font-size: 20px;
  color: white;
  background: rgba(0,0,255,0.4);
}


#logo_field
{
  position: relative;
  width: 50%;
  margin-top: 30px;
  left: 50%;
  margin-left: -25%;
  text-align: center;
}

#tvring_logo
{
  position: relative;
  height: 40px;
}

#irt_logo
{
  position: relative;
  width: 40px;
  height: 40px;
}