WiFi Module(ESP Module)을 이용한 원격제어: web-server-arduino

ESP8266/ESP32(Web server) - Arduino IDE

ESP8266/ESP32 Module(WiFi)을 이용한 원격 제어(Web server) - Arduino IDE

ESP8266/ESP32 Server 동작 모드

Web server 개요
Station (STA) Mode
AP(Soft Access Point) Mode

ESP8266/ESP32 Web Server를 이용한 원격제어

ESP8266/ESP32 Web Server 예를 위한 회로 구성
ESP8266/ESP32 Web Server를 이용한 원격제어 시스템(IoT(Internet of things))의 동작 흐름
WiFi Library를 이용한 프로그램(STA mode) 예
WebServer Library를 이용한 프로그램(STA mode) 예
WiFI Library와 XMLHttpRequest를 이용한 LED 제어 예
WebServer Library를 이용한 프로그램(AP mode) 예
ESP WebServer(STA mode)를 이용한 DC Motor Car(Two Wheel) 예
ESP WebServer(AP mode)를 이용한 DC Motor Car(Two Wheel) 예
WiFi Library와 XMLHttpRequest를 이용한 DC Motor Car 예

ESP8266/ESP32 Module(WiFi)을 이용한 원격 제어(Web server) - 관련 페이지 보기

ESP8266/ESP32 Server 동작 모드

Web server 개요

Web server는 Web clients(예: PC나 휴대폰에서 실행되는 Web browser)로 부터 요청을 받아들이고, HTML 문서와 같은 웹 페이지 또는 데이터를 반환하는 컴퓨터 프로그램 이다.

Web server와 Web client 사이 통신에는 HTTP(Hypertext Transfer Protocol)를 사용 한다.

이 Protocol에서는 먼저 Web browser의 Web page가 HTTP를 사용하여 Web server에게 원하는 Web page 또는 자료를 Request 하면 Server 가 응답(Responds: 요구에 맞는 Web page 또는 데이터를 전송) 한다. 만약 Server가 응답 불가능한 Request인 경우에는 Error message(예: 404 Error)를 전송한다. Server로 부터 전송되는 Page는 대부분 HTML(HyperText Markup Language) 문서 이다.

Station (STA) Mode

ESP8266/ESP32이 제공하는 가장 큰 기능 중 하나는 기존 WiFi 네트워크에 연결하여 웹 서버로 작동 할 수 있고, 자체 네트워크를 설정하여 다른 장치가 직접 연결하여 웹 서버에 액세스 할 수 있도록하는 것이다.

ESP8266/ESP32의 이런 기능은 ESP8266/ESP32이 스테이션(Station) 모드, 소프트 액세스 포인트(Soft Access Point) 모드 및 동시에 두 가지 모드로 작동 할 수 있기 때문에 가능하다.

기존 WiFi 네트워크(Wireless router network)에 ESP8266/ESP32을 Server로 연결하는 경우 Station(STA) 이라고 한다.

WiFi Router에 ESP8266/ESP32 Server를 STA(Station) 모드로 시용하는 예

STA 모드에서 ESP8266/ESP32은 연결된 무선(WiFi) 라우터에서 IP를 부여 받는다.
기존 WiFi 네트워크에 연결된 모든 장치는 이 IP를 이용하여 ESP8266/ESP32 Server에 접속하고, 웹 페이지 또는 데이터를 전달 받을 수 있다.

AP(Soft Access Point) Mode

AP Mode인 경우 ESP8266/ESP32는 자신의 WiFi network를 구성하고 하나 이상의 Station을 위한 Hub(WiFI router 처럼 동작)로 동작 한다.

ESP8266/ESP32 Server를 WiFi AP(Access Point) 모드로 시용하는 예

AP Mode로 동작하는 ESP8266/ESP32 Server는 WiFi router와 다르게 Wired network를 갖지 않기 때문에 Soft-AP(Soft Access Point)라고 한다.
또한 최대 연결 가능한 Station 수가 5개로 제한된다.
AP mode로 WiFi network을 구성할 때는 SSID(Name of the network)와 IP address를 설정하여야 한다.
이 IP address를 이용하여 자신의 Network에 연결된 모든 장치(Devices)에게 Web page를 전송한다.

ESP8266/ESP32 Web Server를 이용한 원격제어

ESP8266/ESP32 Web Server 예를 위한 회로 구성

ESP8266/ESP32 Web Server를 이용한 원격제어 예를 설명하기 위하여 ESP8266/ESP32 Web Server에 2개의 LED를 연결한다.

ESP8266/ESP32 Web Server에 2개의 LED를 연결하는 회로 예

ESP8266/ESP32 Web Server를 이용한 원격제어 시스템(IoT(Internet of things))의 동작 흐름

웹 브라우저에 URL을 입력하고 Enter 키를 누르면 Browser가 HTTP Request(예 : GET Request)을 웹 서버로 전송한다.
Web Server는 이 요청을 아래와 같이 처리한다.

예를 들어 Web browser에 http://192.168.1.1/LEDon과 같은 URL을 입력하는 경우, Web browser는이 요청을 처리하기 위한 HTTP Request를 ESP8266/ESP32 Server로 전송한다.
ESP8266/ESP32 Server는 이 Request를 읽을 때 사용자가 LED를 켜고 싶어한다는 것을 알고, Request에 대응하여 LED를 켜고 LED 상태를 보여주는 Web page를 작성(Dynamic webpage)하여 Browser로 전송한다.

WiFi Library를 이용한 프로그램(STA mode) 예

이 예에서는 ESP8266/ESP32WiFi Library를 사용 한다.

WiFi Library

이 라이브러리는 WEP 와 WPA2 개인 암호화를 지원하지만 WPA2 Enterprise는 지원하지 않는다.

ESP8266인 경우에는 ESP8266WiFi.h를 include(예: #include ) 하고 ESP32인 경우에는 WiFi.h를 include(예: #include ) 하여야 한다.

참고자료: www.arduino.cc/en/Reference"WiFi library"

WiFi Library는 아래와 같이 5개의 Class로 구성되어 있다.

WiFi class: WiFi class는 Ethernet library 와 네트워크 설정을 초기화한다.
IPAddress class: IPAddress class는 네트워크 구성에 대한 정보를 제공한다.
Server class: Server class는 연결된 클라이언트(다른 컴퓨터 또는 장치에서 실행되는 프로그램)와 데이터를 주고받을 수 있는 서버를 만든다.
Client class: Client class는 서버에 연결하고 데이터를 주고받을 수 있는 클라이언트를 만든다.
UDP class: UDP class를 사용하면 UDP 메시지를 보내고 받을 수 있다.

아래에서는 자주 사용하는 Class와 Method에 대하여만 설명한다.

자주 사용하는 WiFi class

WiFi.begin(): WiFi 라이브러리의 네트워크 설정을 초기화하고 현재 상태를 제공한다.

구문(Syntax)

WiFi.begin();
WiFi.begin(ssid);
WiFi.begin(ssid, pass);
WiFi.begin(ssid, keyIndex, key);

매개 변수(Parameters)

ssid: SSID(Service Set 식별자)는 연결하려는 WiFi 네트워크의 이름이다.
pass: WPA 암호화 네트워크는 보안을 위해 문자열 형식의 암호를 사용한다.
keyIndex: WEP 암호화 네트워크는 최대 4개의 다른 키를 저장할 수 있습니다. 사용할 키를 나타낸다.
key: WEP 암호화 네트워크의 보안 코드로 사용되는 16진수 문자열.

Returns

WL_CONNECTED: 네트워크에 연결된 경우
WL_IDLE_STATUS: 네트워크에 연결되지 않았지만 전원이 켜진 경우

WiFi.status(): 연결 상태를 반환한다.

구문(Syntax)

WiFi.status();

매개 변수(Parameters): 없음
Returns

WL_CONNECTED: WiFi 네트워크에 연결된 경우 반환되는 값이다.
WL_IDLE_STATUS: WiFi.begin()이 호출될 때 할당된 임시 상태이며 시도 횟수가 만료될 때까지 이 상태를 유지한다. 이 상태의 최종 결과는 WL_CONNECT_FAILED 또는 WL_CONNECTED)이 된다.
WL_NO_SSID_AVAIL: SSID를 사용할 수 없을 때 반환되는 값이다.
WL_SCANPLETED_COMPLETED: 네트워크 검색이 완료된 경우 반환되는 값이다.
WL_CONNECT_FAILED: 모든 시도에서 연결이 실패할 때 반환되는 값이다.
WL_CONNECTION_LOST: 연결이 끊길 때 반환된다.
WL_DISCONNECTED: 네트워크에서 연결이 끊겼을 때 반환된다.
WL_NO_SHIELD: WiFi shield(WiFi 모듈과 연결되는 Arduino 모듈)가 없을 때 반환된다.

WiFi.disconnect(): 현재 네트워크에서 WiFi 모듈을 분리한다.

구문(Syntax)

WiFi.disconnect();

매개 변수(Parameters): 없음
Returns: 없음

자주 사용하는 Server class

WiFiServer(): 지정된 포트에서 연결을 수신하는 서버를 생성한다.

구문(Syntax)

Server(port);

매개 변수(Parameters)

port: 수신할 포트 번호(int)

Returns: 없음

begin(): 서버에 들어오는 연결의 수신(Incoming connections)을 시작하도록 한다.

구문(Syntax)

server.begin();

매개 변수(Parameters): 없음
Returns: 없음

available(): 서버에 연결되어 있고 읽을 수 있는 데이터가 있는 클라이언트를 가져온다. 반환된 클라이언트 개체가 범위를 벗어나도 연결이 지속되므로 client.stop()을 호출하여 해당 개체를 닫을 수 있다.

구문(Syntax)

server.available();

매개 변수(Parameters)
Returns: 없음

클라이언트 개체가 반환된다. 읽을 수 있는 데이터가 없는 경우 false가 반환된다.

write(): 서버에 연결된 모든 클라이언트에 데이터를 write 한다.

구문(Syntax)

server.write(data);

매개 변수(Parameters)

data: write 할 데이터(byte or char)

Returns

byte: write 한 byte 수가 반환된다.

print(): 서버에 연결된 모든 클라이언트에 데이터를 print(Arduino의 print와 같은 Format로 전송)한다. 숫자는 각 숫자의 ASCII 문자(예: 숫자 123은 세 문자 '1', '2', '3'으로 전송됨)로 print 한다.

구문(Syntax)

server.print(data);
server.print(data, BASE);

매개 변수(Parameters)

data: print 할 데이터(char, byte, int, long, or string)
BASE(optional): print 할 숫자의 Base(BIN for binary(base 2), DEC for decimal(base 10), OCT for octal(base 8), HEX for hexadecimal(base 16))

Returns

print 한 byte 수가 반환된다.

println(): 서버에 연결된 모든 클라이언트에 데이터를 print(전송)한 다음 Newline Code를 전송한다. 숫자는 각 숫자의 ASCII 문자(예: 숫자 123은 세 문자 '1', '2', '3'으로 전송됨)로 print 한다.

구문(Syntax)

server.println();
server.println(data);
server.println(data, BASE);

매개 변수(Parameters)

data(optional): print 할 데이터(char, byte, int, long, or string)
BASE(optional): print 할 숫자의 Base(BIN for binary(base 2), DEC for decimal(base 10), OCT for octal(base 8), HEX for hexadecimal(base 16))

Returns

print 한 byte 수가 반환된다.

자주 사용하는 IPAddress class

WiFi.localIP(): WiFi 모듈의 IP 주소를 가져온다.

구문(Syntax)

WiFi.localIP();

매개 변수(Parameters): 없음
Returns

WiFi 모듈의 IP 주소가 반환된다.

WiFi.subnetMask(): WiFi 모듈의 Subnet mask를 가져온다.

구문(Syntax)

WiFi.subnet();

매개 변수(Parameters): 없음
Returns

WiFi 모듈의 Subnet mask가 반환된다.

WiFi.gatewayIP(): WiFi 모듈의 Gateway IP 주소를 가져온다.

구문(Syntax)

WiFi.gatewayIP();

매개 변수(Parameters): 없음
Returns

WiFi 모듈의 Gateway IP 주소가 반환된다.

자주 사용하는 Client class

WiFiClient(): client.connect()에 설정된 대로 지정된 인터넷 IP 주소 와 포트에 연결할 수 있는 클라이언트를 생성한다.

구문(Syntax)

WiFiClient();

매개 변수(Parameters): 없음

connected(): 클라이언트의 연결 여부를 반환한다. 연결이 닫혔지만 읽지 않은 데이터가 있는 경우 클라이언트는 연결된 것으로 간주된다.

구문(Syntax)

client.connected();

매개 변수(Parameters): 없음
Returns

클라이언트가 연결되어 있으면 true를 반환하고 연결되어 있지 않으면 false를 반환한다.

connect(): 생성된 클라이언트에 지정된 IP 주소 및 포트로 연결한다. connect는 도메인 이름(예: google.com)을 사용하는 것도(DNS 조회) 지원한다.

구문(Syntax)

client.connect(ip, port);
client.connect(URL, port);

매개 변수(Parameters)

ip: 클라이언트가 연결할 IP 주소(4바이트 배열)
URL: 클라이언트가 연결할 도메인 이름(예: google.com)
port: 클라이언트가 연결할 포트(int)

Returns

연결에 성공하면 true를 반환하고 실패하면 false를 반환한다.

Client class의 기타 Method

write(), print(), println(), available(), read(), flush(), stop()은 www.arduino.cc/en/Reference"WiFi library"를 참고하기 바람.

시스템 구성과 설정

STA Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다. WiFI Router 가 없는 경우에는 아래 AP Mode를 참고 바람.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
자신이 사용하는 WiFI Router의 SSID(Service Set IDentifier)와 PASSWORD를 프로그램에 설정한다.
USB-UART0: TxD0를 Logger로 사용한다.
LED: NodeMCU 보드인 경우에는 GPIO2, GPIO4를 LED 제어 Port로 사용하고, ESP-01 모듈인 경우에는 GPIO2, GPIO3를 LED 제어 Port로 사용한다.

주: 위 "ESP8266/ESP32 Web Server에 2개의 LED를 연결하는 회로 예"를 참고하여 LED 회로를 구성한다. NodeMCU 보드인 경우 GPIO2에 연결하는 LED는 보드에 실장되어 있다.

LED 제어를 위한 Web page 예

프로그램 이해에 필요한 배경 지식
- HTML(HyperText Markup Language): ESP8266/ESP32 Web Server에서 Client에 전송하는 Web page 작성에 사용한다.

ESP8266/ESP32WiFi Library를 이용한 LED 제어 프로그램 예: "ESP-WiFi-server-led-button.ino"

// Web server LED - Button control

// Load Wi-Fi library
// ESP32를 사용하는 경우에는 WiFi.h를 사용한다,
#include <WiFi.h>
// ESP8266를 사용하는 경우에는 ESP8266WiFi.h를 사용한다,
//#include <ESP8266WiFi.h>

// 본인이 사용하는 공유기의 ssid와 psaaword로 설정 하여야 한다.
#ifndef STA_SSID
#define STA_SSID "REPLACE_WITH_YOUR_SSID"
#define STA_PASSWORD  "REPLACE_WITH_YOUR_PASSWORD"
#endif

#define BAUD_LOGGER 115200
// Message logging Serial Port(UART0와 UART1 중에서 선택)을 설정 한다.
// UART0를 Microcontroller 와 Serial 통신에 사용하는 경우 UART1을 Logger로 사용 한다.
// ESP8266 NodeMCU 보드에는 TxD1(GPIO2) Pin 만 있기 때문에 UART1에는 출력만 가능 하다.
#define logger (&Serial)
//#define logger (&Serial1)

const char* ssid     = STA_SSID;
const char* password = STA_PASSWORD;

// Web server port 번호를 80 번으로 한다.
WiFiServer server(80);

// HTTP request를 저장 할 변수
String header;

// LED 제어에 사용하는 GPIO pins(NodeMcu 보드)
//const int LED1pin = 5;
const int LED1pin = 2;
const int LED2pin = 4;
// LED 제어에 사용하는 GPIO pins(ESP-01 Module)
//const int LED1pin = 2;
//const int LED2pin = 3;

// 제어 대상 LED의 현재 상태를 저장하는 변수
bool LED1status = LOW;
bool LED2status = LOW;

unsigned long currentTime = millis();   // 현재 시간을 mSec로 저장하는 변수
unsigned long previousTime = 0;         // 이전 시간을 mSec로 저장하는 변수
// Web request timeout 시간을 mSec 단위로 설정(Example: 2000ms = 2s)한다.
const long timeoutTime = 2000;

void setup() {
  logger->begin(115200);
  // LED 연결 Pin을 Output으로 설정 한다.
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  // LED의 초기 상태를 Off 상태로 설정한다.
  digitalWrite(LED1pin, LOW);
  digitalWrite(LED2pin, LOW);

logger->println();
  logger->print("Connecting to ");
  logger->println(ssid);
  // SSID 와 password를 사용하여 Wi-Fi network에 연결 한다.
  WiFi.begin(ssid, password);
  // WIFi 연결을 기다린다. 이 동안 Logger에 0.5초 간격으로 . 을 출력 한다.
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    logger->print(".");
  }
  // Local IP address를 출력한다. 이 IP address를 이용하여 Web browser에서 Server에 연결한다.
  logger->println("");
  logger->println("WiFi connected.");
  logger->println("IP address: ");
  logger->println(WiFi.localIP());
  // Web server를 시작 한다.
  server.begin();
}

