Đang tải... (xem toàn văn)
Tìm hiểu cách vẽ số đọc cảm biến (nhiệt độ, độ ẩm và áp suất) trên máy chủ web bằng ESP32 hoặc ESP8266 với Arduino IDE. ESP sẽ lưu trữ một trang web với ba biểu đồ thời gian thực có các bài đọc mới được thêm vào cứ sau 30 giây.
ESP32 / ESP8266 Đọc cảm biến biểu đồ biểu đồ thời gian thực - Máy chủ web Tìm hiểu cách vẽ số đọc cảm biến (nhiệt độ, độ ẩm áp suất) máy chủ web ESP32 ESP8266 với Arduino IDE ESP lưu trữ trang web với ba biểu đồ thời gian thực có đọc thêm vào sau 30 giây Tổng quan dự án Trong hướng dẫn này, xây dựng máy chủ web không đồng cách sử dụng thư viện ESPAsyncWebServer HTML để xây dựng trang web lưu trữ Hệ thống tệp ESP32 ESP8266 (SPIFFS) Để tìm hiểu thêm cách xây dựng máy chủ web SPIFFS, bạn tham khảo hướng dẫn tiếp theo: Chúng hiển thị số nhiệt độ, độ ẩm áp suất từ cảm biến BME280 biểu đồ, bạn sửa đổi dự án để hiển thị số đọc cảm biến từ cảm biến khác Để tìm hiểu thêm BME280, đọc hướng dẫn chúng tôi: Để xây dựng biểu đồ, sử dụng thư viện Highcharts Chúng tạo ba biểu đồ: nhiệt độ, độ ẩm áp suất theo thời gian Biểu đồ hiển thị tối đa 40 điểm liệu số đọc thêm vào sau 30 giây, bạn thay đổi giá trị mã Xem video trình diễn 1/20 Để xem dự án hoạt động nào, bạn xem video minh họa sau: Điều kiện tiên Hãy chắn bạn kiểm tra tất điều kiện tiên phần trước tiếp tục với dự án để biên dịch mã Cài đặt bảng ESP Arduino IDE Chúng tơi lập trình ESP32 ESP8266 Arduino IDE Vì vậy, bạn phải cài đặt tiện ích bổ sung ESP32 ESP8266 Làm theo hướng dẫn để cài đặt tiện ích bổ sung ESP: Plugin Filesystem Uploader Để tải tệp HTML lên nhớ flash ESP32 ESP8266, sử dụng plugin cho Arduino IDE: Trình tải lên hệ thống tệp Thực theo hướng dẫn để cài đặt trình tải lên hệ thống tệp tùy thuộc vào bảng bạn sử dụng: Cài đặt thư viện Để xây dựng máy chủ web không đồng bộ, bạn cần cài đặt thư viện sau ESP32: bạn cần cài đặt ESPAsyncWebServer thư viện AsyncTCP ESP8266: bạn cần cài đặt ESPAsyncWebServer thư viện ESPAsyncTCP Các thư viện khơng có 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 Cài đặt Arduino Để đọc từ mô-đun cảm biến BME280, bạn cần cài đặt thư viện tiếp theo: Bạn cài đặt thư viện thơng qua Trình quản lý thư viện Arduino Các phận cần thiết 2/20 Để làm theo hướng dẫn này, bạn cần phần sau: ESP32 ESP8266 (đọc ESP32 so với ESP8266) Cảm biến BME280 Breadboard Dây nhảy Sơ đồ Mô-đun cảm biến BME280 mà sử dụng giao tiếp qua giao thức truyền thông I2C, bạn cần kết nối với chân ESP32 ESP8266 I2C Hệ thống dây điện BME280 với ESP32 BME280 ESP32 SCK (Ghim SCL) GPIO 22 · SDI (chân SDA) GPIO 21 · Vì vậy, lắp ráp mạch bạn thể sơ đồ 3/20 Đề xuất đọc: Hướng dẫn tham khảo sơ đồ chân ESP32 Hệ thống dây điện BME280 với ESP8266 BME280 ESP8266 SCK (Ghim SCL) GPIO · SDI (chân SDA) GPIO · Lắp ráp mạch bạn sơ đồ bạn sử dụng bảng ESP8266 4/20 Đề xuất đọc: Hướng dẫn tham khảo sơ đồ chân ESP8266 Sắp xếp tệp bạn Để xây dựng máy chủ web, bạn cần hai tệp khác Bản phác thảo Arduino tệp HTML Tệp HTML nên lưu bên thư mục gọi liệu bên thư mục phác thảo Arduino, hình đây: 5/20 Tạo tệp HTML Tạo file index.html với nội dung sau tải xuống tất file project đây: 6/20 body { min-width: 310px; max-width: 800px; height: 400px; margin: auto; } h2 { font-family: Arial; font-size: 2.5rem; text-align: center; } ESP Weather Station var chartT = new Highcharts.Chart({ chart:{ renderTo : 'chart-temperature' }, title: { text: 'BME280 Temperature' }, series: [{ showInLegend: false, data: [] }], plotOptions: { line: { animation: false, dataLabels: { enabled: true } }, series: { color: '#059e8a' } }, xAxis: { type: 'datetime', dateTimeLabelFormats: { second: '%H:%M:%S' } }, yAxis: { title: { text: 'Temperature (Celsius)' } //title: { text: 'Temperature (Fahrenheit)' } }, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { 7/20 if (this.readyState == && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); //console.log(this.responseText); if(chartT.series[0].data.length > 40) { chartT.series[0].addPoint([x, y], true, true, true); } else { chartT.series[0].addPoint([x, y], true, false, true); } } }; xhttp.open("GET", "/temperature", true); xhttp.send(); }, 30000 ) ; var chartH = new Highcharts.Chart({ chart:{ renderTo:'chart-humidity' }, title: { text: 'BME280 Humidity' }, series: [{ showInLegend: false, data: [] }], plotOptions: { line: { animation: false, dataLabels: { enabled: true } } }, xAxis: { type: 'datetime', dateTimeLabelFormats: { second: '%H:%M:%S' } }, yAxis: { title: { text: 'Humidity (%)' } }, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); //console.log(this.responseText); if(chartH.series[0].data.length > 40) { chartH.series[0].addPoint([x, y], true, true, true); } else { chartH.series[0].addPoint([x, y], true, false, true); } } }; xhttp.open("GET", "/humidity", true); xhttp.send(); }, 30000 ) ; var chartP = new Highcharts.Chart({ chart:{ renderTo:'chart-pressure' }, 8/20 title: { text: 'BME280 Pressure' }, series: [{ showInLegend: false, data: [] }], plotOptions: { line: { animation: false, dataLabels: { enabled: true } }, series: { color: '#18009c' } }, xAxis: { type: 'datetime', dateTimeLabelFormats: { second: '%H:%M:%S' } }, yAxis: { title: { text: 'Pressure (hPa)' } }, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); //console.log(this.responseText); if(chartP.series[0].data.length > 40) { chartP.series[0].addPoint([x, y], true, true, true); } else { chartP.series[0].addPoint([x, y], true, false, true); } } }; xhttp.open("GET", "/pressure", true); xhttp.send(); }, 30000 ) ; Xem mã thô Chúng ta xem nhanh phần có liên quan để xây dựng biểu đồ Trước tiên, bạn cần bao gồm thư viện highcharts: Bạn cần tạo phần cho đồ họa có id Trong trường hợp này: nhiệt độ biểu đồ, độ ẩm biểu đồ áp suất biểu đồ 9/20 Để tạo biểu đồ thêm liệu vào biểu đồ, sử dụng mã javascript Nó vào bên thẻ Các spinet sau tạo biểu đồ nhiệt độ Bạn xác định id biểu đồ, bạn đặt tiêu đề, nhãn trục, v.v var chartT = new Highcharts.Chart({ chart:{ renderTo : 'chart-temperature' }, title: { text: 'BME280 Temperature' }, series: [{ showInLegend: false, data: [] }], plotOptions: { line: { animation: false, dataLabels: { enabled: true } }, series: { color: '#059e8a' } }, xAxis: { type: 'datetime', dateTimeLabelFormats: { second: '%H:%M:%S' } }, yAxis: { title: { text: 'Temperature (Celsius)' } //title: { text: 'Temperature (Fahrenheit)' } }, credits: { enabled: false } }); Sau đó, hàm setInvertal() thêm điểm vào biểu đồ Cứ sau 30 giây, đưa yêu cầu đến URL / temperature để nhận số nhiệt độ từ ESP32 ESP8266 bạn setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); //console.log(this.responseText); if(chartT.series[0].data.length > 40) { chartT.series[0].addPoint([x, y], true, true, true); } else { chartT.series[0].addPoint([x, y], true, false, true); } } }; xhttp.open("GET", "/temperature", true); xhttp.send(); }, 30000 ) ; Các đồ họa khác tạo theo cách tương tự Chúng đưa yêu cầu URL /moisture /pressure để có số độ ẩm áp suất tương ứng 10/20 Trong phác thảo Arduino, nên xử lý xảy nhận yêu cầu đó: nên gửi đọc cảm biến tương ứng Bản phác thảo Arduino Sao chép đoạn mã sau vào Arduino IDE tải xuống tất tệp dự án Sau đó, bạn cần nhập thơng tin đăng nhập mạng (SSID mật khẩu) để làm cho hoạt động 11/20 /********* Rui Santos Complete project details at https://RandomNerdTutorials.com 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 #ifdef ESP32 #include #include #include #else #include #include #include #include #include #include #endif #include #include #include /*#include #define BME_SCK 18 #define BME_MISO 19 #define BME_MOSI 23 #define BME_CS 5*/ Adafruit_BME280 bme; // I2C //Adafruit_BME280 bme(BME_CS); // hardware SPI //Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI // Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Create AsyncWebServer object on port 80 AsyncWebServer server(80); String readBME280Temperature() { // Read temperature as Celsius (the default) float t = bme.readTemperature(); // Convert temperature to Fahrenheit //t = 1.8 * t + 32; if (isnan(t)) { Serial.println("Failed to read from BME280 sensor!"); return ""; } else { Serial.println(t); 12/20 return String(t); } } String readBME280Humidity() { float h = bme.readHumidity(); if (isnan(h)) { Serial.println("Failed to read from BME280 sensor!"); return ""; } else { Serial.println(h); return String(h); } } String readBME280Pressure() { float p = bme.readPressure() / 100.0F; if (isnan(p)) { Serial.println("Failed to read from BME280 sensor!"); return ""; } else { Serial.println(p); return String(p); } } void setup(){ // Serial port for debugging purposes Serial.begin(115200); bool status; // default settings // (you can also pass in a Wire library object like &Wire2) status = bme.begin(0x76); if (!status) { Serial.println("Could not find a valid BME280 sensor, check wiring!"); while (1); } // Initialize SPIFFS if(!SPIFFS.begin()){ Serial.println("An Error has occurred while mounting SPIFFS"); return; } // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi "); } // Print ESP32 Local IP Address Serial.println(WiFi.localIP()); 13/20 // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html"); }); server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/plain", readBME280Temperature().c_str()); }); server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/plain", readBME280Humidity().c_str()); }); server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/plain", readBME280Pressure().c_str()); }); // Start server server.begin(); } void loop(){ } Xem mã thô Cách mã hoạt động Chúng ta xem nhanh mã xem hoạt động Bao gồm thư viện Đầu tiên, bao gồm thư viện cần thiết Bạn bao gồm thư viện khác tùy thuộc vào bảng bạn sử dụng Nếu bạn sử dụng ESP32, mã tải thư viện sau: #include #include #include #include #include #include Nếu bạn sử dụng ESP8266, mã tải thư viện sau: #include #include #include #include #include #include #include #include #include Tạo phiên để giao tiếp với cảm biến BME280 I2C: 14/20 Adafruit_BME280 bme; // I2C Chèn thông tin đăng nhập mạng bạn vào biến sau: // Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; Tạo đối tượng AsyncWebServer cổng 80: AsyncWebServer server(80); Đọc nhiệt độ, độ ẩm áp suất Sau đó, tạo ba hàm readBME280Temperature(), readBME280Humidity() readBME280Pressure() Các chức yêu cầu nhiệt độ, độ ẩm áp suất từ cảm biến BME280 trả số đọc dạng loại Chuỗi String readBME280Temperature() { // Read temperature as Celsius (the default) float t = bme.readTemperature(); // Convert temperature to Fahrenheit //t = 1.8 * t + 32; if (isnan(t)) { Serial.println("Failed to read from BME280 sensor!"); return ""; } else { Serial.println(t); return String(t); } } Init BME280 Trong setup(), khởi tạo cảm biến: status = bme.begin(0x76); if (!status) { Serial.println("Could not find a valid BME280 sensor, check wiring!"); while (1); } Init SPIFFS Khởi tạo hệ thống tệp (SPIFFS): if(!SPIFFS.begin()){ Serial.println("An Error has occurred while mounting SPIFFS"); return; } Kết nối với Wi-Fi Kết nối với Wi-Fi in địa IP Màn hình nối tiếp: 15/20 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi "); } // Print ESP32 Local IP Address Serial.println(WiFi.localIP()); Xử lý yêu cầu Sau đó, cần xử lý xảy ESP nhận yêu cầu Khi nhận yêu cầu URL gốc, gửi văn HTML lưu SPIFFS tên mục.html: server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html"); }); Khi nhận yêu cầu URL /temperature, /moisture /pressure, gọi hàm trả số đọc cảm biến Ví dụ: nhận yêu cầu URL /temperature, gọi hàm readBME280Temperature() trả nhiệt độ server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/plain", readBME280Temperature().c_str()); }); Điều tương tự xảy đọc khác 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 vịng lặp () void loop(){ } Tải lên mã tệp Lưu mã dạng ESP_Chart_Web_Server tải xuống tất tệp dự án Đi tới Sketch > Show Sketch Folder tạo thư mục có tên data Bên thư mục đó, bạn nên lưu tệp HTML tạo trước Bây bạn cần tải tệp HTML lên hệ thống tệp ESP32 ESP8266 Đi tới Công cụ > Tải lên phác thảo liệu ESP32 / ESP8266 đợi tệp tải lên 16/20 Sau đó, tải mã lên bảng bạn Đảm bảo bạn chọn bo mạch cổng COM Ngoài ra, đảm bảo bạn chèn thông tin đăng nhập mạng vào mã Khi thứ tải lên thành cơng, mở Màn hình nối tiếp với tốc độ truyền 115200 Nhấn nút "EN / RST" bảng in địa IP 17/20 Cuộc biểu tình Mở trình duyệt mạng cục bạn nhập địa IP ESP32 ESP8266 Bạn thấy ba biểu đồ Một điểm liệu thêm vào sau 30 giây với tổng số 40 điểm Dữ liệu tiếp tục hiển thị biểu đồ miễn bạn mở tab trình duyệt web Dưới ví dụ biểu đồ độ ẩm: Bạn chọn điểm để xem dấu thời gian xác 18/20 Tổng kết Trong hướng dẫn này, bạn học cách tạo biểu đồ để hiển thị liệu máy chủ web Bạn sửa đổi dự án để tạo biểu đồ tùy thích sử dụng cảm biến khác Tiếp theo, khuyên bạn nên xây dựng dự án hiển thị biểu đồ từ liệu lưu trữ sở liệu bạn Dưới hướng dẫn khác mà bạn thích: 19/20 Hình dung đọc cảm biến ESP32 / ESP8266 bạn từ nơi giới ESP32 / ESP8266 Chèn liệu vào Cơ sở liệu MySQL PHP Arduino IDE Cảm ơn bạn đọc 20/20