Registre dados e plote um gráfico online usando NodeMCU, MySQL, PHP e Chartjs.org: 4 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Este Instructable descreve como podemos usar a placa Node MCU para coletar dados de vários sensores, enviar esses dados para um arquivo PHP hospedado que, em seguida, adiciona os dados a um banco de dados MySQL. Os dados podem então ser visualizados online como um gráfico, usando chart.js.

Um conhecimento básico de PHP e MySQL será necessário para este projeto e você precisará de acesso a hospedagem na web com estes configurados para poder criar e visualizar seus próprios gráficos. Também estou assumindo que você tem conhecimento básico de como usar a placa Node MCU e fazer upload de esboços para ela. (Eu uso o IDE do Arduino para isso)

Etapa 1: Construindo o Circuito

Como o Node MCU tem apenas um pino analógico, usaremos a multiplexação para poder ler dados de vários sensores. (Vários instrutíveis cobrem esse conceito com mais detalhes, então não vou entrar nisso aqui). Neste exemplo, usei dois sensores (para luz e temperatura), mas você pode alterá-los para o que quiser e adicionar mais sensores, se necessário. Eu usei um resistor sensível à luz, um termistor, dois diodos retificadores, um resistor de 330 ohm e um resistor de 10K e alguns fios de jumper. O diagrama de Fritzing em anexo mostra como todos eles estão conectados na placa de ensaio.

Etapa 2: edite e carregue o esboço para o Node MCU

Use este arquivo.ino anexado. Você precisará editar isso com seu próprio nome de rede WiFi e senha para que o Node MCU possa se conectar à sua própria rede.

Na parte inferior deste esboço, a linha 'atraso (60000);' fornece um minuto de atraso entre as leituras do sensor, mas isso pode ser ajustado para atender às suas próprias necessidades. Eu recomendaria deixar pelo menos 10 segundos para permitir a conexão com o arquivo 'updater.php' a cada vez.

Você também terá que editar o caminho para onde hospedará os dois arquivos.php e os dois arquivos javascript que são necessários. Você pode baixá-los na próxima etapa.

Etapa 3: banco de dados e arquivos da web

Crie seu banco de dados MySql. Crie uma tabela chamada 'temp_light' (você pode alterar isso, mas precisará editar os dois arquivos php para refletir as alterações feitas). Dê à tabela quatro campos. Um campo primário de incremento automático. Um campo inteiro denominado 'temp', um campo inteiro denominado 'luz' e um campo denominado 'data_hora' que será um carimbo de data / hora e valor padrão 'CURRENT_TIMESTAMP'

Agora baixe o arquivo.zip anexado e descompacte-o. Isso lhe dará dois arquivos php e uma pasta chamada 'scripts' que contém arquivos.js que obtive em chartjs.org. Os dois arquivos.js não precisam ser editados e a pasta 'scripts' deve ser hospedada no mesmo local que seus dois arquivos php. os dois arquivos php precisarão ser editados com seu próprio nome de banco de dados, senha e I. P. de host. Morada.

No arquivo index.php você verá a linha 50: $ Adjust_temp = ($ temp * 0.0623);

Este cálculo é para converter a leitura da temperatura para o mais próximo possível de graus centígrados e cheguei por tentativa e erro e quase certamente terá que ser alterado para se adequar ao seu próprio sensor de temperatura.

Agora hospede os arquivos php e a pasta 'scripts' contendo os dois arquivos.js juntos no mesmo diretório. Navegue até esse diretório e você deverá ver seu próprio gráfico com os dados enviados de sua placa Node MCU.

Etapa 4: O resultado final

Originalmente fiz este projeto há cerca de dois anos, mas nunca tinha escrito um instrutível para ele até agora. Você pode ver o gráfico criado pelo meu teste aqui:

O grande pico no gráfico é onde o sol brilhou através da janela sobre os dois sensores e o lento declínio novamente foi quando o sol lentamente saiu de vista.