Registrar datos y trazar un gráfico en línea usando NodeMCU, MySQL, PHP y Chartjs.org: 4 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:39

Este Instructable describe cómo podemos usar la placa Node MCU para recopilar datos de múltiples sensores, enviar estos datos a un archivo PHP alojado que luego agrega los datos a una base de datos MySQL. Luego, los datos se pueden ver en línea como un gráfico, utilizando chart.js.

Se requerirá un conocimiento básico de PHP y MySQL para este proyecto y necesitará acceso al alojamiento web con estos configurados para poder crear y ver sus propios gráficos. También supongo que tiene conocimientos básicos sobre el uso de la placa Node MCU y la carga de bocetos en ella. (Yo uso el IDE de Arduino para esto)

Paso 1: construcción del circuito

Como el Node MCU tiene solo un pin analógico, usaremos multiplexación para poder leer datos de múltiples sensores. (Varios instructivos cubren este concepto con más detalle, por lo que no entraré en eso aquí). En este ejemplo, he usado dos sensores (para luz y temperatura) pero puede cambiarlos a lo que quiera y agregar más sensores si es necesario. He usado una resistencia sensible a la luz, un termistor, dos diodos rectificadores, una resistencia de 330 ohmios y una resistencia de 10K y algunos cables de puente. El diagrama de Fritzing adjunto muestra cómo están todos conectados en la placa de pruebas.

Paso 2: Edite y cargue el boceto en Node MCU

Utilice este archivo.ino adjunto. Deberá editar esto con su propio nombre de red WiFi y contraseña para que el Node MCU pueda conectarse a su propia red.

En la parte inferior de este boceto, la línea 'demora (60000)'; da un retraso de un minuto entre las lecturas del sensor, pero esto se puede ajustar para adaptarse a sus propios requisitos. Sin embargo, recomendaría dejar al menos 10 segundos para permitir la conexión al archivo 'Updater.php' cada vez.

También tendrá que editar la ruta hacia donde alojará los dos archivos.php y los dos archivos javascript que se requieren. Puede descargarlos en el siguiente paso.

Paso 3: base de datos y archivos web

Cree su base de datos MySql. Cree una tabla llamada 'temp_light' (puede cambiar esto, pero deberá editar los dos archivos php para reflejar los cambios que realice). Dale a la tabla cuatro campos. Un campo de incremento automático primario. Un campo entero llamado 'temp', un campo entero llamado 'light' y un campo llamado 'date_time' que será una marca de tiempo y el valor predeterminado 'CURRENT_TIMESTAMP'

Ahora descargue el archivo.zip adjunto y descomprímalo. Esto le dará dos archivos php y una carpeta llamada 'scripts' que contiene archivos.js que obtuve de chartjs.org. Los dos archivos.js no necesitan ser editados y la carpeta 'scripts' debe estar alojada en la misma ubicación que sus dos archivos php. los dos archivos php deberán editarse con su propio nombre de base de datos, contraseña e I. P. Dirección.

En el archivo index.php verá la línea 50: $ adjust_temp = ($ temp * 0.0623);

Este cálculo es para convertir la lectura de temperatura lo más cerca posible de grados centígrados y se llegó a él por prueba y error y es casi seguro que tendrá que modificarse para adaptarse a su propio sensor de temperatura.

Ahora aloje los archivos php y la carpeta 'scripts' que contiene los dos archivos.js todos juntos en el mismo directorio. Busque ese directorio y debería ver su propio gráfico con los datos enviados desde su placa Node MCU.

Paso 4: el resultado final

Originalmente hice este proyecto hace unos dos años, pero nunca había llegado a escribir un instructivo para él hasta ahora. Puedes ver el gráfico creado por mi prueba aquí:

El gran pico en el gráfico es donde el sol brillaba a través de la ventana sobre los dos sensores y el lento declive nuevamente fue cuando el sol lentamente desapareció de la vista.