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 | loop
analog
digital
|
| Display | gauge
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
- Ajax
- Cross-platform
- Open Source
- Semplicità
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
<?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.
