Nano 33 IoT + EC/pH/ORP + WebAPK: 8 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

ufireFollow tarafından Yazar tarafından daha fazla:

Hakkında: Arduino veya Raspberry Pi projenize pH, ORP, EC veya tuzluluk ölçme yeteneği ekleyin. ufire hakkında daha fazla bilgi »

EC, pH, ORP ve sıcaklığı ölçen bir cihaz. Bir havuzu veya hidroponik kurulumu izlemek için kullanılabilir. Bluetooth Low Energy aracılığıyla iletişim kuracak ve Web Bluetooth kullanarak bilgileri bir web sayfasında görüntüleyecektir. Ve eğlence için, bunu web'den yükleyebileceğiniz bir Aşamalı Web Uygulamasına dönüştüreceğiz.

Adım 1: Tüm Bu Terimler Nelerdir?

EC/pH/ORP/sıcaklık en yaygın su kalitesi ölçümlerinden bazılarıdır. Elektriksel iletkenlik (EC), hidroponikte besin çözeltisini, pH'ı suyun ne kadar asidik/bazik olduğunu ölçmek için kullanılır ve ORP, suyun kendini dezenfekte etme yeteneğini belirlemeye yardımcı olmak için kullanılır

• Bluetooth Low Energy, bilgileri kolayca göndermek ve almak için kablosuz bir protokoldür. Bu projede kullanılan Arduino kartı Nano 33 IoT'dir ve WiFi ve BLE arayüzleri ile birlikte gelir.
• Web Bluetooth, Google'ın Chrome tarayıcısında (ve Opera'da) uygulanan ve bir web sayfasının bir BLE cihazıyla doğrudan iletişim kurmasını sağlayan bir dizi API'dir.
• Aşamalı Web Uygulamaları, temel olarak normal uygulamalar gibi davranan web sayfalarıdır. Android ve iPhone'lar bunları farklı şekilde ele alır ve masaüstlerinde farklıdırlar, bu nedenle ayrıntılar için biraz okuma yapmanız gerekir.

Adım 2: Donanım

Donanımı monte etmeden önce, ele alınması gereken bir şey var. uFire ISE sensör cihazları aynı I2C adresiyle gelir ve biz iki tane kullanıyoruz, bu yüzden birinin değiştirilmesi gerekecek. Bu proje için İMKB kurullarından birini seçip ORP'yi ölçmek için kullanacağız. Buradaki adımları takip ederek adresi 0x3e olarak değiştirin.

Artık adres değiştiğine göre, donanımı bir araya getirmek kolaydır. Tüm sensör cihazları Qwiic bağlantı sistemini kullanır, bu nedenle her şeyi bir zincir halinde birbirine bağlamanız yeterlidir. Sensörlerden birini Nano 33'e bağlamak için bir Qwiic - Male kablosuna ihtiyacınız olacak. Kablolar tutarlı ve renk kodlu. Siyahı Nano'nun GND'sine, kırmızıyı +3.3V veya +5V pinine, maviyi A4 olan SDA pinine ve sarıyı A5 üzerindeki SCL pinine bağlayın.

Bu proje için sıcaklık bilgisinin EC sensöründen gelmesini bekleyecektir, bu nedenle EC kartına bir sıcaklık sensörü taktığınızdan emin olun. Tüm panolar olsa da sıcaklığı ölçme yeteneğine sahiptir. EC, pH ve ORP problarını uygun sensörlere takmayı unutmayınız. BNC konnektörleri ile kolayca takılırlar.

Bir muhafazanız varsa, tüm bunları içine koymak iyi bir fikir olacaktır, özellikle de suyun dahil olacağı düşünülürse.

3. Adım: Yazılım

Bunun yazılım kısmı iki ana bölüme ayrılmıştır: Nano 33'teki bellenim ve web sayfası.

Temel akış şudur:

