Dettagli

Visite: 30828

Dashboard

Introduzione

Fino ad ora ci siamo occupati del backend, ovvero di tutto ciò che serviva al programma per lavorare, recupero dei dati, immagazzinamento, trattamento, modifica, e visualizzazione, ma tutto a livello di gestione o al massimo che solo l'amministratore può vedere impostando o aprendo determinate sezioni del software.
Però, come su qualsiasi programma che si rispetti, è utile creare un'interfaccia grafica che faccia vedere, a chi lo utilizza, i dati che interessano magari organizzati per categorie o tipologia, questo viene fatto sul frontend mediante la "Dashboard". In spiccioli si tratta di impostare una o più pagina web che saranno visualizzate da chi entra nel nostro sito sul lato pubblico. Ci sono tre tipi, fondamentalmente, di pagine:

1. Main page: è la pagina principale, quella che si vedrà quando si entra nel sito (P.S. per entrare nel sito da un qualsiasi browser è sufficente digitare "emoncms.org/UserName")
2. Le pagine pubbliche: visualizzabili da chiunque ma non modificabili
3. Le pagine private: possono essere visualizzate solo se si fa il login, ovviamente fatto il login ci si trova sul lato beckend e quindi è tutto visualizzabile e modificabile.

Prima di iniziare e bene spiegare qualche concetto su come è strutturata la Dashboard.
Innanzitutto la dashboard è una lavagna vuota (la nostra pagina) dove possiamo posizionare i vari oggetti, ogni cosa che si posiziona è un oggetto, quindi, anche il testo e i riquadri o contenitori, come i grafici o i visualizzatori di dati. La gestione della dashboard è orientata agli oggetti, quindi per qualsiasi oggetto si utilizzerà il seguente principio:

1. Seleziono un oggetto
2. Lo posiziono sulla dashboard
3. Gli do le dimensioni volute
4. Gli imposto le opzioni disponibili

Tutto qui, e così, per tutti gli oggetti.
Prima di partire a spron battuto a realizzare la prima pagina è bene progettarla con attenzione in quanto il posizionamento degli oggetti segue una regola molto rigida, ovvero, la regola dei layer sovrapposti, che significa che ciò che viene posizionato prima sta sotto e ciò che viene posizionato dopo sta sopra e così via, ad ogni posizionamento si crea uno strato sopra al precedente. Risulta evidente che con questo sistema se posiziono una scritta (oggetto testo) e poi voglio mettere uno sfondo grigio (oggetto container), in questa sequenza non riuscirò mai a spostare il testo sopra al riquadro in quanto sta sotto, avrei dovuto prima inserire l'oggetto container e poi quello testo.
Purtroppo uno alle prime armi, a questo punto, si trova nella situazione del cane che si morde la coda ovvero per progettare una pagina devo sapere come funzionano gli oggetti ma se metto gli oggetti senza prima progettare la pagina rischio di trovarmi a 3/4 del lavoro e dover ricominciare. Un mio consiglio è quello di non partire con il progetto definitivo ma con una pagina semplice dove tastare le varie opzioni sapendo già che alla fine sarà buttata.
Prima di partire a vedere i vari oggetti a disposizione vediamo come si impostano le pagine in quanto entrando nella sezione Dashboard, la prima volta, ci si trova di fronte ad una scritta desolante "Nessuna dashboard creata". Vediamo come si crea la prima pagina, che sarà la pagina principale o "Main page"

 Come creare una pagina o "Dashboard"

Entrati nella sezione Dashboard cliccare sul simbolo "+" in alto a destra

a questo punto verrà generata l'intestazione della prima pagina, vediamo le varie voci:

1. Id: è il numero univoco con cui viene riconosciuta la pagina nel database.
2. Name: nome della pagina, sarà quello visualizzato sulla linguetta dei menu in alto per la selezione delle pagine.
3. Alias: nome della pagina gestito dal sistema, può essere lo stesso del nome ma non può contenere caratteri speciali e/o maiuscole.
4. Main: identifica se la pagina è la Main o meno, per selezionarlo basta cliccare sull'icona che si commuta in piena. Può esserci una sola Main pertanto se selezionate una seconda pagina la precedente verrà automaticamente deselezionata.
5. Public: identifica se la pagina è privata (lucchetto) o pubblica (mondo), cliccando sull'icona si passa ciclicamente da una all'altra.
6. Published: indica se la pagina è stata pubblicata o meno, cliccando sull'icona passa da "X" non pubblicata a "√" pubblicata. Una pagina per essere visibile dall'esterno deve essere "pubblica e pubblicata" contemporaneamente, in caso contrario sarà visibile solo lato backend.
7. Cliccando su questa icona si crea una copia della pagina, in questo momento non avrebbe senso, ma se avessi una pagina finita e volessi farne una con poche modifiche posso fare una copia e modificarla risparmiando parecchio tempo. Un altro utilizzo della funzione copia potrebbe essere quello di simulare gli stili delle pagine, ovvero, mi posso creare una pagina con gli elementi comuni a tutte le pagine, ad esempio, intestazione, logo, una colonna sinistra con dati comuni a tutte le pagine e altro, copiando poi questa pagina e inserendo altri oggetti, avrò una serie di pagine con un layout omogeneo e carino da vedere.
8. Matita: cliccando su questa icona si entra in modalità modifica dell'intestazione della pagina corrente
9. Cestino: elimina la pagina selezionata, attenzione che non si potrà recuperare in alcun modo.
10. Con questa icona, cliccando, si entra in modalità modifica della pagina corrente.
11. Cliccando su questa icona a forma di occhio si passa a visualizzare l'anteprima della pagina cliccata.

