Chiosco multimediale web con Raspberry pi e Debian 13 (Trixie)

In questo articolo e video ti spiego come realizzare un chiosco multimediale web basato utilizzando un Rapsberry pi 4 oppure 5 e un monitor touch.

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 web 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.

Questo Tutorial è aggiornato alla nuova versione di Debian 13 chiamata anche Trixie.

GUARDA IL VIDEO TUTORIAL SU YOUTUBE:

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.

1. Installazione del Sistema Operativo Raspbian su Scheda SD

Il primo passo è preparare l’SD card con il sistema operativo Raspbian per il tuo Raspberry.

Scarichiamo e installiamop il software Raspberry Pi Imager dal sito www.raspberrypi.com/software/

Avviamo il programma e seguiamo tutti i passaggi come descritto qui sotto:

Scegliamo il tipo di dispositivo di destinazione. Nel mio caso è un Raspberry Pi4

Scegliemo ora il sistema operativo. Fondamentale è NON scegliere le prime voci Raspberry Pi OS perché queste comprendono l’ambiente desktop con l’interfaccia grafica e tutti i principali programmi. Piuttosto noi sceglieremo la versione lite (solo console testuale, niente interfaccia grafica e niente ulteriori software aggiuntivi).

Per fare questo la prima scelta da fare è la voce: “Raspberry Pi OS (other)“:

La seconda scelta cadrà su Raspberry Pi OS LIte (64-bit).

Cliccando su AVANTI procediamo alla selezione della SD card che avremmo già precedentemente inserito nel nostro PC attraverso un lettore di SD card. La selezioniamo e facciamo click su AVANTI.

Ora andiamo a personalizzare l’installazione. La prima cosa che ci viene chiesta è l’hostname ovvero il nome a livello di rete che intendiamo dare al rapsberry.

Passiamo alla scelta dei parametri di localizzazione che imposteranno correttamente il suo orario e il layout di tastiera.

Ci viene chiesto il nome utente e la relativa password per l’autenticazione. Io lascio “pi” come nome utente e imposto una password mediamente complessa.

Opzionale ma consigliato !! Possiamo configurare direttamente in questa fase le impostazioni per l’accesso al wi-fi, così già dal primo riavvio potremmo scaricare gli aggiornamenti e i software che ci serviranno e potremmo anche collegarci via SSH dal nostro PC per lavorare pià agevolmente.

Inseriamo quindi il nome della rete (SID) e la password.

Abilitiamo SSH nella schermata successiva:

Lasciamo spenta l’opzione “Abilita Raspberry Pi Connect”.

Ci viene mostrato un riepilogo e ci chiede di confermare la scrittura su SD CARD:

Attendiamo la scrittura dei files e la verifica degli stessi. Al termine estraiamo l’SD card dal nostro pc e inseriamola nel nostro Raspberry. Colleghiamo al Raspberry pi il monitor e una tastiera e diamogli alimentazione elettrica.

ATTENZIONE!! : su certi monitor con alta risoluzione (WQHQ), i caratteri utilizzati per la console vengono visualizzati molto in piccolo e quindi risultano difficilmente leggibili. Per rendere i caratteri più grandi è possibile forzare una risoluzione minore per il terminale.

Per forzare una risoluzione minore del terminare editare il file:

sudo nano /boot/firmware/cmdline.txt

ed aggiungere sulla stessa riga presente nel file, alla fine , separata da uno spazio la seguente stringa

video=HDMI-A-1:1920x1080M@60

in questo caso abbiamo forzato una risoluzione si 1920 x 1080 pixels. Questo valore può essere anche modificato a seconda delle esigenze.

2. Aggiornamento di Raspbian

Al primo avvio il Raspberry farà un paio di riavvii dopodiché comparirà la schermata di login della console con la scritta “login:”. Se non compare digitare ENTER sulla tastiera.

Logghiamoci con l’utente scelto “pi” e la password. Se le impostazioni del wi-fi sono corrette dovremmo già poter navigare in internet. Scarichiamo e installiamo gli aggiornamenti di Raspbian con il comando:

sudo apt update && sudo apt upgrade -y

Ci metterà un po’ per scaricare e installare il tutto. Alla fine facciamo un riavvio con :

sudo reboot

Per comodità potremmo già impartire tutti questi comandi installando nel nostro pc il programma Putty e collegandoci all’indirizzo ip del nostro Raspberry. Per conoscere l’indirizzo ip che è stato assegnato al Raspberry digitare sul Raspberry il comando:

ip a

Nel caso di cui sopra un indirizzo (l’ultimo in basso) è quello dell’interfaccia di rete collegata al wi-fi, mentre il primo è quello dato dal collegamento di un cavo ethernet che avevo collegato al Raspberry.

