Un server di firma digitale su un Raspberry Pi: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Una guida assoluta per principianti alla Corsica su un Raspberry PI

I segni digitali sono ovunque. Li vedi negli aeroporti, nei centri commerciali, nei grandi magazzini e persino agli angoli delle strade. Non hai bisogno di molto costoso hardware personalizzato per costruire il tuo sistema di segnaletica digitale. Questo Instructable mostra come costruire un server di segnaletica digitale in grado di pilotare dozzine di display. Ogni display può essere semplice come un monitor e un Raspberry PI.

Grazie ai Node Ninjas di Mozilla puoi persino eseguire il server su un Raspberry Pi usando Corsica.

La Corsica è una soluzione di digital signage estensibile che può essere implementata sulla maggior parte dei sistemi POSIX. Consiste in un server e client di visualizzazione. Le macchine client non richiedono software speciale ed eseguono semplicemente qualsiasi browser Web moderno, sebbene tutti i membri del team di Corsica raccomandino vivamente Firefox. Il server consuma pochissime risorse e funzionerà felicemente su un Raspberry Pi o su un'altra macchina molto piccola. Un server Corsica in esecuzione su un Raspberry Pi 3+ può supportare facilmente più di 100 display client. Queste istruzioni sono scritte specificamente per un Raspberry Pi che esegue il sistema operativo Raspian (un derivato di Debian). Queste istruzioni presuppongono anche che tu stia utilizzando il browser Firefox. Dovrebbe funzionare anche la maggior parte degli altri browser moderni.

Passaggio 1: la riga di comando di Raspian

Queste istruzioni ti mostreranno come configurare la Corsica tramite la riga di comando. Se stai utilizzando Raspian con l'interfaccia utente grafica (GUI), accedi alla riga di comando tramite l'applicazione terminale. Se stai eseguendo Raspian-lite, puoi collegare una tastiera e un monitor e utilizzare direttamente la riga di comando, oppure puoi connetterti in rete utilizzando SSH. Per ulteriori informazioni su come abilitare e utilizzare SSH, vedere la documentazione di Raspian SSH. Dovrai conoscere il nome DNS o l'indirizzo IP del tuo Raspberry Pi. Il nome predefinito sulla maggior parte delle LAN sarà raspberrypi.local. Se ciò non funziona, ci sono istruzioni nella documentazione di Raspian che ti aiuteranno a scoprire il nome e l'indirizzo IP corretti.

Passaggio 2: installazione del software

La Corsica usa node e npm. Node consente di eseguire Javascript lato server e npm è il gestore di pacchetti del nodo.

Per installarli su un Raspberry Pi, controlla prima la versione del processore nel tuo sistema:

uname -m

Se il risultato inizia con armv6, vedere questo post sul blog. Per i sistemi Raspberry Pi 3 e altri con armv7 e processori successivi:

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -

sudo apt install nodejs

Se non hai familiarità con Node, puoi saperne di più su nodesource.com.

Quindi, installa gli strumenti della riga di comando della Corsica:

sudo npm install -g corsica-cli

Per vedere i comandi disponibili, digita

corsica --help

Al momento della stesura di questo documento i comandi disponibili sono:

setup-- per configurare un Corsica serverstart [opzioni] -- per avviare il Corsica server restart [opzioni] -- per riavviare un Corsica serverstop in esecuzione -- per fermare un Corsica serveradd-plugin [nome] -- per installare un pluginremove- plugin [nome] -- per rimuovere un pluginlist-plugins installato -- per elencare i pluginsupdate installati -- per aggiornare sia la Corsica che i suoi plugin

Ora puoi utilizzare gli strumenti per configurare il software Corsica:

configurazione corsica

Il setup della Corsica ti chiederà dove vuoi installare la corsica e ti mostrerà la posizione predefinita:

Dove installare Corsica: (/home/pi/corsica-server)

Puoi semplicemente premere Invio.

Vedrai alcuni messaggi di avviso di npm. Questi sono sicuri da ignorare.

