Nano 33 IoT + EC / pH / ORP + WebAPK: 8 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

Por ufireFollow Mais do autor:

Sobre: Adicione a capacidade de medir pH, ORP, EC ou salinidade ao seu projeto Arduino ou Raspberry Pi. Mais sobre o ufire »

Um dispositivo para medir CE, pH, ORP e temperatura. Pode ser usado para monitorar uma piscina ou instalação hidropônica. Ele se comunicará por meio do Bluetooth Low Energy e exibirá as informações em uma página da Web usando o Bluetooth da Web. E, por diversão, transformaremos isso em um Progressive Web App que você pode instalar da web.

Etapa 1: Quais são todos esses termos?

EC / pH / ORP / temperatura são algumas das medições de qualidade da água mais comuns. A condutividade elétrica (CE) é usada em hidroponia para medir a solução nutritiva, o pH para determinar o quão ácida / básica é a água e o ORP é usado para ajudar a determinar a capacidade da água de se desinfetar

• Bluetooth Low Energy é um protocolo sem fio para enviar e receber informações facilmente. A placa Arduino usada neste projeto é a Nano 33 IoT e vem com interfaces WiFi e BLE.
• Web Bluetooth é um conjunto de APIs implementadas no navegador Chrome do Google (e no Opera) que permitem que uma página da web se comunique diretamente com um dispositivo BLE.
• Os Progressive Web Apps são basicamente páginas da web que agem como aplicativos normais. O Android e o iPhone lidam com eles de maneira diferente, e eles são diferentes em desktops, então você precisará ler um pouco para detalhes.

Etapa 2: O Hardware

Antes de montarmos o hardware, há uma coisa a ser resolvida. Os dispositivos sensores ISE uFire vêm com o mesmo endereço I2C e estamos usando dois, portanto, um terá que ser trocado. Para este projeto, vamos escolher uma das placas ISE e usá-la para medir o ORP. Seguindo as etapas aqui, altere o endereço para 0x3e.

Agora que o endereço foi alterado, montar o hardware é fácil. Todos os dispositivos sensores usam o sistema de conexão Qwiic, portanto, basta conectar tudo em uma cadeia. Você precisará de um fio Qwiic para Macho para conectar um dos sensores ao Nano 33. Os fios são consistentes e codificados por cores. Conecte preto ao GND do Nano, vermelho ao pino + 3,3 V ou + 5 V, azul ao pino SDA que é A4 e amarelo ao pino SCL em A5.

Para este projeto, espera-se que as informações de temperatura venham do sensor EC, portanto, certifique-se de anexar um sensor de temperatura à placa EC. Porém, todas as placas têm a capacidade de medir a temperatura. Não se esqueça de conectar as sondas EC, pH e ORP aos sensores apropriados. Eles são facilmente conectados com conectores BNC.

Se você tem um gabinete, colocar tudo isso dentro seria uma boa ideia, especialmente considerando que haverá água envolvida.

Etapa 3: o software

A parte do software é dividida em duas seções principais: o firmware no Nano 33 e a página da web.

O fluxo básico é este:

• A página da web se conecta ao Nano por meio de BLE
• A página da web envia comandos baseados em texto para solicitar informações ou realizar ações
• O Nano escuta esses comandos, os executa e retorna informações
• A página da web recebe as respostas e atualiza a IU de acordo

Essa configuração permite que a página da web execute todas as funções necessárias que você espera, como fazer uma medição ou calibrar os sensores.

Etapa 4: Serviços e características BLE

Uma das primeiras coisas a aprender são os princípios básicos de como o BLE funciona.

Existem muitas analogias, então vamos escolher um livro. Um serviço seria um livro e uma característica seriam as páginas. Neste "livro BLE", as páginas têm algumas propriedades que não são do livro, como ser capaz de alterar o que a página diz e receber uma notificação quando isso acontece.

Um dispositivo BLE pode fazer quantos serviços quiser. Alguns são predefinidos e agem como uma forma de padronizar informações comumente usadas, como Tx Power ou perda de conexão, para coisas mais específicas como insulina ou oximetria de pulso. Você também pode simplesmente fazer um e fazer o que quiser com ele. Eles são definidos no software e identificados com um UUID. Você pode fazer UUIDs aqui.

