Hello. First of all introduce myself. I'm new to the forum.
The question is: how to create a website with a text box and a button so that when it is pressed, the information in the text box is saved in a variable ?
A greeting.
how to create a website with a text box and a button so that when it is pressed, the information in the text box is saved in a variable ?
The html file needs to contain a form. The form contains a submit button (or more than one). The submit button triggers a GET request. The exact form of the GET request depends on the names of the objects on the form.
How to parse the data from the GET request depends on how the data is stored.
Maybe the code in my EzScrn demo will give you some ideas.
...R
Basic text box server code.
//zoomkat 12-08-12
//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
//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
//start Ethernet
Ethernet.begin(mac, ip, gateway, gateway, subnet);
server.begin();
//enable serial data print
Serial.begin(9600);
Serial.println("server text box test1"); // 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); //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("Pin 5 'on5' or 'off5': <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
");
client.println("<INPUT TYPE=SUBMIT NAME='submit' VALUE='Change Pin 5!'>");
client.println("</FORM>");
client.println("
");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
/////////////////////
if(readString.indexOf("on5") >0)//checks for on
{
digitalWrite(5, HIGH); // set pin 5 high
Serial.println("Led On");
}
if(readString.indexOf("off5") >0)//checks for off
{
digitalWrite(5, LOW); // set pin 5 low
Serial.println("Led Off");
}
//clearing string for next read
readString="";
}
}
}
}
}
@zoomkat OK. That was my idea but how to differentiate the information if i have several text boxes ?
but how to differentiate the information if i have several text boxes ?
It's time for YOU to post some code. What does the GET command look like?
PaulS:
It's time for YOU to post some code. What does the GET command look like?
The code I did is here.
#include <SPI.h>
#include <Ethernet.h>
#include <EthernetDNS.h>
#include <LiquidCrystal.h>
#include <Twitter.h>
#define encendido 1
#define iluminacionEncendida 2
#define iluminacionApagada 3
#define automaticoEncendido 4
#define automaticoApagado 5
#define persianasSubidas 6
#define persianasBajadas 7
#define mensajeOK 200
#define luzMedia 600
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x09, 0x2D}; //MAC
IPAddress ip(192, 168, 1, 111); //IP
EthernetServer servidor(80);
LiquidCrystal lcd(2, 3, 4, 5, 6, 7);
Twitter twitter("2389536108-ivbusXpJ43c3WjBium1hz4NxwwbJQx0CPV57eAM");
int pinLed = 11, pinPerSub = 9, pinPerBaj = 8, pinLuz = 0, pinTemperatura = 1;
String readString = String(30);
String stateLed = String(3), statePer = String(6), stateAut = String(3);
boolean luzApagada = true, clienteConectado = false;
int luz = 0;
char tweet[30];
char msgConectado[30] = "Arduino conectado";
char msgLuzEncendida[30] = "Iluminación encendida";
char msgLuzApagada[30] = "Iluminación apagada";
char msgAutomaticoEncendido[30] = "Automático encendido";
char msgAutomaticoApagado[30] = "Automático apagado";
char msgPersianasSubidas[30] = "Persianas subidas";
char msgPersianasBajadas[30] = "Persianas bajadas";
void setup()
{
Ethernet.begin(mac, ip);
servidor.begin();
pinMode(pinLed, OUTPUT);
pinMode(pinPerSub, OUTPUT);
pinMode(pinPerBaj, OUTPUT);
pinMode(pinLuz, INPUT);
pinMode(pinTemperatura, INPUT);
stateLed = "OFF";
statePer = "BAJADA";
stateAut = "OFF";
lcd.begin(16, 2);
Serial.begin(9600);
//Envio mensaje conexión arduino
twitear(encendido);
escribirLCD("ENCENDIDO");
}
void loop()
{
comprobarWeb();
comprobarLuz();
}
void comprobarWeb()
{
int LED, AUT, PER;
EthernetClient cliente = servidor.available();
clienteConectado = true;
if(cliente)
{
boolean lineaenblanco = true;
while(cliente.connected())
{
if(cliente.available())
{
char c = cliente.read();
if(readString.length() < 30)
{
readString.concat(c);
}
if(c == '\n' && lineaenblanco)
{
LED = readString.indexOf("LED=");
AUT=readString.indexOf("AUT=");
PER = readString.indexOf("PER=");
if(readString.substring(LED, LED + 5) == "LED=T")
{
digitalWrite(pinLed, HIGH);
stateLed = "ON";
luzApagada = false;
twitear(iluminacionEncendida);
escribirLCD("Iluminacion ON");
}
else if (readString.substring(LED, LED + 5) == "LED=F")
{
digitalWrite(pinLed, LOW);
stateLed = "OFF";
luzApagada = true;
twitear(iluminacionApagada);
escribirLCD("Iluminacion OFF");
}
if(readString.substring(AUT, AUT + 5) == "AUT=T")
{
stateAut = "ON";
twitear(automaticoEncendido);
escribirLCD("Automatico ON");
}
else if (readString.substring(AUT, AUT + 5) == "AUT=F")
{
stateAut = "OFF";
digitalWrite(pinLed, LOW);
twitear(automaticoApagado);
escribirLCD("Automatico OFF");
}
if(readString.substring(PER, PER + 5) == "PER=T")
{
digitalWrite(pinPerSub, HIGH);
statePer = "SUBIDA";
delay(400);
digitalWrite(pinPerSub, LOW);
twitear(persianasSubidas);
escribirLCD("Persianas ON");
}
else if (readString.substring(PER, PER + 5) == "PER=F")
{
digitalWrite(pinPerBaj, HIGH);
statePer = "BAJADA";
delay(400);
digitalWrite(pinPerBaj, LOW);
twitear(persianasBajadas);
escribirLCD("Persianas OFF");
}
cliente.println("HTTP/1.1 200 OK");
cliente.println("Content-Type: text/html");
cliente.println();
cliente.println("<html>");
cliente.println("<head>");
cliente.println("<title>LAMPARA, PERSIANA Y BOCINA</title>");
cliente.println("</head>");
cliente.println("<body width=100% height=100%>");
cliente.println("<center>");
cliente.println("<h3>LAMPARA 1 ON/OFF</h3>");
cliente.print("
");
cliente.print("Estado de la lampara: ");
cliente.print(stateLed);
cliente.print("
");
cliente.println("<input type=submit value=ON style=width:200px;height:75px onClick=location.href='./?LED=T\'>");
cliente.println("<input type=submit value=OFF style=width:200px;height:75px onClick=location.href='./?LED=F\'>");
cliente.println("<h3>ENCENDIDO AUTOMATICO DE LUCES ON/OFF</h3>");
cliente.print("
");
cliente.print("Estado del automatico: ");
cliente.print(stateAut);
cliente.print("
");
cliente.println("<input type=submit value=ON style=width:200px;height:75px onClick=location.href='./?AUT=T\'>");
cliente.println("<input type=submit value=OFF style=width:200px;height:75px onClick=location.href='./?AUT=F\'>");
cliente.println("
");
cliente.println("<h3>PERSIANA SUBIDA/BAJADA</h3>");
cliente.print("
");
cliente.print("Estado de la persiana: ");
cliente.print(statePer);
cliente.print("
");
cliente.println("<input type=submit value=ON style=width:200px;height:75px onClick=location.href='./?PER=T\'>");
cliente.println("<input type=submit value=OFF style=width:200px;height:75px onClick=location.href='./?PER=F\'>");
cliente.println("
");
cliente.println("</center>");
cliente.println("</body>");
cliente.println("</html>");
cliente.stop();
readString = "";
}
}
}
}
}
void comprobarLuz()
{
luz = analogRead(pinLuz);
Serial.println(luz);
if(luz > luzMedia && luzApagada == true && stateAut == "ON")
{
digitalWrite(pinLed, HIGH);
luzApagada = false;
}
else if(luz <= luzMedia && luzApagada == false && stateAut == "ON")
{
digitalWrite(pinLed, LOW);
luzApagada = true;
}
}
void escribirLCD(char mensaje[])
{
lcd.clear();
lcd.print(mensaje);
}
void twitear(int n)
{
switch(n)
{
case 1:
for(int i=0; i<30; i++)
{
tweet[i]=msgConectado[i];
}
break;
case 2:
for(int i=0; i<30; i++)
{
tweet[i]=msgLuzEncendida[i];
}
break;
case 3:
for(int i=0; i<30; i++)
{
tweet[i]=msgLuzApagada[i];
}
break;
case 4:
for(int i=0; i<30; i++)
{
tweet[i]=msgAutomaticoEncendido[i];
}
break;
case 5:
for(int i=0; i<30; i++)
{
tweet[i]=msgAutomaticoApagado[i];
}
break;
case 6:
for(int i=0; i<30; i++)
{
tweet[i]=msgPersianasSubidas[i];
}
break;
case 7:
for(int i=0; i<30; i++)
{
tweet[i]=msgPersianasBajadas[i];
}
break;
}
Serial.println("connecting ...");
if (twitter.post(tweet))
{
int status = twitter.wait(&Serial);
if (status == mensajeOK)
{
Serial.println("OK.");
}
else
{
Serial.print("failed : code ");
Serial.println(status);
}
}
else
{
Serial.println("connection failed.");
}
}
if(c == '\n' && lineaenblanco)
{
Why don't you print readString?
how to differentiate the information if i have several text boxes ?
I don't see that your form has any text boxes.
PaulS:
if(c == '\n' && lineaenblanco)
{
Why don't you print readString? I don't see that your form has any text boxes.
Here is the final code.
#include <SPI.h>
#include <Ethernet.h>
#include <LiquidCrystal.h>
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x09, 0x2D}; //MAC
byte ip[] = {192, 168, 1, 111}; //IP
EthernetServer servidor(80);
LiquidCrystal lcd(2, 3, 4, 5, 6, 7);
String readString, mensaje;
char mensajeEscrito[32];
int indStart=0, indStop=0;
void setup()
{
Ethernet.begin(mac, ip);
servidor.begin();
lcd.begin(16,2);
lcd.clear();
Serial.begin(9600);
}
void loop()
{
comprobarWeb();
}
void comprobarWeb()
{
EthernetClient cliente = servidor.available();
if (cliente)
{
while (cliente.connected())
{
if (cliente.available())
{
char c = cliente.read();
if (readString.length() < 100)
{
readString += c;
}
if (c == '\n')
{
Serial.println(readString);
cliente.println("HTTP/1.1 200 OK");
cliente.println("Content-Type: text/html");
cliente.println();
cliente.println("<HTML>");
cliente.println("<HEAD>");
cliente.println("<TITLE>ONLINE LCD</TITLE>");
cliente.println("</HEAD>");
cliente.println("<BODY>");
cliente.println("<H1>INTRODUZCA EL MENSAJE</H1>");
cliente.println("<FORM ACTION='/' method=get>");
cliente.println("<INPUT TYPE=TEXT NAME='MENSAJE' VALUE='' SIZE='25' MAXLENGTH='32'>
");
cliente.println("<INPUT TYPE=SUBMIT NAME='SUBMIT' VALUE='MENSAJE ENVIADO'>");
cliente.println("</FORM>
");
cliente.println("</BODY>");
cliente.println("</HTML>");
delay(100);
cliente.stop();
Serial.println(readString);
indStart = readString.indexOf("=");
indStart++;
indStop = readString.indexOf("&");
Serial.println(readString.substring(indStart, indStop));
mensaje = readString.substring(indStart, indStop);
mensaje.replace("+", " ");
Serial.println(mensaje);
escribirLCD(mensaje);
/*for (int i=0; i<mensaje.length(); i++)
{
mensajeEscrito[i]=mensaje.charAt(i);
}
Serial.println();
escribirLCD(mensajeEscrito);*/
readString = "";
mensaje = "";
}
}
}
}
}
void escribirLCD(String mensajeLCD)
{
lcd.clear();
if(mensajeLCD.length()>15)
{
lcd.setCursor(0,0);
lcd.print(mensajeLCD.substring(0,16));
lcd.setCursor(0,1);
lcd.print(mensajeLCD.substring(16,mensajeLCD.length()));
}
else
{
lcd.print(mensajeLCD);
}
}
Thanks for your help.