csp@scuola smarttv corso1

LA CONNECTED TV

CSP@SCUOLAin collaborazione con ITI FAUSER NOVARA Anno scolastico 2011-2012

Cos’è la Connected TV

• E’ un televisore che può connettersi ad Internet, tramite la portaEthernet 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

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

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

Le applicazioni (o widgets)

• Le applicazioni si possono ottenere, gratis o a pagamento, da unapposito “store”

• una volta scaricate, saranno memorizzate nella memoria di massa del tv e saranno accessibili premendo il tasto “InternetTV” sul telecomando

5

Application Manager

6

Le applicazioni disponibili sul televisore vengono mostrate nell’ApplicationManager

Il tasto perentrare in modalitàConnected TV evedere le applicazioni

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

• 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

Struttura di un’applicazione

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


• Viene inoltre installato un programma che emula il televisore Samsung, consentendo di eseguire l’applicazione sviluppata direttamente sul proprio PC, per testarla

10


• 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

Scriviamo una semplice App

12

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”

src=“$MANAGER_WIDGET/Common/API/Widget.js”></script ><script type=“text/javascript” language=“javascript”

src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></sc ript>

<script type="text/javascript" language="javascript " src="./javascript/Main.js"></script>

</head><body onload=“Main.onLoad();”>

<div id=“welcomeDiv”> Benvenuti! </div><div id=“tastoDiv”> </div>

<a href=“javascript:void(0);” id=“anchor”onkeydown=“Main.keyDown();”> </a>

</body>

</html>

Punto d’accesso

importcodice javascript

Struttura dell’app

Ancora per input


13

Main.js (la logica applicativa)

var Main = {}

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

Main.onLoad = function(){widgetAPI.sendReadyEvent();document.getElementById(“anchor”).focus();

}

Main.keyDown = function(){var keyCode = event.keyCode;

document.getElementById(“tastoDiv”).innerHTML=“Codi ce tasto premuto: “+keyCode;

}

Dichiaro 2 variabili plugins

Il primo plugin serve a segnalare che l’applicazione è caricata e pronta

Metto il focus sull’ancora

Funzione associata all’ancora e che quindi viene chiamata quando premo un tasto sul telecomando


14

Stylesheet.css (il foglio di stile)

body {margin: 0;padding: 0;background-color:transparent;

}

#welcomeDiv {position: absolute;left: 50px; top: 50px; width: 500px; height:50px;background-color: #99FFFF;font-size: 30px;text-align:center;

}

# tastoDiv{position: absolute;left: 50px; top: 110px; width: 500px; height:50px;background-color: #99FFFF;font-size: 30px;text-align:center;

}

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

Applicazione videoplayer

16

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”></sc ript><script type="text/javascript" language="javascript "

src="./javascript/video/Player.js"></script><script type="text/javascript" language="javascript "

src="./javascript/video/Audio.js"></script>

<script type="text/javascript" language="javascript " src="./javascript/Main.js"></script>

</head>

importcodice pluginplayer


17

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


18

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();

}


19


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;


20


case tvKey.KEY_VOL_UP:Audio.setRelativeVolume(0);

break;case tvKey.KEY_VOL_DOWN:

Audio.setRelativeVolume(1);break;

}}


21

Il nuovo Stylesheet.css

body {margin: 0;padding: 0;background-color:transparent;

}

#welcomeDiv {position: absolute;left: 50px; top: 50px; width: 500px; height:50px;background-color: #99FFFF;font-size: 30px;text-align:center;

}

#videoPlayerDiv{position: absolute;left: 50px; top: 110px; width: 320px; height:240px;border:1px solid yellow;

}

22

CSP ICT Innovation

Fabio Saracino – [email protected]

Registered and Central Offices Environment Park - Laboratori A1via Livorno 60 - 10144 Torino

Tel +39 011 4815111Fax +39 011 4815001E-mail: [email protected]

www.csp.it rd.csp.it

Lezione 1: piattaforme UAV di riferimento

csp@scuola smarttv corso1

Education