venerdì 30 novembre 2012

Controlling Arduino from web page

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


Nessun commento:

Posta un commento