โครงการ ESP32 รับข้อความจากเว็บและแสดงบนจอ LCD

/ ESP32, ESP32 App & Web Control, esp32 wifi network, เทคนิคโค้ด

โครงการ ESP32 รับข้อความจากเว็บและแสดงบนจอ LCD 16x2

บทนำ

ในยุคที่เทคโนโลยีกำลังเติบโตอย่างรวดเร็ว การเรียนรู้การใช้งานไมโครคอนโทรลเลอร์อย่าง ESP32 เป็นสิ่งที่ไม่ควรมองข้าม โครงการนี้จะพาคุณไปรู้จักกับการสร้างโครงการที่น่าสนใจ โดยใช้ ESP32 รับข้อความจากเว็บเบราว์เซอร์และแสดงผลบนจอ LCD 16x2 ซึ่งเป็นการรวมกันระหว่างเทคโนโลยีเว็บเซิร์ฟเวอร์และการควบคุมจอ LCD ผ่านไลบรารี LiquidCrystal_I2C โครงการนี้เหมาะสำหรับมือใหม่ที่ต้องการเรียนรู้พื้นฐานการพัฒนาโปรเจกต์ IoT และการเขียนโปรแกรมด้วย ESP32

วัตถุประสงค์

โครงการนี้มีวัตถุประสงค์หลักดังนี้:

เชื่อมต่อ ESP32 กับ Wi-Fi: สร้างการเชื่อมต่อกับเครือข่าย Wi-Fi เพื่อให้ ESP32 สามารถรับข้อมูลจากเว็บเบราว์เซอร์ได้
สร้างเว็บเซิร์ฟเวอร์บน ESP32: ใช้ไลบรารี ESPAsyncWebServerเพื่อสร้างเว็บเซิร์ฟเวอร์ที่ให้ผู้ใช้สามารถส่งข้อความผ่านฟอร์ม HTML
แสดงข้อความบนจอ LCD 16x2: ข้อความที่ได้รับจากเว็บเบราว์เซอร์จะถูกแสดงบนจอ LCD 16x2 โดยใช้ไลบรารี LiquidCrystal_I2C
ฝึกการใช้ไลบรารี ESPAsyncWebServer และ LiquidCrystal_I2C: เรียนรู้การสร้างเซิร์ฟเวอร์และการควบคุมจอ LCD ผ่านไลบรารีที่ช่วยในการพัฒนาโปรเจกต์ IoT

อุปกรณ์ที่ต้องใช้ในโครงงาน

สำหรับการสร้างโครงการนี้ คุณจะต้องเตรียมอุปกรณ์และเครื่องมือดังนี้:

ESP32 Development Board - เป็นไมโครคอนโทรลเลอร์ที่มีความสามารถในการเชื่อมต่อ Wi-Fi และ Bluetooth ใช้สำหรับการรับข้อมูลจากเว็บและควบคุมการแสดงผลบนจอ LCD
จอ LCD 16x2 (I2C) - จอ LCD ที่ใช้ I2C interface สำหรับแสดงข้อความที่รับมาจากเว็บเบราว์เซอร์
สายเชื่อมต่อ - สายเชื่อมต่อที่ใช้ในการเชื่อมต่อ ESP32 กับจอ LCD ผ่าน I2C
คอมพิวเตอร์ - คอมพิวเตอร์ที่ใช้ในการเขียนและอัปโหลดโค้ดไปยัง ESP32

การต่ออุปกรณ์จอLCD กับ ESP32

หลักการทำงาน

การทำงานของโครงการนี้สามารถอธิบายได้ตามลำดับขั้นตอนดังนี้:

