Pages: [1]   Go Down
Author Topic: Web server with two input boxes  (Read 1196 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
God Member
*****
Karma: 0
Posts: 600
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello!
 I already have a passive web server on my 2009 with official eth shield and IDE 1.0.
Passive means that I print a dynamic page only to display my sensors data using client.print.
I'd like to add two input boxes to set two values via the web page.
I'd like to put numbers in the boxes, press "send", receive this number on my arduino and then store this values into byte variables. Values goes from 0 to 100 max.
Someone can suggest a basic example to learn from?

Thank you!
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 549
Posts: 46090
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I already have a passive web server on my 2009 with official eth shield and IDE 1.0.
Perhaps if you showed the code in greater than 0 point font, we could see it.  smiley

Quote
Passive means that I print a dynamic page only to display my sensors data using client.print.
Passive and dynamic do not go together. A server serves up a page in response to a client request. The page might include a form with one or more submit buttons that cause data to be sent back to the server. That is one definition of dynamic. The page might include meta tags that cause the client to fetch the page again after some defined interval. That is the other definition of dynamic. Static pages show the same data every time the page is loaded. Active or passive is completely irrelevant.

Quote
I'd like to put numbers in the boxes, press "send", receive this number on my arduino and then store this values into byte variables. Values goes from 0 to 100 max.
Someone can suggest a basic example to learn from?
Sure. What you want is for the server to serve up a page with a form that contains a submit button. Google "html forms" to learn more than you ever wanted to know about forms. Design one.

The action when the form is submitted is to query the same server (the Arduino) again, but with a different GET request. The new GET request has a ? in the string, and one ore more name=value pairs, separated by &s.
GET /yo.arduino&name=Joe&pass=noob

The task of the Arduino is to distinguish GET /yo.Arduino from GET /yo.arduino&name=Joe&pass=noob, and to parse (strok()) the extra data, and act on it.
Logged

Offline Offline
God Member
*****
Karma: 0
Posts: 600
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I already have a passive web server on my 2009 with official eth shield and IDE 1.0.
Perhaps if you showed the code in greater than 0 point font, we could see it.  smiley

It's the classic web server, nothing more nothing less smiley
Code at the bottom btw smiley

Quote
Passive means that I print a dynamic page only to display my sensors data using client.print.
Passive and dynamic do not go together.

Passive It's just my way to mean something I can not send data back.
Just this smiley

Quote
The new GET request has a ? in the string, and one ore more name=value pairs, separated by &s.
GET /yo.arduino&name=Joe&pass=noob
The task of the Arduino is to distinguish GET /yo.Arduino from GET /yo.arduino&name=Joe&pass=noob, and to parse (strok()) the extra data, and act on it.

Emh.. since I'm noob (with arduino and with html) do you have a playground link or a guide, or a tutorial to learn from?

Code:
/*---------- webserver part ------------*/

  char clientline[BUFSIZ];
  int index = 0;

  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;

    // reset the input buffer
    index = 0;

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        // If it isn't a new line, add the character to the buffer
        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;
          // are we too big for the buffer? start tossing out data
          if (index >= BUFSIZ)
            index = BUFSIZ -1;

          // continue to read more data!
          continue;
        }

        // got a \n or \r new line, which means the string is done
        clientline[index] = 0;

        // Print it out for debugging
        Serial.println(clientline);

        // Look for substring such as a request to get the root file
        if (strstr(clientline, "GET / ") != 0) {
          // send a standard http response header
          client.println(F("HTTP/1.1 200 OK"));
          client.println(F("Content-Type: text/html"));
          client.println();

          // meta refresh page every 60 seconds
          //pagerefreshnumber=pagerefreshnumber+1;
          client.print(F("<HEAD><meta http-equiv=\"refresh\" content=\"60\"><TITLE />GreenHouse Project Lan Page</title></head>"));
          //client.print(F("<HEAD>"));
          //client.print(F("<meta http-equiv=\"refresh\" content=\"60\">"));
          //client.print(F("<TITLE />GreenHouse Project Lan Page</title>"));
          //client.print(F("</head>"));


          client.print(F("<HR>Temperatura OUT: "));
          client.print(mydata.toutES);
          client.print(F(" C<BR>Umidita' OUT: "));
          client.print(mydata.houtES);
          client.print(F(" %<HR>Temperatura IN: "));         
          client.print(mydata.tinES);
          client.print(F(" C<BR>Umidita' IN: "));
          client.print(mydata.hinES);
         
        }
        else if (strstr(clientline, "GET /") != 0) {
          // this time no space after the /, so a sub-file!
          char *filename;

          filename = clientline + 5; // look after the "GET /" (5 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;

          // print the file we want
          Serial.println(filename);

          if (! file.open(&root, filename, O_READ)) {
            client.println(F("HTTP/1.1 404 Not Found"));
            client.println(F("Content-Type: text/html"));
            client.println();
            client.println(F("404 - Pagina Non Trovata"));
            break;
          }

          Serial.println(F("Opened!"));

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

          int16_t c;
          while ((c = file.read()) > 0) {
            // uncomment the serial to debug (slow!)
            // Serial.print((char)c);
            client.print((char)c);
          }
          file.close();
        }
        else {
          // everything else is a 404
          client.println(F("HTTP/1.1 404 Not Found"));
          client.println(F("Content-Type: text/html"));
          client.println();
          client.println(F("404 - Pagina Non Trovata"));
        }
        break;
      }
    }
    // give the web browser time to receive the data
    delay(100);

Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 115
Posts: 5380
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Some day I will try to get my stuff on the playground. But until then, here is a section of code I use. The variables are 'r' and 't'. Change the network settings to yours.
Code:
#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip( 192,168,0,2 );
IPAddress gateway( 192,168,0,1 );
IPAddress subnet( 255,255,255,0 );
IPAddress dns( 192,168,0,1 );

