Nano 33 IoT + EC / pH / ORP + WebAPK: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Bởi ufireFollow More của tác giả:

Giới thiệu: Thêm khả năng đo pH, ORP, EC hoặc độ mặn vào dự án Arduino hoặc Raspberry Pi của bạn. Thông tin thêm về ufire »

Một thiết bị để đo EC, pH, ORP và nhiệt độ. Nó có thể được sử dụng để giám sát hồ bơi hoặc thiết lập thủy canh. Nó sẽ giao tiếp qua Bluetooth Low Energy và hiển thị thông tin trên trang web bằng Web Bluetooth. Và để cho vui, chúng tôi sẽ biến ứng dụng này thành một Ứng dụng web tiến bộ mà bạn có thể cài đặt từ web.

Bước 1: Tất cả các điều khoản đó là gì?

EC / pH / ORP / nhiệt độ là một số phép đo chất lượng nước phổ biến nhất. Độ dẫn điện (EC) được sử dụng trong thủy canh để đo dung dịch dinh dưỡng, độ pH cho mức độ axit / bazơ của nước và ORP được sử dụng để giúp xác định khả năng tự khử trùng của nước

• Bluetooth Low Energy là một giao thức không dây để dễ dàng gửi và nhận thông tin. Bo mạch Arduino được sử dụng trong dự án này là Nano 33 IoT và đi kèm với các giao diện WiFi và BLE.
• Web Bluetooth là một tập hợp các API được triển khai trong trình duyệt Chrome của Google (và Opera) cho phép một trang web giao tiếp trực tiếp với thiết bị BLE.
• Ứng dụng web tiến bộ về cơ bản là các trang web hoạt động giống như các ứng dụng thông thường. Android và iPhone xử lý chúng khác nhau và chúng khác nhau trên máy tính để bàn, vì vậy bạn sẽ cần phải đọc một chút để biết chi tiết cụ thể.

Bước 2: Phần cứng

Trước khi chúng tôi có thể lắp ráp phần cứng, có một điều cần giải quyết. Các thiết bị cảm biến ISE uFire có cùng địa chỉ I2C và chúng tôi đang sử dụng hai địa chỉ, vì vậy sẽ phải thay đổi một địa chỉ. Đối với dự án này, chúng tôi sẽ chọn một trong các bảng ISE và sử dụng nó để đo ORP. Làm theo các bước ở đây, thay đổi địa chỉ thành 0x3e.

Bây giờ địa chỉ đã được thay đổi, việc lắp các phần cứng lại với nhau rất dễ dàng. Tất cả các thiết bị cảm biến đều sử dụng hệ thống kết nối Qwiic nên chỉ cần kết nối mọi thứ với nhau trong một chuỗi. Bạn sẽ cần một dây Qwiic to Male để kết nối một trong các cảm biến với Nano 33. Các dây đồng nhất và được mã hóa bằng màu sắc. Kết nối màu đen với GND của Nano, màu đỏ với chân + 3.3V hoặc + 5V, màu xanh lam với chân SDA là A4 và màu vàng với chân SCL trên A5.

Đối với dự án này, nó sẽ mong đợi thông tin nhiệt độ đến từ cảm biến EC, vì vậy hãy đảm bảo gắn cảm biến nhiệt độ vào bảng EC. Tất cả các bo mạch đều có khả năng đo nhiệt độ. Đừng quên gắn các đầu dò EC, pH và ORP vào các cảm biến thích hợp. Chúng dễ dàng được gắn với các đầu nối BNC.

Nếu bạn có một bao vây, đặt tất cả những thứ này vào bên trong sẽ là một ý tưởng hay, đặc biệt là khi xem xét nước sẽ có liên quan.

Bước 3: Phần mềm

Phần mềm của phần mềm này được chia thành hai phần chính: phần sụn trên Nano 33 và trang web.

Quy trình cơ bản là:

• Trang web kết nối với Nano thông qua BLE
• Trang web gửi các lệnh dựa trên văn bản để yêu cầu thông tin hoặc thực hiện các hành động
• Nano lắng nghe các lệnh đó, thực thi chúng và trả về thông tin
• Trang web nhận được phản hồi và cập nhật giao diện người dùng cho phù hợp

