Note9 – WebServer controlled LED Sketch

ArduinoNote List-page
PREVIOUS: Note8 – WebServer controlled LED Demo

Web Server controlled LED Sketch

/*
  Web Server 

 A simple web server that shows the value of the analog input pins.
 using an Arduino Wiznet Ethernet shield. 

 Circuit:
 * Ethernet shield attached to pins 10, 11, 12, 13
 * Analog inputs attached to pins A0 through A5 (optional)

 created 18 Dec 2009
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe
 modified 15 Nov 2014
 by Soohwan Kim 
*/

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
#if defined(WIZ550io_WITH_MACADDRESS) // Use assigned MAC address of WIZ550io
;
#else
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
#endif

//#define __USE_DHCP__

IPAddress ip(192,168,1,20);
IPAddress gateway( 192, 168, 1, 1 );
IPAddress subnet( 255, 255, 255, 0 );
// fill in your Domain Name Server address here:
IPAddress myDns(8, 8, 8, 8); // google puble dns

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);
void check_led_status();
// Define the LED PORT NUMBER
#define LED_PORT 53

void setup() {
 // Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }

  // initialize the LED PORT 
  pinMode(LED_PORT, OUTPUT);
  // initaial value is HIGH
  digitalWrite(LED_PORT, HIGH);

  // initialize the ethernet device
#if defined __USE_DHCP__
#if defined(WIZ550io_WITH_MACADDRESS) // Use assigned MAC address of WIZ550io
  Ethernet.begin();
#else
  Ethernet.begin(mac);
#endif  
#else
#if defined(WIZ550io_WITH_MACADDRESS) // Use assigned MAC address of WIZ550io
  Ethernet.begin(ip, myDns, gateway, subnet);
#else
  Ethernet.begin(mac, ip, myDns, gateway, subnet);
#endif  
#endif 

  // start the Ethernet connection and the server:
  server.begin();
  Serial.println("WebServerControlLED");
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    String buffer = ""; // Declare the buffer variable 
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        buffer += c;    // Assign to the buffer
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == 'n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          //client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<body>");

          // check the LED status
          if (digitalRead(LED_PORT)>0){
             client.println("LED is <font color='green'>ON</font>");
          }else{
             client.println("LED is <font color='red'>OFF</font>");
          }

          // generate the Form 
          client.println("<br />");
          client.println("<FORM method="get" action="/led.cgi">");
          client.println("<P> <INPUT type="radio" name="status" value="1">ON");
          client.println("<P> <INPUT type="radio" name="status" value="0">OFF");
          client.println("<P> <INPUT type="submit" value="Submit"> </FORM>");

          client.println("</body>");
          client.println("</html>");
          break;
        }
        if (c == 'n') {
          // you're starting a new line
          currentLineIsBlank = true;
          buffer="";
        } 
        else if ( c == 'r') {
            //do cgi parser for LED-On
            if(buffer.indexOf("GET /led.cgi?status=1")>=0){
                // cgi action : LED-On
                digitalWrite(LED_PORT, HIGH);
                // send web-page
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/html");
                client.println();
                client.println("<html>");
                client.println("<body>");
                // check the LED status
                if (digitalRead(LED_PORT)>0){
                  client.println("LED is <font color='green'>ON</font>");
                }else{
                  client.println("LED is <font color='red'>OFF</font>");
                }
                client.println("<br />");
                client.println("<a href="/led.htm">Go to control-page</a>");

                client.println("</body>");
                client.println("</html>");
                currentLineIsBlank = false;
                break;
            }

            //do cgi parser for LED-Off
            if(buffer.indexOf("GET /led.cgi?status=0")>=0){
                // action : LED-Off
                digitalWrite(LED_PORT ,LOW);
                // send web-page
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/html");
                client.println();
                client.println("<html>");
                client.println("<body>");
                // check the LED status
                if (digitalRead(LED_PORT)>0){
                  client.println("LED is <font color='green'>ON</font>");
                }else{
                  client.println("LED is <font color='red'>OFF</font>");
                }
                client.println("<br />");
                client.println("<a href="/led.htm">Go to control-page</a>");

                client.println("</body>");
                client.println("</html>");
                currentLineIsBlank = false;
                break;
            }
        }
        else{ //if( c != 'r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

Note8 – WebServer controlled LED DEMO.

ArduinoNote List-page
PREVIOUS: Note7 – WebServer controlled LED

Web Server controlled LED Demo

Web Client(Web-browser)를 이용하여 아래와 같이 Web Server(Arduino)에 접속하여 LED Monitoring과 Remote-Control를 해보자

  • Web-browser의 주소란에 Arduino Board의 IP address와 “/index.htm”입력
    192.168.77.177/index.htm (IP address는 Sketch에서 설정한 값을 이용함)
    
    • index.htm page : LED Status와 Form을 확인 할 수 있다.
    • index.htm의 Source(HTML)보기: Web-server에서 Generate된 HTML를 확인 할 수 있다.
    • index.htm:WireShark를 이용한 Web-server와 Web Client간의 Message교환
      빨간색 : Web-Client가 GET을 이용하여 Web-page를 요청
      파란색 : Web-Server가 “HTTP/1.1 200 OK~”와 Web-page를 Respones함
    • LED ON submit Web-page: LED Status와 “led.cgi/status=1″를 확인 할 수 있다.
    • LED ON submit Web-page: Source보기
    • LED ON submit Web-page: WireShark를 이용한 Web-server와 Web Client간의 Message교환
      빨간색 : Web-Client가 GET을 “/led.cgi?status=1″를 이용하여 LED ON을 요청
      파란색 : Web-Server가 “HTTP/1.1 200 OK~”와 LED Status를 Respones함

    • LED OFF submit Web-page: LED Status와 “led.cgi/status=1″를 확인 할 수 있다.

    • LED OFF submit Web-page: Source보기
    • LED OFF submit Web-page:WireShark를 이용한 Web-server와 Web Client간의 Message교환
      빨간색 : Web-Client가 GET을 “/led.cgi?status=0″를 이용하여 LED OFF을 요청
      파란색 : Web-Server가 “HTTP/1.1 200 OK~”와 LED Status를 Respones함
  • Link:Wireshark

    “Wireshark is a network protocol analyzer for Unix and Windows”
    쉽게 말해 Packet Capture Program!

NEXT : Note9 – WebServer controlled LED Sketch

Note7 – WebServer controlled LED

ArduinoNote List-page
PREVIOUS: Note6 – WebServer

Hand-on #4: WebServer controlled LED

-Ethernet Shield를 이용한 Remote Control(LED On/Off)과 Monitoring(LED Status)을 함께 해보자

Common Gateway Interface

WWW 서버와 서버 상에서 등장하는 다른 프로그램이나 스크립트와의 인터페이스. 폼을 사용한 메일의 송신이나 게임 등, HTML에서는 불가능한 인터랙티브(interactive)한 요소를 홈페이지에 받아들여 쓸 수 있다.
[네이버 지식백과] CGI [common gateway interface] (컴퓨터인터넷IT용어대사전, 2011.1.20, 일진사)

  • Get Request / Receive Req. / CGI parser
    Get Request:cgi

  • Run the CGI App: run CGI scripts
    Run the CGI App.

  • Response: call web_server_send from CGI app. and back to Response
    Web Response

Hardware

Arduino / WIZ550io / LED
* LED를 적절한 포트에 연결한다. 이때, LED에 과전류를 방지하기 위해 저항을 달아준다.

Install Ethenret Library

Network Configuration

Network Configuration

  • Network Configuration on PC side
    Network Configuration
    위와 같이 “Internet Protocol Properies”에서 Network구성을 Test를 위해 아래와 같이 설정해보자
    IP address : 192.168.1.2
    Subnet mask : 255.255.255.0

Default gateway : 192.168.1.1

WebServerControlLED Skeleton

  • Fixed IP address
//#define __USE_DHCP__

IPAddress ip(192,168,1,20);
IPAddress gateway( 192, 168, 1, 1 );
IPAddress subnet( 255, 255, 255, 0 );
// fill in your Domain Name Server address here:
IPAddress myDns(8, 8, 8, 8); // google puble dns
}
  • Port Setting
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
  • setup()
