Pages: [1]   Go Down
Author Topic: Inserting graph javascript into sample web server code?  (Read 3307 times)
0 Members and 1 Guest are viewing this topic.
Australia
Offline Offline
Sr. Member
****
Karma: 13
Posts: 444
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
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?

Logged

Australia
Offline Offline
Sr. Member
****
Karma: 13
Posts: 444
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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?
Logged

Miramar Beach, Florida
Online Online
Faraday Member
**
Karma: 139
Posts: 5856
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

There is already an example of JavaScript in that server code. Here it is:
Code:
         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:
         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.
« Last Edit: April 28, 2013, 12:00:12 am by SurferTim » Logged

Australia
Offline Offline
Sr. Member
****
Karma: 13
Posts: 444
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
         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.

« Last Edit: April 28, 2013, 03:38:39 am by lemming » Logged

Miramar Beach, Florida
Online Online
Faraday Member
**
Karma: 139
Posts: 5856
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

0
Offline Offline
God Member
*****
Karma: 39
Posts: 988
Get Bitlash: http://bitlash.net
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged

Australia
Offline Offline
Sr. Member
****
Karma: 13
Posts: 444
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

« Last Edit: April 28, 2013, 08:57:14 am by lemming » Logged

Pages: [1]   Go Up
Jump to: