Nano 33 IoT + EC / pH / ORP + WebAPK: 8 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Sa pamamagitan ng ufireFollow Higit Pa ng may-akda:

Tungkol sa: Idagdag ang kakayahang sukatin ang pH, ORP, EC o kaasinan sa iyong proyekto ng Arduino o Raspberry Pi. Karagdagang Tungkol sa ufire »

Isang aparato upang masukat ang EC, PH, ORP, at temperatura. Maaari itong magamit upang subaybayan ang isang pool o hydroponic setup. Makikipag-usap ito sa pamamagitan ng Bluetooth Low Energy at ipapakita ang impormasyon sa isang webpage gamit ang Web Bluetooth. At para sa kasiyahan, gagawin namin itong isang Progressive Web App na maaari mong mai-install mula sa web.

Hakbang 1: Ano ang Lahat ng Mga Tuntunin na Iyon?

Ang EC / pH / ORP / temperatura ay ilan sa mga pinakakaraniwang sukat sa kalidad ng tubig. Ginagamit ang electrical conductivity (EC) sa hydroponics upang masukat ang solusyon sa pagkaing nakapagpalusog, pH para sa kung paano acidic / basic ang tubig, at ginagamit ang ORP upang matukoy ang kakayahan ng tubig na magdisimpekta ng sarili nito

• Ang Bluetooth Low Energy ay isang wireless protocol upang madaling magpadala at makatanggap ng impormasyon. Ang Arduino board na ginamit sa proyektong ito ay ang Nano 33 IoT at may kasamang mga interface ng WiFi at BLE.
• Ang Web Bluetooth ay isang hanay ng mga API na ipinatupad sa Chrome browser ng Google (at Opera) na nagpapahintulot sa isang webpage na direktang makipag-usap sa isang BLE device.
• Ang mga progresibong Web Apps ay karaniwang mga webpage na kumikilos tulad ng regular na apps. Ang hawakan ng Android at iPhone sa kanila nang magkakaiba, at magkakaiba ang mga ito sa mga desktop, kaya kakailanganin mong gumawa ng kaunting pagbabasa para sa mga detalye.

Hakbang 2: Ang Hardware

Bago namin mapagsama ang hardware, mayroong isang bagay na dapat tugunan. Ang mga aparato ng sensor ng uFire ISE ay mayroong parehong I2C address at gumagamit kami ng dalawa, kaya't ang isa ay kailangang mabago. Para sa proyektong ito, pipiliin namin ang isa sa mga board ng ISE at gamitin ito upang sukatin ang ORP. Kasunod sa mga hakbang dito, baguhin ang address sa 0x3e.

Ngayong nabago ang address, madali ang pagsasama-sama ng hardware. Ang lahat ng mga aparato ng sensor ay gumagamit ng Qwiic connect system kaya't ikonekta lamang ang lahat nang magkasama sa isang kadena. Kakailanganin mo ang isang Qwiic to Male wire upang ikonekta ang isa sa mga sensor sa Nano 33. Ang mga wire ay pare-pareho at naka-code ang kulay. Ikonekta ang itim sa GND ng Nano, pula sa alinman sa + 3.3V o + 5V pin, asul sa SDA pin na A4, at dilaw sa SCL pin sa A5.

Para sa proyektong ito, aasahan na ang impormasyon sa temperatura ay magmumula sa sensor ng EC, kaya tiyaking maglakip ng isang sensor ng temperatura sa board ng EC. Ang lahat ng mga board ay may kakayahang sukatin ang temperatura. Huwag kalimutang ikabit ang mga probe ng EC, PH at ORP sa mga naaangkop na sensor. Madali silang nakakabit sa mga konektor ng BNC.

Kung mayroon kang isang enclosure, paglalagay ng lahat ng ito sa loob ay isang magandang ideya, lalo na isinasaalang-alang ang tubig ay sasali.

Hakbang 3: Ang Software

Ang bahagi ng software na ito ay nahahati sa dalawang pangunahing seksyon: ang firmware sa Nano 33, at ang webpage.

Ang pangunahing daloy ay ito:

• Ang webpage ay kumokonekta sa Nano sa pamamagitan ng BLE
• Nagpadala ang webpage ng mga utos na nakabatay sa teksto upang humingi ng impormasyon o gumawa ng mga pagkilos
• Ang Nano ay nakikinig para sa mga utos na iyon, isinasagawa ang mga ito, at ibabalik ang impormasyon
• Tumatanggap ang webpage ng mga tugon at ina-update ang UI nang naaayon

