Nano 33 IoT + EC / pH / ORP + WebAPK

このプロジェクトについて

何を作るの？

EC、pH、ORP、および温度を測定するためのデバイス。プールや水耕栽培のセットアップを監視するために使用できます。 Bluetooth Low Energyを介して通信し、WebBluetoothを使用してWebページに情報を表示します。そして、楽しみのために、これをWebからインストールできるプログレッシブWebアプリに変えます。

ufire.coですべてのものを入手できます。

それらすべての用語は何ですか？

• EC / pH / ORP /温度は、最も一般的な水質測定の一部です。導電率（EC）は、水耕栽培で養液、水の酸性/塩基性のpHを測定するために使用され、ORPは、水がそれ自体を消毒する能力を判断するために使用されます。
• Bluetooth Low Energyは、情報を簡単に送受信するためのワイヤレスプロトコルです。このプロジェクトで使用されているArduinoボードはNano33 IoTであり、WiFiおよびBLEインターフェースが付属しています。
• Web Bluetoothは、GoogleのChromeブラウザ（およびOpera）に実装されているAPIのセットであり、WebページがBLEデバイスと直接通信できるようにします。
• プログレッシブウェブアプリは、基本的に通常のアプリのように機能するウェブページです。 AndroidとiPhoneはそれらの処理が異なり、デスクトップでも異なるため、詳細については少し読む必要があります。

ハードウェア

ハードウェアを組み立てる前に、対処すべきことが1つあります。 uFire ISEセンサーデバイスには同じI2Cアドレスが付属しており、2つ使用しているため、1つを変更する必要があります。このプロジェクトでは、ISEボードの1つを選択し、それを使用してORPを測定します。ここの手順に従って、アドレスを0x3eに変更します。

アドレスが変更されたので、ハードウェアを組み立てるのは簡単です。すべてのセンサーデバイスはQwiic接続システムを使用しているため、すべてをチェーンで接続するだけです。センサーの1つをNano33に接続するには、Qwiicからオスへのワイヤーが1本必要です。ワイヤーは一貫しており、色分けされています。黒をNanoのGNDに接続し、赤を+ 3.3Vまたは+ 5Vピンに接続し、青をA4であるSDAピンに接続し、黄色をA5のSCLピンに接続します。

このプロジェクトでは、ECセンサーからの温度情報が期待されるため、必ずECボードに温度センサーを取り付けてください。ただし、すべてのボードには温度を測定する機能があります。 EC、pH、ORPプローブを適切なセンサーに取り付けることを忘れないでください。 BNCコネクタで簡単に接続できます。

囲いがある場合は、特に水が含まれることを考えると、これらすべてを中に入れることをお勧めします。

ソフトウェア

このソフトウェア部分は、Nano33のファームウェアとWebページの2つの主要なセクションに分かれています。

基本的なフローは次のとおりです。

• ウェブページはBLEを介してNanoに接続します
• Webページは、テキストベースのコマンドを送信して、情報を要求したり、アクションを実行したりします
• Nanoはこれらのコマンドをリッスンして実行し、情報を返します
• ウェブページは応答を受け取り、それに応じてUIを更新します

この設定により、ウェブページで、測定やセンサーの調整など、必要なすべての機能を実行できます。

BLEのサービスと特徴

最初に学ぶことの1つは、BLEの仕組みの基本です。

アナロジーはたくさんあるので、本を選びましょう。サービスは本であり、特徴はページです。この「BLEブック」では、ページの内容を変更したり、発生したときに通知を受け取ったりできるなど、ブック以外のプロパティがいくつかあります。

BLEデバイスは、必要な数のサービスを作成できます。一部は事前定義されており、Tx Powerや接続の喪失などの一般的に使用される情報を、インスリンやパルスオキシメトリなどのより具体的なものに標準化する方法として機能します。また、1つだけ作成して、それを使って好きなことをすることもできます。それらはソフトウェアで定義され、UUIDで識別されます。ここでUUIDを作成できます。または、オープンソースの代替手段として、UUIDTools.comを試してください。

このデバイスのファームウェアには、次のように定義された1つのサービスがあります。

  BLEService uFire_Service（ "4805d2d0-af9f-42c1-b950-eae78304c408"）;  