Passiamo ora a impostare l'intestazione della pagina appena creata, per far ciò clicchiamo sull'icona a forma di matita (8)

come mostrato in figura compiliamo il campo Nome e Alias e quindi clicchiamo sull'icona a forma di spunta per confermare

Clicchiamo ora sulla penultima icona (10) per entrare in modifica e cominciare a inserire i vari oggetti. Finite le modifiche o in qualsiasi altro momento possiamo impostare le opzioni "Main, Public e Published". Visto che siamo entrati in modalità modifica/inserimento andiamo a vedere i vari oggetti che abbiamo a disposizione.
Gli oggetti sono stati divisi per categorie omogenee che descriverò a seguire.

Containers

Gli oggetti container sono di 4 tipi, 3 disegnano dei rettangoli a sfondo Bianco, Grigio e Nero, mentre il quarto disegna un rettangolo a bordo blu e sfondo trasparente.
Per posizionare un container si clicca sul tipo voluto e poi sulla dashboard, appare il rettangolo con 5 grip, cliccando e tenendo premuto, sul centrale si ha la possibilità di spostarlo mentre con i 4 laterali si ridimensionano i lati.
Questi oggetti non hanno opzioni impostabili.
Di seguito un esempio di una maschera ottenuta con un container grey, un container blueline e 3 container white


Come si può notare dall'immagine in alto a sinistra c'è un pulsante arancione con la scritta "modificato, premere per salvare" ovviamente ci sono delle modifiche da salvare, meglio cliccare sul pulsante e salvare, il pulsante diventa di colore verde con la scritta "salvato". Meglio salvare spesso per non perdere il lavoro fatto, è più facile di quanto si possa pensare.

Text

Gli oggetti di tipo "Text" sono 3:

Paragraph:
Permette di inserire del testo multiriga

Opzioni: testo HTML da inserire, ma oltre al testo accetta qualsiasi istruzione html che rende questo container potentissimo in quanto mediante il codice html si può formattare il testo in modo avanzato ma si possono inserire immagini, link, o iFrame, ma più in generale qualsiasi cosa si possa fare con html.

Heading:
Inserisce un titolo allineato a sinistra

Opzioni: testo HTML da inserire (come precedente)

Heading-center:
Inserisce un titolo centrato

Opzioni: testo HTML da inserire (come precedente)

Ecco come appare l'esempio precedente con l'uso dei 3 Text precedenti

Widgets

Cliccando sul label "Widgets" si apre una tendina con tutti i vari elementi grafici che abbiamo a disposizione.

Button

Si tratta di un pulsante del tipo ON-OFF bistabile. Il pulsante viene legato ad un feed che deve contenere valori "0" o "1" (attenzione che valori diversi vengono accettati ma non funziona), il pulsante adegua il suo colore al valore del feed:
0 = Rosso
1 = Verde
cliccando sul pulsante si inverte ciclicamente il suo valore che viene registrato sul feed.
Questa caratteristica ci permette, mediante la lettura con una applicazione esterna, di avviare o spegnere utenze a distanza come elettrovalvole, pompe, resistenze ecc..

Opzioni:
1) FeedId a cui è legato
2) Valore di default per il pulsante [0-1]

Cylinder:

Questo widget serve per monitorare la temperatura all'interno di un contenitore, mediante due sensori di temperatura posti uno sulla parte alta e uno sulla parte bassa. In funzione dei due valori passati il widget si colora da Blu (freddo) a Rosso (caldo). Se le due temperature sono molto diverse colora il cilindro con gradiente di colore dal blu al rosso. Per l'inserimento cliccare su Widget, selezionare cylinder, e poi fare clic sul punto di inserimento. Il quadrante può essere spostato e ridimensionato cliccando e trascinando i punti di controllo sui bordi.