void loop(){
  // 서버에 연결되어 있고 읽을 수있는 데이터가 있는 클라이언트가 있는 경우 Non zero(Client Pointer)가 Return 된다.
  WiFiClient client = server.available();
  if (client) {
    // 만약 새로운 Client 가 열결되었으면 "New Client." 메세지를 출력한다.
    logger->println("New Client.");
    // Client로 부터 전송되는 String의 현재 Line을 저장하는 변수
    // 이 변수에 저장된 문자 수가 0인 상태에서 '\n' 코드가 전송되는 경우 Client HTTP request의 종료를 표시 한다.
    String currentLine = "";
    currentTime = millis();
    previousTime = currentTime;
    // Client 가 연결되어 있고 while loop 내의 처리 시간이 timeoutTime 시간 보다 작은 경우 while loop를 계속 한다.
    while (client.connected() && currentTime - previousTime <= timeoutTime) {
      currentTime = millis();         // 현재 시간을 Update 한다.        
      if (client.available()) {       // 만약 Client로 부터 읽을 Data(Byte) 가 있으면,
        char c = client.read();       // Data를 읽어 c에 저장하고,
        logger->write(c);             // Logger(Serial monitor)에 출력 한다.
        header += c;
        if (c == '\n') {
          // currentLine에 입력된 문자 수 가 0인 상태에서 '\n' 코드가 입력되면(두 개의 '\n' Code 가 입력 되면),
          // client HTTP request의 끝을 표시하기 때문에 Response을 Send 한다.
          if (currentLine.length() == 0) {
            // HTTP Header는 항상 Response code(예: HTTP/1.1 200 OK)와 
            // Client 가 무슨 문서가 올 것 인지 알 수 있게 content-type을 보내고 Blank line을 보낸다.
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");  // Response 완료되면 후 연결이 Close 된다.
            client.println();
            
            // Header에 Get method로 전송된 제어 명령에 따라 GPIO에 연결된 LED를 제어(On, Off) 한다.
            if (header.indexOf("GET /LED1on") >= 0) {
              logger->println("GPIO LED1 on");
              LED1status = HIGH;
              digitalWrite(LED1pin, HIGH);
            } else if (header.indexOf("GET /LED1off") >= 0) {
              logger->println("GPIO LED1 off");
              LED1status = LOW;
              digitalWrite(LED1pin, LOW);
            } else if (header.indexOf("GET /LED2on") >= 0) {
              logger->println("GPIO LED2 on");
              LED2status = HIGH;
              digitalWrite(LED2pin, HIGH);
            } else if (header.indexOf("GET /LED2off") >= 0) {
              logger->println("GPIO LED2 off");
              LED2status = LOW;
              digitalWrite(LED2pin, LOW);
            }
              
            // Client에 HTML web page를 전송한다.
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            // on/off buttons의 Style을 설정한다. 
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}");

client.println(".button-on {background-color: #34495e;}");
            client.println(".button-on:active {background-color: #16a085;}");
            client.println(".button-off {background-color: #1abc9c;}");
            client.println(".button-off:active {background-color: #2c3e50;}");
            client.println("p {font-size: 14px;color: #888;margin-bottom: 10px;}");
            client.println("</style>\n");
            client.println("</head>\n");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // LED1pin의 현재 상태를 표시한다. 
            // LED1pin를 제어하는 Button에 표시하는 문자와 이 Button이 클릭되었을 경우 전송하는 메세지를 설정한다. 
            // 만약 현재 LED1pinState 가 off 이면 Button에 "ON" 문자를 표시하고 다음에 이 Button을
            // 클릭하면 Get method로 "/LED1/on" 메세지를 Server에 전송 한다.
            if (LED1status) {
              // LED1pin의 현재 상태를 표시한다. 
              // Button을 클릭하면 IP Address/LED1/on(예: 192.168.0.21/LED1/on) 으로 Server에 접속한다.
              client.println("<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/LED1off\">OFF</a>");
            // 현재 LED1pinState 가 on 이면 Button에 "OFF" 문자를 표시하고 다음에 이 Button을
            // 클릭하면 Get method로 "/LED1/off" 메세지를 Server에 전송 한다.
            } else {
              client.println("<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/LED1on\">ON</a>");
             } 
               
            // LED2pin의 현재 상태를 표시한다. 
            // LED2pin를 제어하는 Button에 표시하는 문자와 이 Button이 클릭되었을 경우 전송하는 메세지를 설정한다. 
            if (LED2status) {
              client.println("<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/LED2off\">OFF</a>");
            } else {
              client.println("<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/LED2on\">ON</a>");
            }
            client.println("</body></html>");
            
            // 새로운 Blank line을 전송하여 HTTP response의 종료를 표시한다.
            client.println();
            // while loop를 Break out 한다.
         } else {
          // '/n' (Newline)문자를 받은 경우 currentLine을 Clear(문자 수가 0 이 됨) 한다. client HTTP request의 끝을 판단하는데 이용.
            currentLine = "";
           }

} else if (c != '\r') {
          // 입력된 문자가 '\r'(carriage return) 문자가 아닌 경우 currentLine의 끝에 문자를 첨부한다.
          currentLine += c;
        }
      }
    }
    // Header variable을 Clear 한다. 
    header = "";
    // Close the connection
    client.stop();
    logger->println("Client disconnected.");
    logger->println("");
  }
}

실험 방법

Arduino IDE를 실행하고 "파일 -> 새 파일"을 클릭한다.
윗 ESP-WiFi-server-led-button.ino 프로그램을 프로그램 편집 창에 복사한다.
무선 공유기의 ssid(STASSID), password(STAPSK)를 자신의 공유기 환경에 맞게 편집한다.
사용하는 보드에 따라 Library(WiFi.h와 WebServer.h) 설정을 편집한다.
ESP8266 Node MCU 보드를 사용하는 경우에는 "툴 -> 보드: "보오드 이름" 에서 "NodeMCU 1.0(ESP-12E Module)"를 선택 한다.

주: NodeMCU-32S 보드를 사용하는 경우에는 "툴 -> 보드: "보오드 이름" 에서 "NodeMCU-32S"를 선택 한다.

"툴 -> 포트: "에서 COM Port(제어판에서 Port 번호를 확인)를 선택 한다.
"스케치 -> 확인/컴파일"을 클릭하여 프로그램이 정상으로 컴파일되는지 확인한다.
"툴 -> 시리얼 모니터"실행하면 시리얼 모니터 창이 열린다. Baud rate 설정(Baud rate: 115200)을 확인한다.
ESP-WiFi-server-led-button.ino 프로그램을 컴파일하여 ESP8266/ESP32에 Upload 한다. ESP32인 경우에는 컴파일이 완료되고 업로드가 시작되면 FLSH Switch(GPIO0)를 약 2초간 누르고 있어야 한다. NodeMCU 보드인 경우에는 Switch를 누르지 않아도 자동으로 진행 된다.
업로드가 종료되면 프로그램이 자동으로 실행되고 IP address 등의 메세지가 출력된다.
터미널에 메세지에서 IP Address(예: 192.168.0.21)를 확인한다. 자신의 WiFI Router(공유기)에 관리자로 접속하여 "고급설정 -> 네트워크 관리 -> 내부 네트워크 설정"에서 사용중인 IP 주소 정보 창에서 확인 하여도 된다.
PC(또는 휴대폰)에서 위에서 확인한 IP Address를 사용하여 Web browser로 연결하면 Browser에 LED 제어를 위한 Web page가 출력된다.
Web browser 에서 LED 제어 명령 버튼을 누르면 해당 명령에 따른 동작이 실행된다.

WebServer Library를 이용한 프로그램(STA mode) 예

이 예에서는 WebServer Library를 사용하여 STA mode Server를 구현 한다.

WiFiWebServer Library

WebServer는 HTTP GET 및 POST 요청을 지원하고 인수 구문 분석을 제공하며 한 번에 하나의 클라이언트를 처리한다.

참고자료: "WiFiWebServer"

참고자료: "ESP8266WebServer Class Reference"

WiFiWebServer class

참고자료: "WiFiWebServer: Usage"

Class Constructor: WiFiWebServer 클래스 개체를 생성한다.

구문(Syntax)

WebServer (int port=80);

주: ESP8266인 경우에는 ESP8266WebServer (int port=80);

매개 변수(Parameters)

Host port 번호: int 포트(기본값: 표준 HTTP 포트 80)

자주 사용하는 Public Member 함수

begin (): 서버를 시작한다.

구문(Syntax)

void begin ();

handleClient(): 들어오는(Incoming) 클라이언트(client)의 요청을 처리한다.

구문(Syntax)

void handleClient();

close(), stop(): 서버를 Disabling 한다. 두 Methods는 동일한 기능을 한다.

구문(Syntax)

void close();
void stop();

