Create la tua Dashboard con freeboard e PubNub

ciao,
in questo post spiego brevemente come creare una semplice ma efficace dashboard basata su un paio di servizi molto interessanti:

• freeboard ( https://freeboard.io )
• PubNub ( http://www.pubnub.com/ )

Ci sono due concetti fondamentali:

• DataSource: cioe' come e da dove la dashbaord riceve i dati da visualizzare
• Widget: oggetto grafico che visualizza in modo specifico i dati provenienti dal DataSource 

Questi sono i tipi di DataSource supportati ad oggi:

Mentre i Widget supportati sono i seguenti:

E' possibile sviluppare il proprio widget in modo da visualizzare al meglio i propri dati. Questo pero' non fa parte di questo post.

Temperatura Ambienti

Vediamo adesso un esempio pratico. Immaginiamo che in ogni stanza della nostra casa abbiamo un termometro connesso che sia in grado di inviare le letture della temperatura via Internet.

In questo caso immaginiamo che il termometro invii periodicamente il valore di temperatura rilevato come messaggio PubNub su un canale dedicato (e.g. temp1, temp2, temp3)

Per emulare il nostro termometro usiamo PubNub Console. Qui impostate la vostra pub e sub key e inserite il nome del canale.

In questo modo possiamo inviare un semplice messaggio contenente la temperatura della stanza.

Adesso dobbiamo creare la nostra Dashboard:

Dopo aver effettuato il login su freeboard crea una nuova dashboard inserendo il nome.

A questo punto dobbiamo creare un DataSource che "ascolti" il nostro sensore di temperatura (PubNub console nel nostro esempio):

• Aggiungi un DataSource di tipo PubNub
• Name: Cucina (o quello che preferisci)
• Subscriber Key: e' la SUB KEY di PubNub. Deve coincidere con quella inserita in PubNub Console
• Channel: il canale su cui mettersi in ascolto per le letture di temperatura. Deve coincidere con quello inserito in PubNub Console

Adesso che abbiamo creato un DataSource valido aggiungiamo il widget in questo modo:

• ADD PANE: un nuovo pannello vuoto viene creato
• Fai click sull'icona +:
• TYPE: Sparkline 
• TITLE: Temperatura Cucina
• VALUE: datasources["Cucina"]["temperatura"]

A questo punto un nuovo widget vuoto di tipo Sparkline viene aggiunto alla tua dashboard

Adesso non ci resta che inviare le letture di temperatura tramite PubNub Console (prova ad inviare 5 letture diverse di temperatura). In realta' queste saranno inviate dal nostro termometro intelligente in modo automatico

Ogni volta che invierete una nuova lettura di temperatura il vostro widget nella vostra dashboard si aggiornera' automaticamente.

Spero sia utile.

Altre idee su come usare freeboard? dai aspetto i vostri commenti