Realizzare un chiosco multimediale web con Raspberry
In questo articolo ti spiego come realizzare un chiosco multimediale web utilizzando un Raspberry Pi come computer client, e un monitor touch per visualizzare i contenuti e interagire con l’interfaccia.
Ma che cos’è un chiosco multimediale ?
Beh, in generale un chiosco multimediale non è altro che un dispositivo che permette la fruizione di contenuti in modo controllato.
Cosa significa in modo controllato?
Significa che il chiosco all’accensione visualizza una pagina iniziale prestabilita e da lì l’utente può interagire solo con gli elementi attivi della pagina che sono stati previsi; essi possono essere: bottoni, immagini, moduli. L’utente non potrà mai uscire dai percorsi prestabiliti, né potrà aprire altre applicazioni. Di fatto è come un computer che può eseguire solo un programma, e da questo programma non è consentito uscire.
Il chiosco multimediale permette l’utilizzo di un’interfaccia utente minimale, ridotta all’osso proprio per non distrarre l’utente, per permettergli di fare solo ciò per cui l’interfaccia è stata progettata, e per farlo nel modo più semplice e immediato.
I chioschi multimediali sono molto presenti nella nostra vita di tutti i giorni, anche se spesso non ci facciamo caso. Pensate al bancomat, al sistema di prenotazione delle code al supermercato o in posta, ai distributori di benzina.
Li vediamo spesso sotto forma di strutture chiamate totem multimediali, di ogni forma e dimensione.
Lo scopo del progetto: fruizione di documenti PDF via Web
Il progetto specifico che mi ha portato a necessitare di un chiosco multimediale riguarda un sistema per la consultazione di documenti PDF a bordo macchina in diversi punti nella linea di produzione di fabbrica.
Di questo progetto software ne parlo nell’articolo Visualizzare PDF con HTML 5
In questo articolo parlerò solo di come creare un chiosco multimediale.
La scelta dei componenti hardware principali
La scelta tecnologica è dettata da alcune caratteristiche qualitative che si voleva per forza ottenere:
- possibilità di avere uno schermo grande, almeno (dai 24 pollici in su), di alta qualità, luminoso e adatto agli ambienti industriali, quindi utilizzabile anche con i guanti
- utilizzo di interfaccia touch
- economicità e snellezza della soluzione
Il vincolo è dettata dalla grandezza e qualità dello schermo che avrei voluto raggiungere. Se inizialmente avevo pensato ad un tablet, ben presto ho accantonato l’idea dato che al massimo i tablet arrivano a una dimensione di 14″, e non sono pensati per un uso industriale. Tablet industriali ne esistono ma o costano una follia o sono di produzione cinese di dubbia qualità.
La soluzione chiaramente prevede l’utilizzo di un monitor touch di ottima fattezza, unito a un qualche dispositivo in grado da comportarsi da chiosco.
Il monitor è uno schermo capacitivo multi-touch a 10 punti pensato per l’uso industriale. Questo dignifica che può essere utilizzato con le mani nude, con i guanti o con uno stilo.
E’ compatibile con Windows, Mac, Linux e Android. non richiede l’installazione di alcun driver per il riconoscimento dell’interfaccia touch. Basta collegare il cavetto USB al PC e l’interfaccia touch funziona da subito.
Può essere montato su qualsiasi supporto compatibile con VESA 100mm, o tramite delle staffe in dotazione anche in un cabinet chiosco.
Trovato il monitor dovevo trovare il dispositivo e il sistema per farlo funzionare come un chiosco.
Collegare un mini PC è fattibile, ma spendi almeno €500 a pezzo per l’hardware. Più devi acquistare qualche soluzione software che ti crea il chiosco.
Mi sono detto:, “perchè non proviamo con Raspeberry ?” costa di listino circa €50, ma insieme agli accessori che servono (alimentatore, cavo HDMI, case di plastica, Scheda SD, dissipatori) si arriva a circa €160.
Fermiamoci un secondo, ti spiego cos’è il Raspberry.
Cos’è il Raspberry Pi ?
Raspberry Pi è un single-board computer, ovvero un computer a scheda singola, e può essere considerato un “mini computer”.
E’ sviluppato dalla Raspberry Pi Foundation e consiste in una unica scheda in silicio e che comprende tutti i componenti essenziali al funzionamento di un computer.
E’ costituito da una piccola scheda madre su cui sono presenti:
- un processore ARM a 64 bit
- un banco RAM. disponibili in diversi tagli: 2GB, 4GB e recentemente anche 8 GB
- una porta per di alimentazione di tipo USB-C
- due uscite video Mini HDMI con risoluzione fino a 4K
- un’uscita jack audio da 3.5mm
- due porte USB 2.0
- due porte USB 3.0
- un modulo Wi-Fi integrato (5 Ghz)
- un modulo bluetooth 4.2
- una porta Ethernet Gigabit
- un lettore SD Card utilizzato come “Hard Disk”
- 40 linee GPIO (General Purpose Input Output), linee digitali programmabili per interfacciarsi con il mondo esterno.
Esistono diversi modelli in commercio. Il più recente è il Pi 4 Model B.
Il Rapsbery Pi 4, quello utilizzato per il mio progetto, è un modello con solo 2GB di RAM. Esistono però in commercio versioni con tagli di memoria RAM da 2GB, 4GB e anche 8GB.
Le dimensioni del Pi4 sono : 88 x 58 x 19,5 mm e un peso di 46 grammi.
Le sue dimensioni sono così ridotte da poterlo tenere comodamente sul palmo di una mano.
Raspberry Pi 4 si può acquistare dal sito ufficiale attraverso i distributori, e sicuramente conviene, acquistando poi gli accessori su Amazon. Ma i tempi di consegna sono attualmente molto lunghi. Consiglio quindi di acquistare tutto su Amazon. Esistono dei kits che contengono oltre alla scheda, anche: il case di plastica, l’alimentatore, il cavo video HDMI, i dissipatori e la ventola, la SD card da 32 GB.
Il costo su Amazon dell’intero kit è di circa €160 per il “Model B” da 4GB.
1. Assemblare il Raspberry
Di seguito ti scpiego passo passo come procedere per trasformare il tuo Raspberry in un chiosco.
Se hai acquistato solo Raspberry puoi saltare questo passaggio, se invece hai acquistato il kit Il primo passo è:
1.1 Applicare i dissipatori
E’ bene aver cura di toccare la scheda meno possibile con le mani nude. E’ consigliato afferrarla dai bordi o meglio ancora con dei guanti in lattice, questo per scongiurare l’eventuale danneggiamento dei micro componenti elettronici dovuto al passaggio di cariche elettrostatiche accumulate dal nostro corpo o dai nostri vestiti.
Nel kit sono presenti 3 piccoli dissipatori metallici dotati di biadesivo. Vanno semplicemente spellicolati e applicati con delicatezza sui principali chip della scheda.
1.2 Inserire Raspberry nel case di plastica
I case sono di solito assemblabili a pressione. A volte come nel mio caso, ci sono 4 viti per il fissaggio della scheda al case. il video seguente spiega come sia semplice assemblare il tutto.
Il montaggio della ventola è opzionale. Consiglio di montarla se il rumore non è un problema.
Il modo più semplice per collegare la ventola è connetterla direttamente all’alimentazione da +5V attraverso i pin 4 e 6 dei connettore GPIO.
1.3 Scaricare il sistema operativo e caricarlo sulla SD card
Nessun computer può funzionare senza un sistema operativo. La prima cosa da fare quindi è scaricare e installare uno dei possibili sistemi operativi che sono supportati da Raspberry Pi 4.
Il Sistema operativo ufficiale si chiama Raspbian. Utilizzeremo proprio questo.
Per poterlo trasferire sulla SD Card utilizzeremo il software Raspberry Pi Imager. Questo in realtà può fare tutto in una unica operazione, ovvero scaricare il sistema operativo e scriverlo nella SD Card, niente di più facile quindi.
Apri il sito https://www.raspberrypi.com/software
Scarica il software per Windows, oppure per Mac o Ububtu x86, a seconda del sistema operativo che stai utilizzando sul tuo PC, e installalo.
Fai click su SCEGLI ISO e scegliamo Raspberry Pi OS (other) e successivamente Raspberry Pi OS Lite (32-bit).
Inserisci la SD Card nel PC; se non hai un lettore di SD Card puoi acquistare per pochi un adattatore USB su Amazon.
in Pi Imager Alla voce: “Scheda SD” scegli la lettera dell’unità a cui corrisponde la SD Card appena inserita.
Fai click su SCRIVI per avviare la scrittura del sistema operativo sulla SD.
1.4 Prima accensione del Raspberry
Togli la SD Card dal pc e inseriscila nel Raspberry.
Collega al Raspberry:
- Una tastiera USB
- un monitor tramite il cavo Mini-HDMI to HDMI
- l’alimentatore USB-C
- il cavo Ethernet a una rete con accesso a internet
Accendi il Raspberry agendo sull’interruttore. Di fatto basta dare corrente alla USB-C, non c’è un vero e proprio interruttore.
All’accensione, il Raspberry riorganizza le partizioni della SD Card, e fa un primo riavvio. Ci vorrà qualche minuto affinchè sia possibile accedere.
Alla fine comparirà la scritta raspberry pi login:
Accedi con username: pi
password: raspberry
2. Configurazione Raspberry passo passo
2.1 Abilitazione di SSH (opzionale)
N.B.: Questo capitolo è opzionale!
Se preferisci collegarti al Raspberry da un PC via SSH anzichè collegarlo a tastiera e monitor, puoi abilitare SSH in questo modo.
Una volta loggati in console ottenete l’indirizzo IP del vostro Raspberry con il comando
ifconfig
Nel mio caso l’indirizzo è 10.0.0.51
lancia il tool di configurazione raspi-config con questo comando
sudo raspi-config
Abilita SSH. Dal menù principale selezionate la voce 3 Interface Options e premi INVIO
E successivamente selezionate <Sì>
A questo punto puoi continuare la configurazione da un PC collegandoti via SSH con il programma putty. Scarica e lancia PuTTY. Inserisci nel campo “Host name (or IP address)” l’indirizzo IP precedentemente ottenuto. Nel mio caso è 10.0.0.51 e clicca su OPEN per stabilire la connessione.
Effettua il login sempre con utente: pi e password: raspberry tutto minuscolo.
2.2 Aggiornamento dei pacchetti
Se il Rapsberry è collegato a una rete con accesso a internet esegui l’aggiornamento dei pacchetti con alcuni semplici comandi.
Aggiorna prima di tutto il tool di configurazione “raspi-config” con il comando:
sudo raspi-config
Apparirà il seguente menù dal quale possiamo configurare molte cose.
La guida ufficiale completa a raspi-config la puoi trovare qui The raspi-config Tool
Come ci si muove in raspi.config ?
Ci si sposta nella varie opzioni con in tasti freccia, ci si sposta tra le scelte <Ok> e <Annulla> sempre con i tasti freccia o con il tasto Tab. Si torna alla schermata precedente con ESC e Infine si conferma con INVIO.
Seleziona la voce 5 Update e premi INVIO. Questa opzione aggiorna il tool raspi-config.
Raspberry scaricherà e installerà alcuni pacchetti dopodiché riaprirà il tool raspi-config in automatico.
Aggiorna ora tutti i pacchetti di Raspbian Lite con i comandi:
sudo apt-get update
sudo apt-get upgrade
ci vorrà qualche minuto per scaricare e installare tutti i pacchetti. al termine riavvia il Raspberry con il comando
sudo reboot
2.3 Impostazione di lingua e località
Ricollegati al raspberry, inserisci utente e password.
Rientra in
sudo raspi-config
scegli la voce 5. Localisation Options e poi INVIO
Scegli la prima voce L1 Locale e INVIO
ora compare questo elenco.
Scendi fino a trovare la voce it_IT.UTF-8 UTF-8 premi la barra spaziatrice per selezionarla, comparirà un asterisco a sinistra della voce
[*] it_IT.UTF-8 UTF-8
Consiglio di lasciare selezionata anche la voce [*] en_GB.UTF-8 UTF-8
seleziona <Ok> e dai INVIO
il sistema chiede conferma della scelta fatta come “locale” predefinita. Dopo qualche secondo si ritorna al menù principale.
Dal menù principale scegliere ancora 5. Localisation Options e INVIO
Questa volta scegli: L2 Timezone e INVIO
Scegli Europa e INVIO
Compare l’elenco dei fusi possibili per l’area Europa.
Seleziona Roma e premi INVIO. si viene riportati al menù principale.
Dal menù principale seleziona ancora una volta 5. Localisation Options e INVIO
questa volta seleziona L3 Keyboard
Dall’elenco successivo scegli “Generic 105-key PC (intl.)“
e poi “Italiana”
Nelle successive due schermati ti chieve chiesto quale tasto si cuole utilizzare in combinazione con altri tasti per comporre i caratteri speciali. Scegli in entrambi i casi: Alt destro (AltGr)
Come ultima domanda ti viene chiesto se vuoi associare alla combinazione di tasti Ctrl+Alt+Backspace l’uscita dal Server X, ovvero dall’ambiente grafico, per tornare alla console. Può essere utile attivarla in fase di debug, altrimenti ti consiglio di scegliere <No>
2.4 Impostare l’Autologin
Passo fondamentale se vogliamo che il chiosco all’accensione faccia qualcosa per noi in automatico è impostare l’autologin. Dal menù principale scegli: 1. System Options
e dal menù seguente scegli S5 Boot / AutoLogin
e infine scegli: B2 Console Autologin
2.5 Presenza rete all’avvio (Network at Boot)
Per garantire che che il dispositivo attenda la presenza della rete prima di avviarsi lancia raspi-config e vai alla voce:
1.System Options –> S6 Network at Boot
e scegli <Sì>.
2.6 Eliminare la cornice nera a video
A questo punto collega il monitor che intendi utilizzare realmente in produzione e verifica se compare o meno una cornice nera tutta intorno tra l’output a video e l’area visibile del monitor. Per capire meglio cosa intendo dire guarda la seguente immagine.
Se questa cornice è presente, si può eliminare disabilitando l’overscan. Segui i passi seguenti.
Dal menù principale entra nel sottomenù: 2 Display options
e poi: D2 Underscan
Seleziona <No> come opzione
3. Installazione delle librerie grafiche
Solitamente l’ambiente grafico di una distribuzione GNU/Linux è costituita da quattro parti:
- server X (solitamente X.Org)
- Window manager (Openbox, XFWM, …)
- Ambiente Desktop (PIXEL, LXDE, MATE, …)
- Login manager (for example LightDM)
Noi avremmo bisogno solo di lanciare un browser web chiamato Chromium (https://www.chromium.org/). Chromium è un web browser libero creato da Google. Sfrutteremo proprio questo browser come navigatore.
Non sarà quindi necessario installare tutti i pacchetti sopra citati, dato che non avremmo un vero e proprio ambiente desktop. Sarà sufficiente installare:
- x-server-xorg è il server di X Window, il motore che fornisce l’interfaccia utente grafica
- x11-xserver-utils librerie a corredo del sever X per gestire le periferiche di input/output tra cui tastiera, mouse, monitorm etc
- xinit (https://wiki.debian.org/xinit), il programma che viene usato per viene usato per avviare il server X e un primo programma client
- openbox (https://wiki.debian.org/Openbox), il gestore di finestre
il tutto si installa con una sola riga di comando:
sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox
4. Installazione di Chromium
Infine Installa il browser Chromium, con il comando seguente:
sudo apt-get install --no-install-recommends chromium-browser
5. Configurazione di Openbox
Apri il file /etc/xdg/openbox/autostart con il comando
sudo nano /etc/xdg/openbox/autostart
sostituisci il contenuto del file con il seguente:
# Disable any form of screen saver / screen blanking / power management
xset s off
xset s noblank
xset -dpms
# Allow quitting the X server with CTRL-ALT-Backspace
setxkbmap -option terminate:ctrl_alt_bksp
# Start Chromium in kiosk mode
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
chromium-browser --disable-infobars --kiosk 'http://your-url-here'
le prime righe disabilitano il salvaschermo, e lo spegnimento automatico.
il secondo gruppo di righe impostano l’uscita dalla modalità grafica (Server X) con la sequenza di tasti CTRL+ALT+BACKSPACE
infine lultimo gruppo di righe imposta il lancio dei Chromium in modalità “Kiosk” ovvero a tutto schermo, senza mostrare: barra dell’ indirizzo, barra di stato, bottoni avanti/indietro cronologia navigazione, preferiti, etc… niente di niente se non il contenuto della pagina che vorrai far aprire. Sostituisci ‘http://your-url-here’ conl’indirizzo del tuo portale web che gestirà il chiosco.
5.1 Forzare la risoluzione dello schermo
Potrebbe essere utile forzare una particolare risoluzione dello schermo.
Basta aggiungere al file autostart la seguente riga, subito dopo il comando “xset -dpms”
xrandr -s 1280x720
5.2 Ruotare lo schermo
Volendo è possibile ruotare lo schermo di 90 gradi verso sinistra o verso destra. in questo modo si potrà avere un chiosco “verticale” come quelli del Mc Donald’s per capirci.
il comando da aggiungere al file autostart è:
xrandr -o left
L’iimagine sul monitor sarà ruotata di 90 gradi verso sinistra.
o anche combinato in una unica riga con il comando per la risoluzione schermo:
xrandr -s 1280x720 -o left
6. Configurazione di Chromium
Per ultimo diciamo a Chromium di aprirsi in modalità “chiosco” e senza visualizzare il puntatore del mouse, dato che l’interfaccia sarà uno schermo touch.
edita il file .bash_profile
sudo nano /home/pi/.bash_profile
attenzione: pi è il nome dell’utente di default di raspberry. Potresti aver configurato un altro utente, in quel caso i comando sarà:
sudo nano /home/altroutente/.bash_profile
copiaci dentro questi comandi
[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor
la condizione verifica che X venga avviato solo sulla prima console. L’autologin impostato precedentemete di fatto attiva la prima console, e quindi avvia automaticamente il server X.
ATTENZIONE: l’ultima parte del comando:, ovvero la stringa: -nocursor serve a NON far visualizzare il cursore. Questo è un bene se utilizzi un display toouchscreen; se invece intendi usare il mouse ti consiglio di eliminare questa stringa, altrimenti non capirai dove stai muovendo il puntatore del mouse.
7. Riavvia Raspberry
Riavvia il raspberry per rendere far partire il tuo chiosco multimediale.
sudo reboot now
Raspberry dopo il riavvio lancerà “Server X” e successivamente Chromium e farà aprire quest’ultimo in modalità chiosco all’indirizzo specificato alla fine del file /etc/xdg/openbox/autostart.
8. Utilizzo del Wi-fi (opzionale)
Se non vuoi utilizzare cavi ethernet puoi sfruttare la scheda wi-fi integrata di Raspberry.
Per agganciarlo alla tua rete wi-fi segui questi semplici passi.
sempre da raspi-config scegli il menù:
1.System Options –> S1 Wireless LAN
e digita il nome della tua rete:
Nella schermata successiva digita la password della rete wi-fi o lasciala vuota se non presente.
esci da raspi-config tool e riavvia Il sistema.
9. Conclusioni e prossimi sviluppi
La soluzione descritta è replicabile per gli usi più disparati.
Nel mio articolo Visualizzare PDF con HTML5
ti spiego come ho realizzato la parte del web-server e il visualizzatore di documenti PDF lato client.
Aiutami a sostenere questo blog
Se vuoi puoi aiutarmi concretamente a sostenere questo blog. Puoi farlo con una donazione libera, con carta di credito o paypal. Te ne sarò riconoscente.
10. Altre risorse
Vuoi un chiosco verticale ? guarda questo video
Altri trucchetti e risoluzione a diversi problemi che potresti incontrare:
Qui puoi guardare la mia intervista a SERVERLAB in cui parlo di questo progetto.
