Nano 33 IoT + EC/pH/ORP + WebAPK: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

โดย ufireFollow เพิ่มเติมโดยผู้เขียน:

เกี่ยวกับ: เพิ่มความสามารถในการวัดค่า pH, ORP, EC หรือความเค็มให้กับโครงการ Arduino หรือ Raspberry Pi ของคุณ เพิ่มเติมเกี่ยวกับ ufire »

อุปกรณ์วัด EC, pH, ORP และอุณหภูมิ สามารถใช้เพื่อตรวจสอบการตั้งค่าสระน้ำหรือไฮโดรโปนิกส์ มันจะสื่อสารผ่าน Bluetooth Low Energy และแสดงข้อมูลบนเว็บเพจโดยใช้ Web Bluetooth และเพื่อความสนุก เราจะเปลี่ยนสิ่งนี้เป็น Progressive Web App ที่คุณสามารถติดตั้งจากเว็บได้

ขั้นตอนที่ 1: ข้อกำหนดเหล่านั้นทั้งหมดคืออะไร

EC/pH/ORP/อุณหภูมิเป็นการวัดคุณภาพน้ำทั่วไปบางส่วน การนำไฟฟ้า (EC) ใช้ในพืชไร้ดินเพื่อวัดสารละลายธาตุอาหาร ค่า pH สำหรับความเป็นกรด/ด่างของน้ำ และใช้ ORP เพื่อช่วยกำหนดความสามารถของน้ำในการฆ่าเชื้อตัวเอง

• Bluetooth Low Energy เป็นโปรโตคอลไร้สายสำหรับส่งและรับข้อมูลอย่างง่ายดาย บอร์ด Arduino ที่ใช้ในโครงการนี้คือ Nano 33 IoT และมาพร้อมกับอินเทอร์เฟซ WiFi และ BLE
• Web Bluetooth คือชุดของ API ที่ใช้ในเบราว์เซอร์ Chrome ของ Google (และ Opera) ที่อนุญาตให้หน้าเว็บสื่อสารกับอุปกรณ์ BLE ได้โดยตรง
• Progressive Web Apps เป็นหน้าเว็บที่ทำหน้าที่เหมือนแอปทั่วไป Android และ iPhone จัดการต่างกัน และบนเดสก์ท็อปต่างกัน ดังนั้นคุณจะต้องอ่านรายละเอียดเพิ่มเติมเล็กน้อย

ขั้นตอนที่ 2: ฮาร์ดแวร์

ก่อนที่เราจะประกอบฮาร์ดแวร์ มีสิ่งหนึ่งที่ต้องแก้ไข อุปกรณ์เซ็นเซอร์ uFire ISE มาพร้อมกับที่อยู่ I2C เดียวกัน และเราใช้สองที่อยู่ จึงต้องเปลี่ยนหนึ่งรายการ สำหรับโครงการนี้ เราจะเลือกหนึ่งในบอร์ด ISE และใช้เพื่อวัด ORP ทำตามขั้นตอนที่นี่ เปลี่ยนที่อยู่เป็น 0x3e

เมื่อมีการเปลี่ยนแปลงที่อยู่ การรวมฮาร์ดแวร์เข้าด้วยกันก็เป็นเรื่องง่าย อุปกรณ์เซ็นเซอร์ทั้งหมดใช้ระบบเชื่อมต่อ Qwiic ดังนั้นเพียงแค่เชื่อมต่อทุกอย่างเข้าด้วยกันเป็นลูกโซ่ คุณจะต้องใช้สาย Qwiic to Male เพื่อเชื่อมต่อเซ็นเซอร์ตัวใดตัวหนึ่งกับ Nano 33 สายไฟมีความสม่ำเสมอและมีรหัสสี เชื่อมต่อสีดำกับ GND ของ Nano สีแดงกับพิน +3.3V หรือ +5V สีน้ำเงินกับพิน SDA ซึ่งเป็น A4 และสีเหลืองกับพิน SCL บน A5

สำหรับโครงการนี้ คาดว่าข้อมูลอุณหภูมิจะมาจากเซ็นเซอร์ EC ดังนั้น อย่าลืมแนบเซ็นเซอร์อุณหภูมิเข้ากับบอร์ด EC กระดานทั้งหมดมีความสามารถในการวัดอุณหภูมิแม้ว่า อย่าลืมติดหัววัด EC, pH และ ORP เข้ากับเซ็นเซอร์ที่เหมาะสม สามารถติดตั้งได้ง่ายด้วยขั้วต่อ BNC

ถ้าคุณมีตู้ การวางทั้งหมดนี้ไว้ข้างในจะเป็นความคิดที่ดี โดยเฉพาะอย่างยิ่งการพิจารณาน้ำจะมีส่วนเกี่ยวข้อง

ขั้นตอนที่ 3: ซอฟต์แวร์

ส่วนซอฟต์แวร์ของสิ่งนี้แบ่งออกเป็นสองส่วนหลัก: เฟิร์มแวร์บน Nano 33 และหน้าเว็บ

การไหลพื้นฐานคือ:

• หน้าเว็บเชื่อมต่อกับนาโนผ่าน BLE
• หน้าเว็บจะส่งคำสั่งแบบข้อความเพื่อสอบถามข้อมูลหรือดำเนินการ
• นาโนรับฟังคำสั่งเหล่านั้น ดำเนินการ และส่งกลับข้อมูล
• หน้าเว็บได้รับการตอบกลับและอัปเดต UI ตามนั้น

การตั้งค่านี้ช่วยให้หน้าเว็บทำงานที่จำเป็นทั้งหมดที่คุณคาดหวังได้ เช่น ทำการวัดหรือปรับเทียบเซ็นเซอร์

ขั้นตอนที่ 4: บริการและลักษณะของ BLE

สิ่งแรกที่ต้องเรียนรู้คือพื้นฐานของวิธีการทำงานของ BLE

มีการเปรียบเทียบมากมาย ดังนั้นเรามาเลือกหนังสือกันเถอะ บริการจะเป็นหนังสือและลักษณะจะเป็นหน้า ใน "หนังสือ BLE" นี้ หน้าต่างๆ มีคุณสมบัติที่ไม่ใช่หนังสือบางหน้า เช่น สามารถเปลี่ยนสิ่งที่หน้าพูดและรับการแจ้งเตือนเมื่อเกิดขึ้นได้

อุปกรณ์ BLE สามารถให้บริการได้มากเท่าที่ต้องการ บางส่วนถูกกำหนดไว้ล่วงหน้าและทำหน้าที่เป็นวิธีสร้างมาตรฐานให้กับข้อมูลที่ใช้กันทั่วไป เช่น Tx Power หรือขาดการเชื่อมต่อกับสิ่งที่เจาะจงมากขึ้น เช่น Insulin หรือ Pulse Oximetry คุณยังสามารถสร้างมันขึ้นมาและทำทุกอย่างที่คุณต้องการ มีการกำหนดไว้ในซอฟต์แวร์และระบุด้วย UUID คุณสามารถสร้าง UUID ได้ที่นี่

ในเฟิร์มแวร์สำหรับอุปกรณ์นี้ มีหนึ่งบริการที่กำหนดเป็น:

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

และสองลักษณะ:

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

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

tx_Characteristic จะเป็นที่ที่อุปกรณ์ส่งข้อมูล เช่น การวัด EC เพื่อให้หน้าเว็บแสดง rx_Characteristic เป็นที่ที่มันจะได้รับคำสั่งจากหน้าเว็บเพื่อดำเนินการ

โครงการนี้ใช้ไลบรารี ArduinoBLE ถ้าคุณดู คุณจะเห็นว่ามีการประกาศคุณลักษณะที่แตกต่างกันสองสามอย่าง โปรเจ็กต์นี้ใช้ BLEStringCharacteristic เพราะเราจะจัดการกับประเภท String และมันง่ายกว่า แต่คุณสามารถเลือก BLECharCharacteristic หรือ BLEByteCharacteristic จากตัวเลือกอื่นๆ ได้

นอกจากนี้ยังมีคุณสมบัติบางอย่างที่คุณสามารถกำหนดลักษณะได้ tx_Characteristic มี BLENotify เป็นตัวเลือก นั่นหมายความว่าหน้าเว็บของเราจะได้รับการแจ้งเตือนเมื่อมูลค่าของมันเปลี่ยนไป rx_Characteristic มี BLEWrite ซึ่งจะทำให้หน้าเว็บของเราสามารถแก้ไขได้ มีคนอื่น.

จากนั้นมีโค้ดกาวเล็กน้อยเพื่อผูกสิ่งเหล่านี้เข้าด้วยกัน:

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 (BLEWritten, rxCallback); BLE.โฆษณา();

มันอธิบายตัวเองได้ไม่มากก็น้อย แต่ขอพูดถึงบางประเด็น

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

เป็นที่ที่คุณใช้ประโยชน์จากการได้รับแจ้งมูลค่าที่มีการเปลี่ยนแปลง บรรทัดบอกให้คลาสดำเนินการฟังก์ชัน rxCallback เมื่อค่ามีการเปลี่ยนแปลง

BLE.โฆษณา();

คือสิ่งที่เริ่มต้นสิ่งทั้งหมดที่เกิดขึ้น อุปกรณ์ BLE จะส่งข้อมูลเล็กๆ น้อยๆ เป็นระยะๆ เพื่อแจ้งให้ทราบว่ามีข้อมูลอยู่และพร้อมให้เชื่อมต่อ หากไม่มีมันก็จะมองไม่เห็น

ขั้นตอนที่ 5: คำสั่งข้อความ

ดังที่ได้กล่าวไว้ก่อนหน้านี้ อุปกรณ์นี้จะพูดคุยกับหน้าเว็บผ่านคำสั่งข้อความธรรมดา สิ่งทั้งหมดนั้นง่ายต่อการนำไปใช้เพราะงานหนักได้ทำไปแล้ว เซ็นเซอร์ uFire มาพร้อมกับไลบรารีที่ใช้ JSON และ MsgPack สำหรับการส่งและรับคำสั่ง คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคำสั่ง EC และ ISE ได้ในหน้าเอกสารประกอบ

โปรเจ็กต์นี้จะใช้ JSON เนื่องจากทำงานและอ่านได้ง่ายขึ้นเล็กน้อย ซึ่งแตกต่างจากรูปแบบ MsgPack ซึ่งเป็นไบนารี

ต่อไปนี้คือตัวอย่างความเชื่อมโยงทั้งหมดเข้าด้วยกัน:

• หน้าเว็บขอให้อุปกรณ์ทำการวัด EC โดยส่ง ec (หรือเขียน ec ให้เฉพาะเจาะจงมากขึ้นไปยังคุณลักษณะ rx_Characteristic)
• อุปกรณ์ได้รับคำสั่งและดำเนินการ จากนั้นจะส่งการตอบกลับในรูปแบบ JSON ของ {"ec":1.24} กลับมาโดยเขียนไปที่คุณลักษณะ tx_Characteristic
• หน้าเว็บได้รับข้อมูลและแสดงข้อมูลดังกล่าว

ขั้นตอนที่ 6: หน้าเว็บ

หน้าเว็บสำหรับโครงการนี้จะใช้ Vue.js สำหรับส่วนหน้า ไม่จำเป็นต้องมีแบ็กเอนด์ นอกจากนี้ เพื่อให้สิ่งต่าง ๆ ง่ายขึ้นเล็กน้อย จะไม่มีการใช้ระบบบิลด์ มันถูกแบ่งออกเป็นโฟลเดอร์ปกติ, js สำหรับ javascript, css สำหรับ CSS, สินทรัพย์สำหรับไอคอน ส่วน html ของมันไม่มีอะไรพิเศษ มันใช้ bulma.io สำหรับจัดแต่งทรงผมและสร้างส่วนต่อประสานกับผู้ใช้ คุณจะสังเกตเห็นได้มากในส่วนนี้ มันเพิ่ม css และไอคอนทั้งหมด แต่ยังเพิ่มหนึ่งบรรทัดโดยเฉพาะ

นั่นคือกำลังโหลดไฟล์ manifest.json ของเราซึ่งเป็นสิ่งที่ทำให้สิ่ง PWA ทั้งหมดเกิดขึ้น มันประกาศข้อมูลบางอย่างที่บอกโทรศัพท์ของเราว่าหน้าเว็บนี้สามารถเปลี่ยนเป็นแอพได้