Quando il setup dice "Fatto!", hai installato la Corsica.

Puoi avviare la Corsica nella tua sessione terminale con:

inizio corsica

E fermalo con control-C.

Ma se lo avvii in questo modo, funzionerà solo finché viene eseguita la sessione del terminale. Quando chiudi la sessione del terminale corsica si fermerà.

Se avvii la Corsica in background, funzionerà anche dopo aver disconnesso la sessione del terminale. Puoi farlo con

inizio corsica --background

Per interrompere un'istanza Corsica in esecuzione in background, digitare:

fermata corsica

Passaggio 3: configurazione

La tua configurazione avrà probabilmente bisogno di una personalizzazione. Ci sono due tipi di personalizzazione in Corsica: configurazione e impostazioni. La configurazione è per lo più statica e utilizzata dal core. Le impostazioni sono dinamiche e utilizzate principalmente dai plugin. Maggiori informazioni sulle impostazioni in seguito.

La configurazione proviene dall'ambiente ed è per cose molto statiche come la porta su cui ascoltare oi plugin da caricare. Ci sono quattro fonti per la configurazione:

1. lib/config.json - Qui è dove sono archiviate le impostazioni predefinite e un buon posto per vedere alcune delle cose che possono essere configurate. Non dovresti cambiare i valori qui.

2. config.js - Le impostazioni trovate in questo file vengono caricate come se provenissero dall'ambiente. La sintassi è una configurazione per riga, ad es. "PORTA=8080". Se i valori qui sono JSON validi, verranno analizzati come tali. Le impostazioni qui sovrascriveranno le impostazioni predefinite in `lib/config.json`. Il file config.js specifica inizialmente il numero di porta su cui la Corsica è in ascolto e i plugin utilizzati dal sistema.

3..env - Se il file nascosto denominato.env si trova nella directory Corsica, le sue impostazioni vengono caricate come se provenissero dall'ambiente. La sintassi è la stessa di config.js. Questo file non esiste nella configurazione predefinita.

4. Variabili d'ambiente: se si preferisce, è possibile inserire le informazioni di configurazione nelle variabili d'ambiente di sistema. Se non hai familiarità con le variabili di ambiente, puoi tranquillamente ignorare questa opzione.

Passaggio 4: collegamento degli schermi di visualizzazione

Una volta avviato, Corsica eseguirà un server Web sulla porta 8080 della tua macchina a meno che tu non abbia modificato il numero di porta nel file.env. Dovrai conoscere il nome host o l'indirizzo IP del tuo Pi. Il nome predefinito per una nuova installazione di Raspberry Pi è raspberrypi. Se non l'hai modificato, puoi semplicemente aprire un browser sul computer client di visualizzazione e accedere a:

raspberrypi.local:8080

Dovresti vedere il logo della Corsica giallo e nero. Apparirà una bolla con il nome Corsica del tuo cliente. Puoi (e dovresti) cambiare il nome del tuo cliente con qualcosa che indichi la posizione di questo particolare schermo. Il modo più semplice per farlo è usare corsica-repl di Potch. (Potch è uno dei principali sviluppatori della Corsica, e ha promesso di rifornire il centro della Corsica a breve).

Apri una scheda del browser e vai a:

potch.github.io/corsica-repl?server=https://raspberrypi.local:8080/

(Ciò presuppone che raspberrypi.local sia il nome del tuo Corsica Server).

Useremo "TestClient" come nome del client visualizzato per il resto di questo tutorial. Vai al menu a discesa nell'angolo in basso a destra dello schermo e trova il nome del cliente che è apparso. Quindi nella riga di comando in basso a sinistra dello schermo digita:

admin type=rinomina nome=TestClient

Lascia aperta la scheda corsica-repl e passa alla scheda del browser che mostra il logo della Corsica e aggiorna la pagina. Vedrai il nuovo nome nel fumetto pop-up. Se scompare troppo rapidamente, passa il mouse nell'angolo in basso a destra e il pulsante "Schermo intero" apparirà con il nuovo nome a sinistra.