• Web sayfası Nano'ya BLE aracılığıyla bağlanır
• Web sayfası, bilgi istemek veya işlem yapmak için metin tabanlı komutlar gönderir
• Nano bu komutları dinler, yürütür ve bilgi verir.
• Web sayfası yanıtları alır ve kullanıcı arayüzünü buna göre günceller

Bu kurulum, web sayfasının, ölçüm yapmak veya sensörleri kalibre etmek gibi beklediğiniz tüm gerekli işlevleri gerçekleştirmesini sağlar.

4. Adım: BLE Hizmetleri ve Özellikleri

Öğrenilecek ilk şeylerden biri, BLE'nin nasıl çalıştığının temelleridir.

Pek çok benzetme var, o yüzden bir kitap seçelim. Bir hizmet bir kitap olur ve bir özellik sayfalar olur. Bu "BLE kitabında", sayfaların, sayfanın söylediklerini değiştirebilme ve gerçekleştiğinde bildirim alma gibi kitap dışı birkaç özelliği vardır.

Bir BLE cihazı istediği kadar servis yapabilir. Bazıları önceden tanımlanmıştır ve Tx Power veya bağlantının kesilmesi gibi yaygın olarak kullanılan bilgileri İnsülin veya Nabız Oksimetrisi gibi daha spesifik şeylere standart hale getirmenin bir yolu olarak işlev görür. Ayrıca sadece bir tane yapabilir ve onunla ne istersen yapabilirsin. Yazılımda tanımlanırlar ve bir UUID ile tanımlanırlar. UUID'leri buradan yapabilirsiniz.

Bu cihazın belleniminde şu şekilde tanımlanan bir hizmet vardır:

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

ve iki özellik:

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

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

tx_Characteristic, cihazların web sayfasının görüntülenmesi için EC ölçümleri gibi bilgileri gönderdiği yer olacaktır. rx_Characteristic, web sayfasından yürütülecek komutları alacağı yerdir.

Bu proje ArduinoBLE kitaplığını kullanır. Bakarsanız, bir karakteristik beyan etmek için birkaç farklı olduğunu göreceksiniz. Bu proje BLEStringCharacteristic'i kullanıyor çünkü biz String türüyle ilgileneceğiz ve bu daha kolay, ancak bir avuç diğerleri arasından BLECharCharacteristic veya BLEByteCharacteristic'i de seçebilirsiniz.

Ek olarak, karakteristiğe verebileceğiniz bazı özellikler vardır. tx_Characteristic, bir seçenek olarak BLEnotify'a sahiptir. Bu, web sayfamızın değeri değiştiğinde bir bildirim alacağı anlamına gelir. rx_Characteristic, web sayfamızın onu değiştirmesine izin verecek BLEWrite'a sahiptir. Başkaları var.

Sonra tüm bunları birbirine bağlamak için biraz kod yapıştırıcı var:

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

Az ya da çok açıklayıcı, ancak birkaç noktaya değinelim.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

Değişen değerden haberdar olmanın avantajlarından yararlandığınız yerdir. Satır, değer değiştirildiğinde sınıfa rxCallback işlevini yürütmesini söyler.

BLE.advertise();

her şeyi başlatan şeydir. Bir BLE cihazı, periyodik olarak, orada olduğunu ve bağlanmaya hazır olduğunu bildiren küçük bir bilgi paketi gönderir. Onsuz, görünmez olacak.

Adım 5: Metin Komutları

Daha önce de belirtildiği gibi, bu cihaz web sayfasıyla basit metin komutları aracılığıyla konuşacaktır. Her şeyi uygulamak kolaydır çünkü zor iş zaten yapılmıştır. uFire sensörleri, komut göndermek ve almak için JSON ve MsgPack tabanlı bir kitaplıkla birlikte gelir. EC ve ISE komutları hakkında daha fazla bilgiyi dokümantasyon sayfalarında okuyabilirsiniz.

Bu proje JSON kullanacak çünkü ikili olan MsgPack formatının aksine birlikte çalışması biraz daha kolay ve okunabilir.

İşte hepsinin nasıl birbirine bağlandığına dair bir örnek:

