Nano 33 IoT + EC/pH/ORP + WebAPK

关于这个项目

我们要做什么？

一种测量 EC、pH、ORP 和温度的设备。它可用于监控水池或水培设置。它将通过低功耗蓝牙进行通信，并使用 Web 蓝牙在网页上显示信息。为了好玩，我们将把它变成一个渐进式网络应用程序，您可以从网络上安装。

你可以在 ufire.co 上获得所有这些东西。

所有这些术语是什么？

• EC/pH/ORP/温度是一些最常见的水质测量。在水培中，电导率 (EC) 用于测量营养液、pH 值用于衡量水的酸性/碱性程度，而 ORP 用于帮助确定水的自我消毒能力。
• 低功耗蓝牙是一种无线协议，可轻松发送和接收信息。本项目中使用的 Arduino 板是 Nano 33 IoT，并带有 WiFi 和 BLE 接口。
• 网络蓝牙是在 Google 的 Chrome 浏览器（和 Opera）中实现的一组 API，允许网页直接与 BLE 设备通信。
• 渐进式网络应用基本上是与常规应用类似的网页。 Android 和 iPhone 对它们的处理方式不同，它们在台式机上也不同，因此您需要阅读一些详细信息。

硬件

在我们组装硬件之前，有一件事情需要解决。 uFire ISE 传感器设备具有相同的 I2C 地址，我们使用了两个，因此必须更改一个。对于这个项目，我们将选择其中一块 ISE 板并用它来测量 ORP。按照此处的步骤，将地址更改为 0x3e。

现在地址改变了，把硬件放在一起很容易。所有传感器设备都使用 Qwiic 连接系统，因此只需将所有设备连接在一起即可。您需要一根 Qwiic 转公头线将其中一个传感器连接到 Nano 33。这些线是一致的并带有颜色编码。将黑色连接到 Nano 的 GND，红色连接到 +3.3V 或 +5V 引脚，蓝色连接到 A4 的 SDA 引脚，黄色连接到 A5 上的 SCL 引脚。

对于这个项目，它会期望来自 EC 传感器的温度信息，所以一定要在 EC 板上安装一个温度传感器。不过，所有的电路板都具有测量温度的能力。不要忘记将 EC、pH 和 ORP 探针连接到适当的传感器。它们可以通过 BNC 连接器轻松连接。

如果你有一个围栏，把所有这些都放在里面是个好主意，尤其是考虑到会涉及到水。

软件

其中的软件部分分为两个主要部分：Nano 33 上的固件和网页。

基本流程是这样的：

• 网页通过 BLE 连接到 Nano
• 网页发送基于文本的命令来询问信息或采取行动
• Nano 侦听这些命令，执行它们并返回信息
• 网页接收响应并相应地更新用户界面

此设置允许网页执行您期望的所有必需功能，例如进行测量或校准传感器。

BLE 服务和特性

首先要学习的内容之一是 BLE 工作原理的基础知识。

有很多类比，所以让我们挑一本书。服务将是一本书，而特征将是页面。在这本“BLE 书”中，页面具有一些非书籍属性，例如能够更改页面内容并在发生时接收通知。

BLE 设备可以提供任意数量的服务。有些是预定义的，可作为将常用信息（如 Tx 功率或失去连接）标准化为更具体的信息（如胰岛素或脉搏血氧饱和度）的一种方式。你也可以只制作一个，然后用它做任何你想做的事。它们在软件中定义并用 UUID 标识。您可以在此处制作 UUID，或者对于开源替代方案，请尝试 UUIDTools.com。

在此设备的固件中，有一项服务，定义为：

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

和两个特点：

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

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 设备会定期发送一个小信息包，宣布它在那里并且可以连接。没有它，它将是隐形的。

文本命令

如前所述，该设备将通过简单的文本命令与网页对话。整个事情很容易实施，因为艰苦的工作已经完成。 uFire 传感器带有一个基于 JSON 和 MsgPack 的库，用于发送和接收命令。您可以在其文档页面上阅读有关 EC 和 ISE 命令的更多信息。

这个项目将使用 JSON，因为它更容易使用和可读，不像 MsgPack 格式是二进制。

以下是所有这些如何联系在一起的示例：

• 网页通过发送 ec 请求设备进行 EC 测量 （或更具体地说，编写 ec 到 rx_Characteristic 特性）
• 设备接收命令并执行它。然后它发送回 {"ec":1.24} 的 JSON 格式的响应 通过写入 tx_Characteristic 特征。
• 网页接收信息并显示

网页

