arduino web page

Hi guys

I’m working on a private arduino project. My goal is to create a web page in which I can write some text and send it to arduino and display it on arduino LCD. I’m using arduino Ethernet shield and Ethernet.h library. I have written the code for the web page. Here is the code

client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type:text/html”);
client.println("<script language=“javascript”");
client.println(“function Go(){ window.document.location.href=“http://161.53.168.112/?P=”+window.document.getElementById(‘addon’).value; }”);
client.println("");
client.println ("

Arduino LCD!

");
client.println ("<textarea name=“addon” rows=“10” cols=“30” “”>");
client.println ("

“);
client.println (”<input type=“button” onclick=“javascript:Go()”/>");

As you can see this code shows a basic textarea and a button. You write some text in the textarea click the button and the text (http text with parameters supplied in the link) should be sent to arduino. Well here is the problem when I click the button for the first time it doesn’t send the parameters supplied in the link, in this case written text (e.g. Ana), it sends just http://161.53.168.112/?P= , and that is it. But, when I click the button for the second time then it sends http://161.53.168.112/?P=Ana (suppose I wrote Ana in the text area). I have tried everything in changing the javascript and html code, with html form and javascript submit and etc. It always sends the parameters in the link after the second click. If anyone has something on his mind please share it, any bit of help. :slight_smile:

your first click may be just selecting the desired object/area on the web page and the second may be the one that actuates the onclick for that action.

Ok, I don't exactly know what do you mean by "selecting the desired object/area on the web page". But I forgot to mention that when I open the page, or when it loads in the browser, you can see in the Navigation Toolbar "http://161.53.168.112/?P=" when I type some text (Ana) in the textarea and click the button, the page loads again and in the Navigation toolbar is "http://161.53.168.112/?P=Ana" and I'm watching on the Monitor of arduino what came in from the network, I see; "http message......... ?P=", nothing came in near the '=' sign, but when a click for the second time arduino receives "http message......... ?P=Ana", and then in the webbrowsers Navigation toolbar is "http://161.53.168.112/?P=". So it's like for the first click it creates a new link but it sends the old (first, initial) link. I mean it's weird that it doesn't send the new link on the first click. I created a simple localhost webserver in C# and watched on the console what was coming in the http message. I used the same html/javascript web page and when I typed some text and clicked the button (only one time) the C# server console showed "GET /?P=Ana" ...rest of http message. So why do I have to click the button two times for arduino to receive the new link?

I don’t currently have my arduino setrup to test, but i think this code has a text box to submit text to the server. See if you have the same issue using it.

//zoomkat 3-25-12
//submit box code
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html 
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605 

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84);; //server port

String readString; 

//////////////////////

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("servertest1"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString);

          //now output HTML data header

          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>HTML form GET example</H1>");

          client.println("<FORM ACTION=\"http://192.168.1.102:84\" method=get >");

          client.println("Pin 4 \"on\" or \"off\": <INPUT TYPE=TEXT NAME=\"LED\" VALUE=\"\" SIZE=\"25\" MAXLENGTH=\"50\">
");

          client.println("<INPUT TYPE=SUBMIT NAME=\"submit\" VALUE=\"Change Pin 4!\">");

          client.println("</FORM>");

          client.println("
");

          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);
          //stopping client
          client.stop();

          /////////////////////
          if(readString.indexOf("on") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

Ok, I'll try it on monday because I currently don't have ethernet shield with me. I'll let you know if it worked.

Just to add. I solved it. I was looking at the wrong http content that comes from the browser all the time. The http message looks like this:

GET ?P=Ana HTTP 1.0
.......................
.......................
http://161.24.168.112/?P=

The last part shows the link, but it doesn't show the parameters that were added in the web page, but the first line shows what was added as a parameter from textarea. Why did I do such a silly mistake, because I printed the message on serial monitor one letter at a time, from a char c; variable, and the results on the monitor show vertically, and I didn't review the whole message, I found the last part of the http message and based my parsing on it. While the answer was staring in my face all along :slight_smile: . For future rookie arduino users, always form a whole string in a String type variable and show it on the monitor to test your results.

thanks for providing this tutorial.

is it necessary to use sd card.

i am trying to do this same project by using esp8266 instead of using ethernet shield..so please help me by providing this with code modifications....thank you so much..