Onelan Net Top Box 33xx 5000 e 6000 series Tutorial

Transcript

1 Onelan Net Top Box 33xx 5000 e 6000 series Tutorial Installazione e Guida Rapida introduttiva all uso dei sistemi di Digital Signage ONELAN Net Top Box Distribuito in Italia da Digivision s.r.l. Tecnologie Digitali Integrate Viale Piave n Milano Tel Web site vendite@digivision.it 1

2 Onelan NTB 7.0x Tutorial: creazione del primo layout Indice: Capitolo 1 -- Un Sistema di Digital Signage.. pag Introduzione.. pag definizione di Digital Signage System.. pag. 3 Capitolo 2 -- progettazione di un nuovo layout.. pag Scelta del tipo di messaggio da inviare.. pag Creazione del Layout.. pag Posizionamento zone nel Layout.. pag. 6 Capitolo 3 - i Contenuti nelle zone di riproduzione.. pag inserire Contenuti multimediali.. pag. 11 Capitolo 4 Interattività con Touch Screen 4.1 Touch Screen e dintorni.. pag Interazione tra Zone e Touch Screen.. pag. 16 Conclusioni.. pag. 18 2

3 Onelan NTB 7.0x Tutorial: creazione del primo layout 1.1 introduzione Capitolo 1 -- Un Sistema di Digital Signage Con la Guida Rapida precedente abbiamo installato il dispositivo Onelan Net Top Box e, dopo averlo configurato abbiamo ottenuto un sistema di Digital Signage stand alone, ciò significa che una volta inseriti i contenuti, definite le modalità di visualizzazione e programmati i tempi di queste ultime, il sistema funzionerà in modo indipendente. Ma, qual è lo scopo di questo sistema? Lo scopo è quello di inviare i nostri messaggi, siano essi istituzionali, commerciali o semplicemente informativi al più ampio numero di utenti possibile, che si trovi nelle vicinanze del dispositivo NTB, quindi del nostro eventuale punto vendita o nei paraggi. Con questo tutorial ci poniamo l obiettivo di accompagnarvi passo per passo durante la creazione di uno scenario che ci consentirà di trasmettere alcuni messaggi multimediali al pubblico che osserverà lo schermo del nostro Onelan NTB. 1.2 definizione di Digital Signage System Dobbiamo qui definire cos è un sistema di Digital Signage. Il significato letterale si traduce in segnaletica digitale, quindi un sistema di questo tipo si occupa di segnalare ai potenziali utenti, informazioni che riguardano il nostro o i nostri prodotti o servizi allo scopo di farci conoscere dal pubblico, per ottenere ciò dovremo creare dei Layouts detti anche Scenari, ovvero configurazione di zone grafiche disposte su un campo visivo digitale come monitor LCD, VideoWalls, Display a LED di grande formato, Totem in punti informativi ecc. Queste zone, potranno contenere diversi messaggi multimediali quali video, immagini, animazioni, testo e quant altro serva per inviare una comunicazione ad un determinato pubblico di utenti. Un esempio di Layout è visibile in figura 1.1 Fig. 1.1 un Layout contenente messaggi multimediali Come si può notare nella figura 1.1, questo Layout è composto da 5 zone che trasmettono contenuti multimediali come si è scritto in precedenza, esse sono disposte su un campo visivo con rapporto a 16:9. A titolo conoscitivo aggiungo che, questo Layout è funzionante ad oggi nella sala demo di Digivision srl Milano, su un monitor da 42 per una dimensione di schermo di 1360x768 pixel. 3

4 Capitolo 2 -- progettazione di un nuovo layout 2.1 Scelta del tipo di messaggio da inviare Come prima operazione dobbiamo avere bene in mente quale prodotto o servizio intendiamo promuovere, da qui potremo decidere i contenuti da abbinare perché il messaggio arrivi chiaro all utenza a cui è destinato. Supposto quindi che ci occupiamo di promuovere per esempio viaggi e vacanze, dovremo creare un layout che contenga, un video che richiami un luogo o momento di vacanza, una serie di immagini che mostrino i particolari del luogo al quale si riferisce la nostra offerta, un animazione che attiri l attenzione dei nostri potenziali clienti e li trattenga ad osservare il messaggio sullo schermo, e anche, perché no, un paio di zone contenenti informazioni in forma di testo come notizie i tempo reale e altro. 2.2 Creazione del Layout Deciso ciò eseguiamo l accesso al nostro NTB con l utilizzo di un qualsiasi browser nel nostro caso utilizziamo Internet Explorer, digitando nella barra degli indirizzi l IP del nostro dispositivo. Autentichiamoci digitando il nome utente remote e la password 9999 quindi nel menu della homepage selezioniamo Layouts / Manage Layouts come visibile in figura 2.1. Fig. 2.1 Una volta nella Pagina Manage Layouts clicchiamo sulla scheda Aggiungi Layout nella casella Nome Layout digitiamo MioPrimoLayoutTest, quindi confermiamo cliccando sul bottone Aggiungi. come in figura 2.2 Fig

5 Appena avremo confermato saremo indirizzati alla pagina contenente la lista dei Layouts dove troveremo il nostro nuovo layout vuoto. Nota: quando si hanno molti Layouts nella pagina, diventa difficile individuarne uno specifico, a questo proposito vi suggerisco di utilizzare il bottone Filter per ridurre i tempi di ricerca, nel nostro caso possiamo utilizzare come filtro la dicitura Mio. Figure 2.3 e 2.4 fig. 2.3 Fig. 2.4 Ora selezioniamo il nuovo layout cliccando sul nome dello stesso, figura 2.5 Fig. 2.5 A questo punto verremo indirizzati alla pagina di editing Layouts, dove potremo inserire le zone che conterranno i nostri messaggi. Qui ci troviamo nel cuore del sistema, a mio avviso la funzione più importante di tutta la procedura, infatti è in questo punto che determineremo se l interfaccia verso il nostro potenziale cliente sarà efficace ed accattivante. Nel prossimo paragrafo inseriremo all interno del layout le zone che ci siamo prefissati. 5

6 2.3 Posizionamento zone nel Layout Come anticipato in precedenza, facendo click sul nome del nostro nuovo layout, verremo indirizzati alla pagina di editing, dove in modalità Drag & Drop potremo preparare il nostro scenario. Figura 2.6 Fig. 2.6 Per una visione più agevole e possibile ridurre lo zoom della visuale al 50% e trascinare con il mouse le due zone Elenco Aree e Proprietà Area sempre in figura 2.5 Prima di proseguire nell editing del Layout è necessario dare uno sguardo a come inserire i contenuti nell NTB. Potete usare i contenuti del tutorial che troverete nel cd allegato o in mancanza di questo, facendone richiesta a lab@digivision.it. Eseguiamo l accesso a NTB in modalità FTP (File Transfer Protocol) agendo come segue: apriamo una nuova istanza di Internet Explorer e nella barra degli indirizzi digitiamo ftp:// oppure l IP del nostro NTB. Ci troveremo cosi nella zona FTP del dispositivo, dove, come normalmente si fa con windows a altro sistema operativo, nella cartella remota media creeremo una nuova sottocartella chiamata MioNuovoLayout quindi vi trascineremo dentro la cartella Contents del C.D. Rom fornito da Digivision in dotazione con NTB. Vedi figura 2.7. Fig

7 Adesso abbiamo a disposizione alcuni contenuti multimediali che ci consentiranno di proseguire in questo tutorial per la creazione di un primo Layout. Da notare che, il fondo del layout demo è stato disegnato per uno schermo SVGA/DVI con risoluzione di 1360x768 pixel, se il vostro schermo supporta una diversa risoluzione, dovrete modificare il file NpexFondo5_1360x768.png nella cartella Contents riducendolo o ingrandendolo di conseguenza, usando programma di grafica come Adobe Photoshop o altro, questo per evitare inestetismi al nostro Layout. Torniamo quindi alla schermata di figura 2.5 e nella zona Elenco Aree clicchiamo sul bottone Aggiungi Area. Questa azione creerà una zona grande quanto il nostro schermo denominata Zone A di colore azzurro chiaro, a indicare che il media supportato da questa zona sono le immagini. Figura 2.8 Fig. 2.8 In questa zona posizioneremo un solo media e cioè la nostra immagine di fondo, che farà da guida per tutte le altre zone che comporranno il Layout. Clicchiamo quindi sul bottone Salva le modifiche e Modifica la lista di riproduzione che si trova nella zona Proprietà Area visibile in figura 2.8. Quest ultima azione ci condurrà direttamente nella pagina di editing delle aree, nello specifico editeremo l area A, qui clicchiamo sulla scheda File e Cartelle quindi sul link MioNuovoLayout infine sul link Contents avremo quindi la situazione di figura 2.9 7

8 Fig. 2.9 Ora clicchiamo sul bottone Aggiungi in corrispondenza del file NetPexpFondo5_1360x768.png per inserire questa immagine di fondo nell area A. Clicchiamo ora sulla scheda Lista di Riproduzione e successivamente eliminiamo l immagine di default cliccando sulla crocetta rossa corrispondente, prestate attenzione a non eliminare l immagine che avete appena inserito, ma solo quella con il suffisso default vedere figura 2.10 Fig Adesso clicchiamo sul link del nome del layout per ritornare alla pagina editing Layout dove troveremo la situazione di figura

