I came across this article by chance:
The article describes a very sophisticated Arduino data collection and display system for a home brewing setup.
This post concentrates on one particular module which draws analog meter displays, or gauges:
I copied the HTML code from the example and pasted it into a text file on my PC, named the file gauge.html and saved it to disk. When I double clicked on the file, a browser window opened and the the 3 gauges, Memory, CPU and Network were displayed exactly as in the display on the Google website, as shown below:
The example HTML was then implemented inside a simple Arduino sketch, based on the Web Server example given in the standard Ethernet Library.
Because of the large number of string constants to be printed out, I used the F() syntax, as in
client.print(F(“Any constant string data”));
to store the string constants in flash or program memory, at compile time:
It’s fairly easy to change the example HTML code to use variables instead of constants and the options section can be used to set a variety of extra features - see the description of the available options on the Google link, above. A lot of the changes can be tested inside a simple standalone HTML file, before trying to code a Sketch.
My next development was to use variables, to which I could assign changing values, instead of constants, for the values displayed on the gauges.
I modified the first sketch to read 3 floating analog inputs and used the values to set the gauge display. The reading are updated at 5 second intervals( the refresh time defined to the browser in the initial HTTP connection response). Because the analog inputs are floating, the readings change every 5 seconds, thus simulating changing data on the gauge displays.
A zip file containing the original html from the example on the Google website and my 2 simple Arduino demonstration sketches is attached.
Please let me know what you think of this free, hosted, code.