DRINKS Toolkit è una collezione di widget realizzati con HTML5 Canvas e Javascript, progettati per rendere facile e veloce lo sviluppo di pannelli di controllo grafici dall'impatto importante sotto il profilo della grafica ma anche dell'usabilità.
Nella sua prima edizione, il toolkit mette a disposizione componenti particolarmente adatti a creare pannelli di controllo: la prima release di Drinks fornisce un set di 20 strumenti, ognuno corrispondente ad un tag.
Ciascun componente può essere ulteriormente specializzato grazie all'attributo type che serve a designarne forme o funzionalità particolari. In questo articolo esamineremo alcuni widget e vedremo alcuni scenari di utilizzo del toolkit: iniziamo elencando alcuni tra i componenti più interessanti:
| Controllo | Valori per l'attributo 'type' |
|---|---|
| Knob (potenziometro o manopola) | loop, analog, digital |
| Display | gauge (a lancette), digital, level, thermo, analog, graph |
| Led | round, rect, triangle |
| Switch | toggle, arc, side, circle, rect, rocker |
| Slider | analog, digital |
È possibile realizzarne di nuovi utilizzando una serie di metodi presenti nel toolkit o combinare quelli già esistenti. Nel corso dell'articolo vedremo ad esempio come realizzare una plancia con indicatori analogici a lancette (gauge), display digitali (digital) e led rotondi (round).
Perché utilizzare Drinks
Alcune caratteristiche tra le più interessanti del toolkit sono:
- HTML5 Canvas: gli strumenti sono realizzati mediante la tecnologia Canvas di HTML5. Risulta W3C compliant e non ha bisogno di Flash e o altri plugin.
- Ajax: i widget utilizzano la tecnologia AJAX per permettere la comunicazione dal client al server e ricevere i dati in real-time.
- Cross-platform: ogni dispositivo dotato di un browser compatibile con HTML5 può far girare il toolkit (Chrome, Firefox, Opera e Safari sono già compatibili).
- Open Source: è possibile creare o comporre gli strumenti come si vuole. DRINKS è distribuito sotto "new BSD license"
- Semplicità: Ogni widget viene aggiunto alla pagina usando un tag.
Installazione
Installare Drinks è semplice. Basta scaricare il toolkit, estrarre la cartella e caricarla sul server dove gira l'applicazione. Nelle pagine HTML creiamo solo il collegamento ai file JavaScript:
<script type="text/Javascript" src="...Path/Drinks.js"></script>Creare la prima dashboard!
Iniziamo inserendo una semplice manopola (knob) che controlla il valore di un gauge. Per prima cosa dobbiamo scrivere il markup per pomello (knob) e indicatore (display):
<knob id="k1"></knob>
<display id="gau"></display>Da notare che la presenza dell'id è obbligatoria: ogni widget deve avere il proprio id. Il display sarà un indicatore in stile analogico a lancette (gauge) per default, se non indichiamo diversamente nell'attributo type.
Ora possiamo collegare i due strumenti, per pilotare il nostro display con i valori del knob. Si tratta di sfruttare l'evento onchange del knob, vediamo come:
<knob id="k1"
onchange="gau.value = this.value;">
</knob>Possiamo fare un test inserendo tutto in una pagina Web:
<html>
<head>
<script type="text/javascript" src="Drinks.js"></script>
</head>
<body>
<knob id="k1" onchange="gau.value=this.value"></knob>
<display id="gau"></display>
</body>
</html>
Personalizzare i widget
È possibile modificare diversi attributi per gli strumenti, ad esempio si può aggiungere una descrizione mediante l'attributo label:
<knob id="k1" label="Turn this knob"></knob>
Possiamo ridimensionare gli strumenti usando gli attributi width e height oppure, per quelli circolari, mediante l'attributo radius.
<switch type="side" id="sw" width="100" height="50"></switch>
<display id="gau" radius="80" ></display>Possiamo impostare un valore di default o lo stato iniziale del controllo:
<display id="gau" value="37.5"></display>I widget inoltre convivono bene con gli elementi HTML:
<div style="width:600px; height:300px; background-color:gray; border-radius:15px; box-shadow:1px 1px 3px #333;">
<knob id="k1" onchange="gau.value=this.value" radius="80" style="float:left;"></knob>
<display id="gau" radius="80" style="float:left; margin-top:55px;"></display>
</div>
Risulta molto utile cambiare il numero di divisioni, la precisione dello strumento e il range massimo e minimo di valori:
<display id="gauge" divisions="20"></display>
<display id="gauge" min_range="0.001" max_range="1" precision="3"></display>o impostare un range di allarme e specificare azioni al verificarsi degli eventi OnAlert e OnLeaveAlert:
<display id="dis1" type="thermo" style="float:left;"
max_range="50"
range_from="40" range_to="50"
onalert="onAlert();"
onleavealert="onLeaveAlert();">
</display>
Infine possiamo aggiungere eventi all'occorrenza, ma questo è puro JavaScript:
<switch id="sw" onchange="
if(this.value==1){
led.on();
}else{
led.off();
}"></switch>
<led id="led"></led>Creare componenti combinati
Ecco un esempio di combinazione, possiamo creare un nuovo indicatore complesso semplicemente annidando i widget uno dentro l'altro:
<display id="gau"
max_range="200" range_from="100" range_to="130"
onalert="led1.on();" onleavealert="led1.off()">
<display id="dig" type="digital"
width="40" height="20"
x="100" y="160"
link="true" cipher="3" significative="1"></display>
<led id="led1" color="red" radius="5" x="112" y="170"></led>
</display>
È possibile anche creare un nuovo tag per lo strumento appena creato, ma per questo rimadiamo alla guida ufficiale.
Drinks con Ajax
Possiamo assegnare all'evento onchange qualsiasi azione in Javascript, quindi è facilmente realizzabile un knob o un gauge che salvino o aggiornino il proprio stato tramite Ajax, interfacciandosi con un server. Drinks fornisce la propria libreria Ajax di supporto che permette facilmente di effettuare richieste GET e POST.
Vediamo rapidamente come sfruttare in pratica i comandi ajax.load e il meccanismo di aggiornamento automatico con refresh: facciamo un semplice esempio con la classica coppia: manopola/lancetta:
<knob id="k1" onchange="ajax.load('knob.php?value='+this.value, null);"></knob>
<display href="gauge.php" id="gau" refresh="5"></display>Nel caso del knob abbiamo sfruttato la funzione ajax.load per caricare il valore sul server, per l'esempio abbiamo semplificato all'estremo, effettuando una chiamata ad un nostro piccolo file php che funge come una sorta di mini servizio di storage:
<?php
// knob.php
$value = $_GET["value"];
set_db_value($value);
?>Per comodità gli passiamo il valore tramite una variabile in GET, che verrà prelevato e persistito su DB.
Per aggiornare il nostro display abbiamo impostato l'attributo refresh, in questo modo il toolkit effettua un polling ogni 5 secondi sul file gauge.php, per prelevarne il valore.
<?php
// gauge.php
$gauge_value = get_from_db();
echo $gauge_value;
?>Se sfruttiamo le caratteristiche base della libreria Ajax interna al toolkit non abbiamo bisogno di restituire i dati in un formato particolare (JSON, XML), come si vede è sufficiente ritornare un valore.
Abbiamo effettuato una veloce ma intensa escursione tra le caratteristiche di Drinks, un toolkit senz'altro da tenere d'occhio e da approfondire sul reference manual, piuttosto completo, fornito dagli autori e dal quale abbiamo tratto anche gli esempi di questo articolo.