การเชื่อมต่อ Wi-Fi: ESP32 จะเชื่อมต่อกับเครือข่าย Wi-Fi ที่กำหนดไว้ในโค้ดและแสดง IP address บน Serial Monitor เพื่อให้เราทราบว่า ESP32 เชื่อมต่อกับเครือข่ายได้สำเร็จแล้ว
การสร้างเว็บเซิร์ฟเวอร์: ใช้ไลบรารี ESPAsyncWebServer ในการสร้างเว็บเซิร์ฟเวอร์บนพอร์ต 80 ซึ่งจะส่งหน้า HTML ไปยังเว็บเบราว์เซอร์ของผู้ใช้ เพื่อให้สามารถกรอกข้อความและส่งไปยัง ESP32
การรับข้อความจากเว็บเบราว์เซอร์: เมื่อผู้ใช้ส่งข้อความผ่านฟอร์ม HTML ข้อความจะถูกส่งเป็น HTTP GET request ไปยัง ESP32 ซึ่งจะดึงข้อความจาก request นี้
การแสดงผลบนจอ LCD 16x2: ข้อความที่ได้รับจากเว็บเบราว์เซอร์จะถูกแสดงบนจอ LCD 16x2 โดยใช้ฟังก์ชัน scrollText() ที่ทำให้ข้อความเลื่อนจากขวาไปซ้าย เพื่อให้ข้อความทั้งหมดแสดงบนจอ LCD อย่างครบถ้วน

โค้ดโปรแกรม

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <LiquidCrystal_I2C.h>

// ตั้งค่าขนาดของ columns and rows 
int lcdColumns = 16;
int lcdRows = 2;

String msg;

// กำหนดค่า LCD (I2C address, columns, rows)
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);

// ตั้งค่า Wi-Fi
const char* ssid = "your_SSID";      // เปลี่ยนเป็นชื่อ Wi-Fi ของคุณ
const char* password = "your_PASSWORD";  // เปลี่ยนเป็นรหัสผ่าน Wi-Fi ของคุณ


AsyncWebServer server(80);  // เริ่มต้น WebServer บนพอร์ต 80

// หน้า HTML ที่จะส่งไปยัง Browser
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
  <title>ESP32 LCD Message</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; }
    h1 { color: #333; }
    input[type="text"] { padding: 10px; font-size: 16px; }
    input[type="submit"] { padding: 10px; font-size: 16px; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Send Message to ESP32</h1>
  <form action="/get" method="get">
    <input type="text" name="text" placeholder="Enter your message">
    <br>
    <input type="submit" value="Send">
  </form>
</body>
</html>
)rawliteral";

void setup() {
  // initialize LCD
  lcd.init();
  // turn on LCD backlight                      
  lcd.backlight();

  // เชื่อมต่อ Wi-Fi
  Serial.begin(115200);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }

  Serial.println("Connected to WiFi");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  // แสดงข้อความต้อนรับบนจอ LCD
  lcd.setCursor(0, 0);
  lcd.print("Connected!");
  lcd.setCursor(0, 1);
  lcd.print(WiFi.localIP());
  delay(5000);
  lcd.clear();

  // เส้นทางหลักเพื่อแสดง HTML หน้าแรก
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // เส้นทางเพื่อรับข้อความจากฟอร์มและแสดงผลบนจอ LCD
  server.on("/get", HTTP_GET, [](AsyncWebServerRequest *request){
    
    if (request->hasParam("text")) {
      msg = request->getParam("text")->value();
      msg.replace("%20", " ");  // แทนที่ %20 ด้วยช่องว่าง
      
      lcd.clear();
      
      // ส่งข้อความตอบกลับไปที่ Browser
      request->send(200, "text/html", "<h1>Message Received</h1><a href=\"/\">Go Back</a>");
    } else {
      request->send(200, "text/html", "<h1>No message sent</h1><a href=\"/\">Go Back</a>");
    }
  });

  // เริ่มต้น Server
  server.begin();
}

void scrollText(int row, String message, int Delaytime) {
  
  static unsigned long  SpeedStr = 0;
  static int pos = 0; 
  static int str = message.length();
  message.trim();
  message = " " + message + " " + message + " " + message + " " + message + " "; 

  if(millis() > SpeedStr){
    lcd.setCursor(0, row);
    lcd.print(message.substring(pos, pos + lcdColumns));
    (pos < str) ? pos++ : pos=0;
    SpeedStr = millis() + Delaytime; 
  }
}

