Nano 33 IoT + EC / pH / ORP + WebAPK

Acerca de este proyecto

¿Qué vamos a hacer?

Un dispositivo para medir CE, pH, ORP y temperatura. Podría usarse para monitorear una piscina o una instalación hidropónica. Se comunicará a través de Bluetooth Low Energy y mostrará la información en una página web mediante Web Bluetooth. Y para divertirnos, convertiremos esto en una aplicación web progresiva que puede instalar desde la web.

Puedes conseguir todo eso en ufire.co.

¿Cuáles son todos esos términos?

• EC / pH / ORP / temperatura son algunas de las medidas de calidad del agua más comunes. La conductividad eléctrica (CE) se usa en hidroponía para medir la solución nutritiva, el pH para determinar qué tan ácida / básica es el agua y el ORP se usa para ayudar a determinar la capacidad del agua para desinfectarse a sí misma.
• Bluetooth Low Energy es un protocolo inalámbrico para enviar y recibir información fácilmente. La placa Arduino utilizada en este proyecto es la Nano 33 IoT y viene con interfaces WiFi y BLE.
• Web Bluetooth es un conjunto de API implementadas en el navegador Chrome de Google (y Opera) que permiten que una página web se comunique directamente con un dispositivo BLE.
• Las aplicaciones web progresivas son básicamente páginas web que actúan como aplicaciones normales. Android y iPhone los manejan de manera diferente, y son diferentes en las computadoras de escritorio, por lo que deberá leer un poco para obtener más detalles.

El hardware

Antes de que podamos ensamblar el hardware, hay una cosa que abordar. Los dispositivos sensores uFire ISE vienen con la misma dirección I2C y estamos usando dos, por lo que habrá que cambiar uno. Para este proyecto, elegiremos una de las placas ISE y la usaremos para medir el ORP. Siguiendo los pasos aquí, cambie la dirección a 0x3e.

Ahora que se cambió la dirección, armar el hardware es fácil. Todos los dispositivos sensores utilizan el sistema de conexión Qwiic, así que simplemente conecte todo en una cadena. Necesitará un cable Qwiic a macho para conectar uno de los sensores al Nano 33. Los cables son consistentes y están codificados por colores. Conecte el negro al GND del Nano, el rojo al pin + 3.3V o + 5V, el azul al pin SDA que es A4 y el amarillo al pin SCL en A5.

Para este proyecto, esperará que la información de temperatura provenga del sensor EC, así que asegúrese de conectar un sensor de temperatura a la placa EC. Sin embargo, todas las tablas tienen la capacidad de medir la temperatura. No olvide conectar las sondas de CE, pH y ORP a los sensores adecuados. Se conectan fácilmente con conectores BNC.

Si tiene un cerramiento, poner todo esto adentro sería una buena idea, especialmente considerando que el agua estará involucrada.

El software

La parte del software de esto se divide en dos secciones principales:el firmware del Nano 33 y la página web.

El flujo básico es este:

• La página web se conecta al Nano a través de BLE
• La página web envía comandos basados ​​en texto para solicitar información o realizar acciones
• El Nano escucha esos comandos, los ejecuta y devuelve información
• La página web recibe las respuestas y actualiza la interfaz de usuario en consecuencia

Esta configuración permite que la página web realice todas las funciones requeridas que usted esperaría, como tomar una medición o calibrar los sensores.

Servicios y características de BLE

Una de las primeras cosas que debe aprender son los conceptos básicos de cómo funciona BLE.

Hay muchas analogías, así que escojamos un libro. Un servicio sería un libro y una característica serían las páginas. En este "libro BLE", las páginas tienen algunas propiedades que no pertenecen al libro, como poder cambiar lo que dice la página y recibir una notificación cuando sucede.

Un dispositivo BLE puede realizar tantos servicios como desee. Algunos están predefinidos y actúan como una forma de estandarizar la información de uso común, como Tx Power o la pérdida de una conexión, a cosas más específicas como insulina o pulsioximetría. También puedes hacer uno y hacer lo que quieras con él. Se definen en software y se identifican con un UUID. Puede crear UUID aquí, o para una alternativa de código abierto, pruebe UUIDTools.com.