9 Fig A questo punto possiamo inserire la varie zone negli appositi spazi cliccando sul bottone Aggiungi Area per ogni nuova zona e con l uso del mouse trascinarla e ridimensionarla nella sua posizione fino ad ottenere il risultato di figura 2.12 Fig

10 Soffermiamoci a questo punto un attimo per fare una precisazione riguardante il codice colore di NTB. Si suppone che stiate leggendo questo documento pdf in un PC e che quindi siate in grado di distinguere la colorazione delle zone, che non è a caso, ma ogni colore determina il tipo di contenuto che sarà visualizzato in ogni zona. Per completezza li elencheremo qui e sono comunque distinguibili in figura Quindi: Nelle zone di colore rosso il contenuto sarà video Mpeg files WMedia files Nelle zone di colore giallo il contenuto sarà Testo scritte, RSS feed, ecc Nelle zone di colore verde chiaro il contenuto sarà HTML pagine Web, Flash Nelle zone di colore verde scuro il contenuto sarà Animazione files di Power point Nelle zone di colore azzurro il contenuto sarà Immagini Tiff, Jpeg, Bmp, Png ecc A questo punto la disposizione delle zone nel Layout è completa, possiamo quindi cliccare sul bottone Salva le modifiche e Modifica la lista di riproduzione per passare alla gestione inserimento contenuti che osserveremo nel capitolo 3. 10

11 Capitolo 3 i Contenuti nelle zone di riproduzione 3.1 inserire Contenuti multimediali Siamo ora nella pagina di inserimento dei contenuto dove potremo editare ogni singola lista di riproduzione o Playlist nelle zone. Per iniziare clicchiamo sull area B di colore rosso ed eliminiamo il contenuto che il sistema inserisce di default al momento della creazione, quindi clicchiamo sulla scheda File e Cartelle, ora dovremo trovarci nella cartella Home/media/MioNuovoLayout/Contents che dovrebbe solo visualizzare i contenuti video, dato che questa zona accetta solo tale formato. Come in figura 3.1 Fig. 3.1 Clicchiamo allora sul bottone Aggiungi alla sinistra del file Baloo.mpg per inserirlo nell Area B Successivamente clicchiamo sull area A testo in alto nel Layout e in Lista di riproduzione clicchiamo sul bottone Modifica e modifichiamo il testo come il seguente Questo testo vi informa che da oggi 2 aprile 2009 i bambini sotto i 5 anni viaggiano gratis se accompagnati da uno dei genitori, quindi modifichiamo la velocità di scorrimento nell area StileTesto e il colore dello stesso nell area Colore Carattere se lo desideriamo infine salviamo cliccando sul bottone Salva Modifiche vedi figura

12 Fig. 3.2 Facciamo ora click sull Area E immagini ed eliminiamo il contenuto di default nella scheda Lista di Riproduzione, quindi clicchiamo sulla scheda File e Cartelle Se ci troviamo nella cartella corretta e cioè Home/media/MioNuovoLayout/Contents dovremmo avere la lista delle immagini da inserire in questa Area. Tralasciando il file NpexpFondo5_1360x768.png che è l immagine usata per lo sfondo possiamo aggiungere in sequenza le altre immagini, facendo click sul bottone Aggiungi posto alla sinistra di ognuno di essi, avremo così anche per questa zona una sequenza di contenuti multimediali da visualizzare. Figura

13 Fig. 3.3 Clicchiamo ora sulla zona D testo e con le stesse operazioni effettuate precedentemente per la zona A testo, sostituiamo il testo di default con il seguente, Questo week end offriamo soggiorno a Parigi per 2 Persone con pernottamento in hotel 3 stelle e colazione a soli Euro 225,00 a persona, anche per questa zona possiamo se lo vogliamo modificare velocità di scorrimento, colore del testo ecc. e quindi confermare le modifiche cliccando sul Bottone Salva Modifiche vedi figura 3.4 Fig

14 L ultima zona che ci rimane da elaborare è la zona F che ha come contenuto file HTML attivo, cio significa che possiamo inserirvi sia pagine web attive provenienti da sit in internet che animazioni Flash, nel caso specifico inseriremo animazioni Flash. Clicchiamo quindi su di essa e poi sulla scheda File e Cartella nella quale ci verranno visualizzati due file che contengono animazioni flash, inseriamoli entrambe in sequenza cliccando sul bottone Aggiungi alla sinistra di ognuno di essi. A questo punto se lo riteniamo necessario nella scheda Lista di Riproduzione cliccando sul bottone Modifica possiamo variare il tempo di riproduzione ed altri valori per i rispettivi files di animazione Flash. Vedi figura 3.5 Fig. 3.5 Ora è possibile mettere in onda il nostro nuovo layout facendo click sul bottone Layout Audition che è visibile in figura 3.6 Fig