EthernetServer server(80);

void setup()
{
  Serial.begin(9600);
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);
  Ethernet.begin(mac, ip, dns, gateway, subnet);
  delay(2000);
  server.begin();
  Serial.println("Ready");
}

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("Client request: ");
   
    while (client.connected()) {
      while(client.available()) {
        char c = client.read();

        if(currentLineIsGet && tCount < 63)
        {
          tBuf[tCount] = c;
          tCount++;
          tBuf[tCount] = 0;         
        }

        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response
          while(client.available()) client.read();
          Serial.println(tBuf);
          pch = strtok(tBuf,"?");

          while(pch != NULL)
          {
            if(strncmp(pch,"t=",2) == 0)
            {
              t = atoi(pch+2);
              Serial.print("t=");
              Serial.println(t,DEC);             
            }

            if(strncmp(pch,"r=",2) == 0)
            {
              r = atoi(pch+2);
              Serial.print("r=");             
              Serial.println(r,DEC);
            }


            pch = strtok(NULL,"& ");
          }
          Serial.println("Sending response");
          client.write("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html><body><H1>TEST</H1>");

          client.write("<form method=GET>T: <input type=text name=t><br>");
          client.write("R: <input type=text name=r><br><input type=submit></form>");
         
          client.write("</body></html>\r\n\r\n");
          client.stop();
        }
        else if (c == '\n') {
          currentLineIsBlank = true;
          currentLineIsGet = false;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    Serial.println("done");
  }
}

I had to edit the network settings, so my apology in advance for typos.
Logged

0
Offline Offline
Tesla Member
***
Karma: 114
Posts: 8928
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Server test code that allows input to be sent to the arduino and acted upon.

Code:
//zoomkat 1-10-11
//web LED 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

#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); //uncomment to see in serial monitor
        }

        //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\"><BR>");

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

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

          client.println("<BR>");

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

        }
      }
    }
  }
}


Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

Offline Offline
God Member
*****
Karma: 0
Posts: 600
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Thanks to all.
I have now my code up and running.
Code:
client.print(F("<input type='button' value='Invia' onclick='window.open(\"/?tmin=\" + document.getElementById(\"tmin\").value"));
          client.println(F(",\"_blank\",\"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=400, top=100, left=500\")'>"));
          client.println(F("<input type=text id='tmin' SIZE=3>"));
          client.print(F("<BR>SetPoint Spegnimento.: "));     
          client.print(mydata.tSSRMaxES);   // temperatura per spegnimento relé
          client.print(F(" C --- "));     
          client.print(F("<input type='button' value='Invia' onclick='window.open(\"/?tmax=\" + document.getElementById(\"tmax\").value"));
          client.println(F(",\"_blank\",\"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=400, top=100, left=500\")'>"));
          client.println(F("<input type=text id='tmax' SIZE=3>"));
         