จาวาสคริปต์เป็นที่ที่สิ่งที่น่าสนใจส่วนใหญ่เกิดขึ้น มันถูกแบ่งออกเป็นไฟล์ app.js มีพื้นฐานในการทำให้หน้าเว็บ Vue ไปพร้อมกับตัวแปรที่เกี่ยวข้องกับ UI ทั้งหมดและสิ่งอื่น ๆ อีกสองสามอย่าง ble.js มีสิ่งของบลูทูธ

ขั้นตอนที่ 7: Javascript และ Web Bluetooth

อย่างแรก ใช้งานได้กับ Chrome และ Opera เท่านั้น ฉันหวังว่าเบราว์เซอร์อื่นๆ จะสนับสนุนสิ่งนี้ แต่ด้วยเหตุผลใดก็ตาม เบราว์เซอร์เหล่านั้นไม่รองรับ ดูที่ app.js แล้วคุณจะเห็น UUID เดียวกันกับที่เราใช้ในเฟิร์มแวร์ของเรา หนึ่งรายการสำหรับบริการ uFire และหนึ่งรายการสำหรับคุณสมบัติ tx และ rx

ตอนนี้ ถ้าคุณดูใน ble.js คุณจะเห็นฟังก์ชัน connect() และ disconnect()

ฟังก์ชัน connect() มีตรรกะบางอย่างเพื่อให้ UI ซิงค์กัน แต่ส่วนใหญ่จะตั้งค่าให้ส่งและรับข้อมูลเกี่ยวกับคุณลักษณะ

มีความผิดปกติบางอย่างเมื่อต้องรับมือกับ Web Bluetooth การเชื่อมต่อต้องเริ่มต้นจากการโต้ตอบของผู้ใช้ทางกายภาพบางประเภท เช่น การแตะปุ่ม คุณไม่สามารถเชื่อมต่อโดยทางโปรแกรมเมื่อโหลดหน้าเว็บได้ เป็นต้น

รหัสสำหรับเริ่มการเชื่อมต่อมีลักษณะดังนี้:

this.device = รอ navigator.bluetooth.requestDevice ({

ตัวกรอง: [{ namePrefix: "uFire" }], optionalServices: [this.serviceUuid] });

จำเป็นต้องใช้ตัวกรอง: และส่วนบริการเสริมเพื่อหลีกเลี่ยงการเห็นอุปกรณ์ BLE ทุกเครื่อง คุณคิดว่าแค่ส่วนตัวกรองก็ใช้ได้ แต่คุณต้องมีส่วนบริการเสริมด้วยเช่นกัน

รหัสด้านบนจะแสดงกล่องโต้ตอบการเชื่อมต่อ เป็นส่วนหนึ่งของอินเทอร์เฟซ Chrome และไม่สามารถเปลี่ยนแปลงได้ ผู้ใช้จะเลือกจากรายการ แม้ว่าจะมีอุปกรณ์เพียงเครื่องเดียวที่แอปจะเชื่อมต่อ ผู้ใช้ยังคงต้องผ่านกล่องโต้ตอบการเลือกนี้ เนื่องจากปัญหาด้านความปลอดภัย

รหัสที่เหลือคือการตั้งค่าบริการและคุณสมบัติ โปรดทราบว่าเราได้ตั้งค่ารูทีนการโทรกลับ ซึ่งคล้ายกับการเรียกกลับการแจ้งเตือนของเฟิร์มแวร์:

บริการ = รอ server.getPrimaryService (this.serviceUuid);

ลักษณะเฉพาะ = รอ service.getCharacteristic(this.txUuid); รอลักษณะ.startNotifications(); feature.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update จะถูกเรียกทุกครั้งที่มีข้อมูลใหม่เกี่ยวกับคุณลักษณะ tx

สิ่งสุดท้ายที่มันทำคือตั้งเวลาให้อัปเดตข้อมูลทุก 5 วินาที

value_update() เป็นเพียงฟังก์ชันยาวๆ ที่รอให้ข้อมูล JSON ใหม่เข้ามาและอัปเดต UI ด้วย

ec.js, ph.js และ orp.js มีฟังก์ชันเล็กๆ มากมายที่ส่งคำสั่งเพื่อดึงข้อมูลและปรับเทียบอุปกรณ์

