Go Down

Topic: Excellent Arduino Ethernet Shield Web Server Tutorial (Read 204866 times) previous topic - next topic

SurferTim

They are all socket commands in a way. I posted my server code earlier. And zoomkat posted his code also. You can also get some good examples from that tutorial once you get the client request without crashing your code.

Those are the basics. Then you must modify those examples, or pay someone like zoomkat or me to complete your code. Besides being a network routing specialist, that is part of my job.  :)

neo3


They are all socket commands in a way. I posted my server code earlier. And zoomkat posted his code also. You can also get some good examples from that tutorial once you get the client request without crashing your code.

Those are the basics. Then you must modify those examples, or pay someone like zoomkat or me to complete your code. Besides being a network routing specialist, that is part of my job.  :)



I'm looking this example you showed:
http://playground.arduino.cc/Code/WebServerST

But I confess that I do not understanding what part I can change so that the page stay more or less this:
Code: [Select]
<!DOCTYPE html>
<html>
<head>
<title>Arduino - Luzes da Casa</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#CCCCCC">
<center>
<div style="background-color:#333333; color:#FFFFFF; font-size: 39px; font-weight: bold">Luzes da Casa</div>
<br>
<div style="font-size: 21px; font-weight: bold">Clique para Acender ou Apagar a luz.</div>
<br>
<form method="get">
<input type="submit" value="Quarto" onclick="submit();" name="luz" style="height:300px; width:300px; font-size:50px" />
<input type="submit" value="Sala" onclick="submit();" name="luz" style="height:300px; width:300px; font-size:50px" />
</form>
</center>
</body>
</html>


The buttons will turn on or off of the light of the room and the bedroom:
Code: [Select]
if (digitalRead(4) == LOW)
          {
              digitalWrite(4, HIGH);
          }
          else
          {
              digitalWrite(4, LOW);
          }
     
      if (digitalRead(5) == LOW)
          {
              digitalWrite(5, HIGH);
          }
          else
          {
              digitalWrite(5, LOW);
          }

SurferTim

You need to replace this with your web page.
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>"));
          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>"));
          client.println(F("</body></html>"));
 
Then search the request for your variables when it is submitted like mine does for "r" and "t".

pico

#48
Sep 02, 2013, 05:25 am Last Edit: Sep 02, 2013, 05:31 am by pico Reason: 1

If you mean Part 5 of this tutorial, you will notice [as I mentioned a few posts ago], his <input> elements are wrong. He needs either a </input> or " />" to close them, and make them correct [at least I think so].

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-LED-control/


Actually, Dan, the code is perfectly valid HTML -- <input ...> is one of those tags that do not require a closing tag, usually called "self-closing tags" or sometimes "unpaired tags" or even "void elements" (<img ...> being another common one).

Have a google!
WiFi shields/Yun too expensive? Embeddedcoolness.com is now selling the RFXduino nRF24L01+ <-> TCP/IP Linux gateway: Simpler, more affordable, and even more powerful wireless Internet connectivity for *all* your Arduino projects! (nRF24L01+ shield and dev board kits available too.)

neo3

#49
Sep 02, 2013, 03:38 pm Last Edit: Sep 02, 2013, 03:41 pm by neo3 Reason: 1
Then search the request for your variables when it is submitted like mine does for "r" and "t".


My question is exactly this, because I do not understanding how can I do to become more or less this:
Code: [Select]
void ProcessButton(EthernetClient cl)
{
if (HTTP_req.indexOf("luz=Quarto") > 0)
{
if (digitalRead(4) == LOW)
{
digitalWrite(4, HIGH);
}
else
{
digitalWrite(4, LOW);
}
}

if (HTTP_req.indexOf("luz=Sala") > 0)
{
if (digitalRead(5) == LOW)
{
digitalWrite(5, HIGH);
}
else
{
digitalWrite(5, LOW);
}
}

cl.println F("<input type=\"submit\" value=\"Quarto\" onclick=\"submit();\" name=\"luz\" style=\"height:300px; width:300px; font-size:50px\">");
cl.println F("<input type=\"submit\" value=\"Sala\" onclick=\"submit();\" name=\"luz\" style=\"height:300px; width:300px; font-size:50px\">");
}

