Crea la tua Dashboard con RaspberryPi


Informatica / lunedì, Gennaio 13th, 2020

Hai già seguito tutte le guide di RaspberryItaly su come installare, collegare e potenziare il tuo super Raspberry Pi, i sensori ad esso collegato ormai monitorano ogni singolo aspetto dell’ambiente circostante, movimenti, temperature, umidita, gas, luci, fotocellule, ma … non hai ancora una dashboard per gustarti la tua opera?
Allora ho preparato una semplice guida per crearci un’interfaccia IoT (cioè relativa all’ Internet delle Cose) moderna, con grafici, video ed ogni dato che tu voglia recuperare dal Raspberry e dal Web in generale.
L’idea è questa: usare Python3 per raccogliere tutti i dati che vuoi, sensori, utilizzo dell’hardware, dati da altri siti, ecc… mandare i dati a ThingSpeak che li salverà e visualizzerà in comodi grafici e come bonus crearci un’interfaccia moderna e responsive in Bootstrap, facilmente, tramite Pingendo dove poter aggiungere ogni altro dato a nostro piacimento.

Prerequisiti per la nostra dashboard:

– RaspberryPi con sistema operativo installato (la guida si riferisce a Raspian Jessie)
– Idea di quali dati raccogliere

Preparazione Prerequisiti

PIP: installare i moduli

Per iniziare abbiamo bisogno dei software base per iniziare a gestire il tutto, di norma Python3 è già installato (attenzione le guide e moduli per Python2 non sono sempre compatibili con python3: ci sono alcune differenze di cui tenere presente) ma su Raspian jessie lite, ad esempio, manca PIP, che serve per installare facilmente i moduli (o librerie) Python. installiamolo, quindi:

sudo apt-get install python3-pip<br>
Con pip si possono installare i moduli facilmente scrivendo
sudo pip3 install [nome del modulo]

attenzione che pip e pip3 sono diversi.
Per avere una lista dei moduli installati
pip3 list

Paho: inviare i dati

Per mandare i dati a ThingSpeak tramite il protocollo MQTT creato apposta per l’ Internet of Things (IoT), serve il client generico Paho MQTT, installabile tramite il comando

sudo pip3 install paho-mqtt

GpioZero, Rpio.Gpio, FeedParser e BeautifulSoup: leggere i dati

Per Leggere i sensori base usiamo l’ottima libreria gpiozero, creata per semplificare al massimo l’uso dei sensori più utilizzati

sudo apt-get install python3-gpiozero

qui trovate la documentazione

Per il controllo di relè e altri sensori non ancora supportati da gpiozero, possiamo trattarli come LED usando gpiozero oppure  RPi.gpio, la libreria generica e molto usata per la gestione delle porte gpio.

sudo pip3 install RPi.GPIO

Per leggere i dati in modo semplice da qualsiasi sito web si può usare BeautifulSoup, un parser html in grado di trovare ed estrarre ogni dato da qualsiasi sito web.
documentazione BeautifulSoup

Per i FeedRss, FeedParser, il parser molto semplice in grado di estrarre i dati dai vari Feed, ad esempio i feed su http://raspberryitaly.com/feed

Preparare ThingSpeak

Registriamo un account gratuito al sito ThingSpeak
Al login seleziona “Use my existing ThingSpeak account instead
Va creato un nuovo canale premendo il pulsante “new channel“, nella schermata successiva si impostano il nome del canale, descrizione, i vari campi (esempio Campo1: temperatura, Campo2: Euro/Dollaro, Campo3: serrante on/off) e altre extra.
Un canale al massimo ha 8 campi, se ne servono di più basta crearne un altro.

dashboard

Ora per scrivere i dati ci serve la chiave API di Scrittura reperibile dall’apposito menu.
Ottimo, ora abbiamo la nostra dashboard con i grafici nella vista privata e quella pubblica, la grafica non è modernissima, quindi poi la porteremo su un nostro sito in Bootstrap, ma intanto proseguiamo con lo script in Python3.