Opzioni:
1) Feed per il valore alto "Top"
2) Feed per il valore basso "Bottom"

Dial:

Si tratta di quadranti dinamici in tempo reale che si adeguano al valore del feed. Il quadrante cambia da un valore al successivo partendo velocemente e rallentando all'avvicinarsi del valore finale. Per inserire un dial cliccare su Widget, selezionare Dial, e poi fare clic sul punto di inserimento. Il quadrante può essere spostato e ridimensionato cliccando e trascinando i punti di controllo sui bordi.
Esistono 9 tipi di Dial che si differenziano per colore e/o posizione dello zero, come si vede nell'immagine seguente:

Il tipo 8 è stato pensato per visualizzare la temperatura infatti ha 1 settore negativo e 5 positivi. Bisogna fare attenzione all'uso dei Dial nel caso di valori negativi in quanto alcuni si comportano in modo indesiderato, di seguito riporto 3 immagini del comportamento dei vari Dial con valore positivo di 2kW e valore negativo di -0.4 e -2kW per valutare le differenze.
  
Si noti che con alcuni Dial il valore negativo fa andare l'indicatore al contrario

Opzioni: I Dial hanno parecchie opzioni come riportato in tabella

1) Feed: feed da cui prendere i dati
2) Max value: massimo valore visualizzabile a fondo scala, per i Dial a "0" centrale il valore di fondo scala è quella totale, da + a -, quindi se volessi avere una valore di fondo scala da -3000 a +3000 il valore massimo di fondo scala sarà 6000. Per il tipo 8 se volessi avere un range da -20° a +100° (1 negativo e 5 positivi) il valore di massimo di fondo scala sarà 120. Attenzione che se il massimo valore di fondo scala è inferiore al valore passato dal feed il Dial si blocca al valore massimo.
3) Scale: scala con cui sarà visualizzato il valore, utile se per esempio il feed è in W e si vuole visualizzare in kW si inposta la scala a 0.001
4) Units: unità di misura del dato visualizzato [w,kW,°,V,A,ecc..]
5) Tipe: tipo di Dial da utilizzare

Feedvalue:

Questo vidget è utilizzato per visualizzare il valore di un feed

Opzioni:
1) Feed: feed da cui prendere i dati
2) units: unità di misura del dato visualizzato [w,kW,°,V,A,ecc..]

di seguito il primo esempio con inseriti 3 Feedvalue all'interno dei container bianchi che simulano una maschera per visualizzare i dati:

Jgauge:

E' un quadrante come i Dial ma con una grafica più accattivante, ne esiste un solo tipo e non è utilizzabile per i valori negativi. L'inserimento è uguale ai Dial.

opzioni:
1) Feed: feed da cui prendere i dati
2) Max value: massimo valore visualizzabile a fondo scala. Attenzione che se il massimo valore di fondo scala è inferiore al valore passato dal feed verrà visualizzato il valore corretto ma la lancetta si blocca al valore massimo.
3) Units: unità di misura del dato visualizzato [w,kW,°,V,A,ecc..]

Led:

Questo widget funziona proprio come un led multicolore (mette a disposizione 7 colori) tali colori cambiano in funzione del valore passato dal feed a cui sono legati. Il widget gestisce i dati da "0" a "6" a cui assegna un differente colore pur accettando qualsiasi valore, i valori esterni al range gestito vengono visualizzati color "Nero".
L'abbinamento numero colore è riportato nella tabella seguente:

Opzioni: Feed: feed da cui ricevere i dati

 Stack:

Questo oggetto è legato al menu "energy" della sezione Extras, per visualizzare dei dati al suo interno è necessario creare una serie di Items nella pagina "Extras/energy".
Attenzione che la pagina di default no è funzionante, se volete usarla dovete eliminare gli item presenti e crearne di nuovi.

Visualisations

Cliccando sul menu "Visualisations" della dashboard si apre un menu a tendina dove vedremo tutti gli elemti che il programma ci mette a disposizione.
Gli elementi sono gli stessi che abbiamo visto nella sezione "Vis" (Visualisations) sul paragrafo precedente, anche tutte le opzioni sono le stesse quindi non mi dilungo a ripeterle. L'unica differenza la troviamo nei "Multigraph" che qui hanno una sola opzione, ovvero, Mid che altro non è che il numero di identificazione con cui vengono memorizzati i multigraph in Vis. Cliccando sul menù a tendina verranno visualizzati tutti i multigraph impostati nel sistema e che quindi possono essere utilizzati nelle dashboard.
Per l'inserimento degli oggetti si segue sempre la stessa procedura vista in precedenza.