SurferTim

Is "HTTP_req" a String type? If so, I can't help you. zoomkat says that data type works ok, but I have not found that to be correct. Just my experience.


neo3


Is "HTTP_req" a String type? If so, I can't help you. zoomkat says that data type works ok, but I have not found that to be correct. Just my experience.


"HTTP_req" is a String, but no need to use it, I just need to understand how do I read the GET requests in the code you indicated.

The request "luz=Quarto" should do this:
Code: [Select]
if (digitalRead(4) == LOW)
{
digitalWrite(4, HIGH);
}
else
{
digitalWrite(4, LOW);
}


And the request "luz=Sala" should do this:
Code: [Select]
if (digitalRead(5) == LOW)
{
digitalWrite(5, HIGH);
}
else
{
digitalWrite(5, LOW);
}

oric_dan



If you mean Part 5 of this tutorial, you will notice [as I mentioned a few posts ago], his <input> elements are wrong. He needs either a </input> or " />" to close them, and make them correct [at least I think so].

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-LED-control/


Actually, Dan, the code is perfectly valid HTML -- <input ...> is one of those tags that do not require a closing tag, usually called "self-closing tags" or sometimes "unpaired tags" or even "void elements" (<img ...> being another common one).

Have a google!

Sheesh, too many darn rules and exceptions. I am pretty sure that adding " />" is what fixed my problem with there being interactions between buttons when I had multiple buttons, but maybe it was something else again. Will have to test it some more later - am out of town now.

zoomkat

Simple server test code for turning an arduino pin high/low via a web page.

Code: [Select]

//zoomkat 12-8-11
//simple button GET with iframe 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 (or use ')
//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(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();

  //enable serial data print
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

          //now output HTML data header
             if(readString.indexOf('?') >=0) { //don't send new page
               client.println("HTTP/1.1 204 Zoomkat");
               client.println();
               client.println(); 
             }
             else {
          client.println("HTTP/1.1 200 OK"); //send new page
          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>Zoomkat's simple Arduino button</H1>");
         
          client.println("<a href=\"/?on\" target=\"inlineframe\">ON</a>");
          client.println("<a href=\"/?off\" target=\"inlineframe\">OFF</a>");

          //client.println("<IFRAME name=inlineframe src=\"res://D:/WINDOWS/dnserror.htm\" width=1 height=1\">");
          client.println("<IFRAME name=inlineframe style=\"display:none\" >");         
          client.println("</IFRAME>");

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

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

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

        }
      }
    }
  }
}

Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

neo3


Simple server test code for turning an arduino pin high/low via a web page.

Code: [Select]

//zoomkat 12-8-11
//simple button GET with iframe 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 (or use ')
//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(5, OUTPUT); //pin selected to control
 //start Ethernet
 Ethernet.begin(mac, ip, gateway, subnet);
 server.begin();

 //enable serial data print
 Serial.begin(9600);
 Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

         //now output HTML data header
            if(readString.indexOf('?') >=0) { //don't send new page
              client.println("HTTP/1.1 204 Zoomkat");
              client.println();
              client.println();  
            }
            else {
         client.println("HTTP/1.1 200 OK"); //send new page
         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>Zoomkat's simple Arduino button</H1>");
         
         client.println("<a href=\"/?on\" target=\"inlineframe\">ON</a>");
         client.println("<a href=\"/?off\" target=\"inlineframe\">OFF</a>");

         //client.println("<IFRAME name=inlineframe src=\"res://D:/WINDOWS/dnserror.htm\" width=1 height=1\">");
         client.println("<IFRAME name=inlineframe style=\"display:none\" >");          
         client.println("</IFRAME>");

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

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

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

       }
     }
   }
 }
}




I adapted your code with the code that I already use of sockets commands, but want to know if will still work the commands that use the socket connection made by my applications:
Code: [Select]
...

