Gauge controlled with Ajax shows Not A Number error

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);

}

no javascript expert either, but I think the number is send as a string and the receiving javascript expects a number.

So you should either do cl.write(22) ; to send it binary

or better do a "string2int" conversion on the receiving end.

you can test this by making the ajax field a string type and check this

Unless I'm mistaken, this javascript code, which runs in the browser, is trying to call GetPoolTemp(), a function from the Arduino C code. Which isn't possible, right?

data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue(GetPoolTemp());}, 800);"

Is the intention to send the actual temperature as part of the data-onready attribute? If so, you'll need to call GetPoolTemp() on the Arduino and insert its value into the page you send somehow.

-br

shows a working version with strings

Hi everybody,

I just got the input from my personal expert/friend/ex-collegue Ward (he is a genius) and he solved it.
I also contacted the canvgauge guy to solve a small remaining problem and it works fine.
Too late to post the code now but I will clean it up and post it tomorrow.

Thanks a lot.

This is the code for the index.htm file on the SD card

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>SD-ARDUINO-WEBSERVER</title>
	<script src="../../gauge.min.js"></script>
	<script src="../../pooltemp.js"></script>
</head>

<body onload="GetPoolTemp()">
 <center>
 <h1> 2GB SD-CARD ARDUINO-WEBSERVER WITH AJAX GAUGE</h1>
 <p> Left gauge driven by Arduino counter .1°C interval - Right gauge driven by javascript random number </p>
 

 
	<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-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"
	></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>

and this is the pooltemp.js file with the AJAX code
The pooltemp.js must be stored in a directory as defined in the index.htm file by the line below

function GetPoolTemp() {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
Gauge.Collection.get('gauge1').setValue(parseFloat(this.responseText));
}}}}
request.open("GET", "pool_temp_switch" + nocache, true);
request.send(null);
setTimeout('GetPoolTemp()', 1000);
}

note that you also need to host 2 files:

the gauge.min.js file hosted on the same place

and save the gauge.js on the SD card

all files and the Arduino sketch can downloaded below

GAUGES_SIMPLE.zip (18.9 KB)

Hello,

thanks for the "Guages Simple" sample files. Unfortunatly the example doesn’t work for me. When I visit the specific webpage I only get two nummeric values (xx.xx), no gauges are displayed. Instead of a Ethernet Shield I’m using the Arduino WiFi shield.

Does somebody know what is going wrong. Can it be caused by the WiFi shield I’m using?

Thanks

I tried your sketch and index.htm and also placed gauge.min.js & pooltemp.js on SD card root and modified the path in index.htm
The webpage title changes to "SD-ARDUINO-WEBSERVER" and it also displays:
2GB SD-CARD ARDUINO-WEBSERVER WITH AJAX GAUGE
Left gauge driven by Arduino counter .1°C interval - Right gauge driven by javascript random number

But unfortunately the Gauge does not show. Could you please let me know what could be the problem.

Any help is very much appreciated.

Thanks.