Passaggio 5: aggiunta di contenuti

Dopo aver visualizzato il logo della Corsica il cliente visualizzerà alcuni animali dei cartoni animati su sfondo blu.

Il tag predefinito nel file state.json contiene un elenco di indirizzi di pagine Web. Puoi presentare qualsiasi pagina web in questo modo, anche se il layout di alcune pagine le rende meno adatte all'uso con la Corsica.

Un client Corsica visualizza il contenuto di uno o più tag a cui è abbonato. I nuovi clienti vengono già iscritti a un tag denominato "default".

Gli animali dei cartoni animati sono carini, ma aggiungiamo alcuni contenuti utili alla rotazione dello schermo sul nostro client di prova.

Torna alla scheda corsica-repl e nella riga di comando in basso a sinistra digita:

admin type=subscribe tag=meteo

Torna alla scheda del client di visualizzazione e aggiorna la pagina.

Le previsioni del tempo per San Jose, California, verranno aggiunte all'elenco degli URL visualizzati.

Il nostro file state.json di esempio contiene tre tag denominati "default", "weather" e "images". Il tag "images" contiene collegamenti a più file di grafica animale dei cartoni animati (.png). Aggiungiamoli tornando alla scheda corsica-repl e digitando:

admin type=subscribe tag=images

Di nuovo, torna alla scheda del client di visualizzazione e aggiorna la pagina. Vedrai alcuni nuovi animali aggiunti alla rotazione. Ma nota che i nuovi animali appaiono sul bordo sinistro della pagina con uno sfondo bianco. Questo perché le vignette con lo sfondo blu sono elencate in state.json come URL che puntano a una pagina web corretta scritta in html. I nuovi cartoni animati con gli sfondi bianchi sono elencati in state.json come URL che puntano solo ai file grafici-p.webp

Possiamo migliorare il modo in cui questi grafici vengono visualizzati dalla Corsica, ma per farlo dovremo "estendere" la Corsica stessa.

Fase 6: Estensione della Corsica

Sul sito web di npm sono disponibili più di una dozzina di plugin npm Corsica. Segui quel link e inserisci "corsica" nella casella di ricerca nella parte superiore della pagina per vederne un elenco. Useremo uno di quei plugin npm per farti visualizzare i nostri nuovi animali. È anche utile per visualizzare qualsiasi immagine che trovi sul Web, senza visualizzare elementi grafici che distraggono intorno all'immagine.

Vai alla riga di comando della Corsica, ferma la Corsica e installa il plugin corsica-image:

corsica add-plugin corsica-image

Quindi riavvia la corsica:

inizio corsica

Apri la scheda client display corsica sul tuo browser e aggiorna la pagina. Dovresti vedere i nuovi animali visualizzati al centro dello schermo con uno sfondo blu scuro.

Passaggio 7: personalizzazione dei contenuti

Diamo un'occhiata alla differenza tra ciò che fanno gli URL nel tag predefinito e quelli nel tag immagini. Dai un'occhiata a state.json andando alla riga di comando della Corsica e digitando:

cat ~/corsica-server/state.json

Nella sezione "predefinito" di quel file troverai una riga simile a:

"https://ramilewski.github.io/corsica-support/show.html?image=kitty.png", Questo URL è un collegamento a una pagina Web con un cartone animato di un gattino. Quella pagina Web visualizza un'immagine, ma fornisce anche uno sfondo che è un gradiente che inizia nella parte superiore della pagina come un colore blu e sfuma in bianco nella parte inferiore della pagina. Questo sfondo è creato dal CSS e dall'HTML della pagina web. Non fa parte della grafica stessa.

Le sezioni "immagini" della pagina hanno una linea simile a:

"https://ramilewski.github.io/corsica-support/bunny.png bg=#2244BB", Questo è un URL che specifica un collegamento all'immagine-p.webp

"#2244BB" è la notazione esadecimale per un colore blu scuro. Per uno strumento che ti aiuti a specificare qualsiasi colore in notazione esadecimale, vedere il Selettore colore MDN.