15 A questo punto il nostro nuovo layout in onda da NTB dovrebbe essere simile a quello visualizzato in figura 3.7 Fig

16 Capitolo 4 Interattività con Touch Screen (Opzionale) 4.1 Touch Screen e dintorni Una delle caratteristiche importanti del sistema di Digital Signage Onelan NTB, è sicuramente la possibilità di interagire con il dispositivo attraverso un Touch Screen, sia esso a Infrarossi, Capacitivo, o altra tecnologia basata su elettronica USB, se il nostro dispositivo ne è provvisto. Con questo sistema saremo in grado di inviare comandi all NTB, che lo abiliteranno ad eseguire per esempio, cambi di Layouts, navigazione all interno di uno o più siti web, con la possibilità di rientrare al Layout originale qualora per un tempo deciso da noi ad esempio 60s., nessun altro toccasse lo schermo. Come tutto ciò può essere implementato in Onelan NTB lo discuteremo nel prossimo paragrafo. 4.2 Interazione tra zone e Touch Screen Osserveremo in questo paragrafo come ottenere l interazione fra il Touch Screen e le zone dell NTB, e per farlo utilizzeremo il nostro Layout dimostrativo MioPrimoLayoutTest. Iniziamo quindi l esperienza Interattiva con il nostro NTB, per cui, effettuiamo il login all NTB, utilizzando Internet Explorer o altro browser, e dopo aver inserito lo user name e la password come di consueto, saremo indirizzati alla Home Page di NTB. Qui dovremo individuare il nostro layout come indicato sopra, successivamente dovremo fare un click su una delle zone colorate, e più precisamente la zona che vogliamo collegare al nostro Touch Screen. Prendiamo come esempio la zona E che contiene una galleria di immagini, facciamo quindi click su di essa vedi figura 1.4 Fig

17 Questa azione ci condurrà nella pagina di modifica delle zone, dove cliccheremo sulla scheda Valori Speciali, qui potremo assegnare alla zona E del nostro layout una delle interattività con il Touch Screen collegato al sistema. Nello specifico aggiungeremo l azione On Touch Screen Event Change Layout: e dopo aver modificato il nome del Layout da riprodurre in Agency, Layout questo presente nella dotazione di base di Onelan NTB, clicchiamo sul bottone Aggiungi, come si vede in figura 2.4 Fig. 2.4 Adesso se manderemo in onda il nostro Layout facendo click sul bottone Layout Audiction come mostrato in figura 3.4, potremo eseguire un test della funzione Change Layout dell opzione Touch Screen, toccando l area dello schermo corrispondente alla zone E quindi osserveremo infatti, come il layout in onda venga sostituito dal Layout denominato Agency che vi ricordo è compreso tra quelli già a corredo nel sistema NTB. Fig

18 Conclusioni In questo tutorial abbiamo imparato a creare un Layout da mettere in onda sullo schermo di Onelan NTB allo scopo di inviare messaggi digitali verso il pubblico che si trovi nelle vicinanze del punto informativo, sia esso locale pubblico, vetrina ecc. Abbiamo anche osservato quanto sia veloce e facile implementare i Layouts una volta acquisito la padronanza nell uso dell NTB, ma non è tutto qui, molto ancora c è da scoprire sull utilizzo di questa incredibile risorsa tecnologica, non è possibile purtroppo inserire in queste poche righe tutte le potenzialità del dispositivo, ma possiamo per conoscenza elencarne alcune. - Possibilità di visualizzare in una zona una parte o tutta una pagina web da internet - Possibilità di leggere i Feeds RSS da siti come Repubblica.it e Giornale.it ed avere la notizie in real time - Implementazione di dispositivi Touch Screen per rendere interattivo il dispositivo Onelan NTB con il quale sarà possibile persino navigare per siti internet (opzionale) - Implementazione di comandi provenienti da apparecchiature seriali RS232 come sistemi di gestione code, sensori da pavimento, da parete ecc. Digivision srl Milano coordinate a piè pagina, distribuisce per l Italia il dispositivo Onelan NTB e potrete contare sul supporto di personale tecnico specializzato con la preparazione e la professionalità che da sempre la contraddistingue nel settore della comunicazione. Nella convinzione di esservi stati di aiuto il supporto tecnico Digivision. 18