と2つの特徴：

  BLEStringCharacteristic tx_Characteristic（ "50fa7d80-440a-44d2-967a-ec7731ec736a"、BLENotify、20）; 
 BLEStringCharacteristic rx_Characteristic（ "50fa7d80-440b-44d2-967b-ec7731ec736b"、BLEWrite、20）;  

tx_Characteristicは、デバイスがWebページに表示するEC測定値などの情報を送信する場所になります。 rx_Characteristicは、実行するコマンドをWebページから受け取る場所です。

このプロジェクトはArduinoBLEライブラリを使用しています。見てみると、特性を宣言するのとは異なるカップルがあることがわかります。このプロジェクトは BLEStringCharacteristic を使用します 文字列タイプを扱うので、それは簡単ですが、 BLECharCharacteristic を選択することもできます。 または BLEByteCharacteristic 数少ない中から。

さらに、特性を与えることができるいくつかのプロパティがあります。 tx_Characteristic BLENotify があります オプションとして。つまり、値が変更されたときにWebページに通知が届きます。 rx_Characteristic BLEWrite があります これにより、Webページで変更できるようになります。他にもあります。

次に、これらすべてのものを結び付けるためのコード接着剤が少しあります：

  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デバイスは、定期的に小さなパケットの情報を送信して、そこにあり、接続できることを通知します。それがないと、見えなくなります。

テキストコマンド

前述のように、このデバイスは単純なテキストコマンドを介してWebページと通信します。大変な作業がすでに行われているため、すべてを簡単に実装できます。 uFireセンサーには、コマンドを送受信するためのJSONおよびMsgPackベースのライブラリが付属しています。 ECおよびISEコマンドの詳細については、ドキュメントページを参照してください。

このプロジェクトでは、バイナリであるMsgPack形式とは異なり、操作が少し簡単で読みやすいため、JSONを使用します。

すべてがどのように結びつくかの例を次に示します。

• ウェブページは、 ec を送信して、デバイスにEC測定を要求します （または、より具体的には ec を記述します rx_Characteristic特性に）
• デバイスはコマンドを受信して​​実行します。次に、 {"ec"：1.24} のJSON形式の応答を送り返します。 tx_Characteristic特性に書き込むことによって。
• ウェブページは情報を受け取り、それを表示します

ウェブページ

このプロジェクトのWebページでは、フロントエンドにVue.jsを使用します。バックエンドは必要ありません。さらに、物事を少し単純にするために、ビルドシステムは使用されていません。通常のフォルダ、JavaScriptの場合はjs、CSSの場合はcss、アイコンの場合はアセットに分割されます。

そのhtml部分は特別なものではありません。スタイリングにbulma.ioを使用し、ユーザーインターフェイスを作成します。 で多くのことに気付くでしょう セクション。すべてのCSSとアイコンが追加されますが、特に1行も追加されます。

これにより、manifest.jsonファイルが読み込まれ、すべてのPWAが実行されます。このウェブページをアプリに変えることができることを携帯電話に伝える情報を宣言します。

javascriptは、興味深いことがほとんど発生する場所です。これはファイルに分割されており、app.jsには、VueWebページをUI関連のすべての変数やその他のいくつかのものと一緒に実行するための基本が含まれています。 ble.jsにはBluetoothが含まれています。

JavascriptとWebBluetooth

まず、これはChromeとOperaでのみ機能します。他のブラウザがこれをサポートすることを望みますが、何らかの理由でサポートしません。

app.jsを見ると、ファームウェアで使用したものと同じUUIDが表示されます。 1つはuFireサービス用で、もう1つはtxおよびrx特性用です。

ble.jsを見ると、 connect（）が表示されます。 および disconnect（） 関数。

connect（） 関数には、UIの同期を維持するためのロジックが含まれていますが、ほとんどの場合、特性に関する情報を送受信するように設定されています。

Web Bluetoothを扱う場合、いくつかの特異性があります。接続は、ボタンをタップするなど、何らかの物理的なユーザー操作によって開始する必要があります。たとえば、ウェブページが読み込まれるときにプログラムで接続することはできません。

