Web server- HTML page button problem

Hi!!! I am new on arduino projects.

I have created the web server on the arduino and I can conect to the server. Up to now I can take data from various sensors and display them to the web page. My next step was to add to the web page a button, which will control a digital pin of the arduino but I cannot make it work, I have searched a lot to the internet but I cannot find what I doing wrong.

Please find below the code that I wrote for this:

client.println("");
client.println("test button");
client.println("");

But there is an error: error: expected `)' before 'button'
I cannot find what is the problem. Can anyone help me on this??

Thank you in advance!

This won't work for a couple reasons.

client.println("<button type="button" onclick ="digitalWrite(led3,HIGH)">");

One, you need to escape the embedded double quotes and I don't think your computer/web browser will know what to do with the digitalWrite(led3,HIGH);

Hello agian!

I have accomplished to create a button in the web page using the code below

client.print("");

But my question is how I will make it work. I mean how I control a digital pin from my Arduino (UNO)???

Can anyone help me on that??

Thanks

You need to design your HTML page so that when the button is clicked, the browser sends an HTTP request to the Arduino. For example, you could put the button inside an HTML FORM configured with an HTTP POST action. At the Arduino side you need to check the content of the incoming HTTP request and work out whether it was initiated by the button click - in that case you would carry out whatever behaviour you wanted to be associated with that action.

Some arduino button code.

//zoomkat 8-04-12
//simple button GET server code to control servo and arduino pins 5, 6, and 7
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use ' instead of " 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(5, OUTPUT); //pin selected to control
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("server multi pin button 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>");
          
          // For simple testing, pin 5, 6, 7, and 8 are used in buttons
          // DIY buttons
          client.println("<a href=/?on2 >ON</a>"); 
          client.println("<a href=/?off3 >OFF</a>"); 
          client.println("&nbsp;<a href=/?off357 >ALL OFF</a>

"); 

          // mousedown buttons
          client.println("<input type=button value=ON onmousedown=location.href='/?on4'>"); 
          client.println("<input type=button value=OFF onmousedown=location.href='/?off5'>");        
          client.println("&nbsp;<input type=button value='ALL OFF' onmousedown=location.href='/?off3579'>

");        
                   
          // mousedown radio buttons
          client.println("<input type=radio onmousedown=location.href='/?on6'>ON</>"); 
          client.println("<input type=radio onmousedown=location.href='/?off7'>OFF</>"); 
          client.println("&nbsp;<input type=radio onmousedown=location.href='/?off3579'>ALL OFF</>

");    
   
          
          // custom buttons
          client.print("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on8'>");
          client.print("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off9'>");
          client.print("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579'>");

          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();

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

        }
      }
    }
  }
}

zoomkat:
Some arduino button code.

Thanks for this. This is exactly what I was looking for to use as a template to drive my garage door opener project!

Zoomkat That works great for the button. I am having a issues when I am reading a sensor and updating the screen by refreshing the page. This breaks the button... because it "clicks" every time the page refreshes. any ideas on how to stop that? or a different way of activating the pin via the button that doesn't make it click every refresh.

You can put your refreshing pages in frames like below.

// zoomkat's meta refresh data frame test page 5/25/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

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

const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino 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
unsigned long int x=0; //set refresh counter to 0
String readString; 

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

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test 5/25/13"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c; 
         } 
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

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

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>"); 
            //meta-refresh 0 for fast data
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>"); 
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("

");
            
              //output the value of each analog input pin
            client.print("analog input0 is: ");
            client.print(analogRead(analogInPin0));
            
            client.print("
analog input1 is: ");
            client.print(analogRead(analogInPin1));
                        
            client.print("
analog input2 is: ");
            client.print(analogRead(analogInPin2));
            
            client.print("
analog input3 is: ");
            client.print(analogRead(analogInPin3));
                                    
            client.print("
analog input4 is: ");
            client.print(analogRead(analogInPin4));
            
            client.print("
analog input5 is: ");
            client.print(analogRead(analogInPin5));
            client.println("
</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 5/25/13");
            client.print("

Arduino analog input data frame:
");
            client.print("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
            client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

Man that was was exactly what i needed to finish this project! Thanks!... i need to study up on HTML!

Hi ZOOMKAT!
Is it possible for you to write a code of refreshing pages in frames but for WIFI ?
like this:

#include <ESP8266WiFi.h>

const char* ssid = "";
const char* password = "
";
WiFi.begin(ssid, password);

...........

THANK YOU !!!

Good morning ... I have a similar plan to this one ... I am having some problems though ... I would like to press the button so much that my relay is working ... I have tried htm media from my card as well again, jeffos i didn't manage it ... thank you