Thiết lập này cho phép trang web thực hiện tất cả các chức năng cần thiết mà bạn mong đợi, chẳng hạn như thực hiện phép đo hoặc hiệu chỉnh các cảm biến.

Bước 4: Các dịch vụ và đặc điểm của BLE

Một trong những điều đầu tiên cần học là những kiến thức cơ bản về cách hoạt động của BLE.

Có rất nhiều phép loại suy, vì vậy chúng ta hãy chọn một cuốn sách. Một dịch vụ sẽ là một cuốn sách, và một đặc điểm sẽ là các trang. Trong "sách BLE" này, các trang có một số thuộc tính không phải sách như có thể thay đổi nội dung của trang và nhận thông báo khi điều đó xảy ra.

Một thiết bị BLE có thể tạo ra nhiều dịch vụ như nó muốn. Một số được xác định trước và hoạt động như một cách để chuẩn hóa thông tin thường được sử dụng như Tx Power hoặc mất kết nối, với những thứ cụ thể hơn như Insulin hoặc Pulse Oximetry. Bạn cũng có thể tạo một cái và làm bất cứ điều gì bạn muốn với nó. Chúng được xác định trong phần mềm và được xác định bằng UUID. Bạn có thể tạo UUID tại đây.

Trong phần sụn cho thiết bị này, có một dịch vụ, được định nghĩa là:

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");

và hai đặc điểm:

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

Tx_Characteristic sẽ là nơi các thiết bị gửi thông tin, chẳng hạn như các phép đo EC, để trang web hiển thị. Rx_Characteristic là nơi nó sẽ nhận các lệnh từ trang web để thực thi.

Dự án này sử dụng thư viện ArduinoBLE. Nếu bạn quan sát, bạn sẽ thấy có một vài điểm khác nhau trong việc khai báo một đặc tính. Dự án này sử dụng BLEStringCharacteristic vì chúng tôi sẽ xử lý kiểu Chuỗi và nó dễ dàng hơn, nhưng bạn cũng có thể chọn BLECharCharacteristic hoặc BLEByteCharacteristic từ một số ít người khác.

Ngoài ra, có một số thuộc tính bạn có thể đưa ra đặc tính. tx_Characteristic có BLENotify như một tùy chọn. Điều đó có nghĩa là trang web của chúng tôi sẽ nhận được thông báo khi giá trị của nó thay đổi. rx_Characteristic có BLEWrite sẽ cho phép trang web của chúng tôi sửa đổi nó. Co nhung nguoi khac.

Sau đó, có một chút keo mã để buộc tất cả những thứ này lại với nhau:

BLE.setLocalName ("uFire BLE");

BLE.setAdvertisedService (uFire_Service); uFire_Service.addCharacteristic (tx_Characteristic); uFire_Service.addCharacteristic (rx_Characteristic); BLE.addService (uFire_Service); rx_Characteristic.setEventHandler (BLEW write, rxCallback); BLE.advertise ();

Nó ít nhiều tự giải thích, nhưng chúng ta hãy xem xét một vài điểm.

rx_Characteristic.setEventHandler (BLEW write, rxCallback);

Là nơi bạn tận dụng khi được thông báo về việc giá trị bị thay đổi. Dòng báo cho lớp thực thi hàm rxCallback khi giá trị được thay đổi.

BLE.advertise ();

là những gì bắt đầu toàn bộ sự việc. Một thiết bị BLE sẽ định kỳ gửi một gói thông tin nhỏ thông báo rằng thiết bị đang ở đó và có sẵn để kết nối. Không có nó, nó sẽ vô hình.

Bước 5: Lệnh văn bản

Như đã đề cập trước đó, thiết bị này sẽ nói chuyện với trang web thông qua các lệnh văn bản đơn giản. Toàn bộ điều này là dễ dàng để thực hiện bởi vì công việc khó khăn đã được thực hiện. Các cảm biến uFire đi kèm với thư viện dựa trên JSON và MsgPack để gửi và nhận lệnh. Bạn có thể đọc thêm về các lệnh EC và ISE trên các trang tài liệu của chúng.

Dự án này sẽ sử dụng JSON vì nó dễ làm việc hơn một chút và có thể đọc được, không giống như định dạng MsgPack là định dạng nhị phân.

