WebServerST checkbox return value?

Dear Web experts,

my goal is a web page with checkboxes that represent the status of DIO pins.
I want to use a click to the checkbox as a command for the Arduino to set the DOut pin accordingly.
After many days of investigations on the net I still haven’t found a solution.

Usually a onclick= entry in the html file is used to do something, but I don’t know what is necessary to make the browser send a command to the server.

How could this be done?

I’m using the WebServerST and know that it has to be enhanced to deal with the commands commands from the browser.

Example index.htm file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Checkbox Test</title>
    
  </head>
  <body>
  	<div id="title">Checkbox Test</div>
	<input type="checkbox" name="" value="" onclick="Send to Arduino?">
	<input type="checkbox" name="" value="" onclick="How?">
	<input type="checkbox" name="" value="" onclick="Was muss hier rein?">
	<input type="checkbox" name="" value="" onclick="Was muss hier rein?">
  </body>
</html>
  • (CBR)

Basic on click do something web server code.

//zoomkat 3-17-12
//simple button GET server code to control servo and arduino pin 5
//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(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, 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(5, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            myservo.write(140);
            digitalWrite(5, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

Thank you zoomkat for your help.

I tested it on Win7 with IE10 (all examples work most of the time).
With Firefox 25.0.1 and on Android (standard and Dolphin browser) the button examples don’t work.
Wireshark shows me that no data is send from the browser to the arduino.

For me it is important that I find a solutuion that runs on Android, too.

Any ideas why location.href isn’t working on Android and Firefox?

Thanks,

  • (CBR)

I'd do a Google search for "html tutorial", "radio button tutorial" and similar to find html code that works with your browsers. Some browsers apparently also try to get a favorite icon along with the request, which some have mentioned may cause problems.

Thanks zoomkat,

before I started this thread I already googled for a few days to find a solution but nothing worked so far.

Anyway I still believe there is a working toggle solution out there that will work on Arduino, too.

I'm playing around with FHEM for Home Automation and their toggle works, even changes icons(On/Off)

You might try hard coding the arduino IP address like below to see if that makes a difference.

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