Client request handler를 설정하는 함수

구문(Syntax)

void on (const char *uri, THandlerFunction handler);
void on (const char *uri, HTTPMethod method, THandlerFunction fn);
void on (const char *uri, HTTPMethod method, THandlerFunction fn, THandlerFunction ufn);

매개 변수(Parameters)

uri: uri(Uniform Resource Identifier)
handlerFunction: Client로 부터 전송되는 Request에 uri와 일치하는 문자열이 있는 경우 호출되는 함수

fn: Client request handler, ufn: Upload handler

method: HTTPMethod

addHandler():

구문(Syntax)

addHandler (RequestHandler *handler);

매개 변수(Parameters)

*handler: RequestHandler의 Pointer

참고자료: "How to update Web page using ESP32 and Server-Sent Event (SSE)"

onNotFound(): 존재하지 않는 uri로 접속된 경우 처리하는 함수이다.

구문(Syntax)

void onNotFound (THandlerFunction fn);

매개 변수(Parameters)

fn: Handler Function

onFileUpload:

구문(Syntax)

void onFileUpload (THandlerFunction fn);

매개 변수(Parameters)

fn: 이 Handler Function은 별도의 업로드 핸들러가 지정되지 않은 업로드 요청에 대해 호출된다.

send(), send_P: 클라이언트에게 응답을 보낸다.

구문(Syntax)

void send (int code, char *content_type, const String &content);
void send_P (int code, PGM_P content_type, PGM_P content);

매개 변수(Parameters)

code: HTTP 응답 코드는 200 또는 404 등이 될 수 있다.
*content_type: HTTP 콘텐츠 유형은 "text/plain" or "image/png" 등이 될 수 있다.
content: 실제 콘텐츠 본문

시스템 구성과 설정

STA Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다. WiFI Router 가 없는 경우에는 아래 AP Mode를 참고 바람.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
자신이 사용하는 WiFI Router의 SSID와 PASSWORD를 프로그램에 설정한다.
USB-UART0: TxD0를 Logger로 사용한다.
LED: NodeMCU 보드인 경우에는 GPIO2, GPIO4를 LED 제어 Port로 사용하고, ESP-01 모듈인 경우에는 GPIO2, GPIO3를 LED 제어 Port로 사용한다.

WebServer Library를 이용(STA Mode)한 LED 제어 프로그램 예: "ESP-WEBServer-STA-mode.ino"

// ESP WEBServer Station Mode LED - Button control

// ESP32를 사용하는 경우에는 WiFi.h와 WebServer.h를 사용한다,
#include <WiFi.h>
#include <WebServer.h>
// ESP8266를 사용하는 경우에는 ESP8266WiFi.h와 ESP8266WebServer.h를 사용한다,
//#include <ESP8266WiFi.h>
//#include <ESP8266WebServer.h>

// 본인이 사용하는 공유기(WiFi Router)의 ssid와 psaaword를 설정 한다.
// 본인이 사용하는 공유기의 ssid와 psaaword로 설정 하여야 한다.
#ifndef STA_SSID
#define STA_SSID "REPLACE_WITH_YOUR_SSID"
#define STA_PASSWORD  "REPLACE_WITH_YOUR_PASSWORD"
#endif

// WebServer port 번호를 80 번으로 한다.
// ESP32를 사용하는 경우
WebServer server(80);
// ESP8266를 사용하는 경우
//ESP8266WebServer server(80);

const char* ssid     = STA_SSID;
const char* password = STA_PASSWORD;

// LED 제어에 사용하는 GPIO pins(NodeMcu 보드)
const int LED1pin = 2;
const int LED2pin = 4;
// LED 제어에 사용하는 GPIO pins(ESP-01 Module)
//const int LED1pin = 2;
//const int LED2pin = 3;

// 제어 대상 LED의 현재 상태를 저장하는 변수
bool LED1status = LOW;
bool LED2status = LOW;

void setup() {
  logger->begin(BAUD_LOGGER);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  // LED의 초기 상태를 Off 상태로 설정한다.
  digitalWrite(LED1pin, LOW);
  digitalWrite(LED2pin, LOW);
  
  logger->println();
  logger->print("Connecting to ");
  logger->println(ssid);
  // SSID 와 password를 사용하여 Wi-Fi network에 연결 한다.
  // STA mode에서 ESP8266은 WIFi Router로 부터 IP Address를 받는다.
  // 이 IP Address를 이용하여 Web server에 접속한다.
  // Internet를 이용하여 외부로 부터 접속하는 경우에는 WIFi Router에 포트포워드 설정을 하여야 한다.
  WiFi.begin(ssid, password);
  // WIFi 연결을 기다린다. 이 동안 Logger에 0.5초 간격으로 . 을 출력 한다.
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    logger->print(".");
  }
  // Local IP address를 출력한다. 이 IP address를 이용하여 Web browser에서 Server에 연결한다.
  logger->println("");
  logger->println("WiFi connected.");
  logger->print("IP address: ");
  logger->println(WiFi.localIP());
  
  // Web Browser로 부터 수신된 HTTP requests를 처리하기 위하여는
  // Request의 URL path 와 일치 할 경우 실행되는 함수가 필요하다.
  //  이 예에서는 GET Method를 이용하여 Server에 명령을 전달한다.
  //  Get Method는 URL의 일부로 정보를 전달하기 때문에 URL에 포함된 명령을 URL path라 한다.  
  // 아래 예의 Method는 2개의 Parameters(URL과 Function name) 가 필요하다.
  // 아래 예에서 on Method는 URL path 가 root(/) 일때 handle_OnConnect() 함수를 실행한다.
  server.on("/", handle_OnConnect);
  //URL path 가 /LED1on 일때 handle_led1on() 함수가 실행된다.
  server.on("/LED1on", handle_led1on);
  server.on("/LED1off", handle_led1off);
  server.on("/LED2on", handle_led2on);
  server.on("/LED2off", handle_led2off);
  // 일치하는 URL path 가 없는 경우  handle_NotFound() 함수가 실행된다.
  server.onNotFound(handle_NotFound);
  
  // Server object의 begin method를 call 하여 Server를 시작 한다.
  server.begin();
  logger->println("HTTP server started");
}
void loop() {
  // 전송된 HTTP requests를 처리하는 handleClient() Method를 call 한다.
  server.handleClient();
  // LED1status의 값에 따라 LED1pin의 상태를 변경한다.
}