Code:
if (strstr(clientline, "GET /?tmin=") != 0) {
          // recezione set point t min
          char *filename;
          filename = clientline + 11; // look after the "GET /?tmin=" (11 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;
          // print the file we want
          Serial.print(F("Tmin Ricevuta: "));
          Serial.println(filename);
          int tminviaweb = atoi(filename);
          Serial.print(F("Atoi: "));
          Serial.println(tminviaweb);
          mydata.tminviawebES = tminviaweb;
          ET.sendData();
          Serial.println(F("Tmin Inviata"));
          mydata.tminviawebES = 0;
          client.println(F("HTTP/1.1 TMin Ok"));
          client.println(F("Content-Type: text/html"));
          client.println();
          client.println(F("T.Min Inviata"));

        }
And so on.

I've just a final question.
Can I create a confirm popup like this:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert ?
I really cant figure out do this in arduino.
Any help will be appreciated smiley
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 115
Posts: 5380
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Javascript is client side code, so you just send it like everything else. This should not be a problem for you with the examples you were given, but here it is anyway.
Code:
         Serial.println("Sending response");
          client.write("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html>");

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

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

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

          
          client.write("</body></html>\r\n\r\n");
          client.stop();
    

edit: I somehow removed a bracket copying it to the forum. Corrected now.
« Last Edit: March 09, 2012, 06:43:30 am by SurferTim » Logged

Offline Offline
God Member
*****
Karma: 0
Posts: 600
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I wish It was so simple Surfer smiley
Btw my bad, I've not explain myself enough.

I'd like to:
Make two forms to send values to my arduino (done!).
On submit keep my sensors page open (to be).
On submit Notify this action with a popup (to be).

Right now I managed different solutions, but neither of these work.

If I put your code in, my arduino receive a GET /?tmin= ... and since it has a web server it answers with a 404.
If I display the sensors page after the if, I get the sensor page display correctly.
BUT The address in the bar becomes myip/?tmin=myvalue... and since I have a meta reload every 60second, the page keep sending the GET every 60 second!

My code probably will explain better.
Btw:
I'd like to press a button, send a value and do not move from my sensor page.
Is this possible? A plus will be to have a notify popup when I press the send button. To know that I have successful sent the query.
Do you know a way to do this?

