Dashboard in SVG

by luca
14 comments

Il seguente tutorial ha l’obiettivo di mostrare come è possibile realizzare una dashboard accessibile via web per visualizzare in modo grafico dei dati… il tutto utilizzando lo standard di grafica vettoriale SVG.

Introduzione

Ero alla ricerca di un modo per visualizzare in maniera grafica i dati di un mio feed su Pachube, creando una dashboard che fosse disponibile via web e senza utilizzare tecnologie proprietarie (Flash…) quando ho trovato questo blogpost di Andrew Hazelden dove mostrava come fosse possibile modificare dinamicamente un file grafico SVG. La stessa tecnica viene utilizzata da un altro progetto opensource di raccolta dati, Nimbits.

I vantaggi principali nell’uso di SVG sono i seguenti:

  • è un formato standard, tutti i principali browser sono in grado di visualizzarlo;
  • è un formato vettoriale, le immagini possono quindi essere ridimensionate senza perdere qualità;
  • è basato su XML, quindi facilmente modificabile.

In questo tutorial vi mostrerò quindi come:

  • preparare un file template con un editor SVG (Inkscape);
  • modificare tale template in base a dati esterni utilizzando il linguaggio PHP;
  • ricevere dati da un feed Pachube sempre con PHP.

Potete scaricare tutto il materiale (template SVG, sorgenti PHP) dal repository su GitHub; inoltre è disponibile una demo online all’indirizzo: http://www.lucadentella.it/demo/pachube.php

Nella prossima pagina vedremo come creare il template della nostra dashboard

Related Posts

14 comments

How to add flair to a webpage that shows your project data - Hack a Day 27 gennaio 2012 - 19:00

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data » Geko Geek 27 gennaio 2012 - 20:30

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | ro-Stire 27 gennaio 2012 - 22:05

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | My Blog 28 gennaio 2012 - 00:36

[…] heat arrangement might not hit your hosiery off, though it’s a elementary proof of how we can used matrix graphics as a web readout for data (translated). [Luca] wrote this 4 page educational to assistance others, he creates it demeanour […]

Reply
How to add flair to a webpage that shows your project data « Gadgets « The Depot of Talk 28 gennaio 2012 - 05:01

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data « « SNAP-DIYSNAP-DIY 28 gennaio 2012 - 09:16

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
How to add flair to a webpage that shows your project data | CisforComputers 29 gennaio 2012 - 06:01

[…] temperature display may not knock your socks off, but it’s a simple demonstration of how you can used vector graphics as a web readout for data (translated). [Luca] wrote this four page tutorial to help others, he makes it look really easy, […]

Reply
Tutorial : changer dynamiquement un SVG 29 gennaio 2012 - 09:23

[…] XML est facilement modifiable par les langage de scripting web. Tous les détails en anglais et en italien sont sur le blog de lucadentella, les code sources des exemples SVG et PHP sont sur GITHub et enfin […]

Reply
Lucio 30 giugno 2012 - 16:51

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

Reply
A MacLeod 6 maggio 2013 - 22:24

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

Reply
luca 7 maggio 2013 - 08:19

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

Reply
lucadentella.it – Yún – Utilizzare PHP 5 dicembre 2013 - 10:33

[…] Dashboard in SVG […]

Reply
Yún – How to use PHP | LinkSprite Learning Center 27 giugno 2016 - 04:16

[…] you have already read about some of my projects (dashboard, web charts…), you’ve certainly noticed that I’d like to use the PHP language for developing […]

Reply
Mosesliete 16 aprile 2018 - 23:05

Wonderful site, how do u get all this information?I’ve read a few posts on your site and I like your writing style. Thanks a million, keep up the great work.

Reply

Rispondi a How to add flair to a webpage that shows your project data | CisforComputers Cancel Reply

cinque × 3 =