Easy

โปรเจกต์ ESP32 Web Server พร้อม Slider

จะแนะนำคุณในการสร้าง Web Server เพื่อควบคุม PWM ใน ESP32

Project Supporter Team

โพสต์โดย

Internet of Things, BT & Wireless

15,309 การดู

4 ถูกใจ

#Internet Of Things #Smart appliances #Home Automation #Communication

รายการอุปกรณ์และเครื่องมือ

1x ESP32

🛒 สั่งซื้อ

แอปพลิเคชันและแพลตฟอร์ม

1x Arduino IDE

เว็บ Official

รายละเอียดและวิธีทำ

ในบล็อกโพสต์นี้ ผมจะแสดงวิธีการสร้าง web server ด้วยบอร์ด ESP32 ที่ช่วยให้คุณสามารถควบคุมความสว่างของ LED ได้โดยใช้ slider บนหน้าเว็บ นี่เป็นโปรเจกต์ที่สนุกและทำได้ง่าย ซึ่งจะสาธิตวิธีการใช้ฟีเจอร์ PWM (Pulse Width Modulation) ของ ESP32 เพื่อปรับความเข้มของแสง LED นอกจากนี้คุณยังจะได้เรียนรู้วิธีการใช้ library ESPAsyncWebServer และ AsyncTCP เพื่อจัดการ asynchronous web requests และ responses ซึ่งจะช่วยเพิ่มประสิทธิภาพและการตอบสนองของ web server ของคุณให้ดียิ่งขึ้น

สิ่งที่คุณต้องใช้:

สำหรับการทำตามบทช่วยสอนนี้ คุณจะต้องมีส่วนประกอบดังต่อไปนี้:

บอร์ด ESP32 (ผมใช้ ESP32 DevKitC)

ติดตั้ง Arduino IDE บนคอมพิวเตอร์ของคุณ

ติดตั้ง library ESPAsyncWebServer และ AsyncTCP บน Arduino IDE ของคุณ

คุณสามารถค้นหาลิงก์สำหรับดาวน์โหลด library และ Code ที่สมบูรณ์สำหรับโปรเจกต์นี้ได้ที่ส่วนท้ายของโพสต์นี้

สั่งผลิต PCBs สำหรับโปรเจกต์ของคุณ

คุณต้องลองเข้าไปดูที่ PCBWAY สำหรับการสั่งซื้อ PCB ออนไลน์ในราคาประหยัด!

คุณสามารถสั่งผลิต PCB คุณภาพดี 10 ชิ้นและส่งตรงถึงบ้านคุณได้ในราคาถูก นอกจากนี้คุณจะได้รับส่วนลดค่าจัดส่งสำหรับการสั่งซื้อครั้งแรกด้วย เพียงอัปโหลดไฟล์ Gerber ของคุณไปยัง PCBWAY เพื่อรับการผลิตที่มีคุณภาพดีและระยะเวลาดำเนินการที่รวดเร็ว ตอนนี้ PCBWay สามารถให้บริการโซลูชันผลิตภัณฑ์ที่สมบูรณ์ ตั้งแต่การออกแบบไปจนถึงการผลิต enclosure ลองเข้าไปใช้งานฟังก์ชัน Gerber viewer ออนไลน์ของพวกเขาดูสิ และด้วยคะแนนสะสม คุณสามารถรับของสมนาคุณฟรีจาก gift shop ได้อีกด้วย นอกจากนี้ ลองอ่านบล็อกที่มีประโยชน์เกี่ยวกับ PCBWay Plugin สำหรับ KiCad ได้จากที่นี่ โดยการใช้ plugin นี้ คุณสามารถสั่งซื้อ PCB ได้โดยตรงในคลิกเดียวหลังจากออกแบบเสร็จสิ้นใน KiCad

การทำงานของโปรเจกต์:

แนวคิดพื้นฐานของโปรเจกต์นี้คือการใช้ slider บนหน้าเว็บเพื่อส่ง HTTP request ไปยัง ESP32 พร้อมค่าระหว่าง 0 ถึง 255 ซึ่งแสดงถึงความสว่างของ LED ที่ต้องการ จากนั้น ESP32 จะใช้ค่านั้นเพื่อปรับ duty cycle ของสัญญาณ PWM ซึ่งเป็นสัญญาณ Digital ที่สลับระหว่างสถานะ High และ Low ณ ความถี่หนึ่ง การเปลี่ยนอัตราส่วนของสถานะ High และ Low จะทำให้เราสามารถเปลี่ยนแรงดันไฟฟ้าเฉลี่ยที่จ่ายให้กับ LED และเปลี่ยนความสว่างของมันได้

