Enregistrez des données et tracez un graphique en ligne à l'aide de NodeMCU, MySQL, PHP et Chartjs.org : 4 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Ce Instructable décrit comment nous pouvons utiliser la carte Node MCU pour collecter des données à partir de plusieurs capteurs, envoyer ces données à un fichier PHP hébergé qui ajoute ensuite les données à une base de données MySQL. Les données peuvent ensuite être visualisées en ligne sous forme de graphique, à l'aide de chart.js.

Une connaissance de base de PHP et MySQL sera requise pour ce projet et vous aurez besoin d'un accès à l'hébergement Web avec ces paramètres pour pouvoir créer et visualiser vos propres graphiques. Je suppose également que vous avez des connaissances de base sur l'utilisation de la carte Node MCU et le téléchargement de croquis sur celle-ci. (J'utilise l'IDE Arduino pour cela)

Étape 1: Construire le circuit

Comme le Node MCU n'a qu'une seule broche analogique, nous utiliserons le multiplexage pour pouvoir lire les données de plusieurs capteurs. (Un certain nombre d'instructables couvrent ce concept plus en détail donc je n'entrerai pas dans cela ici). Dans cet exemple, j'ai utilisé deux capteurs (pour la lumière et la température), mais vous pouvez les modifier comme vous le souhaitez et ajouter d'autres capteurs si nécessaire. J'ai utilisé une résistance sensible à la lumière, une thermistance, deux diodes de redressement, une résistance de 330 ohms et une résistance de 10K et quelques fils de liaison. Le diagramme de Fritzing ci-joint montre comment ils sont tous connectés sur la planche à pain.

Étape 2: éditez et téléchargez l'esquisse sur le nœud MCU

Utilisez ce fichier.ino joint. Vous devrez le modifier avec votre propre nom et mot de passe de réseau WiFi afin que le Node MCU puisse se connecter à votre propre réseau.

Au bas de ce croquis, la ligne 'delay (60000);' donne un délai d'une minute entre les lectures du capteur, mais cela peut être ajusté en fonction de vos propres besoins. Je recommanderais cependant de laisser au moins 10 secondes pour permettre la connexion au fichier 'updater.php' à chaque fois.

Vous devrez également modifier le chemin vers lequel vous allez héberger les deux fichiers.php et les deux fichiers javascript qui sont requis. Vous pouvez les télécharger à l'étape suivante.

Étape 3: Base de données et fichiers Web

Créez votre base de données MySql. Créez une table appelée 'temp_light' (vous pouvez modifier cela, mais vous devrez modifier les deux fichiers php pour refléter les modifications que vous apportez). Donnez au tableau quatre champs. Un champ d'incrémentation automatique principal. Un champ entier appelé 'temp', un champ entier appelé 'light' et un champ appelé 'date_time' qui sera un horodatage et la valeur par défaut 'CURRENT_TIMESTAMP'

Téléchargez maintenant le fichier.zip joint et décompressez-le. Cela vous donnera deux fichiers php et un dossier appelé "scripts" qui contient des fichiers.js que j'ai obtenus de chartjs.org. Les deux fichiers.js n'ont pas besoin d'être édités et le dossier 'scripts' doit être hébergé au même endroit que vos deux fichiers php. les deux fichiers php devront tous deux être modifiés avec votre propre nom de base de données, mot de passe et adresse IP de l'hôte. adresse.

Dans le fichier index.php, vous verrez la ligne 50: $adjusted_temp=($temp*0.0623);

Ce calcul consiste à convertir la lecture de la température aussi près que possible des degrés centigrades et a été obtenu par essais et erreurs et devra presque certainement être modifié pour s'adapter à votre propre capteur de température.

Hébergez maintenant les deux fichiers php et le dossier 'scripts' contenant les deux fichiers.js tous ensemble dans le même répertoire. Accédez à ce répertoire et vous devriez voir votre propre graphique avec les données envoyées par votre carte Node MCU.

Étape 4: Le résultat fini

J'ai à l'origine fait ce projet il y a environ deux ans, mais je n'avais jamais réussi à écrire un instructable pour cela jusqu'à maintenant. Vous pouvez voir le graphique créé par mon test ici:

Le grand pic dans le graphique est l'endroit où le soleil a brillé à travers la fenêtre sur les deux capteurs et le lent déclin s'est à nouveau produit lorsque le soleil a lentement disparu de la vue.