void loop() {
  // แสดงข้อความบนจอ LCD
  if (msg.length() > 0) {
      lcd.setCursor(0, 0);
      lcd.print("Text Input");
      scrollText(1, msg, 450);
  }
}

อธิบายโค้ดอย่างละเอียด

1. การตั้งค่า LCD

LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows); - การกำหนดพารามิเตอร์สำหรับการใช้งานจอ LCD ผ่าน I2C โดย 0x27 คือ I2C address ของจอ LCD

2. การเชื่อมต่อ Wi-Fi

WiFi.begin(ssid, password); - เริ่มต้นการเชื่อมต่อกับเครือข่าย Wi-Fi โดยใช้ SSID และรหัสผ่านที่กำหนด

3. การสร้างเว็บเซิร์ฟเวอร์

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ ... }); - กำหนดเส้นทางหลักเพื่อส่งหน้า HTML ไปยังเว็บเบราว์เซอร์

4. การรับข้อความและแสดงบน LCD

if (request->hasParam("text")) { ... } - ตรวจสอบว่ามีการส่งข้อความผ่านฟอร์มหรือไม่ และแสดงข้อความบนจอ LCD

สรุป

โครงการ "ESP32 รับข้อความจากเว็บและแสดงบนจอ LCD 16x2" นี้เป็นตัวอย่างที่ดีในการเรียนรู้การใช้ ESP32 สำหรับการสร้างโปรเจกต์ IoT โดยการรับข้อความจากเว็บเบราว์เซอร์และแสดงผลบนจอ LCD โครงการนี้ไม่เพียงแต่ช่วยเพิ่มความรู้ในด้านการพัฒนาโปรเจกต์ IoT แต่ยังเป็นการฝึกทักษะการเขียนโปรแกรมและการใช้งานไลบรารีต่าง ๆ อย่าง ESPAsyncWebServer และ LiquidCrystal_I2C การเข้าใจและประยุกต์ใช้เทคนิคเหล่านี้จะช่วยให้คุณสามารถสร้างโครงการที่ซับซ้อนมากขึ้นในอนาคต

Download Code โครงการ ESP32 รับข้อความจากเว็บและแสดงบนจอ LCD 16×2

ดาวน์โหลดไฟล์ทั้งหมดได้ที่นี้

เรียนรู้เพิ่มเติมเกี่ยวกับ ESP32:

ESPAsyncWebServer – สร้างหน้าเพจ Wi-Fi Manager เรียนรู้วิธีการสร้างหน้าเพจ Wi-Fi Manager ด้วยไลบรารี ESPAsyncWebServer เพื่อให้สามารถเชื่อมต่อและตั้งค่าการเชื่อมต่อ Wi-Fi ของ ESP32 ได้อย่างง่ายดาย
ESPAsyncWebServer – สร้างเว็บเพจแผนภูมิแสดงค่าเซนเซอร์ ค้นพบวิธีการสร้างเว็บเพจที่แสดงแผนภูมิค่าที่อ่านจากเซนเซอร์ โดยใช้ ESPAsyncWebServer สำหรับการตรวจสอบและวิเคราะห์ข้อมูลในเวลาจริง
ESP32 Web Server – ควบคุมดิจิตอลเอาพุต เรียนรู้การสร้างเว็บเซิร์ฟเวอร์บน ESP32 เพื่อควบคุมดิจิตอลเอาพุต เช่น การเปิดและปิด LED ผ่านเว็บเบราว์เซอร์
การใช้งาน LiquidCrystal_I2C กับ ESP32 คำแนะนำเกี่ยวกับการใช้งานไลบรารี LiquidCrystal_I2C บน ESP32 เพื่อควบคุมจอ LCD 16x2 รวมถึงการตั้งค่าและการเขียนข้อมูลลงบนจอ LCD
ESP32 WiFi การเริ่มต้นใช้งาน ESP32 WiFi ค่อนข้างง่ายและสะดวกโดยใช้ Arduino IDE ซึ่งเป็นเครื่องมือที่ได้รับความนิยมในการพัฒนาโปรแกรมสำหรับไมโครคอนโทรลเลอร์ต่างๆ