Control and Status from website

Hi,

I would like a webpage to show the current value of an NTC thermistor and allow the user to enter a value in a form which will cause a digital output (to a relay) at some value. I have the UNO and Ethernet shield and have successfully accessed the Arduino remotely thanks to one of the sketch examples.

SO:
I can't get "PUT" HTML to work, I keep getting "FORBIDDEN" etc.
How does a value from a webpage act as an input to the Arduino?

I am looking for examples of programming that demonstrate this type of interaction.

Many thanks!

If you create a form like:

<FORM method="GET" action="/">
Field1: <INPUT type="text" name="field1">

Field2: <INPUT type="text" name="field2">

<INPUT type="submit" name="submit" value="Submit">
</FORM>

Then your Arduino will see input like:

GET /?field1=something&field2=somethingelse&submit=Submit HTTP/1.1
[...bunch more header lines...]

Recommend that you stick with the GET method instead of POST for now; that way you'll be able to see the form variables/values in the URL. POST is only needed if you intend to send more that 65K characters of data or you don't want the variables/values visible in the URL.

Many thanks for your reply. I am, frankly, over my head. I am going to research the form "method" attribute and see if I can make it work. I'm so out of my league I can't understand whether the url referenced in the "method / get" attribute is the webpage on a server or the Arduino board. I appreciate your guidance. You have at least helped me realize I'm clueless.

Below is a basic web server control test page using GET request. I've got some meta refresh code for displaying the voltage on the arduino pins tha might be of use if you are interested.

//zoomkat 3-17-12
//simple button GET server code to control a servo and arduino pin 4
//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
//Powering a servo from the arduino usually DOES NOT WORK.
//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>

#include <Servo.h> 
Servo myservo;  // create servo object to control a servo 

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

  myservo.write(90); //set initial servo position if desired
  myservo.attach(7);  //the pin for the servo co
  //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 

          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>");
          
          // DIY buttons
          client.println("<a href=\"/?on\"\">ON</a>"); 
          client.println("<a href=\"/?off\"\">OFF</a>
"); 

          // mousedown buttons
          client.println("
<input type=\"button\" value=\"ON\" onmousedown=\"location.href ('/?on');\"/>"); 
          client.println("<input type=\"button\" value=\"OFF\" onmousedown=\"location.href ('/?off');\"/>");        
          
          // mousedown radio buttons
          client.println("

<input type=\"radio\" value=\"ON\" onmousedown=\"location.href ('/?on');\"\">ON</>"); 
          client.println("<input type=\"radio\" value=\"OFF\" onmousedown=\"location.href ('/?off');\"\">OFF</>");        
 
          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();

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

        }
      }
    }
  }
}

zoomkat: that was awesome, thank you very much. I loaded it on to my Uno and was able to view it from the internet. It brings up a question though:

  1. There is no "GET" html tag? Am I looking for a red herring?

  2. I communicated my objective poorly, let me try again: A webpage at www.bob.com will show a map of Bob's house. This can't be a webpage generated by the Arduino board because the images and other functions will be too big. In the map of the living room that Bob see's on the webpage will be a label, "The temperature is: XX degrees" which is the temperature sensed by the Arduino board and "sent" to Bob's webpage. If Bob wants to turn on the A/C because it's too hot, he can click on a button that says "ON" and the Arduino will activate a series of relays or some control. It's this handshaking between a webpage on www.bob.com and the Arduino that has me stumped. Is it a simple href link to get the temperature?

I very much appreciate your help so far. Is there a name for this interaction in html that I can use to find research material? I will study and learn, but don't know where to start.

Below is a recent post with code that makes use of storing pix and web files on a microSD card where much more storage room is available. Bottom is simple test code that meta refreshes the analog value status of the arduino analog input pins and displays the data in a simple web page.

http://arduino.cc/forum/index.php/topic,97750.0.html

// arduino IDE 1.0
// for W5100 ethernet shield
// the IP address will be dependent on your local network/router
// port 80 is default for HTTP, but can be changed as needed
// use IP address like http://192.168.1.102:84 in your brouser
// or http://zoomkat.no-ip.com:84 with dynamic IP service
// use the \ slash to escape the " in the html
// meta refresh set for 2 seconds

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

int x=0; //set refresh counter to 0
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,102); // ip in lan
EthernetServer server(84); //server is using port 84

void setup()
{
  // start the server
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          
          //meta-refresh page every 2 seconds
          x=x+1; //page upload counter
          client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"2\">");
          client.print("<TITLE />Zoomkat's meta-refresh test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("Zoomkat's meta-refresh test IDE 1.0");
          client.println("
");
                    
          client.print("page refresh number ");
          client.println(x); //current refresh count
          client.println("
");
          client.println("
");
          
          client.print("Zoomkat's arduino analog input values:");
          client.println("
");
          client.println("
");
          
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(analogRead(analogChannel));
            client.println("
");
            }
           break;
          client.println("</BODY>");
          client.println("</HTML>");
         }
        }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}

At first blush it looks like the Holy Grail. Many thanks! I give it a try.

Forget "first blush" - I loaded this up in seconds and it hits the mark. I can make this work thanks to your help! Also, your response has caused me to look at this project in a different way, which is to abandon the need for an external page. That design change increases the value of the Arduino concept and makes everything easier at the same time. Hoopla! Many thanks.