Pinapayagan ng pag-setup na ito na magawa ng webpage ang lahat ng mga kinakailangang pagpapaandar na iyong inaasahan, tulad ng pagsukat o pag-calibrate sa mga sensor.

Hakbang 4: Mga Serbisyo at Katangian ng BLE

Ang isa sa mga unang natutunan ay ang mga pangunahing kaalaman sa kung paano gumagana ang BLE.

Mayroong maraming mga pagkakatulad, kaya't pumili ng isang libro. Ang isang serbisyo ay magiging isang libro, at ang isang katangian ay ang mga pahina. Sa "aklat na BLE" na ito, ang mga pahina ay may ilang mga pag-aari na hindi pang-libro tulad ng kakayahang baguhin ang sinabi ng pahina at makatanggap ng isang abiso kapag nangyari ito.

Ang isang BLE aparato ay maaaring gumawa ng maraming mga serbisyo hangga't gusto nito. Ang ilan ay paunang natukoy at kumilos bilang isang paraan upang gawing pamantayan ang karaniwang ginagamit na impormasyon tulad ng Tx Power o pagkawala ng isang koneksyon, sa mas tiyak na mga bagay tulad ng Insulin o Pulse Oximetry. Maaari ka ring gumawa ng isa at gawin ang anumang nais mo dito. Ang mga ito ay tinukoy sa software at nakilala sa isang UUID. Maaari kang gumawa ng mga UUID dito.

Sa firmware para sa aparatong ito, mayroong isang serbisyo, na tinukoy bilang:

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

at dalawang katangian:

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

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

Ang tx_Characteristic ay magiging kung saan ang mga aparato ay nagpapadala ng impormasyon, tulad ng mga pagsukat ng EC, upang maipakita ang webpage. Ang rx_Characteristic ay kung saan makakatanggap ito ng mga utos mula sa webpage upang maisagawa.

Gumagamit ang proyektong ito ng ArduinoBLE library. Kung titingnan mo, makikita mo na may iba't ibang pares ay upang ideklara ang isang katangian. Gumagamit ang proyektong ito ng BLEStringCharacteristic dahil haharapin namin ang uri ng String at mas madali lang ito, ngunit maaari mo ring mapili ang BLECharCharacteristic o BLEByteCharacteristic mula sa ilang iba pa.

Bilang karagdagan, maraming mga pag-aari na maaari mong ibigay ang katangian. Ang tx_Characteristic ay may BLENotify bilang isang pagpipilian. Nangangahulugan iyon na makakatanggap ang aming webpage ng isang notification kapag nagbago ang halaga nito. Ang rx_Characteristic ay mayroong BLEWrite na magpapahintulot sa aming webpage na baguhin ito. May iba pa.

Pagkatapos mayroong isang kaunting code-glue upang maitali ang lahat ng bagay na ito:

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.advertise ();

Ito ay higit pa o mas mababa na nagpapaliwanag sa sarili, ngunit pindutin natin ang ilang mga puntos.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Ay kung saan mong samantalahin ng maabisuhan tungkol sa halagang binago. Sinasabi sa linya ang klase na ipatupad ang pagpapaandar rxCallback kapag ang halaga ay nabago.

BLE.advertise ();

ay kung ano ang nagsisimula ang buong bagay na nangyayari. Ang isang BLE aparato ay pana-panahong magpapadala ng isang maliit na packet ng impormasyon na nagpapahayag na ito ay naroroon at magagamit upang kumonekta. Kung wala ito, ito ay magiging hindi nakikita.

Hakbang 5: Mga Utos sa Teksto

Tulad ng nabanggit kanina, kakausapin ng aparatong ito ang webpage sa pamamagitan ng simpleng mga utos ng teksto. Ang buong bagay ay madaling ipatupad sapagkat ang pagsusumikap ay nagawa na. Ang mga sensor ng uFire ay may kasamang JSON at MsgPack based library para sa pagpapadala at pagtanggap ng mga utos. Maaari kang magbasa nang higit pa tungkol sa mga utos ng EC at ISE sa kanilang mga pahina ng dokumentasyon.

Gagamitin ng proyektong ito ang JSON dahil medyo madali itong magtrabaho kasama at mabasa, hindi katulad ng format na MsgPack na binary.

