หน้าเว็บ

วันเสาร์ที่ 13 กรกฎาคม พ.ศ. 2562

โปรเจค IoT ESP32 เปิดปิดไฟ ผ่าน WiFi ด้วย เว็บเพจ


ในโปรเจคนี้เราจะสร้างเว็บเซิร์ฟเวอร์ จาก ESP32  เป็น Server Controller แบบ Station (STA) Mode เป็นโหมดที่กำหนดให้ ESP32 ไปเชื่อมต่อกับอุปกรณ์อื่น ๆ โดย เร้าเตอร์ แล้วรับส่งข้อมูลระหว่างเครื่องในวงแลนได้ การทำงานเราจะสั่งเปิดปิดไฟ LED โดยใช้ เว็บเพจ ที่เปิดจากอุปกรณ์อื่น ควบคุมผ่าน ระบบอินทราเน็ต ที่ใช้ WiFi  หรือ วง แลน เดียวกัน 

ESP32 เป็นชิปไอซีไมโครคอนโทรลเลอร์ 32 บิต ที่มี WiFi และบลูทูธเวอร์ชั่น 4.2 ในตัว ซึ่งเป็นรุ่นต่อของชิปไอซี ESP8266 ผลิตโดยบริษัท Espressif รองรับการเขียนโปรแกรมโดยใช้โปรแกรม Arduino IDE และรองรับไลบารี่ส่วนใหญ่ของ Arduino 



ESP32 เปิดปิดไฟ เครือข่าย WiFi ด้วย เว็บเพจ

ควบคุมทุกสรรพสิ่งภายในบ้านของคุณด้วย ESP32 หรือ Home Automation ระบบนี้เป็นระบบที่ใช้ควบคุมอุปกรณ์ไฟฟ้าต่างๆผ่าน WiFi จากอุปกรณ์อื่น ๆ เช่น Mobile , PC/Laptop , Tablet ใช้เว็บบราวเซอร์ เปิดเว็บเพจแล้วป้อน IP ของ ESP32 โดยที่สามารถควบคุมได้ผ่านระบบอินทราเน็ต (ที่ใช้ WiFi  หรือ วง แลน หรือใช้ เราเตอร์ เดียวกัน เท่านั้น)







### อุปกรณ์ที่ใช้ ###


1. PICO KIT V4 ESP32 Development Board WiFi + Bluetooth

2. Micro USB Cable Wire 1m for NodeMCU

3. Breadboard 830 Point MB-102

4. Traffic Light LED Display Module

5. Jumper (M2M) 10cm Male to Male



โดยการทำโปรเจคมีขั้นตอนดังนี้


1.ติดตั้ง Arduino core for ESP32

ลิงค์การติดตั้ง Arduino core for ESP32

https://robotsiam.blogspot.com/2017/09/arduino-core-for-esp32.html


2.เชื่อมต่ออุปกรณ์



2.1 เชื่อมต่อ  ESP32  กับ Traffic Light LED Display Module





ภาพรวมการต่อวงจร 






3. อัพโหลดโปรแกรม


3.1 เชื่อมต่อสาย USB ระหว่าง คอมพิวเตอร์ กับ ESP32




3.2 
ตรวจสอบการติดตั้งไดร์เวอร์ ของ ชิปแปลง USB to UART เบอร์ CP2102 โดย คลิกขวา Computet -> Properties -> Device Manager

ที่ Ports (COM & LPT) จะพบ ไดร์เวอร์ ของชิป CP2102

ในตัวอย่างเป็น Silicon Labs CP210x USB to UART Bridge (COM18)






3.3 เปิดโปรแกรม Arduino (IDE) และ ก็อปปี้ โค้ดด้านล่างนี้ ไปวางไว้ในส่วนเขียนโปรแกรม




#include <WiFi.h>


const char* WIFI_NAME = "YourNetworkName";
const char* WIFI_PASSWORD = "YourPassword";

WiFiServer server(80);

String header;

String LED_ONE_STATE = "off";
String LED_TWO_STATE = "off";
String LED_THREE_STATE = "off";


const int GPIO_PIN_NUMBER_12 = 12;
const int GPIO_PIN_NUMBER_13 = 13;
const int GPIO_PIN_NUMBER_27 = 27;


