Visualização da poluição atmosférica: 4 etapas

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

O problema da poluição do ar atrai cada vez mais atenção. Desta vez, tentamos monitorar PM2.5 com Wio LTE e o novo Sensor Laser PM2.5.

Etapa 1: Coisas usadas neste projeto

Componentes de hardware

• Wio LTE EU versão v1.3- 4G, Cat.1, GNSS, Espruino compatível
• Grove - Sensor Laser PM2.5 (HM3301)
• Grove - LCD 16 x 2 (branco sobre azul)

Aplicativos de software e serviços online

• IDE Arduino
• API PubNub Publicar / Assinar

Etapa 2: Conexão de Hardware

Conforme a imagem acima, cortamos 2 linhas de arvoredo para comunicação I2C, para que o Wio LTE possa se conectar ao LCD Grove e ao PM2.5 Sensor Grove ao mesmo tempo. Você também pode usar um Hub I2C para fazer isso.

E não se esqueça, conecte a antena LTE ao Wio LTE e conecte seu cartão SIM a ela.

Etapa 3: Configuração da Web

Clique aqui para fazer o login ou registrar uma conta PubNub, ela será usada para transmitir dados em tempo real.

No portal de administração PubNub, você verá um projeto de demonstração. Entre no projeto, há 2 chaves, Chave de Publicação e Chave de Assinatura, lembre-se delas para Programação de Software.

Etapa 4: Programação de software

Parte 1. Wio LTE

Como não há biblioteca PubNub para Wio LTE, podemos publicar nossos dados em tempo real por meio de solicitação HTTP, consulte PubNub REST API Document.

Para fazer uma conexão HTTP de seu cartão SIM conectado ao Wio LTE, você deve definir seu APN primeiro. Se você não sabe disso, entre em contato com sua operadora de celular.

E defina sua chave de publicação PubNub, chave de assinatura e canal depois de definir o APN. Um canal aqui, é usado para diferenciar editores e assinantes, os assinantes receberão dados de editores que têm o mesmo canal.

Pressione e segure o botão Boot0 no Wio LTE, conecte-o ao seu computador por meio de um cabo USB, carregue o código no IDE do Arduino para ele. Após fazer o upload, pressione o botão RST para reiniciar o Wio LTE.

Parte 2. Página da web

Vá para PubNub, entre em Demo Keyset e clique em Debug Console à esquerda para abrir uma nova página.

Preencha o nome do seu canal na caixa de texto Canal padrão e clique no botão Adicionar cliente. Aguarde um pouco, você verá os valores PM1.0, PM2.5 e PM10 aparecerem no Console de depuração.

Mas não é amigável para nós, então consideramos exibi-lo como um gráfico.

Em primeiro lugar, crie um novo arquivo html em seu computador. Abra-o em um editor de texto e adicione tags HTML básicas a ele.

Em seguida, adicione o script PubNub e Chart.js ao cabeçalho, você também pode adicionar um título a esta página.

Monitor de poeira visto

Deve haver um local para exibir um gráfico, portanto, adicionamos uma tela ao corpo da página.

E adicione a tag de script para que possamos adicionar javascript para inscrever dados em tempo real e desenhar o gráfico.

Para assinar dados em tempo real do PubNub, deve haver um objeto PubNub, var pubnub = new PubNub ({

publicarKey: "", subscribeKey: ""});

e adicione um ouvinte a ele.

pubnub.addListener ({

mensagem: função (msg) {}});

O membro da mensagem no parâmetro msg da função mensagem são os dados de que precisamos. Agora podemos assinar dados em tempo real do PubNub:

pubnub.subscribe ({

canal: ["poeira"]});

Mas como exibi-lo como gráfico? Criamos 4 matrizes para manter os dados em tempo real:

var chartLabels = new Array ();

var chartPM1Data = new Array (); var chartPM25Data = new Array (); var chartPM10Data = new Array ();

Entre eles, o array chartLabels é usado para manter os dados alcançados no tempo, chartPM1Data, chartPM25Data e chartPM10Data são usados para manter os dados PM1.0, dados PM2.5 e dados PM10, respectivamente. Quando os dados em tempo real chegarem, envie-os para os arrays separadamente.

chartLabels.push (new Date (). toLocalString ());

chartPM1Data.push (msg.message.pm1); chartPM25Data.push (msg.message.pm25); chartPM10Data.push (msg.message.pm10);

Em seguida, exiba o gráfico:

var ctx = document.getElementById ("chart"). getContext ("2d");

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, datasets: [{label: "PM1.0", data: chartPM1Data, borderColor: "# FF6384", fill: false}, {label: "PM2.5", data: chartPM25Data, borderColor: "# 36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "# CC65FE", fill: false}]}});

Agora abra este arquivo html com o navegador da web, você verá as alterações de dados.