Dự án này chỉ ra cách xây dựng một máy chủ web với bảng ESP8266 NodeMCU để vẽ các bài đọc cảm biến trong các biểu đồ với nhiều chuỗi. Ví dụ: chúng tôi sẽ vẽ số đọc cảm biến từ bốn cảm biến nhiệt độ DS18B20 khác nhau trên cùng một biểu đồ. Bạn có thể sửa đổi dự án để vẽ bất kỳ dữ liệu nào khác. Để xây dựng các biểu đồ, chúng ta sẽ sử dụng thư viện JavaScript Highcharts.
ESP8266 Số đọc cảm biến biểu đồ NodeMCU biểu đồ (Nhiều chuỗi) Dự án cách xây dựng máy chủ web với bảng ESP8266 NodeMCU để vẽ đọc cảm biến biểu đồ với nhiều chuỗi Ví dụ: chúng tơi vẽ số đọc cảm biến từ bốn cảm biến nhiệt độ DS18B20 khác biểu đồ Bạn sửa đổi dự án để vẽ liệu khác Để xây dựng biểu đồ, sử dụng thư viện JavaScript Highcharts Chúng tơi có hướng dẫn tương tự cho bảng ESP32: Số đọc cảm biến biểu đồ ESP32 biểu đồ (Nhiều chuỗi) Tổng quan dự án Dự án xây dựng máy chủ web với bảng mạch ESP8266 NodeMCU hiển thị số nhiệt độ từ bốn cảm biến nhiệt độ DS18B20 biểu đồ — biểu đồ với nhiều chuỗi Biểu đồ hiển thị tối đa 40 điểm liệu cho chuỗi đọc thêm vào sau 30 giây Bạn thay đổi giá trị mã 1/31 Cảm biến nhiệt độ DS18B20 Cảm biến nhiệt độ DS18B20 cảm biến nhiệt độ kỹ thuật số dây Điều có nghĩa yêu cầu dòng liệu để giao tiếp với vi điều khiển bạn 2/31 Mỗi cảm biến có số sê-ri 64 bit nhất, có nghĩa bạn kết nối nhiều cảm biến với GPIO — làm hướng dẫn Tìm hiểu thêm cảm biến nhiệt độ DS18B20: Cảm biến nhiệt độ ESP8266 DS18B20 với Arduino IDE (Máy chủ Web, Đơn, Nhiều) Sự kiện máy chủ gửi Các đọc cập nhật tự động trang web cách sử dụng Sự kiện Máy chủ Gửi (SSE) 3/31 Để tìm hiểu thêm SSE với ESP8266, bạn đọc: ESP8266 Máy chủ Web NodeMCU sử dụng kiện máy chủ gửi (Cập nhật cảm biến đọc tự động) Các tệp lưu hệ thống tệp (LittleFS) Để giữ cho dự án tổ chức tốt dễ hiểu hơn, lưu tệp HTML, CSS JavaScript để xây dựng trang web hệ thống tệp bảng (LittleFS) Tìm hiểu thêm cách sử dụng LittleFS với ESP8266, bạn đọc: Cài đặt ESP8266 NodeMCU LittleFS Filesystem Uploader Arduino IDE Đ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 Cài đặt bảng ESP8266 Arduino IDE Chúng tơi lập trình ESP8266 Arduino IDE Vì vậy, bạn phải cài đặt tiện ích bổ sung ESP8266 Thực theo hướng dẫn bạn chưa có: Cài đặt bo mạch ESP8266 Arduino IDE (Windows, Mac OS X, Linux) Nếu bạn muốn sử dụng VS Code với tiện ích mở rộng PlatformIO, làm theo hướng dẫn để tìm hiểu cách lập trình ESP8266: 4/31 Bắt đầu với VS Code PlatformIO IDE cho ESP32 ESP8266 (Windows, Mac OS X, Linux Ubuntu) Plugin Filesystem Uploader Để tải tệp HTML, CSS JavaScript lên nhớ flash ESP8266 (LittleFS), sử dụng plugin cho trình tải lên hệ thống tệp Arduino IDE: LittleFS Làm theo hướng dẫn để cài đặt plugin tải lên hệ thống tệp: Cài đặt ESP8266 NodeMCU LittleFS Filesystem Uploader Arduino IDE Nếu bạn sử dụng VS Code với tiện ích mở rộng PlatformIO, đọc hướng dẫn sau để tìm hiểu cách tải tệp lên hệ thống tệp: ESP8266 NodeMCU với VS Code PlatformIO: Tải tệp lên hệ thống tệp (LittleFS) Cài đặt thư viện Để xây dựng dự án này, bạn cần cài đặt thư viện sau: Bạn cài đặt hai thư viện Trình quản lý thư viện Arduino Đi tới Sketch > Include Library > Manage Libraries tìm kiếm tên thư viện Các thư viện ESPAsyncWebServer AsynTCP 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 Thư viện cài đặt Arduino Ngoà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 Cài đặt thư viện (VS Code + PlatformIO) Nếu bạn lập trình ESP8266 PlatformIO, bạn nên thêm dòng sau vào tệp platformio.ini để bao gồm thư viện (cũng thay đổi tốc độ Serial Monitor thành 115200): monitor_speed = 115200 lib_deps = ESP Async WebServer arduino-libraries/Arduino_JSON @ 0.1.0 milesburton/[email protected]^3.9.1 paulstoffregen/[email protected]^2.3.5 Các phận cần thiết Để làm theo hướng dẫn này, bạn cần phần sau: ESP8266 (đọc bảng phát triển ESP8266 tốt nhất) Cảm biến nhiệt độ 4x DS18B20 (một nhiều cảm biến) – phiên chống thấm nước Điện trở 4.7k Ohm Dây nhảy 5/31 Breadboard Nếu bạn khơng có bốn cảm biến DS18B20, bạn sử dụng ba hai Ngồi ra, bạn sử dụng cảm biến khác (bạn cần sửa đổi mã) liệu từ nguồn khác (ví dụ: số đọc cảm biến nhận qua MQTT, ESP-NOW giá trị ngẫu nhiên — để thử nghiệm với dự án ) Sơ đồ Nối bốn cảm biến DS18B20 vào bo mạch bạn Đề xuất đọc: Tham khảo sơ đồ chân ESP8266: Bạn nên sử dụng chân GPIO nào? Lấy địa cảm biến DS18B20 6/31 Mỗi cảm biến nhiệt độ DS18B20 có số sê-ri định Đầu tiên, bạn cần tìm số để gắn nhãn cho cảm biến cho phù hợp Bạn cần làm điều để sau bạn biết bạn đọc nhiệt độ từ cảm biến Tải mã sau lên ESP8266 Đảm bảo bạn chọn bo mạch cổng COM /* * Rui Santos * Complete Project Details https://randomnerdtutorials.com */ #include // Based on the OneWire library example OneWire ds(4); //data wire connected to GPIO void setup(void) { Serial.begin(115200); } void loop(void) { byte i; byte addr[8]; if (!ds.search(addr)) { Serial.println(" No more addresses."); Serial.println(); ds.reset_search(); delay(250); return; } Serial.print(" ROM ="); for (i = 0; i < 8; i++) { Serial.write(' '); Serial.print(addr[i], HEX); } } Xem mã thô Chỉ cần nối dây cảm biến thời điểm để tìm địa (hoặc liên tiếp thêm cảm biến mới) để bạn xác định cảm biến theo địa Sau đó, bạn thêm nhãn vật lý vào cảm biến Mở Serial Monitor với tốc độ truyền 115200, nhấn nút RST / EN bo mạch bạn nhận sau (nhưng với địa khác nhau): 7/31 Bỏ chọn tùy chọn "Tự động cuộn" để bạn chép địa Trong trường hợp chúng tơi, chúng tơi có địa sau: Cảm biến 1: 28 FF A0 11 33 17 96 Cảm biến 2: 28 FF B4 33 17 4B Cảm biến 3: 28 FF 11 28 33 18 6B Cảm biến 4: 28 FF 43 F5 32 18 A8 Sắp xếp tệp bạn Để giữ cho dự án tổ chức dễ hiểu hơn, tạo bốn tệp để xây dựng máy chủ web: Bản phác thảo Arduino xử lý máy chủ web; index.html: để xác định nội dung trang web; sytle.css: để tạo kiểu cho trang web; Tập lệnh.js: để lập trình hành vi trang web — xử lý phản hồi, kiện máy chủ web, tạo biểu đồ, v.v 8/31 Bạn nên lưu tệp HTML, CSS JavaScript bên thư mục gọi liệu bên thư mục phác thảo Arduino, thể sơ đồ trước Chúng tải tệp lên hệ thống tệp ESP8266 (LittleFS) Bạn tải xuống tất tệp dự án: Tải xuống tất tệp dự án Arduino Tệp HTML Sao chép nội dung sau vào tệp html mục ESP IOT DASHBOARD ESP WEB SERVER CHARTSTemperature Chart
Xem mã thô Tệp HTML cho dự án đơn giản Nó bao gồm thư viện JavaScript Highcharts đầu tệp HTML: Có phần với id chart-temperature nơi hiển thị biểu đồ sau Tệp CSS 9/31 Sao chép kiểu sau vào tệp css kiểu bạn /* Complete project details: https://randomnerdtutorials.com/esp8266-nodemcu-plotreadings-charts-multiple/ */ html { font-family: Arial, Helvetica, sans-serif; display: inline-block; text-align: center; } h1 { font-size: 1.8rem; color: white; } p { font-size: 1.4rem; } topnav { overflow: hidden; background-color: #0A1128; } body { margin: 0; } content { padding: 5%; } card-grid { max-width: 1200px; margin: auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); } card-title { font-size: 1.2rem; font-weight: bold; color: #034078 } chart-container { padding-right: 5%; padding-left: 5%; } Xem mã thô Tệp JavaScript (tạo biểu đồ) Sao chép nội dung sau vào tập lệnh.js tệp Dưới danh sách chức mã này: 10/31 text: 'Temperature Celsius Degrees' } }, credits: { enabled: false } }); Để tạo biểu đồ mới, sử dụng phương thức Highcharts.Chart() truyền làm đối số cho thuộc tính biểu đồ var chartT = new Highcharts.Chart({ Trong dòng tiếp theo, xác định nơi bạn muốn đặt biểu đồ Trong ví dụ chúng ta, muốn đặt phần tử HTML với id nhiệt độ biểu đồ — xem phần tệp HTML chart:{ renderTo:'chart-temperature' }, Sau đó, xác định tùy chọn cho chuỗi Các dòng sau tạo chuỗi đầu tiên: series: [ { name: 'Temperature #1', type: 'line', color: '#101D42', marker: { symbol: 'circle', radius: 3, fillColor: '#101D42', } Thuộc tính name xác định tên chuỗi Thuộc tính type xác định loại biểu đồ—trong trường hợp này, muốn xây dựng biểu đồ đường Màu sắc đề cập đến màu đường kẻ — bạn thay đổi thành màu bạn muốn Tiếp theo, xác định thuộc tính đánh dấu Bạn chọn từ số biểu tượng mặc định—hình vng, hình trịn, hình kim cương, hình tam giác , hình tam giác xuống Bạn tạo biểu tượng riêng Bán kính đề cập đến kích thước điểm đánh dấu fillColor đề cập đến màu điểm đánh dấu Có thuộc tính khác mà bạn sử dụng để tùy chỉnh điểm đánh dấu—tìm hiểu thêm marker: { symbol: 'circle', radius: 3, fillColor: '#101D42', } Tạo chuỗi khác tương tự, chọn tên, điểm đánh dấu màu sắc khác 17/31 Có nhiều tùy chọn khác mà bạn sử dụng để tùy chỉnh loạt phim — kiểm tra tài liệu plotOptions Bạn xác định tiêu đề biểu đồ — trường hợp này, chúng tơi xác định tiêu đề cho biểu đồ tiêu đề tệp HTML, không đặt tiêu đề Tiêu đề hiển thị theo mặc định, phải đặt thành undefined title: { text: undefined }, Xác định thuộc tính cho trục X — trục nơi hiển thị liệu thời gian Kiểm tra thêm tùy chọn để tùy chỉnh trục X xAxis: { type: 'datetime', dateTimeLabelFormats: { second: '%H:%M:%S' } }, Chúng đặt tiêu đề cho trục y Xem tất thuộc tính có sẵn cho trục y yAxis: { title: { text: 'Temperature Celsius Degrees' } } Múi Nếu, lý đó, sau xây dựng dự án, biểu đồ không hiển thị múi phù hợp, thêm dòng sau vào tệp JavaScript sau dòng thứ hai: Highcharts.setOptions({ time: { timezoneOffset: -60 //Add your time zone offset here in seconds } }); Các biểu đồ hiển thị thời gian theo UTC Nếu bạn muốn hiển thị múi mình, bạn phải đặt tham số useUTC (là tham số thời gian) false: time:{ useUTC: false }, Vì vậy, thêm điều tạo biểu đồ sau: var chart = new Highcharts.Chart({ time:{ useUTC: false }, (…) 18/31 Để tìm hiểu thêm chỗ nghỉ này, kiểm tra liên kết tài liệu: https://api.highcharts.com/highcharts/time.useUTC Cuối cùng, đặt tùy chọn tín dụng thành false để ẩn khoản tín dụng thư viện Highcharts credits: { enabled: false } Nhiệt độ lô Chúng ta tạo hàm plotTemperature() chấp nhận làm đối số đối tượng JSON với phép đọc nhiệt độ mà muốn vẽ //Plot temperature in the temperature chart function plotTemperature(jsonValue) { var keys = Object.keys(jsonValue); console.log(keys); console.log(keys.length); for (var i = 0; i < keys.length; i++){ var x = (new Date()).getTime(); console.log(x); const key = keys[i]; var y = Number(jsonValue[key]); console.log(y); if(chartT.series[i].data.length > 40) { chartT.series[i].addPoint([x, y], true, true, true); } else { chartT.series[i].addPoint([x, y], true, false, true); } } } Đầu tiên, lấy khóa đối tượng JSON lưu chúng vào biến khóa Điều cho phép qua tất phím đối tượng var keys = Object.keys(jsonValue); Biến keys mảng với tất key đối tượng JSON Trong trường hợp chúng tôi: ["sensor1", "sensor2", "sensor3", "sensor4"] Điều hoạt động bạn có đối tượng JSON với số lượng khóa khác với khóa khác Sau đó, qua tất khóa (keys.length()) để vẽ giá trị biểu đồ 19/31 Giá trị x cho biểu đồ dấu thời gian var x = (new Date()).getTime() Biến khóa giữ khóa vòng lặp Lần qua vòng lặp, biến "sensor1" const key = keys[i]; Sau đó, lấy giá trị khóa (jsonValue[key]) lưu dạng số biến y Biểu đồ chúng tơi có nhiều chuỗi (chỉ số 0) Chúng ta truy cập chuỗi biểu đồ nhiệt độ cách sử dụng: chartT.series [0], tương ứng với chartT.series [i] lần qua vòng lặp Đầu tiên, kiểm tra độ dài liệu chuỗi: Nếu chuỗi có 40 điểm: thêm dịch chuyển điểm mới; Hoặc chuỗi có 40 điểm: thêm điểm Để thêm điểm mới, dùng phương thức addPoint() chấp nhận đối số sau đây: Giá trị vẽ Nếu số nhất, điểm có giá trị y trường nối vào chuỗi Nếu mảng, hiểu giá trị x y Trong hợp chúng ta, truyền mảng với giá trị x y; Tùy chọn vẽ lại (boolean): đặt thành true để vẽ lại biểu đồ sau thêm điểm Tùy chọn dịch chuyển (boolean): Nếu đúng, điểm bị dịch chuyển khỏi đầu chuỗi điểm nối vào cuối Khi độ dài biểu đồ lớn 40, đặt tùy chọn shift thành true withEvent option (boolean): Được sử dụng nội để kích hoạt chuỗi kiện addPoint—tìm hiểu thêm Vì vậy, để thêm điểm vào biểu đồ, chúng tơi sử dụng dịng tiếp theo: if(chartT.series[i].data.length > 40) { chartT.series[i].addPoint([x, y], true, true, true); } else { chartT.series[i].addPoint([x, y], true, false, true); } Xử lý kiện Vẽ đọc biểu đồ khách hàng nhận đọc kiện new_readings Tạo đối tượng EventSource định URL trang gửi cập nhật Trong trường hợp chúng tơi, /events 20/31