Nano 33 IoT + EC/pH/ORP + WebAPK: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

By ufireŚledź Więcej autora:

Informacje: Dodaj możliwość pomiaru pH, ORP, EC lub zasolenia do swojego projektu Arduino lub Raspberry Pi. Więcej o ufire »

Urządzenie do pomiaru EC, pH, ORP i temperatury. Może być używany do monitorowania basenu lub konfiguracji hydroponicznej. Będzie komunikować się przez Bluetooth Low Energy i wyświetlać informacje na stronie internetowej za pomocą Web Bluetooth. A dla zabawy przekształcimy to w progresywną aplikację internetową, którą możesz zainstalować z sieci.

Krok 1: Jakie są te wszystkie warunki?

EC/pH/ORP/temperatura to jedne z najczęstszych pomiarów jakości wody. Przewodność elektryczna (EC) jest wykorzystywana w hydroponice do pomiaru roztworu odżywczego, pH do określania kwaśności/zasadowości wody, a ORP służy do określania zdolności wody do dezynfekcji

• Bluetooth Low Energy to bezprzewodowy protokół umożliwiający łatwe wysyłanie i odbieranie informacji. Płytka Arduino użyta w tym projekcie to Nano 33 IoT i jest wyposażona w interfejsy WiFi i BLE.
• Web Bluetooth to zestaw interfejsów API zaimplementowanych w przeglądarce Google Chrome (i Operze), które umożliwiają stronie internetowej bezpośrednią komunikację z urządzeniem BLE.
• Progresywne aplikacje internetowe to zasadniczo strony internetowe, które działają jak zwykłe aplikacje. Android i iPhone radzą sobie z nimi inaczej i różnią się na komputerach stacjonarnych, więc musisz trochę poczytać, aby uzyskać szczegółowe informacje.

Krok 2: Sprzęt

Zanim będziemy mogli zmontować sprzęt, musimy zająć się jedną rzeczą. Czujniki uFire ISE mają ten sam adres I2C, a my używamy dwóch, więc jeden będzie musiał zostać zmieniony. W tym projekcie wybierzemy jedną z tablic ISE i użyjemy jej do pomiaru ORP. Postępując zgodnie z instrukcjami tutaj, zmień adres na 0x3e.

Teraz, gdy adres został zmieniony, składanie sprzętu jest łatwe. Wszystkie urządzenia czujnikowe korzystają z systemu Qwiic connect, więc po prostu połącz wszystko razem w łańcuch. Do podłączenia jednego z czujników do Nano 33 potrzebny jest jeden przewód Qwiic to Male. Przewody są spójne i oznaczone kolorami. Podłącz czarny do GND Nano, czerwony do pinu +3.3V lub +5V, niebieski do pinu SDA, który jest A4, a żółty do pinu SCL na A5.

W przypadku tego projektu będzie oczekiwał, że informacje o temperaturze będą pochodzić z czujnika EC, więc pamiętaj, aby podłączyć czujnik temperatury do płyty EC. Wszystkie deski posiadają jednak możliwość pomiaru temperatury. Nie zapomnij podłączyć sond EC, pH i ORP do odpowiednich czujników. Można je łatwo podłączyć za pomocą złączy BNC.

Jeśli masz wybieg, dobrym pomysłem byłoby umieszczenie tego wszystkiego w środku, zwłaszcza biorąc pod uwagę, że w grę wchodzi woda.

Krok 3: Oprogramowanie

Część oprogramowania jest podzielona na dwie główne sekcje: oprogramowanie układowe Nano 33 i stronę internetową.

Podstawowy przepływ to:

• Strona internetowa łączy się z Nano przez BLE
• Strona internetowa wysyła polecenia tekstowe, aby poprosić o informacje lub podjąć działania
• Nano nasłuchuje tych poleceń, wykonuje je i zwraca informacje
• Strona internetowa otrzymuje odpowiedzi i odpowiednio aktualizuje interfejs użytkownika

Ta konfiguracja umożliwia stronie internetowej wykonanie wszystkich wymaganych funkcji, takich jak wykonanie pomiaru lub kalibracja czujników.

Krok 4: Usługi i charakterystyka BLE

Jedną z pierwszych rzeczy, których należy się nauczyć, są podstawy działania BLE.

Istnieje wiele analogii, więc wybierzmy książkę. Usługa byłaby książką, a cechą charakterystyczną byłyby strony. W tej „książce BLE” strony mają kilka właściwości niebędących książkami, takich jak możliwość zmiany tego, co mówi strona i otrzymywanie powiadomienia, gdy to nastąpi.

Urządzenie BLE może wykonywać tyle usług, ile chce. Niektóre są predefiniowane i służą jako sposób na standaryzację powszechnie używanych informacji, takich jak moc Tx lub utrata połączenia, z bardziej szczegółowymi rzeczami, takimi jak insulina lub pulsoksymetria. Możesz też po prostu zrobić jeden i zrobić z nim, co chcesz. Są one zdefiniowane w oprogramowaniu i identyfikowane za pomocą UUID. Tutaj możesz utworzyć UUID.

W oprogramowaniu dla tego urządzenia znajduje się jedna usługa, zdefiniowana jako:

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

oraz dwie cechy:

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

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

tx_Characteristic to miejsce, w którym urządzenia wysyłają informacje, takie jak pomiary EC, do wyświetlenia na stronie internetowej. rx_Characteristic to miejsce, w którym otrzyma polecenia ze strony internetowej do wykonania.

Ten projekt wykorzystuje bibliotekę ArduinoBLE. Jeśli spojrzysz, zobaczysz, że istnieje kilka różnych sposobów określenia cechy. Ten projekt używa BLEStringCharacteristic, ponieważ będziemy mieli do czynienia z typem String i jest to po prostu łatwiejsze, ale możesz również wybrać BLECharCharacteristic lub BLEBayteCharacteristic spośród kilku innych.

Dodatkowo istnieje kilka właściwości, którym możesz nadać charakterystykę. tx_Characteristic ma BLENotify jako opcję. Oznacza to, że nasza strona internetowa otrzyma powiadomienie, gdy zmieni się jej wartość. rx_Characteristic posiada BLEWrite, który pozwoli naszej stronie na jego modyfikację. Są inni.

Następnie jest trochę kleju do kodu, aby powiązać wszystkie te rzeczy razem:

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

Jest to mniej lub bardziej oczywiste, ale porozmawiajmy o kilku punktach.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

To miejsce, w którym korzystasz z powiadomienia o zmianie wartości. Linia mówi klasie, aby wykonała funkcję rxCallback, gdy wartość zostanie zmieniona.

BLE.reklamuj();

to jest to, co zaczyna wszystko. Urządzenie BLE okresowo wysyła mały pakiet informacji ogłaszając, że jest tam i jest dostępne do połączenia. Bez tego będzie niewidoczny.

Krok 5: Polecenia tekstowe

Jak wspomniano wcześniej, to urządzenie będzie komunikować się ze stroną internetową za pomocą prostych poleceń tekstowych. Całość jest łatwa do wdrożenia, ponieważ ciężka praca została już wykonana. Czujniki uFire są dostarczane z biblioteką opartą na JSON i MsgPack do wysyłania i odbierania poleceń. Możesz przeczytać więcej o poleceniach EC i ISE na ich stronach dokumentacji.

Ten projekt będzie używał formatu JSON, ponieważ jest nieco łatwiejszy w obsłudze i czytelny, w przeciwieństwie do formatu MsgPack, który jest binarny.

Oto przykład tego, jak to wszystko łączy:

• Strona prosi urządzenie o pomiar EC, wysyłając ec (a dokładniej zapisując ec do charakterystyki rx_Characteristic)
• Urządzenie odbiera polecenie i wykonuje je. Następnie odsyła odpowiedź sformatowaną w formacie JSON {"ec": 1.24}, pisząc do charakterystyki tx_Characteristic.
• Strona internetowa otrzymuje informacje i wyświetla je

Krok 6: Strona internetowa

Strona internetowa dla tego projektu będzie używać Vue.js jako front-end. Nie jest potrzebny żaden backend. Dodatkowo, aby wszystko było prostsze, nie jest używany żaden system kompilacji. Jest podzielony na zwykłe foldery, js dla javascript, css dla CSS, zasoby dla ikon. Część html to nic specjalnego. Używa bulma.io do stylizacji i tworzy interfejs użytkownika. Dużo zauważysz w tej sekcji. Dodaje wszystkie css i ikony, ale także dodaje jedną linię w szczególności.

To ładuje nasz plik manifest.json, który powoduje, że wszystkie rzeczy PWA się zdarzają. Deklaruje pewne informacje, które mówią naszemu telefonowi, że ta strona internetowa może zostać przekształcona w aplikację.

W javascript dzieje się większość interesujących rzeczy. Jest podzielony na pliki, app.js zawiera podstawy tworzenia strony internetowej Vue wraz ze wszystkimi zmiennymi związanymi z interfejsem użytkownika i kilkoma innymi rzeczami. ble.js zawiera elementy bluetooth.

Krok 7: JavaScript i Web Bluetooth

Po pierwsze, działa to tylko w Chrome i Operze. Chciałbym, żeby inne przeglądarki to wspierały, ale z jakiegoś powodu tak nie jest. Spójrz na app.js, a zobaczysz te same UUID, których użyliśmy w naszym oprogramowaniu. Po jednym dla usługi uFire Service i po jednym dla charakterystyki tx i rx.

Teraz, jeśli zajrzysz do ble.js, zobaczysz funkcje connect() i Disconnect().

Funkcja connect() zawiera pewną logikę, aby utrzymać synchronizację interfejsu użytkownika, ale głównie konfiguruje rzeczy do wysyłania i odbierania informacji o cechach.

Istnieją pewne dziwactwa, gdy mamy do czynienia z Web Bluetooth. Połączenie musi zostać zainicjowane przez jakąś fizyczną interakcję użytkownika, taką jak dotknięcie przycisku. Na przykład nie można programowo połączyć się podczas ładowania strony internetowej.

