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>
//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="";
}
}
}
}
}
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?
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.