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");
  }
}
Advertisements

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

Note6 – WebServer

ArduinoNote List-page
PREVIOUS: Note5 – isShield-A

Hand-on #3: WebServer

-Ethernet Shield를 이용한 Remote monitoring을 해보자

Web-Server?

Web-Server는 Web-site를 hosting하고 있는 서버로 간단하게 아래의 그림과 같이 Web brower와 같은 Client가 Web-server에 저장되어 있는 Web-page에 대한 Request 요청했을 경우 해당 Wep-page를 Client에세 Reponse하는 Server는 말한다. 이때 Web-server와 Client는 Hypertext Transfer Protocol (HTTP)통해서 hypertext를 Trasfer/Exchange한다.

Network Configuration

Get Request:index.htm

Install Ethenret Library

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

Web Server Sketch

  • Fixed IP address
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
void setup() {
 ...
#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  
...
}
  • 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()
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
    }

    // start the Ethernet connection and the server:
    #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
    server.begin();
    Serial.print("server is at ");
    Serial.println(Ethernet.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;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        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("Connection: close"); // the connection will be closed after completion of the response
          client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            int sensorReading = analogRead(analogChannel);
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(sensorReading);
            client.println("<br />");
          }
          client.println("</html>");
          break;
        }
        if (c == 'n') {
          // you're starting a new line
          currentLineIsBlank = true;
        }
        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 disconnected");
  }

Compile

  • IDE 메뉴의 스케치>확인/컴파일
    Verify

Program

  • IDE 메뉴의 파일>프로그램어를통해업로드
    Upload

Web-Client (Web-browser)를 이용하여 Web-server (Arduino Board)에 접속

  • web-browser을 실행하고 주소창에 아래와 같이 입력한다.
    http://"Arduino board IP address":"port number
    http://192.168.1.20:80
    
  • Web-browser실행 화면
    실제로 port에서 입력된 값을 Web-page를 통해 보여줌으로써 Remote Monitoring이 가능함을 보여준다. 5개의 값들은 ADC입력 값을 출력한다. 현재 ADC에 입력이 없기 때문에 Dummy값이 출력되는 것을 볼수 있다.
    Web-browser
    Serial Monitor를 통해 Log값을 볼수 있다. Welcome message와 Web-Client로 부터 수신한 내용을 확인 할 수 있다.
    Serial Monitor

NEXT : Note7 – WebServer controlled LED

Note5 – ioShield-A

ArduinoNote List-page
PREVIOUS: Note4 – Ethernet shield

ioShield-A

ioSheild-A

ioShield-A는 Arduino Platform을 Internet에 연결하게 해주는 Ethernet Shield의 하나이다. Ethernet Shield는 TCP/IPCore Chip으로 W5100의 기반으로 하였으나, ioShield는 W5500을 적용하였다. W5500은 동시에 W5100보다 많은 소켓 수(8Socket)지원 할 수 있으며, Fast SPI (upto 80MHz)를 지원한다. 특별히, 이 Ethenret Shield는 WIZ550io와 Installing Board로 구성되어 있으며, WIZ550io에서 embedded된 MAC Address를 지원하기 때문에 별도의 MAC Address구매없이 Real MAC Address를 사용할 수 있다.

ioShield-A
* WIZ550io: wizwiki
* Schematic: ioshield-a_v1.1_sch.pdf
* Ethernet Library: WIZ_Ethernet_Library
* SPI port: ICSP Header사용
* Github: frizing project for WIZ550io

WIZ Ethernet Library Install

  • Download Library: WIZ_Ethernet_Library-master.zip

  • 압축해제 한뒤 Ethernet폴더를 Copy한다.
    Ethernet폴더

  • 기존의 Sketch IDE를 설치하고 생긴 C:/Program Files/Arduino/Ethernet폴더와 Replace한다.
    Ethernet폴더 replace

  • Ethernet Library에 /Arduino/Ethernet/examples 아래와 같이 다양한 example들이 포함되어 있다.
    Ethernet Library

NEXT : Note6 – WebServer