Nella visualizzazione di questa riga la Corsica ha utilizzato il plugin corsica-image per rendere la visualizzazione. Ciò significa che se trovi un'immagine che desideri visualizzare sui display del tuo client Corsica, puoi creare una riga in state.json che visualizzerà solo quell'immagine, ma non qualsiasi altro contenuto distraente della pagina circostante. Per trovare l'URL di un'immagine in Firefox, fai clic con il pulsante destro del mouse sull'immagine e seleziona "Copia posizione immagine" nel menu contestuale che appare.

La sezione "meteo" di state.json ha un solo URL. Questo recupera le previsioni del tempo da https://forecast.io. Ma a meno che tu non viva a San Jose, quella previsione non è molto utile. Per ottenere una previsione per la tua posizione devi conoscere la latitudine e la longitudine in gradi decimali. Se non lo fai, c'è uno strumento basato sul web che ti permetterà di trovarlo.

In questo momento l'URL nella riga in state.json che specifica le previsioni del tempo è simile a:

"https://forecast.io/embed/#lat=37.3352&lon=-121.8871&name=San%20Jose%20CA&color=#4466bb zoom=300"

Per ottenere la previsione per la tua posizione, modifica le voci lat e lon in quella riga e cambia il nome con la tua posizione. Usa %20 invece degli spazi nel nome del luogo. Il parametro color specifica il colore delle barre tra le alte e le basse temperature. Il parametro zoom viene utilizzato per regolare le dimensioni della previsione in modo che si adatti allo schermo del display.

Quando crei il tuo file state.json, ricorda che se hai un tag "predefinito", qualsiasi contenuto specificato in quel tag apparirà su qualsiasi browser che si connette al server senza ulteriore configurazione.

Tempo di visualizzazione

Nella parte superiore di state.json ci sono alcune impostazioni che controllano per quanto tempo ogni immagine viene mostrata sullo schermo.

"settings::timer": {

"resetTime": 30000, "jitter": 5000, Tutti i tempi sono misurati in millisecondi (millesimi di secondo). Il resetTime è il tempo massimo che ogni immagine rimane sullo schermo prima che venga visualizzata la schermata successiva. Il jitter viene moltiplicato per un numero casuale compreso tra -1 e 1 e il risultato viene aggiunto a resetTime. Ciò fornisce una certa varietà nei tempi di visualizzazione. Se lo desideri, puoi impostare il jitter su 0. Le impostazioni mostrate risulteranno in ciascuna pagina visualizzata per un tempo compreso tra 25 e 35 secondi.

Puoi anche impostare orari diversi per ogni client display:

"settings::timer": {

"resetTime": 30000, "jitter": 5000, "resetOnConnect": true, "screens": { "TestClient": { "resetTime": 10000, "jitter": 1000 } } }, Qui abbiamo impostato il tempo di visualizzazione per il nostro TestClient tra 9 e 11 secondi.

Passaggio 8: conclusione

Abbiamo mostrato come installare e configurare un server Corsica su un Raspberry Pi. Con quello che hai imparato qui, puoi costruire un sistema di digital signage versatile ea bassissimo costo. Puoi utilizzare Raspberry Pi non solo come server nel tuo sistema, ma anche per pilotare i display dei client.

Ci sono molti altri plugin sul sito web di npm che puoi usare per aggiungere altre funzionalità alla tua installazione in Corsica, inclusa la visualizzazione:

• Immagini da Flickr
• Tweet
• Conversazioni in un canale IRC
• File video
• Video di Youtube
• Presentazioni nelle presentazioni di Google
• Cartoni XKCD
• Contenuto di un feed RSS

Titoli di coda

La Corsica è la creazione di Node Ninjas della cintura nera di terzo grado di Mozilla guidati da potch, lonnen e mythmon.

Queste istruzioni per la Corsica su Raspberry Pis sono state messe insieme da Richard.

Di solito puoi trovare tutti in agguato nel canale #corsica su irc.mozilla.org.