Go Down

Topic: Inserting graph javascript into sample web server code? (Read 4083 times) previous topic - next topic

lemming

I am using SurferTims web server example at http://playground.arduino.cc/Code/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 http://www.jscharts.com/how-to-use-line-graphs that gives a javascript example with the following code:

Code: [Select]

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?


lemming

I have tried inserting the Javascript above between the "<head><script type=\"text/javascript\">" and the "</script></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?

SurferTim

#2
Apr 28, 2013, 06:12 am Last Edit: Apr 28, 2013, 07:00 am by SurferTim Reason: 1
There is already an example of JavaScript in that server code. Here it is:
Code: [Select]
         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.
Code: [Select]
         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:
Quote
<head><script type="text/javascript">
function show_alert() {
 alert("This is an alert");
}
</script></head>


edit: Missed some double quotes. Got 'em.

lemming

#3
Apr 28, 2013, 10:26 am Last Edit: Apr 28, 2013, 10:38 am by lemming Reason: 1
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):

Code: [Select]

         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><br>"));
         client.println(F("R: <input type=text name=r><br><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.


SurferTim

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.

billroy

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

lemming

#6
Apr 28, 2013, 02:57 pm Last Edit: Apr 28, 2013, 03:57 pm by lemming Reason: 1
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:

Code: [Select]

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


Go Up