• Web sayfası, ec göndererek (veya daha spesifik olarak rx_Characteristic özelliğine ec yazarak) cihazdan bir EC ölçümü ister.
• Cihaz komutu alır ve yürütür. Ardından, tx_Characteristic özelliğine yazarak {"ec":1.24} JSON formatlı bir yanıtı geri gönderir.
• Web sayfası bilgileri alır ve görüntüler

6. Adım: Web Sayfası

Bu projenin web sayfası, ön uç için Vue.js'yi kullanacak. Arka uca gerek yoktur. Ek olarak, işleri biraz daha basit tutmak için hiçbir yapı sistemi kullanılmaz. Her zamanki klasörlere bölünmüştür, javascript için js, CSS için css, simgeler için varlıklar. Bunun html kısmı özel bir şey değil. Stil için bulma.io'yu kullanır ve kullanıcı arayüzünü oluşturur. Bölümde çok şey fark edeceksiniz. Tüm css ve simgeleri ekliyor, aynı zamanda özellikle bir satır ekliyor.

Bu, tüm PWA olaylarının gerçekleşmesini sağlayan manifest.json dosyamızı yüklüyor. Telefonumuza bu web sayfasının bir uygulamaya dönüştürülebileceğini söyleyen bazı bilgileri beyan eder.

Javascript, ilginç şeylerin çoğunun gerçekleştiği yerdir. Dosyalara bölünmüştür, app.js, bir Vue web sayfasının kullanıcı arayüzüyle ilgili tüm değişkenlerle ve birkaç başka şeyle birlikte çalışmasının temellerini içerir. ble.js'de bluetooth özelliği var.

7. Adım: Javascript ve Web Bluetooth

İlk olarak, bu yalnızca Chrome ve Opera'da çalışır. Diğer tarayıcıların bunu desteklemesini isterdim, ancak her ne sebeple olursa olsun desteklemezler. app.js'ye bir göz atın ve ürün yazılımımızda kullandığımız UUID'lerin aynısını göreceksiniz. uFire Service için bir tane ve tx ve rx özellikleri için birer tane.

Şimdi ble.js'ye bakarsanız, connect() ve connect() fonksiyonlarını görürsünüz.

connect() işlevi, kullanıcı arayüzünü senkronize tutmak için bir miktar mantık içerir, ancak çoğunlukla özellikler hakkında bilgi göndermek ve almak için işleri ayarlar.

Web Bluetooth ile uğraşırken bazı tuhaflıklar var. Bağlantı, bir düğmeye dokunmak gibi bir tür fiziksel kullanıcı etkileşimi ile başlatılmalıdır. Örneğin, web sayfası yüklendiğinde programlı olarak bağlanamazsınız.

Bağlantı başlatma kodu şöyle görünür:

this.device = navigator.bluetooth.requestDevice'i bekle({

filtreler: [{ namePrefix: "uFire" }], isteğe bağlıHizmetler: [this.serviceUuid] });

Filtreler: ve isteğe bağlı Hizmetler bölümü, her bir BLE cihazını orada görmekten kaçınmak için gereklidir. Yalnızca filtre bölümünün iyi olacağını düşünürdünüz, ancak ayrıca isteğe bağlı Hizmetler bölümüne de ihtiyacınız var.

Yukarıdaki kod bir bağlantı iletişim kutusu gösterecektir. Bu, Chrome arayüzünün bir parçasıdır ve değiştirilemez. Kullanıcı listeden seçim yapacaktır. Uygulamanın bağlanacağı yalnızca bir cihaz olsa bile, güvenlik endişeleri nedeniyle kullanıcının yine de bu seçim iletişim kutusundan geçmesi gerekir.

Kodun geri kalanı hizmeti ve özellikleri ayarlamaktır. Bellenimin bildirim geri aramasına benzer bir geri arama rutini oluşturduğumuzu unutmayın:

servis = bekle server.getPrimaryService(this.serviceUuid);

