Kontakt aufnehmen

JavaScript auf dem Smart TV

In der Artikel-Serie „Smart TV App entwickeln“ können wir uns nun endlich den Code zuwenden! Ich habe mich dabei für die JavaScript-Variante entschieden, weil dies uns Webentwicklern gut bekannt ist.

Projekt erstellen

Zunächst einmal müssen wir ein neues Projekt erstellen. Das geht in Eclipse über das Icon ganz oben Links, oder File->New -> Project. Man wird aufgefordert einen Wizard zu wählen. Wenn die Installation der SDK richtig geklappt hat, dürfte dort nun der Ordner „Samsung SMART TV Apps“ auftauchen:

Neues Projekt erstellen

Neues Projekt erstellen

Nach der Auswahl des Typs „Samsung SMART TV JavaScript App Project“ können wir das Projekt benennen. Der Name sollte keine Leerzeichen enthalten. Ein passender Name wäre doch hello_world, oder?

Projektname

Projektname

Bevor wir starten, dürfen wir uns noch eine Lizenz durchlesen und befürworten. Das sieht dann so aus:

Eclipse Lizenz

Eclipse Lizenz

Smart TV Emulator starten

Genug installiert, schalten wir endlich die Glotze an! Beim Start des Projekts, ist bereits ein Beispielcode vorhanden, den wir sofort ausführen können. Geht dazu im Menü auf „Samsung Smart TV SDK“ > „Run Current Project in Samsung Smart TV Emulator“.

Smart TV Emulator

Smart TV Emulator

Nach dem wir zweimal etwas in der Firewall freischalten müssen startet unsere Hello-World App. Diese zeigt einfach nur einen schwarzen Bildschirm an:

Erster App Start im Smart TV

Erster App Start im Smart TV

Der Emulator besteht aus drei Teilen. Zum einen natürlich der Fernseher selbst. Und um den Fernseher zu bedienen, haben wir auch eine Fernbedienung mit dabei. Der Kasten unten ist für Debug-Ausgaben.

Die Beispiel-App macht nichts anderes als auf die Fernbedienung zu reagieren. Drückt ihr die Pfeiltasten, wird dort „UP“, „DOWN“ usw. ausgegeben.

Aufbau einer App

Die App ist aufgebaut, wie eine normale Website (nur ohne PHP oder ASP.net). Es gibt eine index.html die beim Start geladen wird, einen Ordner für JavaScripts, einen für Stylsheets und auch Order für Bilder.

Werfen wir doch mal einen Blick in die index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>hello_world</title>

    <!-- TODO : Common API -->
    <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
    <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

    <!-- TODO : Javascript code -->
    <script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>

    <!-- TODO : Style sheets code -->
    <link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">

    <!-- TODO: Plugins -->

  </head>

  <body onload="Main.onLoad();" onunload="Main.onUnload();">

    <!-- Dummy anchor as focus for key events -->
    <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>
    <!-- TODO: your code here -->

  </body>
</html>

Interessant an der Stelle sind die beiden oberen JavaScript-Files. Diese laden die API des Smart-TVs. Das Widget-Objekt ist quasi die Hauptapi des Ganzen. Diese muss quasi immer mit geladen werden.

Das zweite File TVKeyValue ist einfach nur ein Array mit den Tasten der Fernbedienung als Konstanten. Die braucht man, damit man sich nicht alle Zahlencodes für die Tasten merken muss.

Die Main.js ist die Datei, in der unser Quellcode steht. Der Name hierfür ist im Endeffekt egal. Man sieht, hier wird sehr viel mit JavaScript-Objekten gearbeitet. Ich empfehle den Stil bei zuhalten, wenn die App größer werden soll – Dies gilt auch für die normale Webentwicklung.

Der Link wird nur gebraucht, um den Fokus auf sich zu ziehen. An ihm hängt das Event, dass auf die Tastenschläge reagiert.

Erster JavaScript Code

Nun werfen wir mal einen Blick in unsere JavaScript-Datei: Die Main.js:

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();

var Main =
{

};

Main.onLoad = function()
{
  // Enable key event processing
  this.enableKeys();
  widgetAPI.sendReadyEvent();
};

Main.onUnload = function()
{

};

Main.enableKeys = function()
{
  document.getElementById("anchor").focus();
};

Main.keyDown = function()
{
  var keyCode = event.keyCode;
  alert("Key pressed: " + keyCode);

  switch(keyCode)
  {
    case tvKey.KEY_RETURN:
    case tvKey.KEY_PANEL_RETURN:
      alert("RETURN");
      widgetAPI.sendReturnEvent();
      break;
    case tvKey.KEY_LEFT:
      alert("LEFT");
      break;
    case tvKey.KEY_RIGHT:
      alert("RIGHT");
      break;
    case tvKey.KEY_UP:
      alert("UP");
      break;
    case tvKey.KEY_DOWN:
      alert("DOWN");
      break;
    case tvKey.KEY_ENTER:
    case tvKey.KEY_PANEL_ENTER:
      alert("ENTER");
      break;
    default:
      alert("Unhandled key");
      break;
  }
};

In der index.html haben wir im onload angegeben, dass wir mit der Main.onLoad starten. Dabei wird die enableKeys-Funktion aufgerufen und der Fokus auf den Dummy-Link gelegt. Mit sendReadyEvent sagen wir der API, dass wir nun mit dem Laden fertig sind.

Die Funktion keyDown wurde in der index.html auf den Link gelegt. Das heißt, wenn eine Taste auf der Fernbedienung gedrückt wird geht er in diese Funktion. In der Eigenschaft event.keyCode steht eine Zahl, die für die gedrückte Taste steht. Im Switch-Case wird dann je nach KeyCode ein anderer Text ausgegeben. Das alert landet übrigens nicht wie im Web üblich in einem kleinen Fenster, sondern einfach nur in unserer Debug-Konsole.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

?Herbrich? schrieb am 01.11.2012:

Das ist ja zu einfach, darf man eine App auf den eigenen Server hosten oder wird diese auch local instaliert??

Lucas schrieb am 09.11.2012:

Hallo Steffan, Nutzt du Win 8 schon produktiv? Könntest du deine Erfahrung damit mal bloggen? Danke und Viele Grüße Lucas

Stefan Wienströer schrieb am 11.11.2012:

Hallo Lucas, aktuell bin ich leider etwas enttäuscht. Aus irgend einen Grund lassen sich bei mir keine Metro-Apps mehr starten. Wenn das wieder läuft, kann ich mal darüber bloggen. Gruß Stefan

Bernd schrieb am 12.11.2012:

Also Videoweb hat den HBBTV Standard sprich jede app die auf HBBTV Standard programmiert ist läuft auch bei Videoweb !!! HBBTV für Entwickler : http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-1/ http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-2/ http://blog.sybit.de/2012/04/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-3/ Auf jedenfall machen HBBTV Apps bzw. SmartTV echt ne menge spass

Seref Durak schrieb am 29.11.2015:

bekomme beim Straten des Emulators"Emulator ist starting up" sonst passiert nichts.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern