The first step is to create the dynamic SVG (vector graphic) file using Inkscape that will be used by the webpage. This starts with a static background, in this case the grey parts of the thermometer which will not change. Over the top the blue parts were added, with just a bit of XML editing to give those parts a hook which will be used in the next step. The demo above will have a moving blue bar and changing numeric output to match data coming in from a temperature sensor.

An SVG file is just a text file that is rendered as a graphic when loaded. [Luca] shows you how to used the identifiers set up when making the graphic to dynamically change the size and value of the blue parts with server-side PHP before sending the graphic to the browser. With that in place you just need to give the PHP file access to the data. He shows how to use the Pachube API but you could just as easily get this via serial or otherwise.

Post navigation

17 thoughts on “How To Add Flair To A Webpage That Shows Your Project Data”

Pretty cool. I did something similar with the WiFly module, I have a php page toss it into a mysql db, then use PChart to graph some thermistor valueshttp://www.pchart.net/features-charting
not too hard to do, and I didn’t even know php before I started this.

If someone is interested of sending and receiving data from Arduino using browser, this could help http://code.google.com/p/serwebproxy/ . It’s something i did for my own use, it’s bit hackish, but could be big help. No need for any server stuff, pure javascript is enough (uses websocket). Project needs cleanups and more examples and if people request those, i’m happy to help.

Wrote a c# app that would take in some data over serial and use HTTP POST (I think?) to dump it into a database on a webserver.

Then wrote some ajax-y stuff that would refresh the data every 200ms or so without refreshing the whole page. It was a lot of fun! Just all a learning experience – never did anything with it. But web stuff is fun.

Thanks to all of you, my ISP called me about a DDOS attack ;) Sorry at the moment its IDS (intrusion detection system) is blocking some connection, please be patience they should resolve the issue soon!

If you have any questions… and yes, my blog is in italian and english language so probably I made a better translation than Google’s one ;)

An important point: the author is running a PHP script on a “real” (normal power) webserver. In that scenario, he COULD use imagemagick… it would be an option.

On a very low power server (like one running on an Arduino), image libraries are not really possible. due to lack of processing power. But if your Arduino had the flash space, you could just output the XML and script to do the heavy lifting on the client side.

(Not that I would ever run a webserver on an arduino… it’s smarter to use the limited processing power you have to shove the data over to Pachube, as the author has done).

but you might be stuck with a webserver provider that doesn’t allow you to use imagemagic, such as a free webpage from your Internet provider.

Did sometime similar myself a while ago but with HTML5 canvas and some javascript foo for an internet connected weather station.
Weather station > mysql. PHP > mysql > html5 + javascript.
Made animated thermometer viles, gauges and scales.
Worked quite well.

Although I do acknowledge svg files are necessary for more complex but bar graphs, and not that I feel the need to accommodate MSIE, I fail to see why the thermometer bar graph couldn’t be done with pure css. Have an x by y image showing the mercury as blue (gradients work as well) and stretch it by css to a particular height. The numbers in the bar graph can be positioned with css too.
Multiple gradients (stretching from blue via yellow to red) can be combined from several images to display a non-linear gradient using css too. Proof of principle here.