No firmware para este dispositivo, há um serviço, definido como:

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

e duas características:

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

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

O tx_Characteristic será para onde os dispositivos enviam as informações, como medições de CE, para a página da web exibir. O rx_Characteristic é onde ele receberá comandos da página da web para executar.

Este projeto usa a biblioteca ArduinoBLE. Se você olhar, verá que há algumas maneiras diferentes de declarar uma característica. Este projeto usa BLEStringCharacteristic porque estaremos lidando com o tipo String e é apenas mais fácil, mas você também pode escolher BLECharCharacteristic ou BLEByteCharacteristic entre um punhado de outros.

Além disso, existem algumas propriedades que você pode atribuir à característica. tx_Characteristic tem BLENotify como uma opção. Isso significa que nossa página receberá uma notificação quando o valor dela mudar. rx_Characteristic tem BLEWrite que permitirá que nossa página o modifique. Há outros.

Depois, há um pouco de cola de código para unir todas essas coisas:

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

É mais ou menos autoexplicativo, mas vamos tocar em alguns pontos.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

É onde você aproveita ser notificado sobre a alteração do valor. A linha diz à classe para executar a função rxCallback quando o valor é alterado.

BLE.advertise ();

é o que faz com que tudo comece. Um dispositivo BLE enviará periodicamente um pequeno pacote de informações anunciando que está disponível para conexão. Sem ele, será invisível.

Etapa 5: Comandos de texto

Conforme mencionado anteriormente, este dispositivo se comunicará com a página da Web por meio de comandos de texto simples. Tudo é fácil de implementar porque o trabalho árduo já foi feito. Os sensores uFire vêm com uma biblioteca baseada em JSON e MsgPack para enviar e receber comandos. Você pode ler mais sobre os comandos EC e ISE em suas páginas de documentação.

Este projeto usará JSON porque é um pouco mais fácil de trabalhar e legível, ao contrário do formato MsgPack, que é binário.

Aqui está um exemplo de como tudo se conecta:

• A página da web pede ao dispositivo uma medição de EC enviando ec (ou mais especificamente escrevendo ec para a característica rx_Characteristic)
• O dispositivo recebe o comando e o executa. Em seguida, ele envia de volta uma resposta formatada em JSON de {"ec": 1.24} escrevendo para a característica tx_Characteristic.
• A página da web recebe as informações e as exibe

Etapa 6: A página da web

A página da Web para este projeto usará Vue.js para o front-end. Nenhum back-end é necessário. Além disso, para manter as coisas um pouco mais simples, nenhum sistema de construção é usado. Ele está dividido nas pastas usuais, js para javascript, css para CSS, ativos para ícones. A parte html dele não é nada especial. Ele usa bulma.io para estilizar e criar a interface do usuário. Você notará muito na seção. Ele está adicionando todos os css e ícones, mas também adicionando uma linha em particular.

Isso carrega nosso arquivo manifest.json, que é o que faz todas as coisas do PWA acontecerem. Ele declara algumas informações que dizem ao nosso telefone que esta página da web pode ser transformada em um aplicativo.

O javascript é onde a maioria das coisas interessantes acontecem. Ele é dividido em arquivos, o app.js contém o básico para fazer uma página da Web do Vue acompanhar todas as variáveis relacionadas à IU e algumas outras coisas. ble.js tem as coisas do bluetooth.

Etapa 7: Javascript e Web Bluetooth

Primeiro, isso só funciona no Chrome e no Opera. Eu gostaria que outros navegadores suportassem isso, mas por alguma razão, eles não suportam. Dê uma olhada no app.js e você verá os mesmos UUIDs que usamos em nosso firmware. Um para o serviço uFire e um para as características tx e rx.

Agora, se você olhar em ble.js, verá as funções connect () e disconnect ().

A função connect () contém alguma lógica para manter a IU em sincronia, mas é principalmente configurar coisas para enviar e receber informações sobre as características.

Existem algumas idiossincrasias ao lidar com Web Bluetooth. A conexão deve ser iniciada por algum tipo de interação física do usuário, como tocar em um botão. Você não pode se conectar programaticamente quando a página da web é carregada, por exemplo.

