Dashboard in SVG

luca 22 gennaio 2012 12

PHP e XML

Come detto, un file SVG non è altro che un file di testo in formato XML: questo rende facile la sua modifica utilizzando le funzionalità della libreria SimpleXML di PHP.

Scriveremo del codice PHP che:

  • riceverà come parametro (GET, ovvero passato come suffisso alla URL nella forma ?parametro=valore) il valore da rappresentare;
  • caricherà il template SVG;
  • modificherà la proprietà height del rettangolo e il valore della scritta;
  • cambierà il colore di entrambi in base al valore (blu se minore di 15, rosso se maggiore di 25 altrimenti verde);
  • invierà il risultato al browser.

Leggiamo il valore del parametro “value” dall’array associativo $_GET:

$value = $_GET["value"];

Carichiamo il template leggendolo dalla cartella nella quale è presente anche il file PHP: otteniamo il path di tale cartella usando la costante __DIR__:

$root = __DIR__;
$svg_template = simplexml_load_file("$root/template.svg");

Otteniamo i nodi XML del rettangolo e della scritta con una query XPath che ricerca l’id impostato con Inkscape:

$result = $svg_template->xpath("//*[@id='temp_level']");
if(count($result) == 1) $temp_level = $result[0];
else exit("Unable to find a node with temp_level ID");
 
$result = $svg_template->xpath("//*[@id='temp_value']");
if(count($result) == 1) $temp_value = $result[0];
else exit("Unable to find a node with temp_value ID");

Modifichiamo l’altezza del rettangolo e il valore della scritta (il valore viene moltiplicato per 5 perché nella scala del termometro ad un incremento di un grado corrisponde un incremento di 5 unità):

$temp_level['height'] = $value * 5;
$temp_value[0] = $value;

Modifichiamo lo stile per adattare il colore al valore attuale:

if($value < 15) {
  $temp_level['style']="fill:#0000ff;stroke:none";
  $temp_value['style'] = "font-size:72px;fill:#0000ff";
} elseif($value < 25) {
  $temp_level['style']="fill:#00ff00;stroke:none";
  $temp_value['style'] = "font-size:72px;fill:#00ff00";
} else {
  $temp_level['style']="fill:#ff0000;stroke:none";
  $temp_value['style'] = "font-size:72px;fill:#ff0000";
}

Infine indichiamo al browser il corretto MIME Type ed inviamo il file XML modificato:

header("Content-type: image/svg+xml");
echo $svg_template->asXML();

Nella prossima pagina vedremo come ricevere dati da Pachube, sempre usando il linguaggio PHP…

Pagine: 1 2 3 4

12 Comments »

  1. Lucio 30 giugno 2012 at 16:51 - Reply

    Gentile Luca Dentella,
    ho trovato interessantissimo il suo tutorial che riguarda il dashboard svg. Le chiederei gentilmente, se possibile, di fornirmi un esempio per visualizzare in forma grafica sul browser i valore di tensione letti sugli ingressi analogici dell’arduino uno in forma vu meter lineare (tipo il suo termometro) oppure classico a lancetta.
    Ringraziando anticipatamente, Le porgo distinti saluti.
    lucio.ra@libero.it

  2. A MacLeod 6 maggio 2013 at 22:24 - Reply

    Thanks for taking the time to document this, I used it as a basis for my own arduino project (a web-connected heating oil level monitor.)

    Getting a nice SVG-based level indication turned out to be easier than I had feared… strangely, getting it to send warning emails was trickier!

    http://s230.photobucket.com/user/macleodaj/media/Junk/oil_level_gauge.jpg.html

    • luca 7 maggio 2013 at 08:19 - Reply

      Hi! Thanks for your feedback and great SVG web interface!

Leave A Response »