ESP8266 เป็นเว็บเซิฟเวอร์ สร้างลิงค์กดปุ่ม 4 ปุ่ม stylesheet

 ESP8266 เป็นเว็บเซิฟเวอร์ สร้างลิงค์กดปุ่ม 4 ปุ่ม stylesheet

อุปกรณ์ 

1. บอร์ด esp8266

2. เครื่องคอมพิวเตอร์ 

3. สายเชื่อมต่อ usb หรือสำหรับอัพโหลดโปรแกรมและจ่ายพลังงาน

4. Relay 4 channel

ขั้นตอนที่ 1:เชื่อมต่อกับ Relay ให้ครบ 4 ขา

ESP8266   -> Relay 4 channel

3V        -> VCC

D1(GPIO5) -> In1

D2(GPIO4) -> In2

D5(GPIO14)-> In3

D6(GPIO12)-> In4

GND     -> GND

จั้มสายและเชื่อมบอร์ดกับพีซี ให้ใช้งานได้

ขั้นตอนที่ 1 ประกาศส่วนหัว

// Load Wi-Fi library

#include <ESP8266WiFi.h>

// Replace with your network credentials

const char* ssid     = "Nui 2.4G";

const char* password = "0895515998";

// Set web server port number to 80

WiFiServer server(80);

// Variable to store the HTTP request

String header;

// บรรทัดต่อไปนี้สร้างตัวแปรเพื่อเก็บส่วนหัวของคำขอ HTTP ไว้ที่ header

// Auxiliar variables to store the current output state

String r1State = "off";

String r2State = "off";

String r3State = "off";

String r4State = "off";

// Assign output variables to GPIO pins

const int r1 = 5;  // In1

const int r2 = 4;  // In2

const int r3 = 14; // In3

const int r4 = 12; // In4

// Current time

unsigned long currentTime = millis();

// Previous time

unsigned long previousTime = 0; 

// Define timeout time in milliseconds (example: 2000ms = 2s)

const long timeoutTime = 2000;

// ตั้งเวลาสำหรับความพยายามในการเชื่อมต่อ ไม่ให้เกิน 2 วินาที

WiFiClient client = server.available(); // รอรับลูกค้าที่เข้ามา

เมื่อได้รับคำขอจากลูกค้า เราจะบันทึกข้อมูลที่เข้ามา ลูป while ที่ตามมาจะทำงานตราบเท่าที่ลูกค้ายังคงเชื่อมต่ออยู่ 

อธิบาย:

WiFiClient client = server.available();: 

บรรทัดนี้สร้างวัตถุ WiFiClient ชื่อ client เพื่อจัดการการเชื่อมต่อกับลูกค้าที่เข้ามาเชื่อมต่อกับเซิร์ฟเวอร์

server.available(); ฟังก์ชันนี้ตรวจสอบว่า มีลูกค้าใหม่เชื่อมต่อกับเซิร์ฟเวอร์หรือไม่ 

ถ้ามี จะคืนค่า WiFiClient ของลูกค้านั้น

while (client.connected()) { ... }: ลูป while นี้จะทำงานต่อเนื่อง

ตราบใดที่ลูกค้ายังคงเชื่อมต่ออยู่กับเซิร์ฟเวอร์

// Listen for incoming clients: คำอธิบายนี้ระบุว่าโค้ดกำลังรอรับลูกค้าที่เข้ามาเชื่อมต่อ

if (client) { // If a new client connects,

 Serial.println("New Client."); // print a message out in the serial port

 String currentLine = ""; // make a String to hold incoming data from the client

 while (client.connected()) { // loop while the client's connected

 if (client.available()) { // if there's bytes to read from the client,

  char c = client.read(); // read a byte, then

  Serial.write(c); // print it out the serial monitor

  header += c;

  if (c == '\n') { // if the byte is a newline character

   // if the current line is blank, you got two newline characters in a row.

   // that's the end of the client HTTP request, so send a response:

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

    // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)

    // and a content-type so the client knows what's coming, then a blank line:

    client.println("HTTP/1.1 200 OK");

    client.println("Content-type:text/html");

    client.println("Connection: close");

    client.println();

// turns the GPIOs on and off

if (header.indexOf("GET /5/on") >= 0) {

  Serial.println("GPIO 5 on");

  output5State = "on";

  digitalWrite(output5, HIGH);

} else if (header.indexOf("GET /5/off") >= 0) {

  Serial.println("GPIO 5 off");

  output5State = "off";

  digitalWrite(output5, LOW);

} else if (header.indexOf("GET /4/on") >= 0) {

  Serial.println("GPIO 4 on");

  output4State = "on";

  digitalWrite(output4, HIGH);

} else if (header.indexOf("GET /4/off") >= 0) {

  Serial.println("GPIO 4 off");

  output4State = "off";

  digitalWrite(output4, LOW);

}

ส่วนถัดไปของ if และ else statements ตรวจสอบว่ากดปุ่มใดในหน้าเว็บ

ของคุณและควบคุมผลลัพธ์ตามนั้น ดังที่เราเคยเห็นมาก่อน เราทำการร้องขอบน URL ต่างกันขึ้นอยู่กับปุ่มที่เรากด

อธิบาย:

if และ else statements: โครงสร้างการควบคุมเงื่อนไขที่ใช้เพื่อตรวจสอบเงื่อนไข 

และดำเนินการที่แตกต่างกันตามผลลัพธ์ของเงื่อนไข

ตรวจสอบว่ากดปุ่มใดในหน้าเว็บของคุณ: ส่วนนี้ของโค้ดจะตรวจสอบว่าผู้ใช้กดปุ่มใดบนหน้าเว็บ

ควบคุมผลลัพธ์ตามนั้น: ขึ้นอยู่กับปุ่มที่กด โค้ดจะดำเนินการที่เหมาะสม เช่น ส่งคำขอไปยัง URL ที่แตกต่างกัน

เราทำการร้องขอบน URL ต่างกันขึ้นอยู่กับปุ่มที่เรากด: เมื่อผู้ใช้กดปุ่มต่างๆ โค้ดจะส่งคำขอไปยัง URL ที่กำหนดไว้สำหรับปุ่มนั้นๆ

ทดสอบการทำงานผ่าน Serial

เปิดการทดสอบการทำงาน 2 หน้าจอ ดูสถานะของรีเลย์

/// complete code

/////////////////////////////////////////////////

Relate:

https://randomnerdtutorials.com/esp8266-web-server/