// server.on에서 URL path가 root(/)인 경우 실행되는 함수이다.
void handle_OnConnect() {
  // Web Browser가 처음 Server에 연결된 상태이기 때문에
  // SendHTML() 함수를 실행하여 Web page를 Web Browser에 전송한다.
  logger->println("Connected");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

// server.on에서 URL path가 /LED1on 인 경우 실행되는 함수이다.
void handle_led1on() {
  // LED1pin Pin과 LED1status를 HIGH로 설정 하고 새로 설정된 상태를
  // SendHTML() 함수를 실행하여 Web Browser에 전송한다.
  digitalWrite(LED1pin, HIGH);
  LED1status = HIGH;
  logger->println("LED1 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1off() {
  digitalWrite(LED1pin, LOW);
  LED1status = LOW;
  logger->println("LED1 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led2on() {
  // ESP8266는 HIGH 일때 Off되고 ESP32는 HIGH 일때 On된다.
  digitalWrite(LED2pin, HIGH);
  LED2status = HIGH;
  logger->println("LED2 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led2off() {
  // ESP8266는 LOW 일때 On되고 ESP32는 LOW 일때 Off된다.
  digitalWrite(LED2pin, LOW);
  LED2status = LOW;
  logger->println("LED2 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

// 일치하는 URL path 가 없는 경우 실행되는 함수이다.
void handle_NotFound(){
  logger->println("URL path: Not found");
  server.send(404, "text/plain", "Not found");
}

// Web page를 Web Browser에 전송하는 함수이다.
// Web page를 전송하는 함수를 이용하기 때문에 함수 내에서 if 문 등을 사용하여 Web page 내용 변경이 가능 하다.
// AJAX 를 사용하는 경우에는 Client 측 Call back 함수에서 Web page를 프로그램으로 변경 가능함.
// HTML 언어에 대한 이해가 필요한 경우 https://www.w3schools.com/html/ 페이지를 참고 바람.
String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #1abc9c;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #34495e;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #1abc9c;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
  ptr +="<h3>Using Station Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/LED1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/LED1on\">ON</a>\n";}

if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/LED2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/LED2on\">ON</a>\n";}

ptr +="</body>\n";
  ptr +="</html>\n";
  // HTML Page를 저장하고 있는 String의 Pointer를 Return 한다.
  return ptr;
}

실험 방법

실험 방법은 위 "ESP8266/ESP32WiFi Library를 이용한 프로그램(STA mode) 예"와 유사하기 때문에 생략 한다.

WiFI Library와 XMLHttpRequest를 이용한 LED 제어 예

이 예는 WiFI Library와 XMLHttpRequest를 이용하여 Web 환경(STA mode)에서 LED를 제어하는 예 이다.

XMLHttpRequest 요약

XMLHttpRequest는 현재 사용하는 거의 모든 Browser에 Built-in 되어있는 Server로 부터 Data를 Request 하는 object 이다.
Web page를 Reloading 하지 않고 Web page를 Update 할 수 있게 한다.
Web page가 Load된 다음에 Server로 부터 Data를 Requeset 할 수 있다.
Web page가 Load된 다음에 Server로 부터 Data를 Receive 할 수 있다.
Background에서 Server에 Data를 보낼 수 있다.

주: Internet Explorer old versions(IE5 and IE6)은 지원하지 않는다.

참고자료: "w3schools.com: AJAX Introduction"

시스템 구성과 설정

STA Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
자신이 사용하는 WiFI Router의 SSID(Service Set IDentifier)와 PASSWORD를 프로그램에 설정한다.
USB-UART0: TxD0를 Logger로 사용한다.
NodeMCU 보드인 경우에는 GPIO2, GPIO4를 LED 제어 Port로 사용한다.
GPIO0를 Button SW로 사용한다.
Web browser 에서 LED 제어 버튼을 클릭하면 해당 명령에 따라 개발보드의 LED가 제어(On, Off) 된다.
프로그램에서 getStatus 함수를 주기적으로 실행하도록 setInterval() 함수의 Comment를 삭제하면 ESP 개발 보드의 LED와 Button SW의 상태(On, Off)가 0.5초 간격으로 Web browser에 업데이트 된다.

LED를 제어하고 LED와 Button SW의 상태(On, Off)를 보여주는 Web page 예

WiFI Library와 XMLHttpRequest를 이용한 LED 제어 프로그램 예: "ESP-Web-server-XMLHttp-led.ino"

// ESP WebServer AJAX(STA Mode)

// AJAX(Asynchronous JavaScript and XML)를 이용하여
// Web page가 Load된 후에 비 동기적으로 Web server에 Data를 보내고,
// Web server로 부터 Data를 읽어서 전체 Page를 Reload 하지 않고,
// Web page를 Update 한다.
// Web page 전체를 Reload 하지 않기 때문에 HTML 문서를 R"(Raw strings)으로
// 저장 할 수 있다. 그 결과 HTML 문서 작성이 용이하고 읽기 쉽다.
// 실시간으로 자주 Web page 내의 일부 Data를 Server로 부터 전달 받아 표시하는 경우 유리하다. 
String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
// R" : C++ 11 부터 \n 과 같은 Escape character를 처리하지 말고 Raw strings으로 사용 함을 표시
String html_1 = R"=====(
<!DOCTYPE html>
<html>
 <head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta charset='utf-8'>
  <title>ESP Web AJAX</title>
  <style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
   body{margin-top: 30px;} h2 {color: #444444;margin: 30px auto 24px;} h3 {color: #1abc9c;margin-bottom: 20px;}
   .button {display: block;width: 150px;background-color: #1abc9c;border: none;color: white;padding: 8px 12px;text-decoration: none;font-size: 14px;margin: 0px auto 20px;cursor: pointer;border-radius: 4px;}
   .button-s1 {background-color: #34495e;}
   .button-s1:active {background-color: #16a085;}
   .button-s1:hover {background-color: #16a085;}
   p {font-size: 14px;color: #888;margin-bottom: 10px;}
   p.data {line-height: 0.5;}
   .label {line-height: 0.5;}

#time_P { margin: 10px 0px 15px 0px;}
   table {margin:auto; text-align:center;}
  </style>
 </head>

// 현재 시간을 표시하는 함수이다. 이 함수는 주기적으로(보통 1초) 실행된다.
  function updateTime() 
    {  
       var d = new Date();
       var t = "";
       t = d.toLocaleTimeString();
       document.getElementById('Time').innerHTML = t;
    }

// Web page에 주기적으로 Update 할 Data를 Server로 부터 갖어 오기 위한 함수 이다. 
  function getStatus() 
    {  
      ajaxLoad('getStatus');
    }

// XMLHttpRequest는 현재 사용하는 거의 모든 Browser에 Built-in 되어있는
  // Server로 부터 Data를 Request 하는 object 이다.
  // 주: Internet Explorer old versions(IE5 and IE6)은 지원하지 않는다.
  // XMLHttpRequest는 아래 기능을 가능하게 한다.
  //   Web page를 Reloading 하지 않고 Web page를 Update 할 수 있게 한다.
  //   Web page가 Load된 다음에 Server로 부터 Data를 Requeset 할 수 있다.
  //   Web page가 Load된 다음에 Server로 부터 Data를 Receive 할 수 있다.
  //   Background에서 Server에 Data를 보낼 수 있다.
  var ajaxRequest =new XMLHttpRequest();
 
  // Web server에 URL path(ajaxURL)를 GET Method로 보내고 결과를 Request 하는 함수
  function ajaxLoad(ajaxURL)
    {
      if(!ajaxRequest){ alert('AJAX is not supported.'); return; }
      // Open method는 request type을 지정한다.
      // Open method 기본형: .open(method, url, async)
      // method: GET or POST method를 사용 할 수 있다. 여기서는 GET Method를 사용 한다.
      // url: Server의 (file) Location. 이 프로그램에서는 이 문자열을 명령으로 사용한다.
      // async: true (asynchronous) or false (synchronous)
      // Server에 request를 전송하는 것은 .send() Method를 사용한다.
      ajaxRequest.open('GET',ajaxURL,true);

// onreadystatechange Property는 XMLHttpRequest 객체의 상태가 변경 될 때마다 실행될 함수를 지정한다.
      ajaxRequest.onreadystatechange = function()
      {
        // readyState property가 4이고 status property가 200이면 응답이 준비된 상태이다.
        if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
        {
          // Response text를 ajaxResult 변수에 저장한다.
          var ajaxResult = ajaxRequest.responseText;
          // 문자열 변수 ajaxResult 내의 문자를 "|" 문자로 분리하여 Array 변수에 저장한다.
          var commandArray = ajaxResult.split("|");
          // commandArray[0]의 문자열이 'command' 인 경우 commandArray[1]에 따라 Web page에 표시 한다.
          if(commandArray[0] == 'command') {
            if(commandArray[1] == 'LED1On') {
              flagLED1 = true;
              document.getElementById('LED1Control').style.background = '#1abc9c'
              document.getElementById('LED1Control').innerText = 'LED1 Off';
            }
            if(commandArray[1] == 'LED1Off') {
              flagLED1 = false;
              document.getElementById('LED1Control').style.background = '#34495e'
              document.getElementById('LED1Control').innerText = 'LED1 On';
            }
            if(commandArray[1] == 'LED2On') {
              flagLED2 = true;
              document.getElementById('LED2Control').style.background = '#1abc9c'
              document.getElementById('LED2Control').innerText = 'LED2 Off';
            }
            if(commandArray[1] == 'LED2Off') {
              flagLED2 = false;
              document.getElementById('LED2Control').style.background = '#34495e'
              document.getElementById('LED2Control').innerText = 'LED2 On';
            }
            document.getElementById('commandMseg').innerHTML = commandArray[1];
          }
          // commandArray[0]의 문자열이 'status' 인 경우 commandArray[i]의 내용을 Web page에 표시 한다.
          if(commandArray[0] == 'status') {
            if(commandArray[1] == 'LED1On') {
              flagLED1 = true;
              document.getElementById('LED1Control').style.background = '#1abc9c'
              document.getElementById('LED1Control').innerText = 'LED1 Off';
            }
            if(commandArray[1] == 'LED1Off') {
              flagLED1 = false;
              document.getElementById('LED1Control').style.background = '#34495e'
              document.getElementById('LED1Control').innerText = 'LED1 Off';
            }
            if(commandArray[2] == 'LED2On') {
              flagLED2 = true;
              document.getElementById('LED2Control').style.background = '#1abc9c'
              document.getElementById('LED2Control').innerText = 'LED2 Off';
            }
            if(commandArray[2] == 'LED2Off') {
              flagLED2 = false;
              document.getElementById('LED2Control').style.background = '#34495e'
              document.getElementById('LED2Control').innerText = 'LED2 On';
            }
            if(commandArray[3] == 'buttonOn') {
              document.getElementById('ESPStatus').style.background = '#1abc9c'
              document.getElementById('ESPStatus').innerText = 'SW On';
            }
            if(commandArray[3] == 'buttonOff') {
              document.getElementById('ESPStatus').style.background = '#34495e'
              document.getElementById('ESPStatus').innerText = 'SW Off';
            }
            document.getElementById('commandMseg').innerHTML = commandArray[3];
          }
        } 
      }

// Server에 request를 전송(GET 사용)한다.
      // POST를 사용하는 경우에는 send(string)를 사용한다.
      ajaxRequest.send();
    }

// LED1의 제어 명령(LED1을 Toggle)를 Server에 전송한다.
    function LED1Control()
    {
      if(flagLED1 == false) {
        ajaxLoad("LED1On");
      }
      else {
        ajaxLoad("LED1Off");    
      }
    }

// LED2의 제어 명령(LED2을 Toggle)를 Server에 전송한다.
    function LED2Control()
    {
      if(flagLED2 == false) {
        ajaxLoad("LED2On");
      }
      else {
        ajaxLoad("LED2Off");    
      }
    }

// ESP 보드의 상태를 읽는 명령(URL path)를 Server에 전송한다.
    function getStatus()
    {
      ajaxLoad("getStatus");
    }

// setInterval: 일정한 주기로 함수(함수 이름만 설정 가능)를 실행 한다.
    // getStatus() 함수를 500mSec 주기로 시행한다. 자주 변경되는 Data 표시에 사용 함. 
//    var myVar1 = setInterval(getStatus, 500);
    // updateTime 함수를 1Sec 주기로 시행한다. 현재 시간 표시에 사용 함.
    var myVar2 = setInterval(updateTime, 1000);  
  </script>
 

<body onload="getStatus()">
    <h2>ESP LED Control(STA)</h2>
    <h3 id='commandMseg'>commandMseg</h3>
    <p id="Time" class="data">Time</p>
    <table align='center'>
      <tr>
        <th><button id='LED1Control' class="button button-s1" onclick="LED1Control()">LED1</button></th>
      </tr>
      <tr>
        <th><button id='LED2Control' class="button button-s1" onclick="LED2Control()">LED2</button></th>
      </tr>
      <tr>
        <th><button id='ESPStatus' class="button button-s1" onclick="getStatus()">Button</button></th>
      </tr>
    </table>
 </body>
</html>
)====="; 
 
// ESP32 개발보드를 사용하는 경우 WiFi.h를 사용한다.
#include <WiFi.h>
// ESP8266 개발보드를 사용하는 경우 ESP8266WiFi.h를 사용한다.
//#include <ESP8266WiFi.h>
 
// 본인이 사용하는 공유기(WiFi Router)의 ssid와 psaaword를 설정 한다.
// 본인이 사용하는 공유기의 ssid와 psaaword로 설정 하여야 한다.
#ifndef STA_SSID
#define STA_SSID "REPLACE_WITH_YOUR_SSID"
#define STA_PASSWORD  "REPLACE_WITH_YOUR_PASSWORD"
#endif
 
#define BAUD_LOGGER 115200
#define logger (&Serial)

// 본인이 사용하는 공유기(WiFi Router)의 ssid와 psaaword를 설정 한다.
const char* ssid     = STA_SSID;
const char* password = STA_PASSWORD;

// ESP 개발 보드에 내장된 Button SW(GPIO0)를 사용한다.
const int buttonPin = 0;
// LED 제어에 사용하는 GPIO pins(NodeMcu 보드)
const int LED1pin = 2;
const int LED2pin = 4;
// 개발보드의 상태 전송에 사용하는 문자열 변수
String boardStatus = "";

// WiFiServer Object의 port 번호를 80(HTTP의 Default port)으로 한다.
WiFiServer server(80);
String request = "";
 
void setup() 
{
  logger->begin(BAUD_LOGGER);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  // LED의 초기 상태를 Off 상태로 설정한다.
  digitalWrite(LED1pin, LOW);
  digitalWrite(LED2pin, LOW);

logger->println();
  logger->print("Connecting to ");
  logger->println(ssid);
  // SSID 와 password를 사용하여 Wi-Fi network에 연결 한다.
  // STA mode에서 ESP8266은 WIFi Router로 부터 IP Address를 받는다.
  // 이 IP Address를 이용하여 Web server에 접속한다.
  // Internet를 이용하여 외부로 부터 접속하는 경우에는 WIFi Router에 포트포워드 설정을 하여야 한다.
  WiFi.begin(ssid, password);
  // WIFi 연결을 기다린다. 이 동안 Logger에 0.5초 간격으로 . 을 출력 한다.
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    logger->print(".");
  }
  // Local IP address를 출력한다. 이 IP address를 이용하여 Web browser에서 Server에 연결한다.
  logger->println("");
  logger->println("WiFi connected.");
  logger->print("IP address: ");
  logger->println(WiFi.localIP());

// Server object의 begin method를 call 하여 Server를 시작 한다.
    server.begin();
    logger->println("HTTP server started");
}   // void setup()
 
int findIndex = 0;
char inByte; 
void loop() 
{
    // Client 가 연결되었는지 Check 한다.
    WiFiClient client = server.available();
    // Client 가 연결되지 않은 경우
    if (!client)
    {
    // Function이 return되어 'client' object 가 destroyed 되고 Client는 disconnected 된다.
      return;
    }
    // Client 가 연결된 경우 아래 프로그램을 실행한다.
    else
    {
      // Request의 첫 Line을 읽는다.
      request = client.readStringUntil('\r');
      logger->print("request: ");
      logger->println(request);
      // 만약 Request에 문자열 "getStatus" 가 있으면 개발보드의 상태를 전송한다.
      if ( request.indexOf("getStatus") > 0 )
      { 
        boardStatus = "status|";
        // LED1의 상태를 전송 문자열에 첨부한다.
        // ESP8266은 HIGH일 경우 LED가 Off 되고,
        // ESP32은 HIGH일 경우 LED가 On 된다.
        if (digitalRead(LED1pin) == HIGH) boardStatus += "LED1On|";
        else boardStatus += "LED1Off|";
        // LED2의 상태를 전송 문자열에 첨부한다.
        if (digitalRead(LED2pin) == HIGH) boardStatus += "LED2On|";
        else boardStatus += "LED2Off|";
        // LED1의 상태를 전송 문자열에 첨부한다.
        if (digitalRead(buttonPin) == LOW) boardStatus += "buttonOn";
        else boardStatus += "buttonOff";
        logger->print("Board Status: ");
        logger->println(boardStatus);

client.print( header );
        // Client에 전송 할 Data를 | 로 구분하여 전송한다.
        client.print( boardStatus );
        // 페이지가 처음 접속되었을 때 방향 표시등의 상태가 표시되기를 원하는 경우 이곳에 코드 삽입 요.
      }
      // Control command 가 수신된 경우
      else if ( request.indexOf("LED1On") > 0 )
      { 
        // ESP8266은 HIGH일 경우 LED가 Off 되고,
        // ESP32은 HIGH일 경우 LED가 On 된다.
        digitalWrite(LED1pin, HIGH);
        // Microcontroller에 Speed up command(U)를 전송한다.
        logger->println("LED1On");
        // Web Browser에 명령 실행 결과를 알리는 메세지를 전송한다.
        client.print( header );
        client.print( "command" );   client.print( "|" );  client.print("LED1On"); 
      }
      else if ( request.indexOf("LED1Off") > 0 )
      { 
        // ESP8266은 LOW일 경우 LED가 On 되고,
        // ESP32은 HIGH일 경우 LED가 Off 된다.
        digitalWrite(LED1pin, LOW);
        logger->println("LED1Off");
        client.print( header );
        client.print( "command" );   client.print( "|" );  client.print("LED1Off"); 
      }
      else if ( request.indexOf("LED2On") > 0 )
      { 
        digitalWrite(LED2pin, HIGH);
        // Microcontroller에 Speed up command(U)를 전송한다.
        logger->println("LED2On");
        // Web Browser에 명령 실행 결과를 알리는 메세지를 전송한다.
        client.print( header );
        client.print( "command" );   client.print( "|" );  client.print("LED2On"); 
      }
      else if ( request.indexOf("LED2Off") > 0 )
      { 
        digitalWrite(LED2pin, LOW);
        logger->println("LED2Off");
        client.print( header );
        client.print( "command" );   client.print( "|" );  client.print("LED2Off"); 
      }
      // Request에서 일치하는 Command를 발견하지 못한 경우 Web page를 전송한다.
      // "ip address/ "로 처음 연결된 경우에도 아래에서 Web page를 전송한다.
      else
      {
        client.flush();
        client.print( header );
        client.print( html_1 ); 
        logger->println("New page served");
      }
    }
} // void loop()

실험 방법

Arduino IDE를 실행하고 "파일 -> 새 파일"을 클릭한다.
윗 ESP-Web-server-XMLHttp-led.ino 프로그램을 프로그램 편집 창에 복사한다.
무선 공유기의 ssid(STA_SSID), password(STA_PASSWORD)를 자신의 공유기 환경에 맞게 편집한다.
사용하는 보드에 따라 Library(WiFi.h or ESP8266WiFi.h) 설정을 편집한다.
ESP8266 Node MCU 보드를 사용하는 경우에는 "툴 -> 보드: "보오드 이름" 에서 "NodeMCU 1.0(ESP-12E Module)"를 선택 한다.

주: NodeMCU-32S 보드를 사용하는 경우에는 "툴 -> 보드: "보오드 이름" 에서 "NodeMCU-32S"를 선택 한다.

"툴 -> 포트: "에서 COM Port(제어판에서 Port 번호를 확인)를 선택 한다.
"스케치 -> 확인/컴파일"을 클릭하여 프로그램이 정상으로 컴파일되는지 확인한다.
"툴 -> 시리얼 모니터"실행하면 시리얼 모니터 창이 열린다. Baud rate 설정(Baud rate: 115200)을 확인한다.
ESP-Web-server-XMLHttp-led.ino 프로그램을 컴파일하여 ESP8266/ESP32에 Upload 한다. ESP32인 경우에는 컴파일이 완료되고 업로드가 시작되면 FLSH Switch(GPIO0)를 약 2초간 누르고(Reset 신호를 자동으로 생성) 있어야 한다. NodeMCU 보드인 경우에는 Switch를 누르지 않아도 자동으로 진행(FLSH Switch(GPIO0) 신호와 Reset 신호를 자동으로 생성) 된다.

주: ESP 보드의 업로드는 FLSH Switch(GPIO0)를 누른 상태에서 Reset 스위치를 잠시 누르고 업로드가 시작될 때 까지 FLSH Switch(GPIO0)를 누르고 있어야 한다. 그러나 개발 보드에 따리 Reset 신호 또는 FLSH Switch(GPIO0)신호를 자동으로 생성 시키기 때문에 자신이 사용하는 개방 보드의 업로드 방법을 확인하여야 한다.

업로드가 종료되면 프로그램이 자동으로 실행되고 시리얼 모니터 창에 아래 예와 같이 WiFi 연결 메세지와 IP address가 출력된다.

WiFi connected.

IP address: 192.168.0.21

시리얼 모니터 창에서 IP Address(예: 192.168.0.21)를 확인한다. 자신의 WiFI Router(공유기)에 관리자로 접속하여 "고급설정 -> 네트워크 관리 -> 내부 네트워크 설정"에서 사용중인 IP 주소 정보 창에서 확인 하여도 된다.
PC(또는 휴대폰)에서 위에서 확인한 IP Address를 사용하여 Web browser로 연결하면 Browser에 LED 제어와 ESP 보드 상태를 출력하기 위한 Web page가 출력된다.
Web browser 에서 LED 제어 명령 버튼을 누르면 해당 명령에 따른 동작이 실행된다.
ESP 보드에서 GPIO0 버튼을 누르고 Web browser SW 상태 버튼을 클릭하면 ESP 보드의 GPIO0 버튼 상태가 Web browser에 표시된다.

WebServer Library를 이용한 프로그램(AP mode) 예

이 예에서는 WebServer Library를 사용하여 AP mode Server를 구현 한다.

시스템 구성과 설정

AP Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 없어도 ESP32으로 구성한 Soft-AP를 이용 할 수 있다.
ESP32(이 프로그램은 ESP32에서만 동작을 확인함)를 Soft-AP로 사용하기 때문에 Soft-AP의 SSID, PASSWORD를 프로그램에 설정한다.
USB-UART0: TxD0를 Logger로 사용한다.
LED: GPIO2, GPIO4를 LED 제어 Port로 사용한다.

WebServer Library를 이용(AP Mode)한 LED 제어 프로그램 예: "ESP-WEBServer-AP-mode.ino"

// ESP WebServer Soft AP(Soft Access Point) Mode LED - Button control
// 이 프로그램에서는 ESP32를 사용한다.

#include <WiFi.h>
#include <WebServer.h>

// AP(Access Point)의 ssid와 psaaword를 설정 한다.
// AP 연결시 여기서 설정한 ssid와 psaaword를 사용한다.
#ifndef AP_SSID
#define AP_SSID "NodeMCU ESP32"
#define AP_PASSWORD  "12345678"
#endif

// WebServer port 번호를 80 번으로 한다.
WebServer server(80);

const char* ssid     = AP_SSID;
const char* password = AP_PASSWORD;

// LED 제어에 사용하는 GPIO pins(NodeMcu 보드)
const int LED1pin = 2;  // NodeMCU ESP32 on board LED
const int LED2pin = 4;
// LED 제어에 사용하는 GPIO pins(ESP-01 Module)
//const int LED1pin = 2;
//const int LED2pin = 3;

// 제어 대상 LED의 현재 상태를 저장하는 변수
bool LED1status = LOW;
bool LED2status = LOW;

// AP mode에서 ESP8266는 새로운 WIFI Network를 구성하고,
  // SSID(Name of the network)와 IP address를 설정한다.
  // AP에 직접 연결하려면 "Wi-Fi 연결" -> "사용 가능한 네트워크"에서 SSID를 찾아 연결하여야 한다.
  // 외부로 부터 접속하는 경우에는 자신이 사용하는 WIFi Router에 포트포워드 설정을 하여야 한다.
  WiFi.softAP(ssid, password);
  delay(100);

// Web Browser로 부터 수신된 HTTP requests를 처리하기 위하여는
  // Request의 URL path 와 일치 할 경우 실행되는 함수가 필요하다.
  //  이 예에서는 GET Method를 이용하여 Server에 명령을 전달한다.
  //  Get Method는 URL의 일부로 정보를 전달하기 때문에 URL에 포함된 명령을 URL path라 한다.  
  // 아래 예의 Method는 2개의 Parameters(URL과 Function name) 가 필요하다.
  // 아래 예에서 on Method는 URL path 가 root(/) 일때 handle_OnConnect() 함수를 실행한다.
  server.on("/", handle_OnConnect);
  //URL path 가 /LED1on 일때 handle_led1on() 함수가 실행된다.
  server.on("/LED1on", handle_led1on);
  server.on("/LED1off", handle_led1off);
  server.on("/LED2on", handle_led2on);
  server.on("/LED2off", handle_led2off);
  // 일치하는 URL path 가 없는 경우  handle_NotFound() 함수가 실행된다.
  server.onNotFound(handle_NotFound);
  
  // Server object의 begin method를 call 하여 Server를 시작 한다.
  server.begin();
  logger->println();
  logger->print("Connecting to ");
  logger->print("AP SSID: ");
  logger->println(AP_SSID);
  IPAddress myIP = WiFi.softAPIP();
	logger->print("IPAddress: ");
	logger->println(myIP);
  logger->println("HTTP server started");
}
void loop() {
  // 전송된 HTTP requests를 처리하는 handleClient() Method를 call 한다.
  server.handleClient();
}

void handle_led1off() {
  digitalWrite(LED1pin, LOW);
  LED1status = LOW;
  logger->println("LED1 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led2on() {
  digitalWrite(LED2pin, HIGH);
  LED2status = HIGH;
  logger->println("LED2 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led2off() {
  digitalWrite(LED2pin, LOW);
  LED2status = LOW;
  logger->println("LED2 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

// 일치하는 URL path 가 없는 경우 실행되는 함수이다.
void handle_NotFound(){
  logger->println("URL path: Not found");
  server.send(404, "text/plain", "Not found");
}

// Web page를 Web Browser에 전송하는 함수이다.
// Web page를 전송하는 함수를 이용하기 때문에 함수 내에서 if 문 등을 사용하여 Web page 내용 변경이 가능 하다.
// AJAX 를 사용하는 경우에는 Client 측 Call back 함수에서 Web page를 프로그램으로 변경 가능함.
// HTML 언어에 대한 이해가 필요한 경우 https://www.w3schools.com/html/ 페이지를 참고 바람.
String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #1abc9c;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #34495e;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #1abc9c;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
  ptr +="<h3>Using Soft AP Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/LED1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/LED1on\">ON</a>\n";}

ptr +="</body>\n";
  ptr +="</html>\n";
  // HTML Page를 저장하고 있는 String의 Pointer를 Return 한다.
  return ptr;
}

실험 방법

Arduino IDE를 실행하고 "파일 -> 새 파일"을 클릭한다.
윗 ESP-WEBServer-AP-mode.ino 프로그램을 프로그램 편집 창에 복사한다.
NodeMCU-32S 보드를 사용하는 경우에는 "툴 -> 보드: "보오드 이름" 에서 "NodeMCU-32S" 보드를 선택한다.
"툴 -> 포트: "에서 COM Port(제어판에서 Port 번호를 확인)를 선택 한다.
"스케치 -> 확인/컴파일"을 클릭하여 프로그램이 정상으로 컴파일되는지 확인한다.
"툴 -> 시리얼 모니터"실행하면 시리얼 모니터 창이 열린다. Baud rate 설정(Baud rate: 115200)을 확인한다.
ESP-WEBServer-AP-mode.ino 프로그램을 컴파일하여 ESP32에 Upload 한다. ESP32인 경우에는 컴파일이 완료되고 업로드가 시작되면 FLSH Switch(GPIO0)를 약 2초간 누르고 있어야 한다.

업로드가 종료되면 프로그램를 실행하고 Logger 출력(Serial의 TxD0)에서 IP address를 확인한다.
PC에서 "설정 -> 네트워크 및 인터넷 -> WiFi -> 사용 가능한 네트워크 표시"를 실행하고, "NodeMCU ESP32"를 선택한 다음 "연결"을 클릭한다.
Password를 입력창이 열리는 경우 Password(12345678)를 입력하고 "다음"을 클릭한다.
"ChoNodeMCU ESP32 속성"에 "인터넷 연결 안 됨" 메세지가 출력된다. 이 의미는 이 WiFi AP로는 외부 인터넷을 사용활 수 없다는 의미 이다.
PC(or 휴대폰)에서 위에서 확인한 IP Address(192.168.4.1 로 설정되는 경우가 많음)를 사용하여 Web browser로 연결한다.
PC(또는 휴대폰)에서 위에서 확인한 IP Address를 사용하여 Web browser로 연결하면 Browser에 LED 제어를 위한 Web page가 출력된다.
Web browser 에서 LED 제어 명령 버튼을 누르면 해당 명령에 따른 동작이 실행된다.

ESP WebServer(STA mode)를 이용한 DC Motor Car(Two Wheel) 예

ESP WebServer(STA mode)를 이용하여 DC Motor Car(Two Wheel)를 제어하는 예 이다.

DC Motor Car(Two Wheel)의 구성도: ESP-01은 WebServer로 사용하고 Atmeha128은 Car control에 사용한다.

전원 회로 구성 예

Photo Interrupter 회로 예

주: Atmega128에 USB – UART를 연결하여 프로그램을 개발 하는 경우에는 USB 5V(P)를 연결하고 USB – UART 가 분리된 상태에서는 3.3V(R) 에 연결한다.

주: DC Motor controller 는 사용하는 Gate 에 따라 Atmega128과 같은 전원을 연결하여야 하는 경우가 있다.

DC Motor Car 제어 Web page 예

시스템 구성과 설정

STA Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다. WiFI Router 가 없는 경우에는 아래 AP Mode를 참고 바람.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
자신이 사용하는 WiFI Router의 SSID와 PASSWORD를 프로그램에 설정한다.
USB-UART1: TxD1를 Logger로 사용한다.

ESP에 설치하는 WebServer(STA mode)와 Atmega128에 설치하는 DC Motor car control 프로그램 예

ESP에 설치하는 WebServer 프로그램 예

WebServer Library를 이용한 Aduino 프로그램(ESP) 예: "cho_EspWebAJAX_car_two_wheel_speed_sonic_dir_STA.zip"
WiFI Library를 이용한 Aduino 프로그램(ESP) 예: "cho_EspWebAJAX_car_two_wheel_speed_sonic_dir_STA_wifi.zip"

주: 위 두개의 프로그램 중 WiFI Library를 사용한 프로그램이 응답 속도와 신뢰성이 높은 것 같다.

Atmega128에 설치하는 DC Motor car control 프로그램 예

DC Motor Car 제어를 위한 ATmega128 프로그램 Version 1(Atmel Studio 7.0 사용) 예: "cho_WiFi_car_two_wheel_speed-dist-v1.zip"
DC Motor Car 제어를 위한 ATmega128 프로그램 Version 2(Atmel Studio 7.0 사용) 예: "cho_WiFi_car_two_wheel_speed-dist-v2.zip"
DC Motor Car 제어를 위한 ATmega128 프로그램 Version 3(Atmel Studio 7.0 사용) 예: "cho_WiFi_car_two_wheel_speed-dist-v3.zip"
DC Motor Car 제어를 위한 ATmega128 프로그램 Version 4(Atmel Studio 7.0 사용) 예: "cho_WiFi_car_two_wheel_speed-dist-v4.zip"

주: V1, V2, V3, V4 순서로 장애물 탐색과 회피를 위한 기능을 추가하였기 때문에 프로그램의 복잡도가 증가함. 본인의 Motor car에 적합한 버전을 사용하기 바람.

실험 방법

실험 방법은 위 "WiFi Library를 이용한 프로그램(STA mode) 예"와 유사하기 때문에 생략 한다.

ESP WebServer(AP mode)를 이용한 DC Motor Car(Two Wheel) 예

이 예는 WebServer Library를 사용한 AP Mode Server를 이용하여 DC Motor Car(Two Wheel)를 제어하는 프로그램 이다.

시스템 구성과 설정

AP Mode 예이기 때문에 자신이 사용하는 WiFI Router 가 없어도 ESP8266으로 구성한 Soft-AP를 이용 할 수 있다.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
ESP8266을 Soft-AP로 사용하기 때문에 Soft-AP의 IP Address, Gateway, Subnet mask를 프로그램에 설정한다.
ESP8266의 UART0는 DC Motor Car를 제어하는 ATmega128과 Serial 통신에 사용한다.
USB-UART1: TxD1를 Logger로 사용한다.

ESP8266WEBServer Library(AP mode)를 이용한 DC Motor Car(Two Wheel) 프로그램 예:

Aduino 프로그램(ESP) 예: "cho_EspWebAJAX_car_two_wheel_speed_sonic_dir_AP.zip"
DC Motor Car 제어를 위한 ATmega128 프로그램(Atmel Studio 7.0 사용) 예: 위 STA Mode 프로그램과 동일함.

실험 방법

개발 Tool에서 Logger 출력(Serial1의 TxD1)에서 IP address(192.168.4.1 로 설정되는 경우가 많음)를 확인한다.
휴대폰에서 연결하는 경우 "설정 → 연결 → WiFi" 에서 프로그램에서 설정한 SSID 네트워크(이 예에서는 ChoNodeMCU)를 찾아 연결한다.
휴대폰에서 Web browser를 열고 프로그램 Logger 출력에서 확인한 IP address로 연결한다.
기타 실험 방법은 위 "ESP8266WiFi Library를 이용한 프로그램(STA mode) 예"와 유사하기 때문에 생략 한다.

WiFi Library와 XMLHttpRequest를 이용한 DC Motor Car 예

이 예는 WiFi Library와 XMLHttpRequest를 이용하여 Web 환경에서 DC Motor Car(Differential gears를 사용한 4 wheel drive car)를 실시간으로 제어하는 프로그램 이다.

주: 과학상자를 이용한 4 wheel drive car(Differential gears를 사용)는 손자의 작품이고 전자회로와 프로그램은 손자의 프로그램 공부를 위하여 함께 만들었음.

시스템 구성과 설정

속도 측정, Steering Position 측정에는 Hall sensor를 사용하고 장애물 거리측정에는 초음파 센서를 사용하였다.
인터넷 환경에서 DC Motor Car의 속도, Steering Position, 장애물까지의 거리를 실시간으로 휴대폰에 표시하도록 하기 위하여 ESP8266 Web Server와 Web page 전체를 Reloading 하지 않고 Web page를 Update 할 수 있게 XMLHttpRequest 기술을 사용하였다.
STA Mode 이기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다. WiFI Router 가 없는 경우에는 AP Mode를 참고 바람.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
DC Motor Car의 제어에는 ATmega128를 사용하였다. DC Motor 제어에는 PWM 기술을 사용하고, Timer를 이용한 Pulse width 측정, External interrupt과 Timer를 이용한 Pulse width 측정 등의 기술을 사용하였다.
ESP8266의 모듈과 ATmega128 사이의 통신은 Serial 통신을 사용한다.
구체적인 프로그램에 대한 설명은 프로그램 내에 자세히 설명하였으니 참고 바람.

과학상자를 이용하여 만든 DC Motor Car(Differential gears를 사용한 4 whell drive car)

차동기어, Steering 제어 구조를 보여주는 아래 쪽 사진

DC Motor Car 제어 Web page 예

ESP8266WEBServer Library와 XMLHttpRequest를 이용한 DC Motor Car 프로그램 예:

Aduino 프로그램 예: 프로그램 예: "cho_sol_EspWebAJAX_car_speed_sonic_dir_STA.ino"
DC Motor Car 제어를 위한 ATmega128 c 프로그램(Atmel Studio 7.0 사용) 예: "cho_sol_WiFi_car_speed-dis.zip"
DC Motor Car 제어를 위한 ATmega128 cpp 프로그램(Atmel Studio 7.0 사용) 예: "cho-sol-WiFi-car-speed-dis-cpp.zip"

실험 방법

실험 방법은 위 "ESP8266WiFi Library를 이용한 프로그램(STA mode) 예"와 유사하기 때문에 생략 한다.

ESP8266 Module(WiFi)을 이용한 원격 제어(Web server) - 관련 페이지 보기