Kod do uruchomienia połączenia wygląda tak:

this.device = czekaj na navigator.bluetooth.requestDevice({

filtry: [{ namePrefix: "uFire" }], OptionalServices: [this.serviceUuid] });

Sekcja Filters: i OptionalServices jest potrzebna, aby uniknąć zobaczenia każdego pojedynczego urządzenia BLE. Można by pomyśleć, że tylko sekcja filtra byłaby w porządku, ale potrzebujesz również części OptionalServices.

Powyższy kod pokaże okno dialogowe połączenia. Jest częścią interfejsu Chrome i nie można go zmienić. Użytkownik wybierze z listy. Nawet jeśli istnieje tylko jedno urządzenie, z którym aplikacja miałaby się kiedykolwiek połączyć, użytkownik nadal musi przejść przez to okno dialogowe ze względów bezpieczeństwa.

Reszta kodu to konfiguracja usługi i charakterystyki. Zwróć uwagę, że skonfigurowaliśmy procedurę wywołania zwrotnego, podobną do wywołania zwrotnego powiadomienia oprogramowania układowego:

usługa = czekaj server.getPrimaryService(this.serviceUuid);

charakterystyka = czekaj na usługę.getCharacteristic(this.txUuid); czekaj na charakterystykę.startNotifications(); charakterystyka.addEventListener("wartość charakterystyczna zmieniona", this.value_update);

this.value_update będzie teraz wywoływane za każdym razem, gdy pojawią się nowe informacje na temat charakterystyki tx.

Jedną z ostatnich rzeczy, jakie robi, jest ustawienie zegara, który aktualizuje informacje co 5 sekund.

value_update() to tylko długa funkcja, która czeka na nadejście nowych informacji JSON i aktualizuje nimi interfejs użytkownika.

ec.js, ph.js i orp.js zawierają wiele małych funkcji, które wysyłają polecenia w celu pobrania informacji i kalibracji urządzeń.

Aby to wypróbować, musisz pamiętać, że aby używać Web Bluetooth, musi być obsługiwany przez HTTPS. Jedną z wielu opcji lokalnego serwera HTTPS jest obsługa https. Po przesłaniu oprogramowania układowego, wszystkim połączonym i obsługiwanej stronie internetowej powinieneś być w stanie zobaczyć, jak wszystko działa.

Krok 8: Część PWA

Aby zmienić stronę internetową w rzeczywistą aplikację, należy wykonać kilka czynności. Progresywne aplikacje internetowe potrafią znacznie więcej, niż ten projekt ich używa.

• Instalacja strony internetowej
• Po zainstalowaniu możliwy jest dostęp w trybie offline
• Uruchomiono i działa jak normalna aplikacja ze zwykłą ikoną aplikacji

Aby rozpocząć, będziemy musieli wygenerować kilka plików. Pierwszy to plik manifest.json. Istnieje kilka witryn, które zrobią to za Ciebie, a jednym z nich jest Generator Manifestu Aplikacji.

Kilka rzeczy do zrozumienia:

• Ważny jest zakres zastosowania. Umieściłem tę stronę na ufire.co/uFire-BLE/. Oznacza to, że zakres mojej aplikacji to /uFire-BLE/.
• URL początkowy jest również ważny. Jest to ścieżka do Twojej konkretnej strony internetowej z założoną już domeną bazową. Więc ponieważ umieściłem to na ufire.co/uFire-BLE/, początkowy URL to też /uFire-BLE/.
• Tryb wyświetlania określi wygląd aplikacji, Standalone sprawi, że będzie wyglądać jak zwykła aplikacja bez żadnych przycisków ani interfejsu Chrome.

Otrzymasz plik json. Musi być umieszczony w katalogu głównym strony wraz z index.html.

Następną rzeczą, której będziesz potrzebować, jest Service Worker. Znowu mogą wiele zrobić, ale ten projekt będzie używał buforowania tylko w celu umożliwienia dostępu do tej aplikacji w trybie offline. Implementacja service workera jest w większości boilerplate. Ten projekt wykorzystał przykład Google i zmienił listę plików do buforowania. Nie możesz buforować plików poza swoją domeną.

Udaj się do FavIcon Generator i zrób kilka ikon.

Ostatnią rzeczą jest dodanie kodu w funkcji Vue Mounted().

zamontowane: function () { if ('serviceWorker' w nawigatorze) { navigator.serviceWorker.register('service-worker.js'); } }

Spowoduje to zarejestrowanie pracownika w przeglądarce.

Możesz sprawdzić, czy wszystko działa, a jeśli nie, może dowiedzieć się, dlaczego, korzystając z Lighthouse, przeanalizuje witrynę i opowie Ci różne rzeczy.

Jeśli wszystko działało, po przejściu na stronę Chrome zapyta, czy chcesz ją zainstalować z wyskakującym banerem. Możesz to zobaczyć w akcji na ufire.co/uFire-BLE/, jeśli korzystasz z mobilnego Chrome. Jeśli jesteś na komputerze, możesz znaleźć element menu, aby go zainstalować.