หากต้องการลองทำสิ่งนี้ คุณจะต้องจำไว้ว่าหากต้องการใช้ Web Bluetooth จะต้องให้บริการผ่าน HTTPS หนึ่งในตัวเลือกมากมายสำหรับเซิร์ฟเวอร์ HTTPS ในเครื่องคือ ให้บริการ-https เมื่ออัปโหลดเฟิร์มแวร์ ทุกอย่างที่เชื่อมต่อ และหน้าเว็บที่ให้บริการ คุณควรจะเห็นทุกอย่างทำงานได้

ขั้นตอนที่ 8: ส่วนการประปาส่วนภูมิภาค

มีไม่กี่ขั้นตอนในการเปลี่ยนหน้าเว็บให้เป็นแอปจริง Progressive Web Apps ทำได้มากกว่าที่โปรเจ็กต์นี้ใช้

• การติดตั้งหน้าเว็บ
• เมื่อติดตั้งแล้ว สามารถเข้าถึงออฟไลน์ได้
• เริ่มต้นและทำงานเป็นแอปปกติที่มีไอคอนแอปที่ดูปกติ

ในการเริ่มต้น เราจะต้องสร้างไฟล์จำนวนมาก ไฟล์แรกคือไฟล์ manifest.json มีเว็บไซต์ไม่กี่แห่งที่จะทำสิ่งนี้ให้คุณ ซึ่งก็คือ App Manifest Generator ซึ่งเป็นหนึ่งในนั้น

สองสามสิ่งที่ต้องเข้าใจ:

• ขอบเขตการสมัครมีความสำคัญ ฉันวางหน้าเว็บนี้ที่ ufire.co/uFire-BLE/ นั่นหมายความว่าขอบเขตแอปพลิเคชันของฉันคือ /uFire-BLE/
• URL เริ่มต้นก็มีความสำคัญเช่นกัน เป็นเส้นทางไปยังหน้าเว็บเฉพาะของคุณโดยถือว่าโดเมนหลักมีอยู่แล้ว เนื่องจากฉันใส่สิ่งนี้ไว้ที่ ufire.co/uFire-BLE/ URL เริ่มต้นคือ /uFire-BLE/ ด้วย
• โหมดแสดงผลจะกำหนดลักษณะที่ปรากฏของแอป โหมดสแตนด์อโลนจะทำให้แอปดูเหมือนเป็นแอปปกติโดยไม่มีปุ่มหรืออินเทอร์เฟซของ Chrome

คุณจะจบลงด้วยไฟล์ json ต้องวางไว้ที่รูทของหน้าเว็บพร้อมกับ index.html

สิ่งต่อไปที่คุณต้องการคือพนักงานบริการ อีกครั้ง พวกเขาสามารถทำอะไรได้มากมาย แต่โปรเจ็กต์นี้จะใช้การแคชเพื่อให้แอปนี้เข้าถึงแบบออฟไลน์เท่านั้น การใช้งานพนักงานบริการส่วนใหญ่เป็นแบบสำเร็จรูป โปรเจ็กต์นี้ใช้ตัวอย่างของ Google และเปลี่ยนรายการไฟล์ที่จะแคช คุณไม่สามารถแคชไฟล์นอกโดเมนของคุณได้

ตรงไปที่ FavIcon Generator และสร้างไอคอน

สิ่งสุดท้ายคือการเพิ่มโค้ดในฟังก์ชัน Vue mount()

ติดตั้ง: ฟังก์ชั่น () { ถ้า ('serviceWorker' ในตัวนำทาง) { navigator.serviceWorker.register ('service-worker.js'); } }

การดำเนินการนี้จะลงทะเบียนผู้ปฏิบัติงานด้วยเบราว์เซอร์

คุณสามารถตรวจสอบได้ว่าทุกอย่างใช้งานได้จริง และหากไม่เป็นเช่นนั้น ลองหาสาเหตุโดยใช้ Lighthouse เพื่อทำการวิเคราะห์ไซต์และบอกคุณทุกอย่าง

หากทุกอย่างทำงาน เมื่อคุณไปที่หน้าเว็บ Chrome จะถามว่าคุณต้องการติดตั้งด้วยแบนเนอร์ป๊อปอัปหรือไม่ คุณสามารถดูการใช้งานจริงได้ที่ ufire.co/uFire-BLE/ หากคุณใช้ Chrome สำหรับมือถือ หากคุณใช้เดสก์ท็อป คุณจะพบรายการเมนูเพื่อติดตั้ง