Code since now:
Code:
/*---------- WEB SERVER ------------*/

  char clientline[BUFSIZ];
  int index = 0;

  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;

    // reset the input buffer
    index = 0;

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        // If it isn't a new line, add the character to the buffer
        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;
          // are we too big for the buffer? start tossing out data
          if (index >= BUFSIZ)
            index = BUFSIZ -1;

          // continue to read more data!
          continue;
        }

        // got a \n or \r new line, which means the string is done
        clientline[index] = 0;

        // Print it out for debugging
        Serial.println(clientline);

        if (strstr(clientline, "GET /?tmin=") != 0) {
          // recezione set point t min
          char *filename;
          filename = clientline + 11; // look after the "GET /?tmin=" (11 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;
          // print the file we want
          Serial.print(F("Temperatura Minima Ricevuta: "));
          Serial.println(filename);
          int tminviaweb = atoi(filename);
          Serial.print(F("Atoi: "));
          Serial.println(tminviaweb);
          mydata.tminviawebES = tminviaweb;
          ET.sendData();
          Serial.println(F("Tmin Inviata"));
          mydata.tminviawebES = 0;
          //client.println(F("HTTP/1.1 TMin Ok"));
          //client.println(F("Content-Type: text/html"));
          //client.println();
          //client.println(F("Temperatura Minima Inviata"));
          goto indexpage;
        }

        if (strstr(clientline, "GET /?tmax=") != 0) {
          // recezione set point t max
          char *filename;
          filename = clientline + 11; // look after the "GET /?tmax=" (11 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;
          // print the file we want
          Serial.print(F("Temperatura Massima Ricevuta: "));
          Serial.println(filename);
          int tmaxviaweb = atoi(filename);
          Serial.print(F("Atoi: "));
          Serial.println(tmaxviaweb);
          mydata.tmaxviawebES = tmaxviaweb;
          ET.sendData();
          Serial.println(F("Tmax Inviata"));
          mydata.tmaxviawebES = 0;
          //client.println(F("HTTP/1.1 TMin Ok"));
          //client.println(F("Content-Type: text/html"));
          //client.println();
          //client.println(F("Temperatura Massima Inviata"));
          goto indexpage;
        }

        // Look for substring such as a request to get the root file
        if (strstr(clientline, "GET / ") != 0) {
indexpage:
          // send a standard http response header
          client.println(F("HTTP/1.1 200 OK"));
          client.println(F("Content-Type: text/html"));
          client.println();

          // meta refresh page every 60 seconds
          client.print(F("<HEAD><meta http-equiv=\"refresh\" content=\"60\"><script type=\"text/javascript\">"));
          client.print(F("function show_alert() {alert (\"Inviare SetPoint?\");}"));
          client.print(F("</script><TITLE />GreenHouse Project Lan Page</title></head>"));

          // Creazione pagina web locale: <BR> a capo <HR> a capo con separatore
          client.print(F("<body><h3>GreenHouse Project 0.5 Final R4d IDE 1.0</h3><HR>Temperatura OUT: "));
          client.print(mydata.toutES);
          client.print(F(" C<BR>Umidita' OUT: "));
          client.print(mydata.houtES);
          client.print(F(" %<HR>Temperatura IN: "));          
          client.print(mydata.tinES);
          client.print(F(" C<BR>Umidita' IN: "));
          client.print(mydata.hinES);
          client.print(F(" %<HR>Temperatura H2O: "));
          client.print(mydata.T1ES);
          client.print(F(" C<BR>Luminosita': "));
          client.print(mydata.mediaHzES);
          client.print(F(" Hz<HR>Temperatura Heater: "));          
          client.print(mydata.T2ES);
          client.print(F(" C<BR>SetPoint Accensione...: "));      
          client.print(mydata.tSSRMinES);   // temperatura per accensione relé
          client.print(F(" C"));      
          client.print(F("<form method=GET style='display:inline' onSubmit=\"show_alert()\"> --- <input type=text name=tmin SIZE=3 ><input type=submit value=Invia></form>"));
          client.print(F("<BR>SetPoint Spegnimento.: "));      
          client.print(mydata.tSSRMaxES);   // temperatura per spegnimento relé
          client.print(F(" C"));      
          client.print(F("<form method=GET style='display:inline' onSubmit=\"show_alert()\"> --- <input type=text name=tmax SIZE=3><input type=submit value=Invia></form>"));

  }

        else if (strstr(clientline, "GET /") != 0) {
          // this time no space after the /, so a sub-file!
          char *filename;

          filename = clientline + 5; // look after the "GET /" (5 chars)
          // a little trick, look for the " HTTP/1.1" string and
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;

          // print the file we want
          Serial.println(filename);

          if (! file.open(&root, filename, O_READ)) {
            client.println(F("HTTP/1.1 404 Not Found"));
            client.println(F("Content-Type: text/html"));
            client.println();
            client.println(F("404 - Pagina Non Trovata"));
            break;
          }

          Serial.println(F("Opened!"));

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

          int16_t c;
          while ((c = file.read()) > 0) {
            // uncomment the serial to debug (slow!)
            // Serial.print((char)c);
            client.print((char)c);
          }
          file.close();
        }
        else {
          // everything else is a 404
          client.println(F("HTTP/1.1 404 Not Found"));
          client.println(F("Content-Type: text/html"));
          client.println();
          client.println(F("404 - Pagina Non Trovata"));
        }
 


* layout5.jpg (129.29 KB, 662x598 - viewed 47 times.)

* layout6.jpg (56.79 KB, 374x518 - viewed 39 times.)
« Last Edit: March 09, 2012, 03:25:47 pm by DanielaES » Logged

Pages: [1]   Go Up
Jump to: