This week I have worked on a web project due to my friends needed.
the request was: " how i can control some GPIO from web interface " ...... after some discussion and trial about the the best hardware platform to be used the last two choose was :
Arduino UNO + Ethernet shield Vs Raspberry-Py
At the end we have decide to proceed with Arduino , our decision was driven from the simplicity in code writing and in speed to control the GPIO, Arduino is real-time controller instead of Rasberry were the gpio control is running under linux with some other process.
So , now I would propose to you a simple example code with different idea of gpio control so you can chose and customize as you like.
Firs section the title of your page, it can customized in code.
First type of control is a graphical control, in this case a web server needed fore store the led and button image, Arduino can not store graphical image in it's memory , only 32k bytes
Second type of control is textual so no external web server needed, color and characters can easily managed from Arduino
Last One is the analog read from one analog pin of Arduino, ADC is 10bit so result is in the range of 0 to 1024 and the analog input from 0V to 5V.
For this project basic knowledge of HTML and Arduino programming is required.
Fist the code and the icon image can be downloaded from Goggle code web site :
http://code.google.com/p/web-gpio-control-arduino-uno-ethernet-shield/
one time downloaded, remember to fill the right data for your home network (code line 31 to 34)
byte mac[] = { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 }; //physical mac address
byte ip[] = { 192, 168, 1, 100 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
After this change, code can be load in , plug in network cable and your web server is running, open your browser digit the IP address assigned to Arduino in address bar and that all ..
OK easy copy and paste the code but now is needed to understand how work for customize it ..
Circuit :
during the trial I have supply the Arduni from The USB but all the option available can be used, pleas refer to official
Arduino web site for detailed spec.
- Arduino + Ethernet shield
- Digital OUT : PIN 6 - 7- 8 - 9
- Analog IN : PIN A1
What about the code ...
I'll skip the part of standard setup , starting from the handling of the info from browser and Arduino.
First request from browser looks like the address of Arduino - http://192.168.1.xxx/
Arduino reply with HML code true client.println(" ") command .
How Arduino understand if Dig out should be ON or OFF based on click on browser ?
simple looking the info just after the address sent from browser as a new link request .
client.print(F("<a href=\"/?L1=1\">"));
In HTML
href tag is a link so the browse will send to Arduino the following request :
http://192.168.1.xxx/?L1=1\
Request is stored in a string from this code :
char c = client.read();
readString.concat(c); //store characters to string
//if HTTP request has ended
if (c == '\n' && currentLineIsBlank) {
Serial.print(readString);
.....
.....
at the end in
readString The following information is stored :
http://192.168.1.xxx/?L1=1\
The next action done from Arduino is check if particular string is contained in
readString whit the following if statement :
if(readString.indexOf("L1=1") > 0) { //lets check if LED1 OUT6 should be on
digitalWrite(outPin6, HIGH); // set the OUT6 on
OUT6ON = true;
}
if(readString.indexOf("L1=0") > 0) {
digitalWrite(outPin6, LOW); // set the OUT6 OFF
OUT6ON = false;
}
variable OUT6ON, OUT7ON.... can be used not only for manage the output state but also for decide which HTML code send back to browser, in the example there are button and led so icon need to be change based on output status:
if (OUT6ON) {
client.print(F("<a href=\"/?L1=0\">"));
client.print(F("<img alt=\"\" height=\"50\" width=\"50\" src=\"http://www.yourserver.com/led1On.PNG\"/>"));
}
else
{
client.print(F("<a href=\"/?L1=1\">"));
client.print(F("<img alt=\"\" height=\"50\" width=\"50\" src=\"http://www.yourserver.com/led1Off.PNG\"/>"));
}
In this Example if OUT6ON = TRUE image of
led1On.PNG Will be sent to , if OUT6ON = FALSE
led1Off.PNG.
Same procedure can be used for text interface (no need to have repository server for the icon/image ) the change is text and color.
client.print(F("<h2><a href=\"/?L1=1\"> OUT1 ON </a> | <a href=\"/?L1=0\"> OUT1 OFF </a> |"));
//printing OUT1 status
client.print(F(" <span> OUT1 status: </b></span>"));
if (OUT6ON) {
client.println(F("<span style=\"color:green\">ON</span></h2>"));
}
else {
client.println(F("<span style=\"color:grey\">OFF</span></h2>"));
}
Last part is the Analog reading , in this exaple just read from pin and print on HTML page :
client.println(F("<h1>Analog Input control</h1>"));
// output the value of analog input pin
client.print(F("<h2>Analog input 1 = <b>"));
client.print(analogRead(1));
That's all for the moment , I'm studying a possibility to protect the access with password or code ..
Thank to :
Arduino
SimpleCode
and my wife for the web repository space
www.ercreazioni.com
