Chương 4. THIẾT KẾ WEBSERVER HIỂN THỊ DỮ LIỆU
Các giao diện web
68 Ngoài các loại biểu đồ, cách thể hiện dữ liệu như nhóm đã xây dựng trên, để tiếp tục phát triển thêm có thể cần lưu ý một vài vấn đề sau:
• Cần phân biệt mã chương trình để chạy server (file index.js) và mã chương trình sẽ chạy ở trình duyệt web của người dùng (file HOME.js sẽ được gửi đến trình duyệt web).
• Ngôn ngữ sử dụng để lập trình là javascript, đây là một loại ngôn ngữ lập trình khá phổ biến.
• Thư viện nodeJS nhóm đã sử dụng để tạo nên socket server và client server là thư viện socket.io. https://socket.io/
• Để tiết kiệm thời gian xây dựng một giao diện web đẹp, nhóm đã sử dụng thư viện bootstrap.js - đây là một thư viện có các mẫu sẵn để dựng giao diện web nhanh và đẹp hơn. https://getbootstrap.com/
• Để xây dựng các biểu đồ, nhóm đã sử dụng thư viện Chart.js. https://www.chartjs.org/docs/latest/
Thư viện Chart.js ngoài có thể xây dựng đa dạng các loại biểu đồ còn hỗ trợ tùy biến nhanh các thông số, cách hiển thị của biểu đồ theo yêu cầu. Ngoài biểu đồ đường và biểu đồ cột trong chương trình, một số loại biểu đồ khác (có thể kết hợp nhiều loại) có thể phát triển thêm:
69
Hình 4.20. Một số loại biểu đồ khác
Xây dựng một web server cục bộ có thể sử dụng trong phạm vi một lớp học hoặc một khu vực xưởng (chỉ cần đáp ứng kết nối chung mạng) và có thể sử dụng chung cho
70 nhiều mô hình, nhiều nhóm thực hành khác nhau cùng lúc (tùy thuộc vào chương trình xử lý và cấu hình máy chủ).
Hoặc có thể cấu hình để có thể đặt socket server trên mạng internet, có thể truy cập từ bất kỳ nơi nào chỉ cần có kết nối internet. Ngoài các bước đã trình bày để cấu hình một socket server cục bộ, nhóm đã triển khai server trên tại địa chỉ sau:
http://myiotserver.ddns.net/
Socket client - ESP8266
Sau khi xây dựng giao diện web và có được một socket server cục bộ như trên hoặc sử dụng server mẫu nhóm đã tạo tại địa chỉ: http://myiotserver.ddns.net/. Theo mô hình kết nối, nhóm đã hoàn thành xong tầng một là socket server và trình duyệt web ở tầng hai. Mục tiêu tiếp theo là lập trình cho esp8266 trở thành một socket client giúp chuyển dữ liệu từ Arduino hoặc VĐK lên cho socket server.
Vấn đề đầu tiên esp8266 và Arduino giao tiếp với nhau, như đã trình bày hầu hết các VĐK điều trang bị giao tiếp UART (Serial) và esp8266 cũng hỗ trợ giao thức trên nên không cần phải trang bị thêm phần cứng. Sơ đồ kết nối UART hai thiết bị như hình dưới:
Với mạch Arduino nano tích hợp đã sử dụng trong các bài học có thể dùng cổng giao tiếp HC05 có sẵn để kết nối mạch nodeMCU D1 mini.
Cổng kết nối có sẵn chân 5V cấp nguồn, GND, RX và TX ngoài ra còn có SW2 đóng/ngắt kết nối chân RX, TX để tránh lỗi khi nạp chương trình.
Hình 4.22. Kết nối UART
71 Có thể làm mạch kết nối hai thiết bị NodeMCU D1 mini và Arduino nano như sau:
Hình 4.23. Kết nối NodeMCU D1 mini và Arduino nano
Để giao tiếp UART giữa hai thiết bị phải quy định trước với nhau về cấu trúc dữ liệu truyền nhận và esp8266 được lập trình giao tiếp Serial trên Arduino IDE như một mạch Arduino thông thường. Tùy theo yêu cầu giao tiếp mà quy định này có thể khác nhau, nhóm cũng đã tạo ra một chương trình mẫu cho esp8266 tại thư mục “02.
socket_client_esp8266” sử dụng thư viện arduinoWebSockets của tác giả Links2004:
https://github.com/Links2004/arduinoWebSockets.git
Quy định lệnh giao tiếp Serial để Arduino gửi dữ liệu cho NodeMCU như sau: một lệnh gồm có tên lệnh, dữ liệu và được kết thúc bằng kí tự xuống dòng ‘\n’. (Dữ liệu gửi theo kiểu JSON, đây là một kiểu dữ liệu mở trong javaScript.)
72 Mẫu lệnh giao tiếp Serial như sau:
• Mô phỏng led:
o “leds:[val1, val2, val3, …]\n”
o leds:[1,0,1,0]\n
o Để reset - leds:\n • Biểu đồ cột: barChart
o “barChart:{“key1”:val1, “key2”: val2, …}\n”
o barChart:{"Red":10,"Blue":60,"Yellow":50,"Green":90,"Purple":30 }\n
o Để reset - barChart:\n
• Biểu đồ đường (nhãn trục thời gian là thời điểm mà server nhận được dữ liệu): o “lineChart:value\n” o lineChart:99\n o Để reset - lineChart:\n • Bảng dữ liệu: o “table:{“key1”:[val1,note1], “key2”:[val2,note2], …}\n” o table:{"Tốc độ": [80, "km/h"], "Nhiệt độ":[85,"°C"]}\n o Để reset - table:\n
Các thông số cần cài đặt trước khi nạp chương trình cho NodeMCU D1 mini:
Hình 4.24. Cài đặt chương trình socket client esp8266
Khi nhập địa chỉ trên trình duyệt web nếu không khai báo port kết nối thì mặc định là port 80. Nếu sử dụng socket server cục bộ, esp8266 phải được kết nối chung mạng với máy chủ, host là địa chỉ ip máy chủ và port là cổng kết nối server. Nếu sử dụng socket
73 server nhóm đã tạo thì cài đặt thông số như hình trên. Sau khi nạp chương trình nếu mạch kết nối với server thành công (bao gồm kết nối wifi và kết nối tới server) led trên mạch sẽ sáng, nếu mất kết nối led sẽ tắt và chương trình có khả năng tự kết nối lại nếu có vấn đề mạng xảy ra.
Trước khi kết nối NodeMCU đã nạp chương trình với mạch Arduino, tương tự lập trình với mạch Arduino thông thường có thể dùng công cụ Serial Monitor để gửi dữ liệu cho mạch để kiểm thử chương trình (Gửi lệnh theo mẫu quy định sẵn).
Hình 4.25. Kiểm thử chương trình socket client trên NodeMCU D1 mini
Bây giờ, có thể sử dụng mạch NodeMCU này kết nối với mạch Arduino hoặc bất kỳ VĐK nào khác và chỉ cần lập trình gửi dữ liệu UART theo quy định sẵn cho NodeMCU thì dữ liệu sẽ được truyền lên cho server lưu trữ và hiển thị trên các trình duyệt web (quy định trên có thể tùy biến lại để phù hợp với nhu cầu thực tế). Với giao thức websocket tốc
74 độ phản hồi sẽ tùy thuộc vào tốc độ mạng kết nối, tốc độ xử lý của máy chủ chạy server, trong điều kiện tốt thì độ trễ cực thấp có thể “realtime” dữ liệu.
Chương trình mẫu Arduino
Như đã trình bày, dữ liệu gửi được quy định theo kiểu JSON theo mẫu đã đề cập, điều này có thể gây khó khăn trong việc định dạng dữ liệu. Để giải quyết vấn đề này, có thể sử dụng thư viện ArduinoJson của tác giả bblanchon để định dạng dữ liệu JSON đơn giản hơn.
Thư viện này tối ưu về tốc độ xử lý, bộ nhớ và nhiều tính năng hơn cả thư viện
chuẩn Arduino_JSON do Arduino cung cấp
(https://arduinojson.org/news/2019/11/19/arduinojson-vs-arduino_json/). Ngoài ra còn được cung cấp tài liệu hướng dẫn khá đầy đủ và chi tiết do đó được sử dụng khá phổ biến.
https://arduinojson.org/
https://github.com/bblanchon/ArduinoJson.git
Chương trình mẫu cho mạch Arduino nano, uno sử dụng thư viện trên để định dạng và gửi dữ liệu cho NodeMCU với chú thích đầy đủ được đặt trong thư mục “03. arduino”.
WebServer NodeMCU
Ưu điểm của mô hình web socket nhóm đã xây dựng có thể xây dựng được giao diện web đẹp tùy vào sự sáng tạo, có thể đa dạng cách hiển thị và biễu diễn dữ liệu, số lượng kết nối không hạn chế… Tuy nhiên có những nhược điểm có thể thấy là phải có máy chủ để đặt server, phải có một hệ thống mạng kết nối có thể là mạng cục bộ hoặc yêu cầu kết nối internet. Điều này có thể rất khó khăn trong việc cài đặt, lập trình nếu vừa tiếp cận hay muốn sử dụng nhanh. Chính vì thế, nhóm đã xây dựng một chương trình Web Server có thể chạy ngay trên mạch esp8266, không cần thực hiện cài đặt Arduino IDE, lập trình khởi chạy server và có thể sử dụng trong khu vực không thể kết nối mạng.
Mạch esp8266 ngoài khả năng kết nối wifi còn có thể là một trạm phát wifi di động cho các thiết bị kết nối và tương tự như một web server mạch cũng có khả năng tự phân phối cung cấp các tệp tin, tài nguyên cho các trình duyệt web.
75
Mô hình kết nối
Web Server ESP8266
Arduino Trình duyệt WEB
(Máy tính, điện thoại...)
Internet Serial
Hình 4.26. Mô hình web server sử dụng esp8266
Phân tích mô hình:
• Tương tự ở tầng cao nhất là web server chạy trên mạch esp8266.
• Mạch esp8266 sẽ phát wifi cho các thiết bị kết nối và sử dụng trình duyệt web để quan sát dữ liệu.
• Về giao thức giao tiếp giữa Arduino và esp8266 vẫn sử dụng Serial tuy nhiên sẽ thay đổi quy định định dạng dữ liệu để phù hợp hơn.
Mạch esp8266 không thể có cấu hình mạch mẽ như các máy tính dùng để chạy server, chương trình trên esp8266 phải được tối ưu về tốc độ xử lý nên giao diện web phải được tối giản, không thể sử dụng các thư viện hỗ trợ để dựng giao diện hay xây dựng đa dạng các loại biểu đồ, số lượng kết nối quá nhiều có thể gây ra chậm trễ. Tuy nhiên, quá trình nhóm kiểm thử mô hình web server sử dụng NodeMCU trên vẫn có thể đáp ứng tốt cho 5 thiết bị kết nối cùng lúc và vẫn còn có thể đáp ứng được thêm kết nối.
Toàn bộ mã nguồn chương trình của mô hình:
https://github.com/mnaduc/WebServer_esp8266_doan.git
Web server – Nạp chương trình cho NodeMCU
Để nạp firmware cho NodeMCU cần sử dụng phần mềm NodeMCU flasher, lựa chọn phiên bản phần mềm tương ứng trong thư mục Win32/Release hoặc Win64/Release.
https://github.com/nodemcu/nodemcu-flasher
76
Hình 4.27. Thư mục “01. Firmware_ NodeMCU”
Thực hiện kết nối mạch NodeMCU với máy tính và khởi chạy trực tiếp chương trình NodeMCU flasher không cần cài đặt. Vào tab config và chọn file “firmware.bin”.
Hình 4.28. tab Config (NodeMCU flasher)
Chỉnh sửa các cài đặt trong tab Advanced như sau:
Hình 4.29. tab Advanced (NodeMCU flasher)
Quay trở về tab Operation, chương trình sẽ tự nhận cổng COM hoặc có thể lựa chọn cổng kết nối nếu có nhiều thiết bị, nhấn nút Flash để thực hiện nạp chương trình.
77
Hình 4.30. tab Operation (NodeMCU flasher)
Chương trình sẽ nhận địa chỉ MAC xong đó sẽ thực hiện quá trình nạp chương trình cho mạch NodeMCU. Sau khi hoàn thành, ngắt nguồn cấp và khởi động lại mạch NodeMCU, đèn trên mạch (GPIO2) sáng lên nghĩa là chương trình đã được nạp thành công. Tốc độ giao tiếp cổng Serial chương trình sử dụng là 115200.
Các giao diện web
Để thực hiện kết nối với web server, các thiết bị cần kết nối với wifi do NodeMCU phát ra. Thông tin wifi:
• Tên Wifi: ESP_SPKT
• Mật khẩu: mnaduc@gmail.com
Địa chỉ IP cấp phát cho các thiết bị kết nối với wifi do esp8266 có dạng 192.168.4.xxx. Với 192.168.4.1 là địa chỉ mặc định của esp8266 và cũng là địa chỉ IP của web server. Nhóm đã xây dựng hai giao diện web để hỗ trợ hiện thị dữ liệu như sau.
4.3.3.1. Giao diện web Serial
Giao diện web Serial (địa chỉ truy cập: 192.168.4.1) nhóm đã xây dựng dựa trên công cụ Serial Monitor của Arduino, bao gồm các chức năng:
• Kiểm tra kết nối bằng cách điểu khiển bật tắt led trên mạch.
• Nhận dữ liệu: Các dữ liệu mà NodeMCU nhận được qua giao tiếp Serial theo định dạng:
o “S:data\n” - data sẽ được gửi cho web Serial để hiển thị và xuống dòng mới (S là chữ cái đầu của String).
78
o Ví dụ: “S: Đây là demo data\n” thì web Serial sẽ hiển thị thông báo “Đây là demo data” và xuống dòng mới.
o Tương tự mạch Arduino gửi thông báo cho màn hình Serial Monitor. • Gửi dữ liệu: Tương tự việc sử dụng Serial Monitor để gửi dữ liệu cho mạch Arduino. Khi web gửi chuỗi cho NodeMCU sẽ tự động thêm ký tự xuống dòng ‘\n’ vào cuối chuỗi và gửi lại toàn bộ chuỗi ra cổng Serial. Ngoài ra để xác nhận đã gửi dữ liệu thành công sẽ có thông báo trả về, các thông báo trả về sẽ có thêm dấu ‘*’ đánh dấu để phân biệt với các dữ liệu nhận.
Tương tự cũng có thể sử dụng công cụ Serial Monitor để kiểm thử chương trình trước khi kết nối với các mạch Arduino hay các VĐK:
Hình 4.31. Kiểm thử web Serial
4.3.3.2. Giao diện web Data
Giao diện web data (địa chỉ truy cập: 192.168.4.1/data) được xây dựng để hiển thị, biểu diễn dữ liệu trực quan hơn. Tương tự mô hình web soket sẽ có các dạng hiển thị như mô phỏng leds cho tín hiệu digital, biểu đồ cột và liệt kê dữ liệu dạng bảng.
Quy định định dạng dữ liệu gửi để hiển thị trên web data: “J:data\n” (J là chữ cái đầu JSON). Data là chuỗi JSON có định dạng sau:
79 Trong đó:
• digital là mảng giá trị digital d1, d2, d3, d4 để mô phỏng bật tắt 4 đèn led • analog là mảng giá trị analog để vẽ biểu đồ cột (theo giá trị %), và các giá trị
phần trăm a1, a2, a3, a4 phải nhân thêm với 100. Ví dụ: để hiển thị 85.35% thì giá trị gửi là 8535, 100% thì giá trị gửi là 10000.
• Các giá trị khác theo cấu trúc key:value sẽ được dùng để hiển thị trong bảng giá trị.
Có thể data gửi thiếu các thành phần digital, analog nhưng bảng thông số sẽ được cập nhật liên tục do đó nếu gửi thiếu một key:value giá trị đó sẽ bị xóa ra khỏi bảng.
Hình 4.32. Giao diện web data trên điện thoại và máy tính
{ “digital”:[d1,d2,d3,d4], “analog”:[a1,a2,a3,a4], “key1”:value1, “key2”:value2, “key3”:value3, …. }
80
Chương trình mẫu Arduino
Tương tự chương trình mẫu Arduino ở phần web socket, nhóm đã viết chương trình mẫu cho mạch Arduino nano, uno sử dụng thư viện ArduinoJson đã đề cập để định dạng và gửi dữ liệu cho NodeMCU với chú thích đầy đủ đặt trong thư mục “02. arduino”.
Kết quả chương trình mẫu (web Serial và web Data) sau khi kết nối với NodeMCU.
81
Chương 5. KẾT QUẢ ĐẠT ĐƯỢC SAU KHI THỰC HIỆN ĐỒ ÁN Các kết quả và sản phẩm thu được sau khi thực hiện đồ án
Sau quá trình thực hiện đồ án tốt nghiệp, nhóm đã thu được các kết quả sau: • Hệ thống các bài học cho môn Thực tập lập trình điều khiển ô tô.
• Ba thư viện Arduino nhóm đã tạo sẵn cung cấp đầy đủ các kỹ thuật và lưu đồ thuật toán được sử dụng, chương trình mẫu và hướng dẫn sử dụng đi kèm:
o Thư viện Button để sử dụng nút nhấn bao gồm lọc nhiễu và xử lý sự kiện nút nhấn digital.
o Thư viện AnalogButton được phát triển dựa trên thư viện Button để sử dụng cho các nút nhấn analog.
o Thư viện Led7 để sử dụng nhanh led 7 đoạn.
• Hai mô hình Web Server để hỗ trợ hiển thị dữ liệu phục vụ quá trình dạy học, thực hành và sử dụng trên các mô hình:
o Mô hình Web Socket sử dụng mạng cục bộ hoặc internet.
o Mô hình Web Server chạy trên mạch NodeMCU (ESP8266).
Đánh giá các kết quả và sản phẩm thu được.
Hệ thống các bài học cho môn Thực tập lập trình điều khiển ô tô nhóm biên soạn và được sự hỗ trợ tận tình của thầy GVHD Ths Nguyễn Trọng Thức đã thực hiện rất nhiều lần điều chỉnh, chỉnh sửa về nội dung và cấu trúc bài học để các bạn học có thể dễ dàng tiếp cận, tìm hiểu và thực hành. Nội dung đã đáp ứng cung cấp được những kiến thức cơ bản cần thiết và đề cập đến nhiều vấn đề mở rộng khi lập trình điều khiển ô tô tuy nhiên vì hạn chế về thời gian thực hiện, khó khăn do việc giãn cách xã hội, tiếp cận các thiết bị, mô hình nên nhóm chưa thể hoàn thiện trọn vẹn các nội dung sau:
• Nội dung áp dụng thực tế, lập trình sử dụng với các thiết bị, cảm biến thật trên xe như cảm biến nhiệt độ nước làm mát, bướm ga, đo tốc độ động cơ, xác định vị trí răng khuyết, lập trình thời điểm đánh lửa…
• Một số nội dung còn thiếu có thể đưa vào bài học như lập trình động cơ bước, sử dụng các loại màn hình hiển thị lcd, tft…, lưu trữ dữ liệu khi VĐK mất điện, nội dung hướng dẫn thực hành, bài tập tự kiểm…
82 • Các thiết bị, cảm biến trong các bài học còn được sử dụng và kết nối mạch riêng lẻ chưa được sắp xếp thành một mô hình học tập để tiết kiệm thời gian chuẩn bị, sử dụng thuận tiện và hạn chế các sai sót trong quá trình thực hành. Các thư viện nhóm đã tạo ra đã được kiểm thử và hoạt động tốt trên nhiều các nút