O código para iniciar uma conexão é parecido com este:

this.device = await navigator.bluetooth.requestDevice ({

filtros: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

Os filtros: e a seção optionalServices é necessária para evitar ver todos os dispositivos BLE por aí. Você pensaria que apenas a seção de filtro seria suficiente, mas também precisa da parte optionalServices.

O código acima mostrará uma caixa de diálogo de conexão. Faz parte da interface do Chrome e não pode ser alterado. O usuário selecionará na lista. Mesmo se houver apenas um dispositivo ao qual o aplicativo possa se conectar, o usuário ainda precisa passar por esta caixa de diálogo de seleção, devido a questões de segurança.

O resto do código está configurando o serviço e as características. Observe que configuramos uma rotina de retorno de chamada, semelhante ao retorno de chamada de notificação do firmware:

serviço = espera server.getPrimaryService (this.serviceUuid);

característico = aguardar serviço.getCharacteristic (this.txUuid); aguarde Character.startNotifications (); Character.addEventListener ("CharacterValuechanged", this.value_update);

this.value_update agora será chamado sempre que houver novas informações sobre a característica tx.

Uma das últimas coisas que ele faz é definir um cronômetro para atualizar as informações a cada 5 segundos.

value_update () é apenas uma função longa que espera pela chegada de novas informações JSON e atualiza a IU com elas.

ec.js, ph.js e orp.js contêm muitas pequenas funções que enviam os comandos para recuperar informações e calibrar os dispositivos.

Para tentar fazer isso, você precisará ter em mente que, para usar o Web Bluetooth, ele deve ser servido por HTTPS. Uma das muitas opções para um servidor HTTPS local é serve-https. Com o firmware carregado, tudo conectado e a página da web sendo exibida, você deve ser capaz de ver tudo funcionando.

Etapa 8: A parte PWA

Existem algumas etapas para transformar a página da web em um aplicativo real. Os Progressive Web Apps podem fazer muito mais do que este projeto os utiliza.

• Instalação de página da web
• Uma vez instalado, o acesso offline é possível
• Iniciado e executado como um aplicativo normal com um ícone de aplicativo de aparência normal

Para começar, precisaremos gerar vários arquivos. O primeiro é um arquivo manifest.json. Existem vários sites que farão isso por você, App Manifest Generator, sendo um deles.

Algumas coisas para entender:

• O escopo do aplicativo é importante. Coloquei esta página da web em ufire.co/uFire-BLE/. Isso significa que meu escopo de aplicativo é / uFire-BLE /.
• O URL de início também é importante. É o caminho para sua página da web particular com o domínio base já assumido. Então, como coloquei isso em ufire.co/uFire-BLE/, a URL de início também é / uFire-BLE /.
• O modo de exibição determinará a aparência do aplicativo, o modo autônomo fará com que pareça ser um aplicativo normal, sem quaisquer botões ou interface do Chrome.

Você acabará com um arquivo json. Ele deve ser colocado na raiz da página da web, junto com index.html.

A próxima coisa de que você precisa é um Service Worker. Novamente, eles podem fazer muito, mas este projeto usará apenas o cache para permitir que este aplicativo seja acessado offline. A implementação do service worker é principalmente clichê. Este projeto usou o exemplo do Google e alterou a lista de arquivos a serem armazenados em cache. Você não pode armazenar arquivos em cache fora do seu domínio.

Vá até o FavIcon Generator e faça alguns ícones.

A última coisa é adicionar algum código na função Vue mounted ().

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

Isso registrará o trabalhador com o navegador.

Você pode verificar se tudo está funcionando e, se não estiver, talvez descubra por que usando o Lighthouse, ele analisará o site e lhe dirá todo tipo de coisa.

Se tudo funcionou, quando você vai para a página da web, o Chrome vai perguntar se você deseja instalá-lo com um banner pop-up. Você pode vê-lo em ação em ufire.co/uFire-BLE/ se estiver no Chrome móvel. Se você estiver em uma área de trabalho, poderá encontrar um item de menu para instalá-lo.