void loop() {
     
     EthernetClient client = server.available();
   
    // SE receber um caracter...
       
     delay(50);
     if (client) {
       while (client.connected()) {
         if (client.available()) {
           
           char c = client.read();
       
           // guarda o caracter na string 'msg'
           msg[0]=msg[1];
           msg[1]=msg[2];
           msg[2]=msg[3];
           msg[3]=msg[4];
           msg[4]= c;
           
           if (msg[4]=='#') {
             Serial.println(msg);

             LOOKS AND EXECUTE SOCKET COMMANDS
          } // Fim IF msg[4]
          else {
           //ler caractere por caractere do pedido HTTP
           if (readString.length() < 100) {
   
             //armazena os caracteres na string
             readString += c;
             //Serial.print(c);
           }
           
           //if pedido HTTP acabou
           if (c == '\n') {
   
             ///////////////
             Serial.println(readString); //imprimir no serial para debuging
   
             //saída de cabeçalho dos dados HTML
             if(readString.indexOf('?') >=0) { //não envia a página
                client.println(F("HTTP/1.1 204 OK"));
                client.println();
                client.println();  
             }
             else {
               client.println(F("HTTP/1.1 200 OK")); //envia a página
               client.println(F("Content-Type: text/html"));
               client.println();
     
               client.println(F("<html>"));
               client.println(F("<head>"));
               client.println(F("<title>Arduino - Luzes da Casa</title>"));
               client.println(F("</head>"));
               client.println(F("<body leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" bgcolor=\"#CCCCCC\">"));
               client.println(F("<center>"));
               client.println(F("<div style=\"background-color:#333333; color:#FFFFFF; font-size: 39px; font-weight: bold\">Luzes da Casa</div>"));
               client.println(F("<br>"));
               client.println(F("<div style=\"font-size: 21px; font-weight: bold\">Clique para Acender ou Apagar a luz.</div>"));          
               client.println(F("<br>"));
               client.println(F("<form method=\"get\">"));
               client.println(F("<input type=\"submit\" value=\"Quarto\" onclick=\"submit();\" name=\"luz\" style=\"height:300px; width:300px; font-size:50px\">"));
               client.println(F("<input type=\"submit\" value=\"Sala\" onclick=\"submit();\" name=\"luz\" style=\"height:300px; width:300px; font-size:50px\">"));
               client.println(F("</form>"));
               client.println(F("</center>"));
               client.println(F("</body>"));
               client.println(F("</html>"));
             }
   
             delay(1);
             //parar client
             client.stop();
   
             ///////////////////// controlar iluminação
             if(readString.indexOf("luz=Quarto") >0)//checar Quarto
             {
               if (digitalRead(4) == LOW)
               {
                 digitalWrite(4, HIGH);
               }
               else
               {
                 digitalWrite(4, LOW);
               }
               Serial.println("Web Quarto");
             }
             if(readString.indexOf("luz=Sala") >0)//checar Sala
             {
               if (digitalRead(5) == LOW)
               {
                 digitalWrite(5, HIGH);
               }
               else
               {
                 digitalWrite(5, LOW);
               }
               Serial.println("Web Sala");
             }
             //limpar string para a próxima leitura
             readString="";
           }
          } // Fim ELSE
         } // Fim client.available
       } // Fim client.connected
     }// Fim client
  }// Fim Loop

...

jonnygreenwood

wow .. good reference for me to learn arduino wider  :D

thank you for sharing


arniep

Can anyone give this newbie a suggestion for how to incorporate login and pw verification into a webserver on arduino?
Thanks...arniep

rappt

Hi,
Here http://q.gs/4tkFt have arduino completed code to control and monitorize my reef aquarium over internet, with arduino and ethernet shield :) :) :P :)

sakugava

I tried the http://playground.arduino.cc/Code/WebServerST with the example http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-gauge/
and it did not work. The gauge only shows 0 (zero)

SurferTim

My code examples in the playground are not designed for a persistent connection like Ajax uses. Did you modify the code to leave the connection open for the specific file request?

Go Up