En el firmware de este dispositivo, hay un servicio, definido como:

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

y dos características:

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

Tx_Characteristic será el lugar donde los dispositivos envíen la información, como las mediciones de CE, para que se muestre en la página web. El rx_Characteristic es donde recibirá los comandos de la página web para ejecutar.

Este proyecto utiliza la biblioteca ArduinoBLE. Si miras, verás que hay un par de formas diferentes para declarar una característica. Este proyecto utiliza BLEStringCharacteristic porque nos ocuparemos del tipo String y es más fácil, pero también puede elegir BLECharCharacteristic o BLEByteCharacteristic entre un puñado de otros.

Además, hay algunas propiedades que puedes darle a la característica. tx_Characteristic tiene BLENotify como una opción. Eso significa que nuestra página web recibirá una notificación cuando cambie su valor. rx_Characteristic tiene BLEWrite lo que permitirá que nuestra página web lo modifique. Hay otros.

Luego hay un poco de pegamento de código para unir todas estas cosas:

  BLE.setLocalName ("uFire BLE"); 
 BLE.setAdvertisedService (uFire_Service); 
 uFire_Service.addCharacteristic (tx_Characteristic); 
 uFire_Service.addCharacteristic (rx_Characteristic); br />BLE.addService(uFire_Service); 
 rx_Characteristic.setEventHandler (BLEWritten, rxCallback); 
 BLE.advertise ();  

Es más o menos autoexplicativo, pero vamos a tocar algunos puntos.

  rx_Characteristic.setEventHandler (BLEWritten, rxCallback);  

Es donde aprovechas que te notifiquen del cambio de valor. La línea le dice a la clase que ejecute la función rxCallback cuando se cambia el valor.

BLE.advertise (); es lo que hace que todo empiece a funcionar. Un dispositivo BLE enviará periódicamente un pequeño paquete de información anunciando que está disponible y disponible para conectarse. Sin él, será invisible.

Comandos de texto

Como se mencionó anteriormente, este dispositivo se comunicará con la página web a través de comandos de texto simples. Todo es fácil de implementar porque el trabajo duro ya se ha hecho. Los sensores uFire vienen con una biblioteca basada en JSON y MsgPack para enviar y recibir comandos. Puede leer más sobre los comandos EC e ISE en sus páginas de documentación.

Este proyecto utilizará JSON porque es un poco más fácil de trabajar y legible, a diferencia del formato MsgPack que es binario.

Aquí hay un ejemplo de cómo se relaciona todo:

• La página web solicita al dispositivo una medición de CE enviando ec (o más específicamente escribiendo ec a la característica rx_Characteristic)
• El dispositivo recibe el comando y lo ejecuta. Luego envía una respuesta con formato JSON de {"ec":1.24} escribiendo a la característica tx_Characteristic.
• La página web recibe la información y la muestra

La página web

La página web de este proyecto utilizará Vue.js para el front-end. No se necesita backend. Además, para simplificar un poco las cosas, no se utiliza ningún sistema de compilación. Está dividido en las carpetas habituales, js para javascript, css para CSS, assets para íconos.

La parte html no es nada especial. Utiliza bulma.io para diseñar y crea la interfaz de usuario. Notarás mucho en el sección. Está agregando todos los css e íconos, pero también agregando una línea en particular.

Eso es cargar nuestro archivo manifest.json, que es lo que hace que sucedan todas las cosas de PWA. Declara cierta información que le dice a nuestro teléfono que esta página web se puede convertir en una aplicación.

El javascript es donde suceden la mayoría de las cosas interesantes. Está dividido en archivos, app.js contiene los conceptos básicos para hacer que una página web de Vue vaya junto con todas las variables relacionadas con la interfaz de usuario y algunas otras cosas. ble.js tiene las cosas de bluetooth.

Javascript y Web Bluetooth

Primero, esto solo funciona en Chrome y Opera. Desearía que otros navegadores admitieran esto, pero por el motivo que sea, no lo hacen.

Eche un vistazo a app.js y verá los mismos UUID que usamos en nuestro firmware. Uno para el servicio uFire y uno para las características tx y rx.

Ahora, si miras en ble.js, verás el connect () y desconectar () funciones.