LED ในตัวบอร์ดเชื่อมต่อกับ GPIO2 ซึ่งเป็นหนึ่งในพินที่รองรับ PWM (Pulse Width Modulation) โดย PWM เป็นเทคนิคที่ช่วยให้เราเปลี่ยนความสว่างของ LED ได้โดยการเปลี่ยน duty cycle ของสัญญาณ Digital บอร์ด ESP32 มี PWM channels ทั้งหมด 16 ช่องที่สามารถกำหนดความถี่และ resolution ที่แตกต่างกันได้ การใช้ฟังก์ชัน ledcSetup() และ ledcWrite() จะช่วยให้เราตั้งค่า PWM channel สำหรับ LED ในตัวบอร์ดและเขียนค่าระหว่าง 0 ถึง 255 เพื่อปรับความสว่างได้ นอกจากนี้เรายังสามารถใช้ตัวอย่าง Blink จาก Arduino IDE เพื่อทำให้ LED ในตัวบอร์ดกะพริบตามช่วงเวลาที่กำหนด LED ในตัวบอร์ดนั้นมีประโยชน์อย่างมากสำหรับการทดสอบและการ Debug รวมถึงการสร้างโปรเจกต์ง่ายๆ ที่เกี่ยวข้องกับ Lighting effects

ในการสร้าง web server เราจะใช้ library ESPAsyncWebServer ซึ่งเป็น asynchronous web server library สำหรับ ESP32 และ ESP8266 library นี้ช่วยให้เราสามารถจัดการ web requests และ responses ได้หลายรายการพร้อมกันโดยไม่ไปบล็อก main loop ของ ESP32 ซึ่งช่วยเพิ่มประสิทธิภาพและการตอบสนองของ web server ของเรา นอกจากนี้เราจะใช้ library AsyncTCP ซึ่งเป็นส่วนเสริมที่จำเป็นสำหรับ ESPAsyncWebServer เพื่อทำหน้าที่สื่อสาร TCP ในระดับต่ำระหว่าง ESP32 และ web browser

ในการสร้างหน้าเว็บ เราจะใช้ HTML, CSS และ JavaScript โดย HTML เป็นภาษา markup ที่กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ

<!DOCTYPE HTML><html>

<head>

	 <meta name="viewport" content="width=device-width, initial-scale=1">

	 <title>ESP32 PWM Controller</title>

	 <style>

	   html {font-family: Arial; display: inline-block; text-align: center;}

	   h2 {font-size: 2.3rem;}

	   p {font-size: 1.9rem;}

	   body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

	   .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;

	     outline: none; -webkit-transition: .2s; transition: opacity .2s;}

	   .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}

	   .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; }

	 </style>

</head>

<body>

	 <h2>ESP32 PWM Controller</h2>

	 <p><span id="textSliderValue">%SLIDERVALUE%</span></p>

	 <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>

<script>

function updateSliderPWM(element) {

	 var sliderValue = document.getElementById("pwmSlider").value;

	 document.getElementById("textSliderValue").innerHTML = sliderValue;

	 console.log(sliderValue);

	 var xhr = new XMLHttpRequest();

	 xhr.open("GET", "/slider?value="+sliderValue, true);

	 xhr.send();

</script>

</body>

</html>

CSS คือภาษา style sheet ที่กำหนดรูปลักษณ์และเลย์เอาต์ของหน้าเว็บ ส่วน JavaScript คือภาษา scripting ที่เพิ่มการโต้ตอบและฟังก์ชันการทำงานให้กับหน้าเว็บ ในโปรเจกต์นี้ เราจะใช้ JavaScript เพื่อดึงค่าจาก slider และส่งไปยัง ESP32 ผ่าน HTTP GET request

#include <WiFi.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

// ใส่ข้อมูลเครือข่าย WiFi ของคุณ

const char* ssid = "ELDRADO";

const char* password = "amazon123";

const int output = 2;

String sliderValue = "0";

// ตั้งค่าคุณสมบัติ PWM

const int freq = 5000;

const int ledChannel = 0;

const int resolution = 8;

const char* PARAM_INPUT = "value";

// สร้าง object AsyncWebServer ที่ port 80

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

	 <meta name="viewport" content="width=device-width, initial-scale=1">

	 <title>ESP32 PWM Controller</title>

	 <style>

	   html {font-family: Arial; display: inline-block; text-align: center;}

	   h2 {font-size: 2.3rem;}

	   p {font-size: 1.9rem;}

	   body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

	   .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;

	     outline: none; -webkit-transition: .2s; transition: opacity .2s;}

	   .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}

	   .slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; }

	 </style>