Đây là một ví dụ về cách tất cả liên kết với nhau:

• Trang web yêu cầu thiết bị đo EC bằng cách gửi ec (hoặc cụ thể hơn là viết ec vào đặc tính rx_Characteristic)
• Thiết bị nhận lệnh và thực hiện lệnh đó. Sau đó, nó sẽ gửi lại phản hồi có định dạng JSON của {"ec": 1.24} bằng cách ghi vào đặc tính tx_Characteristic.
• Trang web nhận thông tin và hiển thị nó

Bước 6: Trang web

Trang web cho dự án này sẽ sử dụng Vue.js cho giao diện người dùng. Không cần chương trình phụ trợ. Ngoài ra, để giữ cho mọi thứ đơn giản hơn một chút, không có hệ thống xây dựng nào được sử dụng. Nó được chia thành các thư mục thông thường, js cho javascript, css cho CSS, nội dung cho các biểu tượng. Phần html của nó không có gì đặc biệt. Nó sử dụng bulma.io để tạo kiểu và tạo giao diện người dùng. Bạn sẽ nhận thấy rất nhiều điều trong phần này. Nó thêm tất cả css và biểu tượng, nhưng cũng thêm một dòng cụ thể.

Đó là tải tệp tệp kê khai.json của chúng tôi, đây là điều tạo nên tất cả các nội dung PWA. Nó khai báo một số thông tin cho điện thoại của chúng tôi biết trang web này có thể được biến thành một ứng dụng.

Javascript là nơi hầu hết những điều thú vị xảy ra. Nó được chia thành các tệp, app.js chứa những điều cơ bản để có được một trang web Vue cùng với tất cả các biến liên quan đến giao diện người dùng và một số thứ khác. ble.js có công cụ bluetooth.

Bước 7: Javascript và Web Bluetooth

Đầu tiên, tính năng này chỉ hoạt động trên Chrome và Opera. Tôi ước các trình duyệt khác sẽ hỗ trợ điều này, nhưng vì bất kỳ lý do gì, chúng không hỗ trợ. Hãy xem app.js và bạn sẽ thấy những UUID tương tự mà chúng tôi đã sử dụng trong chương trình cơ sở của mình. Một cho Dịch vụ uFire và một cho các đặc tính tx và rx.

Bây giờ nếu bạn nhìn vào ble.js, bạn sẽ thấy các hàm connect () và ngắt kết nối ().

Hàm connect () chứa một số logic để giữ cho giao diện người dùng được đồng bộ, nhưng nó chủ yếu thiết lập mọi thứ để gửi và nhận thông tin về các đặc điểm.

Có một số đặc điểm riêng khi xử lý Web Bluetooth. Kết nối phải được bắt đầu bằng một số loại tương tác của người dùng vật lý, chẳng hạn như chạm vào một nút. Ví dụ: bạn không thể kết nối theo chương trình khi trang web được tải.

Mã để bắt đầu kết nối trông giống như sau:

this.device = await Navigator.bl Bluetooth.requestDevice ({

bộ lọc: [{namePrefix: "uFire"}], optionServices: [this.serviceUuid]});

Bộ lọc: và phần Dịch vụ tùy chọn là cần thiết để tránh nhìn thấy mọi thiết bị BLE ngoài đó. Bạn nghĩ chỉ cần phần bộ lọc là được, nhưng bạn cũng cần phần Dịch vụ tùy chọn.

Đoạn mã trên sẽ hiển thị hộp thoại kết nối. Nó là một phần của giao diện Chrome và không thể thay đổi được. Người dùng sẽ chọn từ danh sách. Ngay cả khi chỉ có một thiết bị mà ứng dụng từng kết nối, người dùng vẫn cần phải trải qua hộp thoại lựa chọn này, do lo ngại về bảo mật.

Phần còn lại của mã là thiết lập dịch vụ và đặc điểm. Hãy lưu ý rằng chúng tôi thiết lập một quy trình gọi lại, tương tự như gọi lại thông báo của chương trình cơ sở:

service = await server.getPrimaryService (this.serviceUuid);

đặc trưng = chờ service.getCharacteristic (this.txUuid); chờ đợi đặc tính.startNotifications (); đặc trưng.addEventListener ("đặc trưng giá trị thay đổi", this. giá_trị_mục_trục);

