Nano 33 IoT + EC/pH/ORP + WebAPK: 8 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

От ufire Следвайте още от автора:

За: Добавете възможността за измерване на рН, ORP, EC или соленост към вашия проект Arduino или Raspberry Pi. Повече за ufire »

Устройство за измерване на EC, pH, ORP и температура. Може да се използва за наблюдение на басейн или хидропонна инсталация. Той ще комуникира чрез Bluetooth Low Energy и ще показва информацията на уеб страница, използвайки Web Bluetooth. И за забавление ще превърнем това в прогресивно уеб приложение, което можете да инсталирате от мрежата.

Стъпка 1: Какви са всички тези условия?

EC/pH/ORP/температура са едни от най -често срещаните измервания на качеството на водата. Електрическата проводимост (EC) се използва в хидропониката за измерване на хранителен разтвор, рН за това колко кисела/алкална е водата, а ORP се използва, за да се определи способността на водата да се дезинфекцира

• Bluetooth Low Energy е безжичен протокол за лесно изпращане и получаване на информация. Платката Arduino, използвана в този проект, е Nano 33 IoT и се предлага с WiFi и BLE интерфейси.
• Web Bluetooth е набор от API, внедрени в браузъра Chrome на Google (и Opera), които позволяват на уеб страница да комуникира директно с BLE устройство.
• Прогресивните уеб приложения са основно уеб страници, които действат като обикновени приложения. Android и iPhone се справят с тях по различен начин и те са различни на настолните компютри, така че ще трябва да прочетете малко за подробности.

Стъпка 2: Хардуерът

Преди да можем да сглобим хардуера, трябва да обърнем внимание на едно нещо. Сензорните устройства uFire ISE идват със същия I2C адрес и ние използваме два, така че едното ще трябва да бъде сменено. За този проект ще изберем една от платките ISE и ще я използваме за измерване на ORP. Следвайки стъпките тук, променете адреса на 0x3e.

Сега, когато адресът е променен, сглобяването на хардуера е лесно. Всички сензорни устройства използват системата за свързване Qwiic, така че просто свържете всичко заедно във верига. Ще ви е необходим един проводник Qwiic към Male, за да свържете един от сензорите към Nano 33. Проводниците са последователни и цветно кодирани. Свържете черно към GND на Nano, червено към щифта +3.3V или +5V, синьо към щифта SDA, който е A4, и жълто към SCL щифта на A5.

За този проект той ще очаква информацията за температурата да идва от EC сензора, така че не забравяйте да прикрепите температурен сензор към EC платката. Всички дъски обаче имат възможност за измерване на температурата. Не забравяйте да прикрепите EC, pH и ORP сондите към съответните сензори. Те се закрепват лесно с BNC конектори.

Ако имате заграждение, поставянето на всичко това вътре би било добра идея, особено като се има предвид, че ще бъде включена вода.

Стъпка 3: Софтуерът

Софтуерната част от това е разделена на два основни раздела: фърмуера на Nano 33 и уеб страницата.

Основният поток е следният:

• Уеб страницата се свързва с Nano чрез BLE
• Уеб страницата изпраща текстови команди, за да поиска информация или да предприеме действия
• Nano изслушва тези команди, изпълнява ги и връща информация
• Уеб страницата получава отговорите и съответно актуализира потребителския интерфейс

Тази настройка позволява на уеб страницата да изпълнява всички необходими функции, които бихте очаквали, като например да направите измерване или да калибрирате сензорите.

Стъпка 4: BLE услуги и характеристики

Едно от първите неща, които трябва да научите, са основите на това как работи BLE.

Има много аналогии, така че нека изберем книга. Услугата би била книга, а характеристика - страниците. В тази „BLE книга“страниците имат няколко свойства, различни от книгите, като например да могат да променят думите на страницата и да получават известие, когато това се случи.

BLE устройството може да извършва толкова услуги, колкото иска. Някои от тях са предварително дефинирани и действат като начин за стандартизиране на често използвана информация като Tx Power или загуба на връзка към по -специфични неща като инсулин или пулсова оксиметрия. Можете също така просто да направите такъв и да правите с него каквото искате. Те са дефинирани в софтуера и са идентифицирани с 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.advertise ();

Това е повече или по-малко ясно от само себе си, но нека се докоснем до няколко точки.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Това е мястото, където се възползвате да бъдете уведомени за промяната на стойността. Редът казва на класа да изпълни функцията rxCallback при промяна на стойността.

BLE.advertise ();

е това, което започва всичко. Устройството BLE периодично ще изпраща малък пакет информация, обявяващ, че е там и е достъпен за свързване. Без него тя ще бъде невидима.

Стъпка 5: Текстови команди

Както бе споменато по -рано, това устройство ще говори с уеб страницата чрез прости текстови команди. Цялата работа е лесна за изпълнение, защото упоритата работа вече е свършена. Сензорите uFire се доставят с JSON и MsgPack базирана библиотека за изпращане и получаване на команди. Можете да прочетете повече за командите EC и ISE на техните страници с документация.

Този проект ще използва JSON, защото е малко по -лесен за работа и четене, за разлика от двоичния формат MsgPack.