Narito ang isang halimbawa kung paano ito magkakasama:

• Hiningi ng webpage ang aparato para sa isang pagsukat ng EC sa pamamagitan ng pagpapadala ng ec (o mas partikular na pagsulat ng ec sa rx_Characteristic na katangian)
• Tumatanggap ang aparato ng utos at isinasagawa ito. Pagkatapos ay ibabalik nito ang isang naka-format na tugon na JSON na {"ec": 1.24} sa pamamagitan ng pagsulat sa tx_Characteristic na katangian.
• Tumatanggap ang webpage ng impormasyon at ipinapakita ito

Hakbang 6: Ang Webpage

Ang webpage para sa proyektong ito ay gagamit ng Vue.js para sa front-end. Hindi kailangan ng backend. Bilang karagdagan, upang mapanatili ang isang bagay na medyo simple, walang gagamit na system. Hinahati ito sa karaniwang mga folder, js para sa javascript, css para sa CSS, mga assets para sa mga icon. Ang bahagi ng html nito ay walang espesyal. Gumagamit ito ng bulma.io para sa estilo at lumilikha ng interface ng gumagamit. Marami kang mapapansin sa seksyon. Ang pagdaragdag ng lahat ng mga css at icon, ngunit nagdaragdag din ng isang linya sa partikular.

Iyon ang paglo-load ng aming manifest.json file na kung saan ay kung bakit ang lahat ng mga bagay-bagay PWA mangyari. Ito ay nagdedeklara ng ilang impormasyon na nagsasabi sa aming telepono ang webpage na ito ay maaaring gawing isang app.

Ang javascript ay kung saan nangyayari ang karamihan sa mga kagiliw-giliw na bagay. Hati ito sa mga file, naglalaman ang app.js ng mga pangunahing kaalaman sa pagkuha ng isang webpage ng Vue na kasama ang lahat ng mga variable na nauugnay sa UI at ilang iba pang mga bagay. Ang ble.js ay mayroong mga bluetooth na bagay.

Hakbang 7: Javascript at Web Bluetooth

Una, gagana lamang ito sa Chrome at Opera. Nais kong suportahan ito ng ibang mga browser, ngunit para sa anumang kadahilanan, hindi nila ito ginagawa. Tingnan ang app.js at makikita mo ang mga parehong UUID na ginamit namin sa aming firmware. Isa para sa Serbisyo uFire, at bawat isa para sa mga katangian ng tx at rx.

Ngayon kung titingnan mo ang ble.js, makikita mo ang mga function na kumonekta () at idiskonekta ().

Naglalaman ang pagpapaandar ng () pag-andar ng ilang lohika upang mapanatili ang pag-sync ng UI, ngunit kadalasang nagtatakda ito ng mga bagay upang maipadala at makatanggap ng impormasyon sa mga katangian.

Mayroong ilang mga idiosyncrasies kapag nakikipag-usap sa Web Bluetooth. Ang koneksyon ay dapat na pinasimulan ng ilang uri ng pakikipag-ugnay sa pisikal na gumagamit, tulad ng pag-tap sa isang pindutan. Hindi ka maaaring makakonekta nang maprograma kapag na-load ang webpage, halimbawa.

Ang code upang magsimula ng isang koneksyon ay ganito:

this.device = naghihintay sa navigator.blu Bluetooth.requestDevice ({

mga filter: [{namePrefix: "uFire"}], opsyonalServices: [this.serviceUuid]});

Ang mga filter: at opsyonal na seksyon ng Mga Serbisyo ay kinakailangan upang maiwasang makita ang bawat solong aparato ng BLE doon. Sa palagay mo ay ang seksyon ng filter lamang ay magiging maayos, ngunit kailangan mo rin ang opsyonal na Mga bahagi ng Mga Serbisyo din.

Ang code sa itaas ay magpapakita ng isang dayalogo sa koneksyon. Bahagi ito ng interface ng Chrome at hindi mababago. Pipili ang gumagamit mula sa listahan. Kahit na may isang aparato lamang na kumokonekta ang app, kailangan pa ring dumaan ang gumagamit sa dayalogo ng pagpili na ito, dahil sa mga alalahanin sa seguridad.

Ang natitirang code ay ang pag-set up ng serbisyo at mga katangian. Tandaan na nag-set up kami ng isang gawain sa callback, katulad ng callback ng notification ng firmware:

serbisyo = naghihintay sa server.getPrimaryService (this.serviceUuid);

katangian = naghihintay sa serbisyo.getCharacteristic (this.txUuid); naghihintay ng katangian.startNotifications (); katangian.addEventListener ("katangianvaluechanged", this.value_update);

tatawagin na ito.value_update tuwing may bagong impormasyon sa katangian na tx.

Ang isa sa mga huling bagay na ginagawa nito ay magtakda ng isang timer upang i-update ang impormasyon sa bawat 5 segundo.

Ang Value_update () ay isang mahabang pagpapaandar lamang na naghihintay para sa bagong impormasyong JSON na pumasok at ina-update ang UI kasama nito.

Ang mga ec.js, ph.js, at orp.js ay naglalaman ng maraming maliliit na pagpapaandar na nagpapadala ng mga utos upang makuha ang impormasyon at i-calibrate ang mga aparato.

Upang subukan ito, kakailanganin mong tandaan na upang magamit ang Web Bluetooth, dapat itong ihatid sa paglipas ng HTTPS. Ang isa sa maraming mga pagpipilian para sa isang lokal na server ng HTTPS ay maghatid-https. Sa pag-upload ng firmware, nakakonekta ang lahat, at hinahatid ang webpage, dapat mong makita ang lahat na gumagana.

Hakbang 8: Ang Bahagi ng PWA

Mayroong ilang mga hakbang upang gawing isang aktwal na app ang webpage. Ang progresibong Web Apps ay maaaring gumawa ng higit pa kaysa sa ginagamit ng proyektong ito ang mga ito.

• Pag-install ng webpage
• Kapag na-install na, posible ang offline na pag-access
• Nagsimula at tumatakbo bilang isang normal na app na may isang regular na hitsura na icon ng app

Upang makapagsimula, kakailanganin naming makabuo ng isang pangkat ng mga file. Ang una ay isang manif.json file. Mayroong isang maliit na bilang ng mga site na gagawin ito para sa iyo, App Manifest Generator, na isa sa mga ito.

Ang ilang mga bagay na dapat maunawaan:

• Mahalaga ang saklaw ng aplikasyon. Inilagay ko ang webpage na ito sa ufire.co/uFire-BLE/. Nangangahulugan iyon na ang saklaw ng aking aplikasyon ay / uFire-BLE /.
• Mahalaga rin ang Start URL. Ito ang landas sa iyong partikular na webpage na mayroon nang batayang domain na ipinapalagay. Kaya't dahil inilagay ko ito sa ufire.co/uFire-BLE/, ang start URL ay / uFire-BLE / din.
• Tutukuyin ng Display Mode kung paano ang hitsura ng app, ipapakita ito ng Standalone na isang regular na app nang walang anumang mga pindutan o interface ng Chrome.

Magtatapos ka sa isang json file. Dapat itong ilagay sa ugat ng webpage, kasama mismo ng index.html.

Ang susunod na kakailanganin mo ay isang Worker ng Serbisyo. Muli, marami silang magagawa, ngunit gagamitin lamang ng proyektong ito ang pag-cache upang hayaang ma-access ang app na ito offline. Ang pagpapatupad ng manggagawa ng serbisyo ay halos boilerplate. Ginamit ng proyektong ito ang halimbawa ng Google at binago ang listahan ng mga file upang ma-cache. Hindi ka maaaring mag-cache ng mga file sa labas ng iyong domain.

Tumungo sa FavIcon Generator at gumawa ng ilang mga icon.

Ang huling bagay ay upang magdagdag ng ilang mga code sa Vue mount () function.

naka-mount: function () {kung ('serviceWorker' sa navigator) {navigator.serviceWorker.register ('service-worker.js'); }}

Irehistro nito ang manggagawa sa browser.

Maaari mong suriin na ang lahat ay gumagana, at kung hindi, baka malaman kung bakit sa pamamagitan ng paggamit ng Lighthouse, susuriin nito ang site at sasabihin sa iyo ang lahat ng uri ng mga bagay.

Kung gumana ang lahat, kapag pumunta ka sa webpage, tatanungin ng Chrome kung nais mong i-install ito sa isang popup banner. Maaari mo itong makita sa pagkilos sa ufire.co/uFire-BLE/ kung nasa mobile Chrome ka. Kung nasa isang desktop ka, maaari kang makahanap ng isang item sa menu upang mai-install ito.