Inserting graph javascript into sample web server code?

Projects Networking, Protocols, and Devices
1

I am using SurferTims web server example at Arduino Playground - WebServerST to create a 'Hello World' sketch and note that it contains javascript. (I wasn't aware that arduino could handle javascript so I assume that all the processing is handled client side).

I want to add a graph to the web pages served up, that shows readings of an analogue input, to the arduino, over time.

I have found sample code at JS Charts - JavaScript line graphs that gives a javascript example with the following code:

var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('chartid', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();

Not having any experience at web programming, I was wondering how I insert this code into the web server HTML so that it is syntactically correct and compiles in the IDE?

2

I have tried inserting the Javascript above between the "<script type="text/javascript">" and the "</head" lines in the webserver example both with the "client.println(F" command prepended to each JS line and without but to no avail.

Any ideas?

3

There is already an example of JavaScript in that server code. Here it is:

          client.println(F("<head><script type=\"text/javascript\">"));
          client.println(F("function show_alert() {alert(\"This is an alert\");}"));
          client.println(F("</script></head>"));

You can split the lines like this if you wish.

          client.println(F("<head><script type=\"text/javascript\">"));
          client.println(F("function show_alert() {"));
          client.println(F("  alert(\"This is an alert\");"));
          client.println(F("}"));
          client.println(F("</script></head>"));

It will look like this if you view the page source:

edit: Missed some double quotes. Got 'em.

4

Thanks Tim,

I saw that JS and that is why I used this working webserver example to adapt in the first place.

I inserted my JS in place of your 'alert' function thus (making no other changes so as not to break your code):

          Serial.println(F("Sending response"));
          client.print(F("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html>"));
          client.println(F("<head><script type=\"text/javascript\">"));
          //client.println(F("function show_alert() {alert(\"This is an alert\");}"));
          
          client.println("var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);");
          client.println("var myChart = new JSChart('chartid', 'line');");
          client.println("myChart.setDataArray(myData);");
          client.println("myChart.setLineColor('#8D9386');");
          client.println("myChart.setLineWidth(4);");
          client.println("myChart.setTitleColor('#7D7D7D');");
          client.println("myChart.setAxisColor('#9F0505');");
          client.println("myChart.setGridColor('#a4a4a4');");
          client.println("myChart.setAxisValuesColor('#333639');");
          client.println("myChart.setAxisNameColor('#333639');");
          client.println("myChart.setTextPaddingLeft(0);");
          client.println("myChart.draw();");
          
          client.println(F("</script></head>"));


          client.println(F("<body><H1>TEST</H1>"));

          client.println(F("<form method=GET onSubmit=\"show_alert()\">T: <input type=text name=t>
"));
          client.println(F("R: <input type=text name=r>
<input type=submit></form>"));

expecting it to work as previously mentioned. However when I click on the "Submit" button it should show the graph, but does nothing instead.

5

And it works ok when you tested it in a web server like IIS or Apache? Get the script working first, then import it to the Arduino.

6

What SurferTim said: get a simple HTML+javascript version of the full file working in the browser before you try to wrap it in client.println() for arduino.

Another potentially useful debugging technique would be to define and use a new function to send text to the client in your script, and in that function log all the output that is being sent to the client to the serial console for inspection.

-br

7

Thanks Guys. Finding it too hard and have switched to the HTML5 Canvas element.

I am drawing the graphs from scratch which sounds arduous but isn't.

For readers edification I list my rough test code below:

          client.print(F("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html>"));
          client.print(F("<meta http-equiv=\"refresh\" content=\"5\">"));
          client.print(F("<!DOCTYPE html>"));
          client.print(F("<html>"));
          client.print(F("<body>"));
          client.print(F("<canvas id=\"myCanvas\" width=\"1200\" height=\"650\" style=\"border:1px solid #d3d3d3;\">"));
          client.print(F("Your browser does not support the HTML5 canvas tag.</canvas>"));
          client.print(F("<script>"));
          
          client.print(F("var c=document.getElementById(\"myCanvas\");"));
          client.print(F("var ctx=c.getContext(\"2d\");"));
          client.print(F("ctx.rect(80,50,1000,500);"));
          client.print(F("ctx.font=\"20px Arial\";"));
          client.print(F("ctx.fillText(\"Sensor\",5,50);"));
          client.print(F("ctx.fillText(\"Reading\",5,70);"));
          client.print(F("ctx.fillText(\"Time\",1030,580);"));
                    
          //client.print(F("ctx.fillStyle=\"#FF0000\";"));
          //client.print(F("ctx.fillRect(0,0,150,75);"));
          
          //client.print(F("ctx.moveTo(0,0);"));
          
          
          pointX = 80;
          pointY = 550;
          client.print(F("ctx.moveTo("));
          client.print(pointX);
          client.print(",");
          client.print(pointY);
          client.print(F(");"));
          
          for(double i = 0; i < 1000; i++)
          {
            pointX = i + 80;
            //pointY = 550 - (i/2);
            pointY = 550 - ((i/45)*(i/45));
            client.print(F("ctx.lineTo("));
            client.print(pointX);
            client.print(",");
            client.print(pointY);
            client.print(F(");"));
            client.print(F("ctx.stroke();"));            
          }
          
          client.print(F("</script>"));
          client.print(F("</body>"));
          client.print(F("</html>"));
8

I have been PM'ed for a modified full version of this code so I am posting it here for others to see. A heavily modified version of SurferTims webserver code and more a proof of concept.

#include <SPI.h>
#include <Ethernet.h>
// uncomment next line if using SD
// #include <SD.h>

// this must be unique
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xEC };

// change to your network settings
IPAddress ip( 192,168,1,33 );
IPAddress gateway( 192,168,1,1 );
IPAddress subnet( 255,255,255,0 );

int pointX, pointY;

int Temp1[] = {-20, -15, 0, 20, 15, 25, 35, 35, 35, 35};
int Humidity[] = {0, 0, 15, 35, 25, 30, 50, 40, 50, 100};

EthernetServer server(80);

void setup()
{
  Serial.begin(9600);

  // disable w5100 while setting up SD
  // uncomment next 5 lines if using a microSD card

  //  pinMode(10,OUTPUT);
  //  digitalWrite(10,HIGH);
  // Serial.print(F("Starting SD.."));
  // if(!SD.begin(4)) Serial.println(F("failed"));
  // else Serial.println(F("ok"));

  //Ethernet.begin(mac, ip, gateway, gateway, subnet);
  //digitalWrite(10,HIGH);

  Serial.println("NIC Reset"); 
  digitalWrite(2, LOW);
  delay(1000);
  digitalWrite(2, HIGH);
  delay(2000);
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  delay(2000);
  server.begin();
  delay(1000);  
  Serial.println(F("Ready"));
  Serial.println();
}

void loop()
{
  EthernetClient client = server.available();
  if(client) {
    boolean currentLineIsBlank = true;
    boolean currentLineIsGet = true;
    int tCount = 0;
    char tBuf[64];
    int r,t;
    char *pch;

    Serial.print(F("Client request: "));
    // this controls the timeout
    int loopCount = 0;

    while (client.connected())
    {
      while(client.available())
      {
        // if packet, reset loopCount
        loopCount = 0;
        char c = client.read();
        if(currentLineIsGet && tCount < 63)
        {
          tBuf[tCount] = c;
          tCount++;
          tBuf[tCount] = 0;          
        }
        if (c == '\n' && currentLineIsBlank)
        {
          // send a standard http response
          Serial.println(tBuf);
          Serial.print(F("POST data: "));
          while(client.available()) Serial.write(client.read());
          Serial.println();          
          Serial.println(F("Sending response"));
          
          client.print(F("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html>"));
          //client.print(F("<meta http-equiv=\"refresh\" content=\"5\">"));
          client.print(F("<!DOCTYPE html>"));
          client.print(F("<html>"));
          client.print(F("<body>"));
          client.print(F("<canvas id=\"myCanvas\" width=\"1200\" height=\"650\" style=\"border:1px solid #d3d3d3;\">"));
          client.print(F("Your browser does not support the HTML5 canvas tag.</canvas>"));
          client.print(F("<script>"));
          
          client.print(F("var c=document.getElementById(\"myCanvas\");"));
          client.print(F("var ctx=c.getContext(\"2d\");"));
          client.print(F("ctx.rect(80,50,1000,500);"));
          client.print(F("ctx.font=\"12px Arial\";"));
          client.print(F("ctx.fillText(\"Degrees\",5,20);"));
          client.print(F("ctx.fillText(\"35 -\",5,94);"));
          client.print(F("ctx.fillText(\" 0 -\",5,444);"));
          client.print(F("ctx.fillText(\"-20 -\",5,645);"));
          
          client.print(F("ctx.fillText(\"Humidity\",1150,20);"));
          client.print(F("ctx.fillText(\"100%\",1150,40);"));
          client.print(F("ctx.fillText(\"50%\",1150,345);"));
          client.print(F("ctx.fillText(\"0%\",1150,640);"));
                    
          //client.print(F("ctx.fillStyle=\"#FF0000\";"));
          //client.print(F("ctx.fillRect(0,0,150,75);"));          
          //client.print(F("ctx.moveTo(0,0);"));          
          
          //Paint temperature line
          pointX = 50;
          pointY = 440 - (Temp1[0] * 10);
          client.print(F("ctx.beginPath();"));
          client.print(F("ctx.lineWidth=\"1\";"));
          client.print(F("ctx.strokeStyle=\"red\";"));
          client.print(F("ctx.moveTo("));
          client.print(pointX);
          client.print(",");
          client.print(pointY);
          client.print(F(");"));
          for(int i = 1; i < 10; i++)
          {
            pointX = (i * 120) + 50;            
            pointY = 440 - (Temp1[i] * 10);            
            client.print(F("ctx.lineTo("));
            client.print(pointX);
            client.print(",");
            client.print(pointY);
            client.print(F(");"));
            client.print(F("ctx.stroke();"));            
          }         
          
          //Paint humidity line
          pointX = 50;
          pointY = 640 - (Humidity[0] * 6);
          Serial.println(pointY);
          client.print(F("ctx.beginPath();"));
          client.print(F("ctx.lineWidth=\"1\";"));
          client.print(F("ctx.strokeStyle=\"blue\";"));
          client.print(F("ctx.moveTo("));
          client.print(pointX);
          client.print(",");
          client.print(pointY);
          client.print(F(");"));
          for(int i = 1; i < 10; i++)
          {
            pointX = (i * 120) + 50;
            Serial.println(pointY);
            pointY = 640 - (Humidity[i] * 6);
            client.print(F("ctx.lineTo("));
            client.print(pointX);
            client.print(",");
            client.print(pointY);
            client.print(F(");"));
            client.print(F("ctx.stroke();"));            
          }
          
          client.print(F("</script>"));
          client.print(F("</body>"));
          client.print(F("</html>"));        
          client.stop();
        }
        else if (c == '\n') {
          currentLineIsBlank = true;
          currentLineIsGet = false;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
      loopCount++;
      // if 10000ms has passed since last packet
      if(loopCount > 10000) {
        // close connection
        client.stop();
        Serial.println("\r\nTimeout");
      }
      // delay 1ms for timeout timing
      delay(1);
    }
    Serial.println(F("done"));
  }
}