My Ethernet shield just arrived in the mail. So I'm just beggining to mess around with web pages, my main goal being to create a web page that allows me to control various devices, but I am having trouble. I don't know much about html so I'm using an online html page builder (html.am) to build a simple form that I am saving as 'server.htm' on my SD card.
here's what I have so far:
<html>
<head>
<title></title>
</head>
<body>
<form name="Thermostat">
<p><strong>Light <input name="lightOn" type="button" value="On" /> <input name="lightOff" type="button" value="Off" /></strong></p>
<p><strong>Pause <input name="pauseA" type="button" value="5 Min" /> <input name="pauseB" type="button" value="10 Min" /> <input name="pauseC" type="button" value="30 Min" /> <input name="pauseD" type="button" value="1 Hour" /> <input name="pauseE" type="button" value="2 Hours" /></strong> <input name="unPause" type="button" value="Un-Pause" /></p>
<p><strong>Force On </strong><span style="font-weight: bold;"> </span><input name="forceA" type="button" value="5 Min" /><span style="font-weight: bold;"> </span><input name="forceB" type="button" value="10 Min" /><span style="font-weight: bold;"> </span><input name="forceC" type="button" value="30 Min" /><span style="font-weight: bold;"> </span><input name="forceD" type="button" value="1 Hour" /><span style="font-weight: bold;"> </span><input name="forceE" type="button" value="2 Hours" /> <input name="forceCancel" type="button" value="Cancel" /></p>
<p><strong>Message <input maxlength="16" name="Line1" type="text" value="-line 1-" /></strong> <input maxlength="16" name="line2" type="text" value="-line 2-" /> <select name="messageTime" size="1"><option selected="selected" value="5">5 Seconds</option><option value="10">10 Seconds</option><option value="20">20 Seconds</option><option value="30">30 Seconds</option><option value="60">1 Minute</option><option value="120">2 Minutes</option><option value="300">5 Minutes</option><option value="600">10 Munites</option></select> <input name="messageSubmit" type="button" value="Send" /></p>
<p><strong>Set &#39;on&#39; temperature <input maxlength="2" name="on" type="text" /></strong> <input name="onSubmit" type="button" value="Set" /></p>
<div><strong>Set &#39;off&#39; temperature <input maxlength="2" name="off" type="text" /></strong> <input name="offSubmit" type="button" value="Set" /></div>
<div> </div>
</form>
<p> </p>
</body>
</html>
what I want to know is how to get information back from the webpage. how do I execute a function on my arduino when I click a button on the webpage? depending on the button clicked, how do I then retrieve the value of a text box or two?
here is my arduino code aswell:
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);
EthernetServer server(80);
File webFile;
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
Serial.begin(9600);
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("server.htm")) {
Serial.println("ERROR - Can't find server.htm file!");
return; // can't find server file
}
Serial.println("SUCCESS - Found server.htm file.");
}
void loop()
{
EthernetClient client = server.available();
if (client) {
boolean currentLineIsBlank = true;
Serial.println("Client connected http request:");
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.print(c);
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/192.168.1.177 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// send web page
webFile = SD.open("server.htm"); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
break;
}
// every line of text received from the client ends with \r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
}
}
Serial.println();
Serial.println();
Serial.println("-End client-");
delay(1);
client.stop();
}
}
thanks to W.A. Smith, http://startingelectronics.org for the web tutorial getting me this far.
what I want to know is how to get information back from the webpage.
Below is a simple web page setup where data is returned from the arduino and displayed in a web page frame.
// 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(" <a href='/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
client.print(" <a href='/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
client.print(" <a href='/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
client.print("<iframe src='/data' width='350' height='250' name='DataBox'>");
client.print("</iframe>
</HTML>");
}
delay(1);
//stopping client
client.stop();
//clearing string for next read
readString="";
}
}
}
}
}
how do I execute a function on my arduino when I click a button on the webpage?
Simple web page button code to have the arduino do something.
//zoomkat 10-6-13
//simple button GET with iframe code
//open serial monitor to see what the arduino receives
//use the ' instead of " in html ilnes
//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 }; //ethernet shield 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
String readString;
//////////////////////
void setup(){
pinMode(4, 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("servertest1"); // 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\r\n\r\n");
}
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='/?on1' target='inlineframe'>ON</a>");
client.println("<a href='/?off' target='inlineframe'>OFF</a>");
client.print("<a href='/?on1' target='inlineframe'><button type='button'>ON</button></a>");
client.print("<a href='/?off' target='inlineframe'><button type='button'>OFF</button></a>");
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("on1") >0)//checks for on
{
digitalWrite(4, HIGH); // set pin 4 high
Serial.println("Led On");
}
if(readString.indexOf("off") >0)//checks for off
{
digitalWrite(4, LOW); // set pin 4 low
Serial.println("Led Off");
}
//clearing string for next read
readString="";
}
}
}
}
}
depending on the button clicked, how do I then retrieve the value of a text box or two?
Web page text box code for sending servo control values entered in a text box.
//zoomkat 6-13-15
//get submit box 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 a '
//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*.
#include <SPI.h>
#include <Ethernet.h>
#include <Servo.h>
Servo myservo; // create servo object to control a servo
//int n; //value to write to 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, newString;
//////////////////////
void setup(){
//start Ethernet
Ethernet.begin(mac, ip, gateway, gateway, subnet);
server.begin();
//enable serial data print
Serial.begin(9600);
myservo.writeMicroseconds(1500); //set initial servo position if desired
myservo.attach(7, 500, 2500); //the pin for the servo control, and range if desired
Serial.println("server text box servo test"); // 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.print(readString); //see what was captured
//now output HTML data header
client.println("HTTP/1.1 200 OK");
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>HTML form GET example</H1>");
client.println("<FORM ACTION='/' method=get >"); //uses IP/port of web page
client.println("Set servo position: <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
");
client.println("<INPUT TYPE=SUBMIT NAME='submit' VALUE='Send servo position'>");
client.println("</FORM>");
client.println("
");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
/////////////////////
if (readString.length() >0) {
//Serial.println(readString); //prints string to serial port out
int pos1 = readString.indexOf('=');
int pos2 = readString.indexOf('&');
newString = readString.substring(pos1+1, pos2);
Serial.print("newString is: ");
Serial.println(newString);
int n = newString.toInt();
Serial.print("The value sent is: ");
Serial.println(n);
readString=""; //clears variable for new input
newString=""; //clears variable for new input
// auto select appropriate value
if(n >= 500)
{
Serial.print("writing Microseconds: ");
Serial.println(n);
myservo.writeMicroseconds(n);
Serial.println();
}
else
{
Serial.print("writing Angle: ");
Serial.println(n);
myservo.write(n);
Serial.println();
}
}
}
}
}
}
}
Very helpful info - I'm going to print this out and use it for ideas in my project I'm working on. Only problem I had was in the listing in #2 - took me a minute to figure out that "ilnes" was "lines" 
Hey Zoomcat - do you have a good book or other resource you would recommend that does a good job of describing the html and client/server stuff you use in your examples? So far it seems to be one of those "a little piece here, a little piece there" things when creating some sort of web page that interacts with something like the Arduino (with an ESP8266 for example).