Hướng dẫn này chỉ ra cách xây dựng máy chủ web ESP8266 NodeMCU bằng thanh trượt để kiểm soát độ sáng LED. Bạn sẽ học cách thêm thanh trượt vào các dự án máy chủ web của mình, lấy giá trị của nó và lưu nó vào một biến mà ESP8266 có thể sử dụng. Chúng tôi sẽ sử dụng giá trị đó để kiểm soát chu kỳ hoạt động của tín hiệu PWM và thay đổi độ sáng của đèn LED. Thay vì đèn LED, bạn có thể điều khiển động cơ servo chẳng hạn.
ESP8266 NodeMCU Web Server với trượt: Điều khiển độ sáng LED (PWM) Hướng dẫn cách xây dựng máy chủ web ESP8266 NodeMCU trượt để kiểm soát độ sáng LED Bạn học cách thêm trượt vào dự án máy chủ web mình, lấy giá trị lưu vào biến mà ESP8266 sử dụng Chúng tơi sử dụng giá trị để kiểm sốt chu kỳ hoạt động tín hiệu PWM thay đổi độ sáng đèn LED Thay đèn LED, bạn điều khiển động servo chẳng hạn Ngồi ra, bạn sửa đổi mã hướng dẫn để thêm trượt vào dự án để đặt giá trị ngưỡng giá trị khác mà bạn cần sử dụng mã Tổng quan dự án 1/14 ESP8266 lưu trữ máy chủ web hiển thị trang web với trượt; Khi bạn di chuyển trượt, bạn thực yêu cầu HTTP ESP8266 với giá trị trượt mới; Yêu cầu HTTP có định dạng sau: GET/slider?value=SLIDERVALUE, SLIDERVALUE số từ đến 1023 Bạn sửa đổi trượt để bao gồm phạm vi khác; Từ yêu cầu HTTP, ESP8266 nhận giá trị trượt; ESP8266 điều chỉnh chu kỳ nhiệm vụ PWM phù hợp với giá trị trượt; Điều hữu ích để kiểm sốt độ sáng đèn LED (như làm ví dụ này), động servo, thiết lập giá trị ngưỡng ứng dụng khác Điều kiện tiên Trước tiến hành dự án này, đảm bảo bạn kiểm tra điều kiện tiên sau Arduino IDE Chúng tơi lập trình bo mạch ESP8266 NodeMCU Arduino IDE, trước tiếp tục với hướng dẫn này, đảm bảo bạn cài đặt bảng ESP8266 Arduino IDE Cài đặt bảng mạch ESP8266 NodeMCU Arduino IDE (Windows, Mac OS X Linux) Thư viện máy chủ web không đồng 2/14 Chúng ta xây dựng máy chủ web thư viện sau: ESPAsyncWebServer ESPAsyncTCP Các thư viện sẵn để cài đặt thơng qua Trình quản lý thư viện Arduino, bạn cần chép tệp thư viện vào thư mục Thư viện cài đặt Arduino Ngồi ra, Arduino IDE, bạn vào Sketch > Include Library > Add zip Library chọn thư viện bạn vừa tải xuống Mã Đoạn mã sau kiểm sốt độ sáng đèn LED tích hợp ESP8266 cách sử dụng trượt máy chủ web Nói cách khác, bạn thay đổi chu kỳ nhiệm vụ PWM trượt Điều hữu ích để kiểm sốt độ sáng LED điều khiển động servo chẳng hạn Sao chép mã vào Arduino IDE bạn Chèn thông tin đăng nhập mạng bạn mã hoạt động thẳng 3/14 /********* Rui Santos Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-webserver-slider-pwm/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software *********/ // Import required libraries #include #include #include // Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; const int output = 2; String sliderValue = "0"; const char* PARAM_INPUT = "value"; // Create AsyncWebServer object on port 80 AsyncWebServer server(80); const char index_html[] PROGMEM = R"rawliteral( ESP Web Server 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: #FFD65C; 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: #003249; cursor: pointer; } ESP Web Server%SLIDERVALUE%
function updateSliderPWM(element) { 4/14 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(); } )rawliteral"; // Replaces placeholder with button section in your web page String processor(const String& var){ //Serial.println(var); if (var == "SLIDERVALUE"){ return sliderValue; } return String(); } void setup(){ // Serial port for debugging purposes Serial.begin(115200); analogWrite(output, sliderValue.toInt()); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi "); } // Print ESP Local IP Address Serial.println(WiFi.localIP()); // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html, processor); }); // Send a GET request to /slider?value= server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) { String inputMessage; // GET input1 value on /slider?value= if (request->hasParam(PARAM_INPUT)) { inputMessage = request->getParam(PARAM_INPUT)->value(); sliderValue = inputMessage; analogWrite(output, sliderValue.toInt()); } else { inputMessage = "No message sent"; } Serial.println(inputMessage); request->send(200, "text/plain", "OK"); 5/14 }); // Start server server.begin(); } void loop() { } Xem mã thô Mã hoạt động Tiếp tục đọc để tìm hiểu cách mã hoạt động chuyển sang phần Nhập thư viện Đầu tiên, nhập thư viện cần thiết ESP8266WiFi, ESPAsyncWebServer ESPAsyncTCP cần thiết để xây dựng máy chủ web #include #include #include Đặt thông tin đăng nhập mạng bạn Chèn thông tin đăng nhập mạng bạn vào biến sau, để ESP8266 kết nối với mạng cục bạn const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; Định nghĩa biến Chúng tơi kiểm sốt độ sáng đèn LED tích hợp ESP8266 Đèn LED tích hợp tương ứng với GPIO Lưu GPIO mà muốn kiểm soát biến đầu const int output = 2; Biến sliderValue giữ giá trị trượt Khi bắt đầu, đặt thành khơng String sliderValue = "0"; Thông số đầu vào Biến PARAM_INPUT sử dụng để "tìm kiếm" giá trị trượt theo yêu cầu mà ESP8266 nhận trượt di chuyển (Hãy nhớ rằng: ESP8266 nhận yêu cầu GET/slider?value=SLIDERVALUE) const char* PARAM_INPUT = "value"; Nó tìm kiếm giá trị URL nhận giá trị gán cho 6/14 Xây dựng trang Web Bây tiến hành trang máy chủ web Trang web cho dự án đơn giản Nó chứa tiêu đề, đoạn văn đầu vào phạm vi kiểu Hãy xem cách trang web tạo Tất văn HTML với kiểu bao gồm lưu trữ biến index_html Bây qua văn HTML xem phần làm Thẻ sau làm cho trang web bạn đáp ứng trình duyệt Giữa thẻ tiêu đề máy chủ web Tiêu đề văn hiển thị tab trình duyệt web Phong cách Giữa thẻ , thêm số CSS để tạo kiểu cho trang web 7/14 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: #FFD65C; 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: #003249; cursor: pointer; } Về bản, thiết lập trang HTML để hiển thị văn với phơng chữ Arial khối khơng có lề chỉnh html {font-family: Arial; display: inline-block; text-align: center;} Các dịng sau đặt kích thước phơng chữ cho tiêu đề (h2) đoạn (p) h2 {font-size: 2.3rem;} p {font-size: 1.9rem;} Đặt thuộc tính nội dung HTML body {max-width: 400px; margin:0px auto; padding-bottom: 25px;} Các dòng sau tùy chỉnh trượt: slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C; 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: #003249; cursor: pointer; } Nội dung HTML Bên thẻ nơi thêm nội dung trang web Thẻ thêm tiêu đề vào trang web Trong trường hợp này, văn "Máy chủ web ESP", bạn thêm văn khác ESP Web Server Đoạn chứa giá trị trượt Thẻ HTML cụ thể có id textSliderValue gán cho nó, để tham chiếu sau%SLIDERVALUE%
8/14 %SLIDERVALUE% chỗ dành sẵn cho giá trị trượt Điều thay ESP8266 giá trị thực tế gửi đến trình duyệt Điều hữu ích để hiển thị giá trị bạn truy cập trình duyệt lần Tạo trượt Để tạo trượt HTML, bạn sử dụng thẻ Thẻ định trường nơi người dùng nhập liệu Có nhiều loại đầu vào Để xác định trượt, sử dụng thuộc tính "type" với giá trị "range" Trong trượt, bạn cần xác định phạm vi tối thiểu tối đa cách sử dụng thuộc tính "min" "max" (trong trường hợp 1023) Bạn cần xác định thuộc tính khác như: Thuộc tính STEP định khoảng thời gian số hợp lệ Trong trường hợp chúng tơi, đặt thành 1; lớp để tạo kiểu cho trượt (class = "thanh trượt"); ID để cập nhật vị trí hiển thị trang web; thuộc tính onchange để gọi hàm (updateSliderPWM(this)) để gửi yêu cầu HTTP đến ESP8266 trượt di chuyển Từ khóa đề cập đến giá trị trượt Thêm JavaScript vào tệp HTML Tiếp theo, bạn cần thêm số mã JavaScript vào tệp HTML cách sử dụng thẻ Bạn cần thêm hàm updateSliderPWM() đưa yêu cầu đến ESP8266 với giá trị trượt 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(); } Dòng lấy giá trị trượt id lưu vào biến JavaScript sliderValue Trước đây, gán id trượt cho pwmSlider Vì vậy, chúng tơi nhận sau: var sliderValue = document.getElementById("pwmSlider").value; 9/14 Sau đó, chúng tơi đặt nhãn trượt (có id textSliderValue) thành giá trị lưu biến sliderValue Cuối cùng, thực yêu cầu HTTP GET var xhr = new XMLHttpRequest(); xhr.open("GET", "/slider?value="+sliderValue, true); xhr.send(); Ví dụ: trượt 0, bạn thực yêu cầu HTTP GET URL sau: http://ESP-IP-ADDRESS/slider?value=0 Và giá trị trượt 200, bạn có yêu cầu URL theo dõi http://ESP-IP-ADDRESS/slider?value=200 Bằng cách này, ESP8266 nhận yêu cầu GET, truy xuất tham số giá trị URL kiểm sốt tín hiệu PWM tương ứng se phần Xử lý Bây giờ, cần tạo hàm processor(), hàm thay trình giữ chỗ văn HTML giá trị trượt bạn truy cập lần trình duyệt // Replaces placeholder with button section in your web page String processor(const String& var){ //Serial.println(var); if (var == "SLIDERVALUE"){ return sliderValue; } return String(); } Khi trang web yêu cầu, kiểm tra xem HTML có trình giữ chỗ khơng Nếu tìm thấy chỗ dành sẵn %SLIDERVALUE%, trả giá trị lưu biến sliderValue Thiết lập() Trong setup(), khởi tạo Serial Monitor cho mục đích gỡ lỗi Serial.begin(115200); Đặt chu kỳ nhiệm vụ tín hiệu PWM thành giá trị lưu trượt (khi ESP8266 khởi động, đặt thành 0) analogWrite(output, sliderValue.toInt()); 10/14 Để tìm hiểu thêm PWM với ESP8266 , đọc hướng dẫn chúng tôi: ESP8266 PWM với Arduino IDE (Đầu tương tự) Kết nối với mạng cục bạn in địa IP ESP8266 // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi "); } // Print ESP Local IP Address Serial.println(WiFi.localIP()); Xử lý yêu cầu Cuối cùng, thêm dòng mã để xử lý máy chủ web // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html, processor); }); // Send a GET request to /slider?value= server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) { String inputMessage; // GET input1 value on /slider?value= 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"); }); Khi thực yêu cầu URL gốc, gửi văn HTML lưu trữ biến index_html Chúng ta cần truyền hàm processor(), hàm thay tất placeholder giá trị phù hợp // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html, processor); }); Chúng cần xử lý khác lưu giá trị trượt đặt độ sáng LED cho phù hợp 11/14 server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) { String inputMessage; // GET input1 value on /slider?value= 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"); }); Về bản, nhận giá trị trượt dòng sau: if (request->hasParam(PARAM_INPUT)) { inputMessage = request->getParam(PARAM_INPUT)->value(); sliderValue = inputMessage; Sau đó, cập nhật độ sáng LED (chu kỳ nhiệm vụ PWM) cách sử dụng hàm ledcWrite() chấp nhận làm đối số kênh bạn muốn điều khiển giá trị ledcWrite(ledChannel, sliderValue.toInt()); Cuối cùng, khởi động máy chủ server.begin(); Bởi máy chủ web không đồng bộ, không cần phải viết điều loop() void loop(){ } Đó nhiều cách mã hoạt động Tải mã lên Bây giờ, tải mã lên ESP8266 bạn Đảm bảo bạn chọn bo mạch cổng COM Sau tải lên, mở Màn hình nối tiếp với tốc độ truyền 115200 Nhấn nút đặt lại ESP8266 Địa IP ESP8266 phải in hình nối tiếp 12/14 Trình diễn máy chủ web Mở trình duyệt nhập địa IP ESP8266 Máy chủ web bạn hiển thị trượt giá trị Di chuyển trượt xem đèn LED tích hợp ESP8266 tăng giảm độ sáng Tổng kết 13/14 Với hướng dẫn này, bạn học cách thêm trượt vào dự án máy chủ web nhận lưu giá trị biến mà ESP8266 sử dụng Ví dụ: chúng tơi điều khiển tín hiệu PWM để kiểm sốt độ sáng đèn LED Thay đèn LED, bạn điều khiển động servo chẳng hạn Ngoài ra, trượt sử dụng để thiết lập ngưỡng giá trị khác mà bạn cần thiết lập sau ESP8266 sử dụng để định điều Nếu bạn sử dụng bảng ESP32, đọc Máy chủ web ESP32 với Độ sáng LED điều khiển trượt (PWM) Chúng hy vọng bạn thấy dự án hữu ích Bạn thích hướng dẫn sau: ESP-NOW Giao tiếp hai chiều bo mạch ESP8266 NodeMCU Máy chủ web ESP - Kiểm soát đầu hẹn Máy chủ Web ESP8266 DHT11 / DHT22 - Nhiệt độ Độ ẩm Tìm hiểu thêm ESP8266 với tài ngun chúng tơi: Tự động hóa gia đình ESP8266 (sách điện tử) Các dự án hướng dẫn khác ESP8266 NodeMCU Cảm ơn bạn đọc 14/14