I'm trying to use this gauge http://www.wwvalue.com/web-design/jquery/pure-javascript-and-html5-canvas-gauge-canvgauge.html
with the webserver code below on the ethernet SD card to display the pool temperature using AJAX
data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue(GetPoolTemp());}, 800);"
The first gauge should be displaying 22 (fixed as test) using AJAX but I get a NAN (Not A Number) error.
The second gauge works fine but that is a javascript generated value.
I am new to javascript and could use some help.
sketch and webserver code below
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>SD-ARDUINO-WEBSERVER</title>
<script src="http://users.telenet.be/luxxtek/arduino/JS/gauge.min.js"></script>
<script src="http://users.telenet.be/luxxtek/arduino/JS/pooltemp.js"></script>
</head>
<body>
<center>
<h1> 2GB SD-CARD ARDUINO-WEBSERVER </h1>
<canvas id="gauge1" width="200" height="200"
data-type="canv-gauge"
data-title="GENT"
data-min-value="18"
data-max-value="30"
data-major-ticks="18 19 20 21 22 23 24 25 26 27 28 29 30"
data-minor-ticks="2"
data-stroke-ticks="true"
data-units="°C"
data-value-format="2.1"
data-glow="true"
data-animation-delay="10"
data-animation-duration="200"
data-animation-fn="elastic"
data-colors-needle="#f00 #00f"
data-colors-major-ticks="#fff #fff"
data-colors-plate="#fb0 #aaf"
data-highlights="18 20 #66CCFF, 20 24 #00FF00, 24 28 #FFCC00, 28 30 #FF0000"
data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue(GetPoolTemp());}, 800);"
></canvas>
<canvas id="gauge2" width="200" height="200"
data-type="canv-gauge"
data-title="ALTEA"
data-min-value="18"
data-max-value="30"
data-major-ticks="18 19 20 21 22 23 24 25 26 27 28 29 30"
data-minor-ticks="2"
data-stroke-ticks="true"
data-units="°C"
data-value-format="2.1"
data-glow="true"
data-animation-delay="10"
data-animation-duration="200"
data-animation-fn="elastic"
data-colors-needle="#f00 #00f"
data-colors-major-ticks="#fff #fff"
data-colors-plate="#fb0 #aaf"
data-highlights="18 20 #66CCFF, 20 24 #00FF00, 24 28 #FFCC00, 28 30 #FF0000"
data-onready="setInterval( function() { Gauge.Collection.get('gauge2').setValue((Math.random() * 1.5) + 25);}, 2000);"
></canvas>
</center>
</body>
</html>
/*--------------------------------------------------------------
Program: eth_websrv_SD
Description: Arduino web server that serves up a basic web
page. The web page is stored on the SD card.
Hardware: Arduino Uno and official Arduino Ethernet
shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16
Software: Developed using Arduino 1.0.3 software
Should be compatible with Arduino 1.0 +
SD card contains web page called index.htm
References: - WebServer example by David A. Mellis and
modified by Tom Igoe
- SD card examples by David A. Mellis and
Tom Igoe
- Ethernet library documentation:
http://arduino.cc/en/Reference/Ethernet
- SD Card library documentation:
http://arduino.cc/en/Reference/SD
Date: 10 January 2013
Author: W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 1, 53); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80
String HTTP_req; // stores the HTTP request
int pooltemp;
File webFile;
void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
}
void loop()
{
EthernetClient client = server.available(); // try to get client
if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
HTTP_req += c; // save the HTTP request 1 char at a time
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// AJAX request for pool temp
if (HTTP_req.indexOf("pool_temp_switch") > -1) {
// read pool temperature (and send appropriate paragraph text causes NAN)
GetPoolTemp(client);
}
else
{
// send web page from SD card
webFile = SD.open("index.htm"); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
// display received HTTP request on serial port
Serial.print(HTTP_req);
HTTP_req = ""; // finished with request, empty string
break;
}
// every line of text received from the client ends with \r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
// send the temperature to the web browser
void GetPoolTemp(EthernetClient cl)
{
cl.print(22);
}