3. Configurazione tramite raspi-config

Digitiamo il comando:

sudo raspi-config

per entrare nel tool di configurazione di Raspberry chiamato raspi-config.

Come prima cosa abilitiamo l’auto login dato che il chiosco non dovrà chiedere di autenticarsi. Entramo nel menù e confermiamo con YES:

1 System Options --> S6 Auto Login -->  Yes

Entramo nel men’ù della localizzaione:

5 Localization Options --> L1 Locale

Per l’italiano scorriamo in basso fino alla voce it_IT.UTF-8 UTF-8 e premiamo la barra per selezionare la voce corrispondente (viene messo un * a fianco alla voce) .

e premiamo INVIO

Attenzione, troveremo la voce: en_GB.UTF-8 UTF-8 già selezionata. Lasciamola selezionata!

Per confermare spostiamoci con il tasto TAB su <OK> e poi premiamo INVIO.

Nella schermata successiva ci viene chiesta quale lingua di default si vuole impostare per l’utente, Per impostare l’italiano premiamo freccia giù e selezioniamo it_IT.UTF-8 e INVIO.

A questo punto si torna al menù principale da cui usciamo da raspi-config cliccando su <Finish>.

4. Installazione del software necessario

Andremo ad installare del software che ci servirà per realizzare il nostro chiosco web, ovvero:

• 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
• Chromium, il browser di pagine internet

Installiamo il tutto con un unico comando:

sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox chromium -y

5. Impostazione del file hosts

Se la pagina che dovremmo visualizzare è hostato su un server in una intranet, è consigliato dire al raspberry dove si trova il server che vorremmo raggiungere. Ad esempio se il browser dovrà aprire la pagina http://miosito.local affinché possa risolvere il nome miosito.local andiamo a dirgli a quale indirizzo ip corrisponderà.

Apriamo il file in editing:

sudo nano /etc/hosts

e dentro mi mettiamo la riga:

10.0.0.2 miosito.local

sostituendo 10.0.0.2 con l’indirizzo reale del server

Importante!! Per impedire che le nostre modifiche vengano sovrascritte al riavvio, andiamo ad editare il file:

sudo nano /etc/cloud/cloud.cfg

cerchiamo la riga seguente e mettiamoci un bel # davanti per commentarla e quindi per disabilitare la riscrittura del file hosts

#  - update_etc_hosts

6. Controllo della connettività prima del lancio di Chromium

Creiamo uno script per il controllo della presenza della connettività di rete in modo che il chiosco si avvii solo se riesce a collegarsi fisicamente al server. Per fare questo editiamo un file con il comando:

sudo nano ~/.bash_profile

e al suo interno ci copiamo queste righe:

if [ -z "$DISPLAY" ] && [ "$(tty)" = "/dev/tty1" ]; then
until ping -c1 10.0.0.2 >/dev/null 2>&1; do
  echo "Attendo disponibilità  rete..."
  sleep 2
done
startx -- -nocursor
fi

sostituendo l’indirizzo 10.0.0.2 con quello del nostro server o con il nome del nostro sito. Questo breve script attende la presenza della comunicazione con il server prima di lanciare il motore grafico. Il comando:

startx -- -nocursor

serve a far aprire l’interfaccia grafica dentro cui verrà renderizzata la pagina di chromium.

L’opzione “– – nocursor” è opzionale e serve per nascondere il puntatore del mouse.

7. Configuriamo cosa visualizzare nell’interfaccia grafica

Come facciamo a specificare cosa visualizzerà l’interfaccia grafica una volta aperta?

Editiamo il file:

mkdir -p ~/.config/openbox
sudo nano ~/.config/openbox/autostart

e ci mettiamo al suo interno queste righe:

# modifica l'url che vuoi che il chiosco apra:
URL="http://miosito.local"   # occhio a non mettere spazi prima e dopo =

xset s off      # spegne screensaver
xset s noblank  # evita schermo nero
xset -dpms      # disattiva spegnimento HDMI

# Facoltativo: imposta risoluzione di interfaccia grafica ed eventualmente la rotazione dello schermo di 90 a sinistra
#xrandr --output HDMI-1 --mode 1280x1024 --rotate left

# Facoltativo: permette di chiudere il server X premendo CTRL-ALT-Backspace
setxkbmap -option terminate:ctrl_alt_bksp

# Lancia Chromium in modalità chiosco
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/Preferen>
chromium --disable-infobars \
  --disk-cache-size=1 \
  --disable-pinch \
  --overscroll-history-navigation=0 \
  --kiosk "$URL"

Andando a modificare l’url da aprire

ATTENZIONE!!