void setup() {
  Serial.begin(115200);
  pinMode(GPIO_PIN_NUMBER_12, OUTPUT);
  pinMode(GPIO_PIN_NUMBER_13, OUTPUT);
  pinMode(GPIO_PIN_NUMBER_27, OUTPUT);

  digitalWrite(GPIO_PIN_NUMBER_12, LOW);
  digitalWrite(GPIO_PIN_NUMBER_13, LOW);
  digitalWrite(GPIO_PIN_NUMBER_27, LOW);


  Serial.print("Connecting to ");
  Serial.println(WIFI_NAME);
  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print("Trying to connect to Wifi Network");
  }
  Serial.println("");
  Serial.println("Successfully connected to WiFi network");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();
  if (client) {
    Serial.println("New Client is requesting web page");
    String current_data_line = "";
    while (client.connected()) {
      if (client.available()) {
        char new_byte = client.read();
        Serial.write(new_byte);
        header += new_byte;
        if (new_byte == '\n') {

          if (current_data_line.length() == 0)
          {

            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            if (header.indexOf("G-LED=ON") != -1)
            {
              Serial.println("GPIO13 LED is ON");
              LED_ONE_STATE = "on";
              digitalWrite(GPIO_PIN_NUMBER_13, HIGH);
            }
            if (header.indexOf("G-LED=OFF") != -1)
            {
              Serial.println("GPIO13 LED is OFF");
              LED_ONE_STATE = "off";
              digitalWrite(GPIO_PIN_NUMBER_13, LOW);
            }
            if (header.indexOf("Y-LED=ON") != -1)
            {
              Serial.println("GPIO12 LED is ON");
              LED_TWO_STATE = "on";
              digitalWrite(GPIO_PIN_NUMBER_12, HIGH);
            }
            if (header.indexOf("Y-LED=OFF") != -1)
            {
              Serial.println("GPIO12 LED is OFF");
              LED_TWO_STATE = "off";
              digitalWrite(GPIO_PIN_NUMBER_12, LOW);
            }
            if (header.indexOf("R-LED=ON") != -1)
            {
              Serial.println("GPIO27 LED is ON");
              LED_THREE_STATE = "on";
              digitalWrite(GPIO_PIN_NUMBER_27, HIGH);
            }
            if (header.indexOf("R-LED=OFF") != -1) {
              Serial.println("GPIO27 LED is OFF");
              LED_THREE_STATE = "off";
              digitalWrite(GPIO_PIN_NUMBER_27, LOW);
            }

            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: 2px solid #4CAF50;; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            // Web Page Heading
            client.println("</style></head>");
            client.println("<body><center><h1>ESP32 Web Server LED Control</h1></center>");
            client.println("<form><center>");
            client.println("<p>GREEN LED is " + LED_ONE_STATE + "</p>");
            // If the PIN_NUMBER_xx State is off, it displays the ON button
            client.println("<center> <button class=\"button\" name=\"G-LED\" value=\"ON\" type=\"submit\">G-LED ON</button>") ;
            client.println("<button class=\"button\" name=\"G-LED\" value=\"OFF\" type=\"submit\">G-LED OFF</button><br><br>");
            client.println("<p>YELLOW LED is " + LED_TWO_STATE + "</p>");
            client.println("<button class=\"button\" name=\"Y-LED\" value=\"ON\" type=\"submit\">Y-LED ON</button>");
            client.println("<button class=\"button\" name=\"Y-LED\" value=\"OFF\" type=\"submit\">Y-LED OFF</button> <br><br>");
            client.println("<p>RED LED is " + LED_THREE_STATE + "</p>");
            client.println ("<button class=\"button\" name=\"R-LED\" value=\"ON\" type=\"submit\">R-LED ON</button>");
            client.println ("<button class=\"button\" name=\"R-LED\" value=\"OFF\" type=\"submit\">R-LED OFF</button></center>");
            client.println("</center></form></body></html>");
            client.println();
            break;
          }
          else
          {
            current_data_line = "";
          }
        }
        else if (new_byte != '\r')
        {
          current_data_line += new_byte;
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}


3.4 ก่อนการอัพโหลดต้องแก้ไขโค้ด ตรงตัวอักษรสีแดงให้ถูกต้องตาม ตามเครือข่าย WiFi ที่เลือกใช้งาน โดย


const char* WIFI_NAME = "YourNetworkName";  // เครือข่าย Wi-Fi ที่ต้องการเชื่อมต่อ
const char* WIFI_PASSWORD = "YourPassword";  // รหัสผ่านเครือข่าย


ตรวจความถูกต้องแบบละเอียด เช่น...ตัวพิมพ์เล็ก , ตัวพิมพ์ใหญ่ อักขระต่างๆ ให้ถูกต้อง




3.5 ไปที่ Tools -> Board เลือก ESP32 Dev Module




3.6 ไปที่ Tools -> Port แล้วเลือกพอร์ตที่ปรากฏ (กรณีใช้เครื่องคอมพิวเตอร์ที่มี COM Port ให้เลือกตัวอื่นที่ไม่ใช่ COM1)

ในตัวอย่างเลือกเป็น "COM18"





3.7 กดปุ่ม   เพื่ออัพโหลด


ตั้งชื่อไฟล์ -> Save โปรแกรม จะทำการ อัพโหลด





3.8 หากสามารถอัพโหลดโปรแกรมลงบอร์ดได้สำเร็จ จะแสดงคำว่า Done uploading. ที่แถบด้านล่าง



4. ตรวจสอบ IP ของ ESP32 


4.1 เปิดหน้าต่าง Serial Monitor  โดยไปที่ Tools > Serial Monitor





4.2 มุมขวาล่าง ของ Serial Monitor เลือก 115200 baud  คือ ตั้งค่าความเร็วในการรับ-ส่งข้อมูล  คือ 115200






4.3 กดที่ปุ่ม EN 1 ครั้ง เพื่อเริ่มการทำงาน ของ ESP32




4.4 รอจนกระทั่งที่ Serial Monitor แสดง IP ของ ESP32 ในตัวอย่างนี้คือ 192.168.1.39




(ก่อนทดสอบการทำงงานควรตรวจสอบ IP ทุกครั้ง เพราะแต่ละครั้งในการเชื่อมต่ออาจได้ IP ไม่เหมือนเดิม)



5. ทดสอบการทํางาน



5.1 ใช้ คอมพิวเตอร์ หรือ สมาร์ทโฟน ที่เชื่อมต่อเครือข่าย WiFi เดียวกันกับ ESP32 แล้วเปิดเว็บบราวเซอร์ ที่ URL ป้อนไอพี  ที่ได้มาจากข้อ 4.4  ในตัวอย่างนี้คือ 192.168.1.39








6. วีดีโอ ผลลัพล์การทำงาน







...

credit : https://microcontrollerslab.com/esp32-web-server-arduino-led/

ไม่มีความคิดเห็น:

แสดงความคิดเห็น