</head>

<body>

	 <h2>ESP32 PWM Controller</h2>

	 <p><span id="textSliderValue">%SLIDERVALUE%</span></p>

	 <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>

<script>

function updateSliderPWM(element) {

	 var sliderValue = document.getElementById("pwmSlider").value;

	 document.getElementById("textSliderValue").innerHTML = sliderValue;

	 console.log(sliderValue);

	 var xhr = new XMLHttpRequest();

	 xhr.open("GET", "/slider?value="+sliderValue, true);

	 xhr.send();

</script>

</body>

</html>

)rawliteral";

// แทนที่ placeholder ด้วยค่าของปุ่มในหน้าเว็บของคุณ

String processor(const String& var){

	 //Serial.println(var);

	 if (var == "SLIDERVALUE"){

	   return sliderValue;

	 return String();

void setup(){

// Serial port สำหรับการ Debug

	 Serial.begin(115200);

// กำหนดค่าฟังก์ชัน LED PWM

	 ledcSetup(ledChannel, freq, resolution);

// เชื่อมต่อ channel เข้ากับ GPIO ที่ต้องการควบคุม

	 ledcAttachPin(output, ledChannel);

	 ledcWrite(ledChannel, sliderValue.toInt());

// เชื่อมต่อกับ Wi-Fi

	 WiFi.begin(ssid, password);

	 while (WiFi.status() != WL_CONNECTED) {

	   delay(1000);

	   Serial.println("Connecting to WiFi..");

// แสดง ESP Local IP Address

	 Serial.println(WiFi.localIP());

// เส้นทางสำหรับ root / web page

	 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

	   request->send_P(200, "text/html", index_html, processor);

});

	 // ส่ง GET request ไปยัง <ESP_IP>/slider?value=<inputMessage>

	 server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {

	   String inputMessage;

	   // รับค่า input1 ที่ <ESP_IP>/slider?value=<inputMessage>

	   if (request->hasParam(PARAM_INPUT)) {

	     inputMessage = request->getParam(PARAM_INPUT)->value();

	     sliderValue = inputMessage;

	     ledcWrite(ledChannel, sliderValue.toInt());

	   else {

	     inputMessage = "No message sent";

	   Serial.println(inputMessage);

	   request->send(200, "text/plain", "OK");

});

// เริ่มต้น server

	 server.begin();

void loop() {

บทสรุป:

ผมหวังว่าคุณจะสนุกกับบทนำสู่โปรเจกต์ web server ของ ESP32 ร่วมกับ Slider นี้ ในส่วนถัดไป ผมจะแสดงให้คุณเห็นถึงวิธีการต่อวงจรและการเขียนโปรแกรม ESP32 โปรดติดตามชม!

Code

🔒 ปลดล็อก Code

สนับสนุนเพื่อรับ Source Code หรือแอปพลิเคชันสำหรับโปรเจกต์นี้

รหัสอ้างอิงโปรเจกต์: esp32-web-server-with-slider-54c63f

1120 บาท

คลิกอัปโหลด สลิป

ตรวจสอบอัตโนมัติ 24 ชม.

ประเมิน Project

อยากได้งานคล้ายโปรเจคนี้? กดไปหน้าประเมินราคา

เอาฟอร์มยาวออกจากท้ายหน้า Project แล้ว เหลือเป็นปุ่มให้กดไปกรอกหน้าเดียว ตัวใหญ่ เว้นบรรทัดเยอะ อ่านง่ายกว่า

ไปหน้าประเมิน Project → หรือทัก LINE

รีวิวจากคนใช้งานจริง

รีวิวจากลูกค้าและคนที่เคยใช้งาน

ถ้าเคยสั่งงาน เคยอ่านหน้านี้แล้วได้ประโยชน์ หรือมีข้อเสนอแนะ ฝากรีวิวไว้ได้เลย

กำลังโหลดรีวิว...