El connect () La función contiene algo de lógica para mantener la interfaz de usuario sincronizada, pero principalmente configura las cosas para enviar y recibir información sobre las características.

Existen algunas idiosincrasias cuando se trata de Web Bluetooth. La conexión debe iniciarse mediante algún tipo de interacción física del usuario, como presionar un botón. No puede conectarse mediante programación cuando la página web está cargada, por ejemplo.

El código para iniciar una conexión se ve así:

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

La sección de filtros:y servicios opcionales es necesaria para evitar ver todos los dispositivos BLE que existen. Pensaría que solo la sección de filtro estaría bien, pero también necesita la parte de Servicios opcionales.

El código anterior mostrará un cuadro de diálogo de conexión. Es parte de la interfaz de Chrome y no se puede cambiar. El usuario seleccionará de la lista. Incluso si solo hay un dispositivo al que la aplicación se conectaría, el usuario aún debe pasar por este cuadro de diálogo de selección, debido a problemas de seguridad.

El resto del código es configurar el servicio y las características. Tenga en cuenta que configuramos una rutina de devolución de llamada, similar a la devolución de llamada de notificación del firmware:

  service =await server.getPrimaryService (this.serviceUuid); 
 característica =aguardar servicio.getCharacteristic (this.txUuid); 
 aguardar característica.startNotifications (); 
 característica .addEventListener (
 "valor de característica cambiado", 
 this.value_update 
);  

this.value_update ahora se llamará cada vez que haya nueva información sobre la característica tx.

Una de las últimas cosas que hace es configurar un temporizador para actualizar la información cada 5 segundos.

value_update () es solo una función larga que espera a que ingrese nueva información JSON y actualiza la interfaz de usuario con ella.

ec.js, ph.js y orp.js contienen muchas funciones pequeñas que envían los comandos para recuperar información y calibrar los dispositivos.

Para probar esto, debe tener en cuenta que para usar Web Bluetooth, debe entregarse a través de HTTPS. Una de las muchas opciones para un servidor HTTPS local es serve-https. Con el firmware cargado, todo conectado y la página web en servicio, debería poder ver todo funcionando.

La parte de PWA

Hay algunos pasos para convertir la página web en una aplicación real. Las aplicaciones web progresivas pueden hacer mucho más de lo que las utiliza este proyecto.

• Instalación de la página web
• Una vez instalado, es posible el acceso sin conexión
• Se inició y se ejecuta como una aplicación normal con un icono de aplicación de aspecto normal

Para empezar, necesitaremos generar varios archivos. El primero es un archivo manifest.json. Hay un puñado de sitios que harán esto por usted, App Manifest Generator, es uno de ellos.

Un par de cosas para entender:

• El alcance de la aplicación es importante. Si coloca esta página web en ufire.co/uFire-BLE/. Eso significa que el alcance de mi aplicación es / uFire-BLE /.
• La URL de inicio también es importante. Es la ruta a su página web particular con el dominio base ya asumido.
• El modo de visualización determinará el aspecto de la aplicación. Independiente hará que parezca una aplicación normal sin botones o interfaz de Chrome.

Terminará con un archivo json. Debe colocarse en la raíz de la página web, junto con index.html.

Lo siguiente que necesitará es un trabajador de servicio. Nuevamente, pueden hacer mucho, pero este proyecto solo usará el almacenamiento en caché para permitir que se acceda a esta aplicación sin conexión. La implementación del trabajador de servicio es en su mayoría repetitiva. Este proyecto utilizó el ejemplo de Google y cambió la lista de archivos que se almacenarán en caché. No puede almacenar en caché archivos fuera de su dominio.

Dirígete a FavIcon Generator y crea algunos íconos.

Lo último es agregar algo de código en el Vue montado () función.

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

Esto registrará al trabajador con el navegador.

Puede comprobar que todo funciona y, si no es así, averiguar por qué, utilizando Lighthouse, analizará el sitio y le dirá todo tipo de cosas.

Si todo funcionó, cuando vaya a la página web, Chrome le preguntará si desea instalarlo con un banner emergente.

Esquemas

Todas las conexiones se realizan con cables Qwiic.