karakteristik = service.getCharacteristic(this.txUuid); bekle karakteristik.startNotifications(); karakteristik.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update artık tx özelliği hakkında her yeni bilgi olduğunda çağrılacak.

Yaptığı son şeylerden biri, bilgileri her 5 saniyede bir güncellemek için bir zamanlayıcı ayarlamaktır.

value_update(), yeni JSON bilgilerinin gelmesini bekleyen ve kullanıcı arayüzünü bununla güncelleyen uzun bir işlevdir.

ec.js, ph.js ve orp.js, bilgi almak ve cihazları kalibre etmek için komutlar gönderen birçok küçük fonksiyon içerir.

Bunu denemek için, Web Bluetooth'u kullanmak için HTTPS üzerinden sunulması gerektiğini unutmayın. Yerel bir HTTPS sunucusu için birçok seçenekten biri serve-https'dir. Yüklenen bellenim, bağlı her şey ve sunulan web sayfası ile her şeyin çalıştığını görebilmeniz gerekir.

8. Adım: PWA Bölümü

Web sayfasını gerçek bir uygulamaya dönüştürmek için birkaç adım vardır. Aşamalı Web Uygulamaları, bu projenin onları kullandığından çok daha fazlasını yapabilir.

• Web sayfası kurulumu
• Kurulduktan sonra çevrimdışı erişim mümkündür
• Normal görünümlü bir uygulama simgesiyle normal bir uygulama olarak başlatıldı ve çalışıyor

Başlamak için bir grup dosya oluşturmamız gerekecek. İlki bir manifest.json dosyasıdır. Bunu sizin için yapacak bir avuç site var, bunlardan biri olan App Manifest Generator.

Anlaşılması gereken birkaç şey:

• Uygulama kapsamı önemlidir. Bu web sayfasını ufire.co/uFire-BLE/ adresine koydum. Bu, uygulama kapsamımın /uFire-BLE/ olduğu anlamına gelir.
• Başlangıç URL'si de önemlidir. Bu, temel alan adının önceden varsayıldığı belirli web sayfanıza giden yoldur. Bunu ufire.co/uFire-BLE/ adresine koyduğum için, başlangıç URL'si de /uFire-BLE/'dir.
• Görüntüleme Modu, uygulamanın nasıl görüneceğini belirleyecek, Bağımsız, herhangi bir Chrome düğmesi veya arayüzü olmadan normal bir uygulama gibi görünmesini sağlayacaktır.

Sonunda bir json dosyası alacaksınız. İndeks.html ile birlikte web sayfasının kök dizinine yerleştirilmelidir.

İhtiyacınız olan bir sonraki şey bir Servis Görevlisi. Yine, çok şey yapabilirler, ancak bu proje yalnızca bu uygulamaya çevrimdışı olarak erişilmesine izin vermek için önbelleğe almayı kullanacak. Servis çalışanı uygulaması çoğunlukla standarttır. Bu proje Google örneğini kullandı ve önbelleğe alınacak dosyaların listesini değiştirdi. Alanınızın dışındaki dosyaları önbelleğe alamazsınız.

FavIcon Generator'a gidin ve bazı simgeler yapın.

Son şey, Vue mount() işlevine bazı kodlar eklemektir.

takılı: function () { if (navigator'da 'serviceWorker') { navigator.serviceWorker.register('service-worker.js'); } }

Bu, çalışanı tarayıcıya kaydeder.

Her şeyin çalışıp çalışmadığını kontrol edebilirsiniz ve değilse, belki de neden Lighthouse'u kullanarak anlayabilir, siteyi analiz eder ve size her türlü şeyi söyler.

Her şey işe yaradıysa, web sayfasına gittiğinizde Chrome, açılır bir banner ile yüklemek isteyip istemediğinizi soracaktır. Mobil Chrome kullanıyorsanız ufire.co/uFire-BLE/ adresinde çalışırken görebilirsiniz. Masaüstündeyseniz, yüklemek için bir menü öğesi bulabilirsiniz.