Prepariamo il nostro script Python3

importiamo il modulo paho-mqtt

import paho.mqtt.publish as publish

from time import sleep

per dare una pausa tra un invio e l’altro
qui importerai anche i moduli necessari che avrai scelto per leggere sensori e quant’altro.

Configuriamo Paoh per collegarsi a ThingSpeak

channelID = "23-esempio-352"<br>apiKey = "OFE71OV-Esempio-8WD8K"<br>useUnsecuredTCP = False<br>useUnsecuredWebsockets = False

Il channelID lo trovi in ThingSpeak in alto a sinistra sotto il nome del canale, l’API di Scrittura nel menu API e gli altri due parametri impostano una connessione non crittografata ma più leggera in termini di risorse.


Impostiamo la variabile “topic”

topic = "channels/" + channelID + "/publish/" + apiKey

Ora inizia la parte interessante, di norma i valori vanno inviati ad intervalli regolari in modo ripetitivo, quindi ci serve un ciclo infinito in cui leggere i valori, inviarli ed aspettare un po’.

while(True):

# qui metti i tuoi comandi per calcolare le variabili v1,v2,v3,v4,v5,v6,v7,v8 non sono obbligatorie tutte ed otto

Poi assembliamo il messaggio convertendo in stringhe le variabili

messaggio = "field1=" + str(v1) + "&amp;field2=" + str(v2) + "&amp;field3=" + str(v3) + "&amp;field4=" + str(v4) + "&amp;field5=" + str(v5) + "&amp;field6=" + str(v6) + "&amp;field7=" + str(v7) + "&amp;field8=" + str(v8)

ed infine inviamo il tutto e ThingSpeak

publish.single(topic, payload=messaggio, hostname="mqtt.thingspeak.com", port=1883, tls=None, transport="tcp")

ed aspettiamo un po’

sleep(60)

Trovate tutto qui su GitHub
Per fare le prove, nella sezione per calcolare le variabili copia questo per usare valori casuali

v1 = random.randint(18,25)
v2 = random.randint(50,70)
v3 = random.randint(5,30)
v4 = random.randint(0,100)
v5 = random.randint(0,1)
v6 = random.randint(0,1)
v7 = random.randint(0,10)
v8 = random.uniform(1,2)
print(v1,v2,v3,v4,v5,v6,v7,v8)

fai sempre molta attenzione ai rientri di riga in python (indentazione del codice)
avviamo lo script

python3 nomeScript.py

aggiungi sudo se i moduli lo richiedono.

Bonus: un po’ di design

Come interfaccia è esteticamente scarsa, quindi ne scriviamo una decente, con pochi click.
Installiamo il software gratuito multipiattaforma Pingendo,  un editor visuale per Bootstrap, la piattaforma web responsive creata da Twitter.
Creando una nuova pagina vuota basta selezionare gli elementi a piacimento senza nessuna difficoltà, modificare l’HTML e i CSS dai menu in basso e, una volta creato il tutto, caricarlo sul nostro server web (se non ne hai uno, segui la guida sul blog).
Nel menu sections > structure creiamo gli spazi per i nostri grafici.
Andiamo su ThingSpeak, sezione pubblica e clicchiamo sul simbolo del fumetto sopra ad un grafico e copiamo il codice html da inserire nel sito.


Per inserire il grafico nella nostra dashboard web è sufficiente selezionare il posto dove copiarlo, ad esempio in un div

&lt;div class="col-md-6">
&lt;iframe width="100%" height="260" style="border: none;" src="https://thingspeak.com/channels/2568/charts/3?bgcolor=%272B30;color=%23d62020;dynamic=true;results=60;title=Adsl;type=line">&lt;/iframe>
&lt;/div>

Infarcire di CSS o codici HTML, copiare sul server web e godersi la propria Dashboard personalizzata.
Qui trovate un esempio su GitHub creata da me con questo metodo.