Hello! I already have a passive web server on my 2009 with official eth shield and IDE 1.0. Passive means that I print a dynamic page only to display my sensors data using client.print. I'd like to add two input boxes to set two values via the web page. I'd like to put numbers in the boxes, press "send", receive this number on my arduino and then store this values into byte variables. Values goes from 0 to 100 max. Someone can suggest a basic example to learn from?
Thank you!
I already have a passive web server on my 2009 with official eth shield and IDE 1.0.
Perhaps if you showed the code in greater than 0 point font, we could see it. :)
Passive means that I print a dynamic page only to display my sensors data using client.print.
Passive and dynamic do not go together. A server serves up a page in response to a client request. The page might include a form with one or more submit buttons that cause data to be sent back to the server. That is one definition of dynamic. The page might include meta tags that cause the client to fetch the page again after some defined interval. That is the other definition of dynamic. Static pages show the same data every time the page is loaded. Active or passive is completely irrelevant.
I'd like to put numbers in the boxes, press "send", receive this number on my arduino and then store this values into byte variables. Values goes from 0 to 100 max. Someone can suggest a basic example to learn from?
Sure. What you want is for the server to serve up a page with a form that contains a submit button. Google "html forms" to learn more than you ever wanted to know about forms. Design one.
The action when the form is submitted is to query the same server (the Arduino) again, but with a different GET request. The new GET request has a ? in the string, and one ore more name=value pairs, separated by &s. GET /yo.arduino&name=Joe&pass=noob
The task of the Arduino is to distinguish GET /yo.Arduino from GET /yo.arduino&name=Joe&pass=noob, and to parse (strok()) the extra data, and act on it.
PaulS:
I already have a passive web server on my 2009 with official eth shield and IDE 1.0.
Perhaps if you showed the code in greater than 0 point font, we could see it.
It’s the classic web server, nothing more nothing less 
Code at the bottom btw
Passive means that I print a dynamic page only to display my sensors data using client.print.
Passive and dynamic do not go together.
Passive It’s just my way to mean something I can not send data back.
Just this
The new GET request has a ? in the string, and one ore more name=value pairs, separated by &s.
GET /yo.arduino&name=Joe&pass=noob
The task of the Arduino is to distinguish GET /yo.Arduino from GET /yo.arduino&name=Joe&pass=noob, and to parse (strok()) the extra data, and act on it.
Emh… since I’m noob (with arduino and with html) do you have a playground link or a guide, or a tutorial to learn from?
/*---------- webserver part ------------*/
char clientline[BUFSIZ];
int index = 0;
EthernetClient client = server.available();
if (client) {
// an http request ends with a blank line
boolean current_line_is_blank = true;
// reset the input buffer
index = 0;
while (client.connected()) {
if (client.available()) {
char c = client.read();
// If it isn't a new line, add the character to the buffer
if (c != '\n' && c != '\r') {
clientline[index] = c;
index++;
// are we too big for the buffer? start tossing out data
if (index >= BUFSIZ)
index = BUFSIZ -1;
// continue to read more data!
continue;
}
// got a \n or \r new line, which means the string is done
clientline[index] = 0;
// Print it out for debugging
Serial.println(clientline);
// Look for substring such as a request to get the root file
if (strstr(clientline, "GET / ") != 0) {
// send a standard http response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println();
// meta refresh page every 60 seconds
//pagerefreshnumber=pagerefreshnumber+1;
client.print(F("<HEAD><meta http-equiv=\"refresh\" content=\"60\"><TITLE />GreenHouse Project Lan Page</title></head>"));
//client.print(F("<HEAD>"));
//client.print(F("<meta http-equiv=\"refresh\" content=\"60\">"));
//client.print(F("<TITLE />GreenHouse Project Lan Page</title>"));
//client.print(F("</head>"));
client.print(F("<HR>Temperatura OUT: "));
client.print(mydata.toutES);
client.print(F(" C
Umidita' OUT: "));
client.print(mydata.houtES);
client.print(F(" %<HR>Temperatura IN: "));
client.print(mydata.tinES);
client.print(F(" C
Umidita' IN: "));
client.print(mydata.hinES);
}
else if (strstr(clientline, "GET /") != 0) {
// this time no space after the /, so a sub-file!
char *filename;
filename = clientline + 5; // look after the "GET /" (5 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.println(filename);
if (! file.open(&root, filename, O_READ)) {
client.println(F("HTTP/1.1 404 Not Found"));
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("404 - Pagina Non Trovata"));
break;
}
Serial.println(F("Opened!"));
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println();
int16_t c;
while ((c = file.read()) > 0) {
// uncomment the serial to debug (slow!)
// Serial.print((char)c);
client.print((char)c);
}
file.close();
}
else {
// everything else is a 404
client.println(F("HTTP/1.1 404 Not Found"));
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("404 - Pagina Non Trovata"));
}
break;
}
}
// give the web browser time to receive the data
delay(100);
Some day I will try to get my stuff on the playground. But until then, here is a section of code I use. The variables are ‘r’ and ‘t’. Change the network settings to yours.
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip( 192,168,0,2 );
IPAddress gateway( 192,168,0,1 );
IPAddress subnet( 255,255,255,0 );
IPAddress dns( 192,168,0,1 );
EthernetServer server(80);
void setup()
{
Serial.begin(9600);
pinMode(4,OUTPUT);
digitalWrite(4,HIGH);
Ethernet.begin(mac, ip, dns, gateway, subnet);
delay(2000);
server.begin();
Serial.println("Ready");
}
void loop()
{
EthernetClient client = server.available();
if(client) {
boolean currentLineIsBlank = true;
boolean currentLineIsGet = true;
int tCount = 0;
char tBuf[64];
int r,t;
char *pch;
Serial.print("Client request: ");
while (client.connected()) {
while(client.available()) {
char c = client.read();
if(currentLineIsGet && tCount < 63)
{
tBuf[tCount] = c;
tCount++;
tBuf[tCount] = 0;
}
if (c == '\n' && currentLineIsBlank) {
// send a standard http response
while(client.available()) client.read();
Serial.println(tBuf);
pch = strtok(tBuf,"?");
while(pch != NULL)
{
if(strncmp(pch,"t=",2) == 0)
{
t = atoi(pch+2);
Serial.print("t=");
Serial.println(t,DEC);
}
if(strncmp(pch,"r=",2) == 0)
{
r = atoi(pch+2);
Serial.print("r=");
Serial.println(r,DEC);
}
pch = strtok(NULL,"& ");
}
Serial.println("Sending response");
client.write("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html><body><H1>TEST</H1>");
client.write("<form method=GET>T: <input type=text name=t>
");
client.write("R: <input type=text name=r>
<input type=submit></form>");
client.write("</body></html>\r\n\r\n");
client.stop();
}
else if (c == '\n') {
currentLineIsBlank = true;
currentLineIsGet = false;
}
else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
Serial.println("done");
}
}
I had to edit the network settings, so my apology in advance for typos.
Server test code that allows input to be sent to the arduino and acted upon.
//zoomkat 1-10-11
//web LED 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
//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 }; //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();
//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); //uncomment to see in serial monitor
}
//if HTTP request has ended
if (c == '\n') {
///////////////
Serial.println(readString);
//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=\"http://192.168.1.102:84\" method=get >");
client.println("Pin 4 \"on\" or \"off\": <INPUT TYPE=TEXT NAME=\"LED\" VALUE=\"\" SIZE=\"25\" MAXLENGTH=\"50\">
");
client.println("<INPUT TYPE=SUBMIT NAME=\"submit\" VALUE=\"Change Pin 4!\">");
client.println("</FORM>");
client.println("
");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
/////////////////////
if(readString.indexOf("on") >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="";
}
}
}
}
}
Thanks to all.
I have now my code up and running.
client.print(F("<input type='button' value='Invia' onclick='window.open(\"/?tmin=\" + document.getElementById(\"tmin\").value"));
client.println(F(",\"_blank\",\"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=400, top=100, left=500\")'>"));
client.println(F("<input type=text id='tmin' SIZE=3>"));
client.print(F("
SetPoint Spegnimento.: "));
client.print(mydata.tSSRMaxES); // temperatura per spegnimento relé
client.print(F(" C --- "));
client.print(F("<input type='button' value='Invia' onclick='window.open(\"/?tmax=\" + document.getElementById(\"tmax\").value"));
client.println(F(",\"_blank\",\"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=400, top=100, left=500\")'>"));
client.println(F("<input type=text id='tmax' SIZE=3>"));
if (strstr(clientline, "GET /?tmin=") != 0) {
// recezione set point t min
char *filename;
filename = clientline + 11; // look after the "GET /?tmin=" (11 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.print(F("Tmin Ricevuta: "));
Serial.println(filename);
int tminviaweb = atoi(filename);
Serial.print(F("Atoi: "));
Serial.println(tminviaweb);
mydata.tminviawebES = tminviaweb;
ET.sendData();
Serial.println(F("Tmin Inviata"));
mydata.tminviawebES = 0;
client.println(F("HTTP/1.1 TMin Ok"));
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("T.Min Inviata"));
}
And so on.
I’ve just a final question.
Can I create a confirm popup like this:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert ?
I really cant figure out do this in arduino.
Any help will be appreciated
Javascript is client side code, so you just send it like everything else. This should not be a problem for you with the examples you were given, but here it is anyway.
Serial.println("Sending response");
client.write("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n<html>");
client.write("<head><script type=\"text/javascript\">");
client.write("function show_alert() {alert(\"This is an alert\");}");
client.write("</script></head>");
client.write("<body><H1>TEST</H1>");
client.write("<form method=GET onSubmit=\"show_alert()\">T: <input type=text name=t>
");
client.write("R: <input type=text name=r>
<input type=submit></form>");
client.write("</body></html>\r\n\r\n");
client.stop();
edit: I somehow removed a bracket copying it to the forum. Corrected now.
I wish It was so simple Surfer
Btw my bad, I’ve not explain myself enough.
I’d like to:
Make two forms to send values to my arduino (done!).
On submit keep my sensors page open (to be).
On submit Notify this action with a popup (to be).
Right now I managed different solutions, but neither of these work.
If I put your code in, my arduino receive a GET /?tmin= … and since it has a web server it answers with a 404.
If I display the sensors page after the if, I get the sensor page display correctly.
BUT The address in the bar becomes myip/?tmin=myvalue… and since I have a meta reload every 60second, the page keep sending the GET every 60 second!
My code probably will explain better.
Btw:
I’d like to press a button, send a value and do not move from my sensor page.
Is this possible? A plus will be to have a notify popup when I press the send button. To know that I have successful sent the query.
Do you know a way to do this?
Code since now:
/*---------- WEB SERVER ------------*/
char clientline[BUFSIZ];
int index = 0;
EthernetClient client = server.available();
if (client) {
// an http request ends with a blank line
boolean current_line_is_blank = true;
// reset the input buffer
index = 0;
while (client.connected()) {
if (client.available()) {
char c = client.read();
// If it isn't a new line, add the character to the buffer
if (c != '\n' && c != '\r') {
clientline[index] = c;
index++;
// are we too big for the buffer? start tossing out data
if (index >= BUFSIZ)
index = BUFSIZ -1;
// continue to read more data!
continue;
}
// got a \n or \r new line, which means the string is done
clientline[index] = 0;
// Print it out for debugging
Serial.println(clientline);
if (strstr(clientline, "GET /?tmin=") != 0) {
// recezione set point t min
char *filename;
filename = clientline + 11; // look after the "GET /?tmin=" (11 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.print(F("Temperatura Minima Ricevuta: "));
Serial.println(filename);
int tminviaweb = atoi(filename);
Serial.print(F("Atoi: "));
Serial.println(tminviaweb);
mydata.tminviawebES = tminviaweb;
ET.sendData();
Serial.println(F("Tmin Inviata"));
mydata.tminviawebES = 0;
//client.println(F("HTTP/1.1 TMin Ok"));
//client.println(F("Content-Type: text/html"));
//client.println();
//client.println(F("Temperatura Minima Inviata"));
goto indexpage;
}
if (strstr(clientline, "GET /?tmax=") != 0) {
// recezione set point t max
char *filename;
filename = clientline + 11; // look after the "GET /?tmax=" (11 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.print(F("Temperatura Massima Ricevuta: "));
Serial.println(filename);
int tmaxviaweb = atoi(filename);
Serial.print(F("Atoi: "));
Serial.println(tmaxviaweb);
mydata.tmaxviawebES = tmaxviaweb;
ET.sendData();
Serial.println(F("Tmax Inviata"));
mydata.tmaxviawebES = 0;
//client.println(F("HTTP/1.1 TMin Ok"));
//client.println(F("Content-Type: text/html"));
//client.println();
//client.println(F("Temperatura Massima Inviata"));
goto indexpage;
}
// Look for substring such as a request to get the root file
if (strstr(clientline, "GET / ") != 0) {
indexpage:
// send a standard http response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println();
// meta refresh page every 60 seconds
client.print(F("<HEAD><meta http-equiv=\"refresh\" content=\"60\"><script type=\"text/javascript\">"));
client.print(F("function show_alert() {alert (\"Inviare SetPoint?\");}"));
client.print(F("</script><TITLE />GreenHouse Project Lan Page</title></head>"));
// Creazione pagina web locale:
a capo <HR> a capo con separatore
client.print(F("<body><h3>GreenHouse Project 0.5 Final R4d IDE 1.0</h3><HR>Temperatura OUT: "));
client.print(mydata.toutES);
client.print(F(" C
Umidita' OUT: "));
client.print(mydata.houtES);
client.print(F(" %<HR>Temperatura IN: "));
client.print(mydata.tinES);
client.print(F(" C
Umidita' IN: "));
client.print(mydata.hinES);
client.print(F(" %<HR>Temperatura H2O: "));
client.print(mydata.T1ES);
client.print(F(" C
Luminosita': "));
client.print(mydata.mediaHzES);
client.print(F(" Hz<HR>Temperatura Heater: "));
client.print(mydata.T2ES);
client.print(F(" C
SetPoint Accensione...: "));
client.print(mydata.tSSRMinES); // temperatura per accensione relé
client.print(F(" C"));
client.print(F("<form method=GET style='display:inline' onSubmit=\"show_alert()\"> --- <input type=text name=tmin SIZE=3 ><input type=submit value=Invia></form>"));
client.print(F("
SetPoint Spegnimento.: "));
client.print(mydata.tSSRMaxES); // temperatura per spegnimento relé
client.print(F(" C"));
client.print(F("<form method=GET style='display:inline' onSubmit=\"show_alert()\"> --- <input type=text name=tmax SIZE=3><input type=submit value=Invia></form>"));
}
else if (strstr(clientline, "GET /") != 0) {
// this time no space after the /, so a sub-file!
char *filename;
filename = clientline + 5; // look after the "GET /" (5 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.println(filename);
if (! file.open(&root, filename, O_READ)) {
client.println(F("HTTP/1.1 404 Not Found"));
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("404 - Pagina Non Trovata"));
break;
}
Serial.println(F("Opened!"));
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println();
int16_t c;
while ((c = file.read()) > 0) {
// uncomment the serial to debug (slow!)
// Serial.print((char)c);
client.print((char)c);
}
file.close();
}
else {
// everything else is a 404
client.println(F("HTTP/1.1 404 Not Found"));
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("404 - Pagina Non Trovata"));
}