this.value_update bây giờ sẽ được gọi mỗi khi có thông tin mới về đặc tính tx.

Một trong những điều cuối cùng mà nó làm là đặt bộ đếm thời gian để cập nhật thông tin sau mỗi 5 giây.

value_update () chỉ là một hàm dài chờ thông tin JSON mới đến và cập nhật giao diện người dùng với nó.

ec.js, ph.js và orp.js chứa nhiều chức năng nhỏ gửi các lệnh để truy xuất thông tin và hiệu chỉnh thiết bị.

Để thử điều này, bạn cần lưu ý rằng để sử dụng Web Bluetooth, nó phải được cung cấp qua HTTPS. Một trong nhiều tùy chọn cho máy chủ HTTPS cục bộ là serve-https. Với phần sụn được tải lên, mọi thứ được kết nối và trang web đang được cung cấp, bạn sẽ có thể thấy mọi thứ hoạt động.

Bước 8: Phần PWA

Có một số bước để biến trang web thành một ứng dụng thực tế. Ứng dụng Web tiến bộ có thể làm được nhiều hơn những gì mà dự án này sử dụng.

• Cài đặt trang web
• Sau khi cài đặt, có thể truy cập ngoại tuyến
• Đã khởi động và chạy như một ứng dụng bình thường với biểu tượng ứng dụng trông thông thường

Để bắt đầu, chúng tôi sẽ cần tạo một loạt các tệp. Đầu tiên là tệp kê khai.json. Có một số trang web sẽ làm điều này cho bạn, App Manifest Generator, là một trong số đó.

Một số điều cần hiểu:

• Phạm vi ứng dụng là quan trọng. Tôi đặt trang web này tại ufire.co/uFire-BLE/. Điều đó có nghĩa là phạm vi ứng dụng của tôi là / uFire-BLE /.
• URL bắt đầu cũng quan trọng. Đây là đường dẫn đến trang web cụ thể của bạn với miền cơ sở đã được giả định. Vì tôi đặt điều này tại ufire.co/uFire-BLE/, nên URL bắt đầu cũng là / uFire-BLE /.
• Chế độ hiển thị sẽ xác định giao diện của ứng dụng, Chế độ độc lập sẽ làm cho ứng dụng có vẻ như là một ứng dụng thông thường mà không có bất kỳ nút hoặc giao diện Chrome nào.

Bạn sẽ kết thúc với một tệp json. Nó phải được đặt ở gốc của trang web, ngay cùng với index.html.

Điều tiếp theo bạn sẽ cần là một Nhân viên Dịch vụ. Một lần nữa, họ có thể làm được rất nhiều điều, nhưng dự án này sẽ chỉ sử dụng bộ nhớ đệm để cho phép ứng dụng này được truy cập ngoại tuyến. Việc triển khai service worker chủ yếu là boilerplate. Dự án này đã sử dụng ví dụ của Google và thay đổi danh sách các tệp được lưu vào bộ nhớ đệm. Bạn không thể lưu vào bộ nhớ cache các tệp bên ngoài miền của mình.

Đi tới Trình tạo FavIcon và tạo một số biểu tượng.

Điều cuối cùng là thêm một số mã trong hàm Vue mount ().

mount: function () {if ('serviceWorker' trong điều hướng) {Navigator.serviceWorker.register ('service-worker.js'); }}

Thao tác này sẽ đăng ký công nhân với trình duyệt.

Bạn có thể kiểm tra xem mọi thứ có đang hoạt động hay không, và nếu không, có thể tìm ra lý do bằng cách sử dụng Lighthouse, nó sẽ phân tích trang web và cho bạn biết tất cả mọi thứ.

Nếu mọi thứ đều hoạt động, khi bạn truy cập trang web, Chrome sẽ hỏi bạn có muốn cài đặt nó bằng biểu ngữ bật lên hay không. Bạn có thể thấy nó hoạt động tại ufire.co/uFire-BLE/ nếu bạn đang sử dụng Chrome dành cho thiết bị di động. Nếu bạn đang sử dụng máy tính để bàn, bạn có thể tìm thấy một mục menu để cài đặt nó.