l’opzione –overscroll-history-navigation=0 dovrebbe servire ad evitare che facendo swipe a destra o a sinistra, chromium avanzi o indietreggi nella cronologia

Questo parametro non funziona più sulle ultime versioni di chromium, per cui il work-around che tisuggerisco, se hai il controllo sui contenuti del sito, è quello di

Aggiungere nella pagina web questo CSS:

html, body {
overscroll-behavior-x: none; /* server per evitare lo swipe history back e forward su chromium */
}

8. Riavvio

Abbiamo finito. riavviamo il Raspberry con il comando:

sudo reboot

e dopo il boot dovremmo vedere visualizzata la pagina del chiosco a tutto schermo.

9. Disabilitare il bluetooth

Se non viene utilizzato potrebbe essere utile alla stabilità dle raspberry disabilitare il bluetooth con il comando:

sudo systemctl disable bluetooth

10. (Facoltativo) Personalizzare il bootloader

Se volessimo rendere il nostro chiosco ancora più professionale, potremmo fare in modo che all’avvio, anziché vedere tutte quelle scritte tipiche del boot di rapsbian, compaia un’immagine anostra scelta con una progress bar che avanza, sino a che non viene aperto chromium.

Per fare questo installiamo il pacchetto plymouth che è software open source per sistemi Linux che gestisce la grafica durante l’avvio (boot), mostrando animazioni o loghi (bootsplash) al posto dei messaggi di testo. Installiamolo con i comandi:

sudo apt update
sudo apt install plymouth plymouth-themes -y

Abilitiamo lo splashscreen di plymouth modificando il file:

sudo nano /boot/firmware/cmdline.txt

aggiungendo alla fine dell’unica riga presente nel file, separata da uno spazio, ma sempre sulla stessa riga, la stringa:

quiet splash plymouth.ignore-serial-consoles

Ora visualizziamo l’elenco dei temi già preinstallati con il comando:

plymouth-set-default-theme --list

Appare un elenco tipo questo:

bgrt
details
fade-in
glow
mytheme
script
solar
spinfinity
spinner
text
tribar

Abilitiamo uno dei temi presenti, ad esempio il tema spinfinity che è proprio quello che ha già la funzionalità della barra di progresso durante il caricamento. Attenzione che ogni tema ha diversi modi di funzionamento in base alla tipologia.

Abilitiamo il tema spinfinity con i comandi:

sudo plymouth-set-default-theme spinfinity
sudo update-initramfs -u

Riavviamo con

sudo reboot

Ora il tema è abilitato e all’avvio mostra uno sfondo statico di colore blu con al centro il logo debian e con una animazione, ma non una immagine. Questo è il tema spinfinity così senza modifiche.

Per impostare una immagine di sfondo caricare nella cartella del tema, in questo caso nella cartella /usr/share/plymouth/themes/spinfinity

un’immagine dal nome: background-tile.png

che deve essere della stessa risoluzione precisa della risoluzione nativa nel monitor. Nel mio caso sarà un png di 1920 x 1080 pixels.

Prima va caricata su raspberry nella cartella /home/pi/ (dove pi è il nome utente che hai scelto all’inizio) utilizzando ad esempio un software come WINSCP

e poi va spostata col comando:

sudo mv background-tile.png /usr/share/plymouth/themes/spinfinity

Ma come fare per sapere quale risoluzione nativa ha il tuo monitor?

Digita il comando:

cat /sys/class/graphics/fb0/virtual_size

Nel mio caso stampa:

1920,1080

Ora per verificare se il tema appare correttamente, o riavvii il raspberry oppure senza riavviare ogni volta, esci da chromium premendo CTRL +Alt +BACKSACE e poi , da SSH puoi utilizzare i comandi:

sudo plymouthd
sudo plymouth --show-splash

e per interrompere l’anteprima:

sudo plymouth quit

Ricordati che ad ogni modifica della configurazione che farai, per rendere permanenti le modifiche sarà necessario sempre dare il comando:

sudo update-initramfs -u

affinché le modifiche abbiano effetto.

Per nascondere il logo debian al centro dello schermo sarà sufficiente sostituire il file /usr/share/plymouth/debian-logo.png con un logo png trasparente della stessa dimensione (121×150 pixels).

Come fatto precedentemente lo trasferiremo dal nostro PC in ./home/pi con WINSCP e poi lo sostituiremo con i comandi:

sudo mv /usr/share/plymouth/debian-logo.png /usr/share/plymouth/debian-logo_renamed.png 
chmod 644 ~/debian-logo.png
sudo cp ~/debian-logo.png /usr/share/plymouth/debian-logo.png

Come sempre alla fine per rendere effettive le modifiche va dato il comando seguente per rendere le modifiche permanenti:

sudo update-initramfs -u

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.