此项目的网页将使用 Vue.js 作为前端。不需要后端。此外，为了让事情更简单，没有使用构建系统。它分为常用文件夹，js 用于 javascript，css 用于 CSS，assets 用于图标。

它的 html 部分没什么特别的。它使用 bulma.io 进行样式设置并创建用户界面。您会在 中注意到很多 部分。它添加了所有的 css 和图标，但还特别添加了一行。

这就是加载我们的 manifest.json 文件，这就是所有 PWA 事情发生的原因。它声明了一些信息，告诉我们的手机这个网页可以变成一个应用程序。

javascript 是最有趣的事情发生的地方。它被分解成文件，app.js 包含获取 Vue 网页的基础知识以及所有 UI 相关的变量和其他一些东西。 ble.js 有蓝牙功能。

Javascript 和网络蓝牙

首先，这只适用于 Chrome 和 Opera。我希望其他浏览器能够支持这一点，但无论出于何种原因，它们都不支持。

看看 app.js，你会看到我们在固件中使用的那些 UUID。一个用于 uFire 服务，一个用于 tx 和 rx 特性。

现在，如果您查看 ble.js，您将看到 connect() 和 disconnect() 功能。

connect() 函数包含一些保持 UI 同步的逻辑，但主要是设置发送和接收有关特征的信息。

处理 Web 蓝牙时有一些特性。连接必须由某种物理用户交互启动，例如点击按钮。例如，您无法在网页加载时以编程方式连接。

启动连接的代码如下所示：

this.device =await navigator.bluetooth.requestDevice({
 filters:[
 {
 namePrefix:"uFire"
 }
], 
 optionalServices:[this.serviceUuid]
}); 

需要过滤器：和 optionalServices 部分，以避免看到每个单独的 BLE 设备。您可能认为仅过滤器部分就可以了，但您还需要 optionalServices 部分。

上面的代码将显示一个连接对话框。它是 Chrome 界面的一部分，无法更改。用户将从列表中进行选择。即使应用程序只连接到一台设备，出于安全考虑，用户仍然需要通过此选择对话框。

其余的代码是设置服务和特性。注意我们设置了一个回调例程，类似于固件的通知回调：

service =await server.getPrimaryService(this.serviceUuid);
characteristic =await service.getCharacteristic(this.txUuid);
awaitcharacteristic.startNotifications();
characteristic .addEventListener(
 "characteristicvaluechanged",
 this.value_update
 ); 

this.value_update 现在每次有关于 tx 特征的新信息时都会调用。

它所做的最后一件事是设置一个计时器，每 5 秒更新一次信息。

value_update() 只是一个很长的函数，它等待新的 JSON 信息进来并用它更新 UI。

ec.js、ph.js 和 orp.js 包含许多小函数，它们发出命令来检索信息和校准设备。

要尝试此操作，您需要记住，要使用 Web 蓝牙，它必须通过 HTTPS 提供服务。本地 HTTPS 服务器的众多选项之一是 serve-https。上传固件、连接所有内容并提供网页后，您应该能够看到一切正常。

PWA 部分

有几个步骤可以将网页变成实际的应用程序。 Progressive Web Apps 可以做的比这个项目使用它们的要多得多。

• 网页安装
• 一旦安装，就可以离线访问
• 作为带有常规应用图标的普通应用启动和运行

首先，我们需要生成一堆文件。第一个是 manifest.json 文件。有一些网站可以为您执行此操作，App Manifest Generator 就是其中之一。

需要了解的几件事：

• 应用范围很重要。如果将此网页放在 ufire.co/uFire-BLE/。这意味着我的应用范围是 /uFire-BLE/。
• 起始网址也很重要。它是您的特定网页的路径，已假定基本域。
• 显示模式将决定应用的外观，独立模式将使它看起来像一个没有任何 Chrome 按钮或界面的普通应用。

你最终会得到一个 json 文件。它必须放在网页的根目录下，与 index.html 一起。

接下来你需要一个 Service Worker。同样，他们可以做很多事情，但是这个项目只会使用缓存来让这个应用程序离线访问。 Service Worker 的实现主要是样板文件。该项目使用了 Google 示例并更改了要缓存的文件列表。您无法缓存域外的文件。

前往 FavIcon Generator 并制作一些图标。

最后就是在Vue中添加一些代码mounted() 功能。

mounted:function () {
 if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('service-worker.js');
 }
 },  

这将向浏览器注册工作线程。

您可以检查一切是否正常，如果没有，也许可以通过使用 Lighthouse 找出原因，它会分析站点并告诉您各种信息。

如果一切正常，当您访问该网页时，Chrome 会询问您是否要安装它并弹出横幅。

代码

Arduino 创建代码

GitHub

示意图