接続を開始するコードは次のようになります：

  this.device =await navigator.bluetooth.requestDevice（{
フィルター：[
 {
 namePrefix： "uFire" 
} 
]、 
 optionalServices：[this.serviceUuid] 
}）;  

そこにあるすべてのBLEデバイスが表示されないようにするには、filters：およびoptionalServicesセクションが必要です。フィルタセクションだけで十分だと思うかもしれませんが、optionalServices部分も必要です。

上記のコードは接続ダイアログを表示します。これはChromeインターフェースの一部であり、変更することはできません。ユーザーはリストから選択します。アプリが接続するデバイスが1つしかない場合でも、セキュリティ上の懸念から、ユーザーはこの選択ダイアログを実行する必要があります。

コードの残りの部分は、サービスと特性を設定しています。ファームウェアの通知コールバックと同様に、コールバックルーチンを設定していることに注意してください。

  service =await server.getPrimaryService（this.serviceUuid）; 
 characteristic =await service.getCharacteristic（this.txUuid）; 
 await character.startNotifications（）; 
 characteristic .addEventListener（
 "characteristicvaluechanged"、
 this.value_update 
）;  

this.value_update これで、tx特性に関する新しい情報があるたびに呼び出されます。

最後に行うことの1つは、5秒ごとに情報を更新するタイマーを設定することです。

value_update（）は、新しいJSON情報が着信するのを待ち、それを使用してUIを更新する長い関数です。

ec.js、ph.js、orp.jsには、情報を取得してデバイスを調整するためのコマンドを送信する多くの小さな関数が含まれています。

これを試すには、Web Bluetoothを使用するには、HTTPS経由で提供する必要があることに注意する必要があります。ローカルHTTPSサーバーの多くのオプションの1つは、serve-httpsです。ファームウェアがアップロードされ、すべてが接続され、Webページが提供されると、すべてが機能していることを確認できるはずです。

PWAパート

ウェブページを実際のアプリに変えるには、いくつかの手順があります。プログレッシブウェブアプリは、このプロジェクトで使用する以上のことを実行できます。

• ウェブページのインストール
• インストールすると、オフラインアクセスが可能になります
• 通常のアプリアイコンが付いた通常のアプリとして起動および実行されます

開始するには、一連のファイルを生成する必要があります。 1つ目はmanifest.jsonファイルです。これを実行するサイトがいくつかあります。AppManifestGeneratorはその1つです。

理解すべきことがいくつかあります：

• アプリケーションの範囲は重要です。このウェブページをufire.co/uFire-BLE/に置く場合。つまり、私のアプリケーションスコープは/ uFire-BLE /です。
• 開始URLも重要です。これは、ベースドメインがすでに想定されている特定のWebページへのパスです。
• 表示モードによってアプリの外観が決まり、スタンドアロンではChromeボタンやインターフェースのない通常のアプリのように見えます。

最終的にjsonファイルになります。 index.htmlと一緒に、Webページのルートに配置する必要があります。

次に必要なのはサービスワーカーです。繰り返しになりますが、彼らは多くのことを行うことができますが、このプロジェクトは、このアプリにオフラインでアクセスできるようにするためにキャッシュを使用するだけです。サービスワーカーの実装は、ほとんどが定型的です。このプロジェクトでは、Googleの例を使用して、キャッシュするファイルのリストを変更しました。ドメイン外にファイルをキャッシュすることはできません。

FavIcon Generatorに移動して、いくつかのアイコンを作成します。

最後に、Vue Mounted（）にコードを追加します 機能。

  Mounted：function（）{
 if（ 'serviceWorker' in navigator）{
 navigator.serviceWorker.register（ 'service-worker.js'）; 
} 
}、 

これにより、ワーカーがブラウザに登録されます。

すべてが機能していることを確認できます。機能していない場合は、Lighthouseを使用してサイトを分析し、さまざまなことを教えてくれる理由を理解できます。

すべてが機能した場合、ウェブページにアクセスすると、Chromeはポップアップバナーを使用してインストールするかどうかを尋ねます。

コード

Arduino作成コード

GitHub

回路図