Ето пример за това как всичко е свързано заедно:

• Уеб страницата изисква от устройството да измерва EC, като изпраща ec (или по -точно записва ec до rx_Characterrist характеристика)
• Устройството получава командата и я изпълнява. След това той изпраща обратно форматиран JSON отговор на {"ec": 1.24}, като записва към характеристиката tx_Characteristic.
• Уеб страницата получава информацията и я показва

Стъпка 6: Уеб страницата

Уеб страницата за този проект ще използва Vue.js за интерфейса. Не е необходим бекенд. Освен това, за да се опростят нещата, не се използва система за изграждане. Той е разделен на обичайните папки, js за javascript, css за CSS, активи за икони. Html частта от него не е нищо особено. Той използва bulma.io за оформяне и създава потребителски интерфейс. Ще забележите много в раздела. Той добавя всички css и икони, но също така добавя един ред по -специално.

Това зарежда нашия файл manifest.json, което прави всички PWA неща да се случват. Той декларира известна информация, която казва на нашия телефон, че тази уеб страница може да се превърне в приложение.

Javascript е мястото, където се случват повечето интересни неща. Разбит е на файлове, app.js съдържа основите за получаване на уеб страница Vue заедно с всички променливи, свързани с потребителския интерфейс, и няколко други неща. ble.js има неща за bluetooth.

Стъпка 7: Javascript и уеб Bluetooth

Първо, това работи само в Chrome и Opera. Иска ми се други браузъри да поддържат това, но по някаква причина те не го правят. Разгледайте app.js и ще видите същите UUID, които използвахме в нашия фърмуер. Един за услугата uFire и по един за характеристиките на tx и rx.

Сега, ако погледнете в ble.js, ще видите функциите connect () и disconnect ().

Функцията connect () съдържа известна логика за поддържане на потребителския интерфейс в синхрон, но най -вече настройва нещата за изпращане и получаване на информация за характеристиките.

Има някои особености при работа с уеб Bluetooth. Връзката трябва да бъде инициирана от някакъв вид физическо взаимодействие с потребителя, като докосване на бутон. Не можете да се свързвате програмно, когато уеб страницата е заредена, например.

Кодът за стартиране на връзка изглежда така:

this.device = изчакайте navigator.bluetooth.requestDevice ({

филтри: [{namePrefix: "uFire"}], незадължителни услуги: [this.serviceUuid]});

Разделите филтри: и незадължителни услуги са необходими, за да се избегне виждането на всяко едно BLE устройство там. Бихте си помислили, че само филтърната секция би била добре, но имате нужда и от опционалната част Services.

Горният код ще покаже диалогов прозорец за връзка. Той е част от интерфейса на Chrome и не може да се променя. Потребителят ще избере от списъка. Дори ако има само едно устройство, с което някога приложението ще се свърже, потребителят все още трябва да премине през този диалогов прозорец за избор, поради съображения за сигурност.

Останалата част от кода е настройка на услугата и характеристики. Обърнете внимание, че ние създадохме процедура за обратно извикване, подобна на функцията за обратно извикване при известия на фърмуера:

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

character = await service.getCharacteristic (this.txUuid); изчакайте character.startNotifications (); karakteristika.addEventListener ("характеристика стойност променена", this.value_update);

this.value_update сега ще се извиква всеки път, когато има нова информация за характеристиката на tx.

Едно от последните неща, които прави, е да настрои таймер за актуализиране на информацията на всеки 5 секунди.

value_update () е просто дълга функция, която изчаква появата на нова JSON информация и актуализира потребителския интерфейс с нея.

ec.js, ph.js и orp.js съдържат много малки функции, които изпращат командите за извличане на информация и калибриране на устройствата.

За да опитате това, трябва да имате предвид, че за да използвате уеб Bluetooth, той трябва да се обслужва през HTTPS. Една от многото опции за локален HTTPS сървър е serve-https. С качения фърмуер, всичко свързано и уеб страницата, която се обслужва, трябва да можете да виждате всичко работещо.

Стъпка 8: Частта PWA

Има няколко стъпки, за да превърнете уеб страницата в истинско приложение. Прогресивните уеб приложения могат да направят много повече, отколкото този проект ги използва.

• Инсталиране на уеб страница
• Веднъж инсталиран е възможен офлайн достъп
• Стартира и работи като нормално приложение с редовно изглеждаща икона на приложение

За да започнете, ще трябва да генерираме куп файлове. Първият е файл 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 ().

монтирано: function () {if ('serviceWorker' в навигатора) {navigator.serviceWorker.register ('service-worker.js'); }}

Това ще регистрира работника в браузъра.

Можете да проверите дали всичко работи и ако не, може би ще разберете защо, като използвате Lighthouse, той ще анализира сайта и ще ви разкаже всякакви неща.

Ако всичко работи, когато отидете на уеб страницата, Chrome ще ви попита дали искате да го инсталирате с изскачащ банер. Можете да го видите в действие на адрес ufire.co/uFire-BLE/, ако използвате мобилен Chrome. Ако сте на работен плот, можете да намерите елемент от менюто, за да го инсталирате.