2. Cos’è la Connected TV
• E’ un televisore che può connettersi ad Internet, tramite la porta
Ethernet di cui è dotato o con un’antenna WI-FI (anche su chiavetta
USB)
• Permette l’esecuzione di applicazioni “Internet based”, ovvero che
sfruttano le funzionalità messe a disposizione della rete
2
3. Quali applicazioni
• Generalmente le applicazioni installate sul tv sfruttano la
connessione ad Internet per offrire servizi, come ad esempio:
– Visualizzazione di notizie (cronaca, sport, meteo…)
– Visione di film, anche in alta definizione, acquistabili o gratis
– Uso di servizi quali YouTube, Skype, Facebook…
– Navigazione sul web (più raro e vedremo perché)
3
4. Le applicazioni (o widgets)
• Generalmente la Connected TV non consente la navigazione “libera”
tramite web-browser
• I contenuti offerti da Internet sono fruibili attraverso apposite
applicazioni, o “widgets”
• Quindi ci sarà il widget per usare Facebook, quello per guardare
video su YouTube, quello per ricevere le informazioni di finanza e
così via
4
5. Le applicazioni (o widgets)
• Le applicazioni si possono ottenere, gratis o a pagamento, da un
apposito “store”
• una volta scaricate, saranno memorizzate nella memoria di massa
del tv e saranno accessibili premendo il tasto “InternetTV” sul
telecomando
5
6. Application Manager
Le applicazioni disponibili sul televisore
vengono mostrate nell’Application
Manager
Il tasto per
entrare in modalità
Connected TV e
vedere le
applicazioni
6
7. Struttura di un’applicazione
• Un’applicazione è simile ad una pagina web perché l’ambiente operativo
in cui viene eseguita è il browser, che sui TV Samsung si chiama “Maple”
• Il browser non è visualizzato sul tv, ma c’è
• L’applicazione è composta da :
– Un livello che determina l’aspetto grafico: il foglio di stile CSS, per
curare nei minimi dettagli lo stile di tabelle, pulsanti, testo, ecc.
– Un livello che determina la struttura grafica: la pagina HTML, che
gestisce la disposizione degli elementi visualizzati
– Un livello che determina il suo funzionamento: il codice Javascript,
responsabile della logica applicativa (cosa succede quando si preme
un pulsante, si sceglie di eseguire un video, si inseriscono dati in un
form, ecc.)
7
8. Struttura di un’applicazione
• In pratica, quali sono i file necessari per un’applicazione?
– index.html, che costituisce il punto di accesso (“la chiave
d’accensione” dell’applicazione)
– Main.js, il “motore” dell’applicazione, il file in javascript che
determina la logica (“cosa succede quando”)
– stylesheet.css, il foglio di stile che cura l’aspetto grafico fino al
particolare più piccolo
– config.xml, un file di configurazione generale
– (opzionali) file di immagini, file flash (.swf)
8
9. Strumenti per creare un’app
• Collegarsi dal proprio pc al seguente sito :
http://www.samsungdforum.com/ , registrarsi, entrare nella
sezione “Apps Guide” e cliccare su “Download SDK” per scaricare il
kit di sviluppo software (SDK) della Samsung
• Terminato il download scompattare e lanciare l’eseguibile
• Verrà installato un programma che assiste nello sviluppo di
un’applicazione e consente di scriverne il codice
9
10. Strumenti per creare un’app
• Viene inoltre installato un programma che emula il televisore Samsung, consentendo
di eseguire l’applicazione sviluppata direttamente sul proprio PC, per testarla
10
11. Strumenti per creare un’app
• Infine, viene predisposto, durante l’installazione del kit di sviluppo,
un server il cui scopo è rendere disponibile al televisore
l’applicazione creata su pc. La trasmissione avviene sulla rete che
collega il pc al tv.
11
12. Scriviamo una semplice App
index.html (il punto d’accesso e la struttura dell’app)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video Player</title>
<script type=“text/javascript” language=“javascript” import
src=“$MANAGER_WIDGET/Common/API/Widget.js”></script> codice
<script type=“text/javascript” language=“javascript”
src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></script> javascript
<script type="text/javascript" language="javascript"
src="./javascript/Main.js"></script>
</head>
Punto d’accesso
<body onload=“Main.onLoad();”>
<div id=“welcomeDiv”> Benvenuti! </div>
<div id=“tastoDiv”> </div>
Struttura dell’app
<a href=“javascript:void(0);” id=“anchor”
onkeydown=“Main.keyDown();”> </a>
</body> Ancora per input
</html>
12
13. Scriviamo una semplice App
Main.js (la logica applicativa)
var Main = {}
Dichiaro 2 variabili
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue(); plugins
Main.onLoad = function(){ Il primo plugin serve a segnalare
widgetAPI.sendReadyEvent(); che l’applicazione è caricata e
document.getElementById(“anchor”).focus();
} pronta
Metto il focus sull’ancora
Main.keyDown = function(){
var keyCode = event.keyCode;
document.getElementById(“tastoDiv”).innerHTML=“Codice tasto premuto: “
+keyCode;
}
Funzione associata all’ancora e che quindi viene
chiamata quando premo un tasto sul telecomando
13
15. Che cosa fa questa app? Poco…
• Cattura la pressione di un tasto del telecomando e mostra sullo
schermo il codice numerico associato ad esso; l’input da
telecomando è gestito tramite il plugin apposito ed è catturato
dall’”ancora”
• Proviamo adesso a realizzare un’applicazione che abbia la capacità
di mostrare un video e di gestirne l’esecuzione con i tasti di PLAY,
PAUSE e STOP, oltre a controllare il livello del volume
15
16. Applicazione videoplayer
il nuovo index.html (1/2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video Player</title>
<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>
<script type="text/javascript" language="javascript" import
src="./javascript/video/Player.js"></script>
<script type="text/javascript" language="javascript" codice
src="./javascript/video/Audio.js"></script> plugin
<script type="text/javascript" language="javascript" player
src="./javascript/Main.js"></script>
</head>
16
17. Applicazione videoplayer
il nuovo index.html (2/2)
<body onload=“Main.onLoad();”>
<div id=“welcomeDiv”> Benvenuti! </div>
<div id=“videoPlayerDiv”> </div>
<a href=“javascript:void(0);” id=“anchor”
onkeydown=“Main.keyDown();”> </a>
</body>
</html>
Osservando la lista di inclusioni javascript, si
osservano due nuovi plugin : Plugin.js e Audio.js,
rispettivamente per l’esecuzione della parte video e
audio del flusso multimediale da riprodurre. Essi
consentono al programmatore di controllare
l’hardware del televisore che fornisce queste
funzioni 17
18. Applicazione videoplayer
Il nuovo Main.js (1/3)
var Main = {}
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var videoURL = “”;
Main.onLoad = function()
{
widgetAPI.sendReadyEvent();
document.getElementById(“anchor”).focus();
Player.setDisplayArea(50, 110, 320, 240);
Player.init();
Audio.init();
}
18
19. Applicazione videoplayer
Il nuovo Main.js (2/3)
Main.keyDown = function()
{
var keyCode = event.keyCode;
switch(keyCode){
case tvKey.KEY_PLAY:
if(Player.getState() == Player.PAUSED)
Player.resumeVideo();
else if(Player.getState() == Player.STOPPED)
Player.playVideo();
break;
case tvKey.KEY_STOP:
Player.stopVideo();
break;
case tvKey.KEY_PAUSE:
if(Player.getState() == Player.PLAYING)
Player.pauseVideo();
break;
19
20. Applicazione videoplayer
Il nuovo Main.js (3/3)
case tvKey.KEY_VOL_UP:
Audio.setRelativeVolume(0);
break;
case tvKey.KEY_VOL_DOWN:
Audio.setRelativeVolume(1);
break;
}
}
20