// Define the LED PORT NUMBER
// ...insert codes...  #define LED_PORT XX

void setup() {
 // Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }


  // initialize the LED PORT 
  // ...insert codes ...
  // initaial value is HIGH
  // ...insert codes ...


  // initialize the ethernet device
#if defined __USE_DHCP__
#if defined(WIZ550io_WITH_MACADDRESS) // Use assigned MAC address of WIZ550io
  Ethernet.begin();
#else
  Ethernet.begin(mac);
#endif  
#else
#if defined(WIZ550io_WITH_MACADDRESS) // Use assigned MAC address of WIZ550io
  Ethernet.begin(ip, myDns, gateway, subnet);
#else
  Ethernet.begin(mac, ip, myDns, gateway, subnet);
#endif  
#endif 

  // start the Ethernet connection and the server:
  server.begin();
  // ...insert codes ...  Welcome messages
  Serial.print("server is at ");
  // ...insert codes ...  print localIP
}

  • loop()
void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    String buffer = ""; // Declare the buffer variable 
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        buffer += c;    // Assign to the buffer
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == 'n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          //client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<body>");

          // check the LED status
          // ...insert codes ...

          // generate the Form 
          // ...insert codes ...

          client.println("</body>")
          client.println("</html>");
          break;
        }
        if (c == 'n') {
          // you're starting a new line
          currentLineIsBlank = true;
          buffer="";
        } 
        else if ( c == 'r') {
            //do cgi parser for LED-On
            //if(...insert codes ...
                //  action : LED-On
                //digitalWrite(...insert codes ...
                // send web-page
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/html");
                client.println();
                client.println("<html>");
                client.println("<body>");
                // check the LED status
                // ...insert codes ...
                client.println("<br />");
                client.println("<a href="/led.htm">Go to control-page</a>");

                client.println("</body>");
                client.println("</html>");
                currentLineIsBlank = false;
                break;
            }

            //do cgi parser for LED-Off
            //if(...insert codes ...
                //  action : LED-Off
                //digitalWrite(...insert codes ...
                // send web-page
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/html");
                client.println();
                client.println("<html>");
                client.println("<body>");
                // check the LED status
                // ...insert codes ...
                client.println("<br />");
                client.println("<a href="/led.htm">Go to control-page</a>");

                client.println("</body>");
                client.println("</html>");
                currentLineIsBlank = false;
                break;
            }
        }
        else{ //if( c != 'r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

NEXT : Note8 – WebServer controlled LED Demo