Station météo ESP8266 qui affiche des données sur un site Web : 7 étapes

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

Remarque: des parties de ce didacticiel peuvent être disponibles au format vidéo sur ma chaîne YouTube - Tech Tribe

Dans ce instructable, je vais montrer comment faire une station météo qui envoie directement des données à votre site Web. Par conséquent, vous aurez besoin de votre propre domaine (Ex: msolonko.net). Pour commencer, voici le matériel dont vous aurez besoin:

Articles:

Plume Huzzah (16,95 $)

Câble micro USB avec données (1,99 $)

Batterie (25 $): je discuterai plus tard de la capacité dont vous avez besoin pendant combien de temps sans recharger, afin que vous puissiez choisir la capacité que vous souhaitez. Ceci est un lien vers celui que j'ai utilisé. Vous pouvez également simplement l'alimenter à partir d'une prise.

1 photorésistance

Quelques autres résistances - discutées plus tard

Câble

Planche Perf (5,59 $) - Paquet de 20

Capteur de température, de pression et d'humidité BME280 (9,99 $)

Une sorte de boîte; vous pouvez en imprimer un en 3D et je vous montrerai mon design.

Hébergement Web et domaine, si vous souhaitez suivre complètement le tutoriel

Outils:

Coupe-fil

Fer à souder

Étape 1: Code de plume Huzzah

Le code sera écrit dans Arduino IDE, qui peut être téléchargé ici. Avant de commencer, veuillez suivre les instructions ici afin de configurer l'IDE Arduino pour qu'il fonctionne avec votre Feather Huzzah. Suivez également ces instructions pour télécharger les bibliothèques nécessaires au fonctionnement du capteur BME. Le fichier de code est joint et tout le code est commenté afin que vous puissiez le comprendre. Une fois que vous l'avez regardé, passez à l'étape suivante où nous examinerons le code qui reçoit les données du capteur.

Étape 2: Réception des données de Feather Huzzah

À présent, vous comprenez, espérons-le, comment fonctionne le code Arduino. Sinon, revenez au code et lisez mes commentaires (j'ai commenté presque chaque ligne). Nous allons maintenant écrire le code qui reçoit les données. Comme avant, tout est commenté. Le langage de programmation utilisé pour cela est PHP, sur lequel vous pouvez en savoir plus ici.

Nos données seront stockées dans une base de données MySQL, dont vous pouvez en savoir plus ici. Les données sont stockées dans des tables comportant des lignes et des colonnes. Avant d'écrire le code, nous devons créer la structure de notre table sur notre hébergement cPanel. J'utilise Arvixe Hosting, votre cPanel peut donc être différent. Référez-vous à l'une des images pour voir à quoi ressemble une partie de la mienne. Tout d'abord, vous souhaitez créer une nouvelle base de données MySQL si vous n'en avez pas déjà une. Vous pouvez utiliser l'assistant pour cela. Il existe de nombreuses ressources en ligne à ce sujet si vous avez besoin d'aide.

Une fois que vous avez configuré une base de données, accédez à phpMyAdmin et sélectionnez votre base de données. Créez une table nommée weather_data avec 9 colonnes. Consultez l'une de mes images ci-dessus pour voir ce que devrait être chaque colonne (copiez le nom, le type de données et tout le reste exactement si vous souhaitez utiliser mon code). Counter sera notre clé primaire et id nous aidera à identifier le jour auquel les données se rapportent (1: aujourd'hui, 2: hier, 3: tout le reste). Comme nous aurons beaucoup de données, nous en effacerons une partie au fur et à mesure qu'elles vieilliront. C'est pourquoi nous avons besoin de la colonne id. Le reste des colonnes est assez explicite. À l'heure actuelle, votre table dans votre base de données devrait ressembler exactement à la mienne.

Maintenant, téléchargez le code ci-joint et lisez-le ainsi que mes commentaires. Une fois terminé, passez à l'étape suivante.

Remarque: lorsque vous téléchargez le code, renommez-le en esp.php. Pour une raison quelconque, j'ai eu une erreur lorsque j'ai essayé de télécharger un fichier PHP.

C'est essentiellement la façon dont le code fonctionnera.

1. Collectez des données toutes les 10 minutes et affichez-les

2. Une fois par jour, faites la moyenne toutes les 6 valeurs (pour économiser de l'espace de base de données) afin qu'il y ait un point de données pour chaque heure

3. Une fois qu'un autre jour passe, faites la moyenne de toutes les données restantes pour ce jour-là et stockez-les comme un seul point de données

De cette façon, nous pourrons voir les fluctuations de la lumière, de la température, etc. au cours des mois sans être distraits par les fluctuations quotidiennes de la température, de la lumière, etc.

Étape 3: Récupération des données de la base de données à afficher

Alors maintenant, nous avons compris comment collecter des données météorologiques et les télécharger dans notre base de données. Maintenant, nous devons être en mesure de le récupérer sous une forme utilisable. Comme précédemment, j'ai joint un fichier PHP getWeatherData.txt que vous devez enregistrer sur votre hôte et modifier l'extension du nom de fichier en.php au lieu de.txt. Tout le code est commenté. Lisez-le pour le comprendre et passez à autre chose une fois que vous pensez l'avoir. Si vous avez des questions, n'hésitez pas à les poser ci-dessous.

Étape 4: Configuration des bibliothèques et quelques autres choses

Pour ce projet, l'un des frameworks que nous utiliserons est AngularJS, qui nous aidera à communiquer avec la base de données et à créer un SPA (Single Page Application). Pour obtenir la bibliothèque, accédez à ce lien et téléchargez une version 1.64 ou supérieure. Pour ce tutoriel, j'ai utilisé la 1.64 mais de nouvelles versions sont souvent publiées, vous pouvez donc en utiliser une autre. Trouvez un lien sur cette page qui se termine comme ceci: /VERSION/angular.min.js

Copiez le lien et enregistrez-le dans un endroit sûr. Nous venons de recevoir un lien pour la bibliothèque AngularJS. Vous en aurez besoin pour la prochaine étape. Maintenant, sur la même page, trouvez un lien qui ressemble à ceci et copiez-le également: /VERSION/angular-route.min.js

L'itinéraire angulaire nous aidera à gérer notre SPA et à gérer le changement de vue dans la page.

Nous voulons être en mesure de bien afficher des graphiques de nos données. Pour cela, nous utiliserons une bibliothèque appelée ChartJS. Allez ici, choisissez la dernière version et enregistrez un lien qui se termine comme ceci: VERSION/Chart.bundle.min.js

Enfin, nous utiliserons une bibliothèque pour mettre en page les pages appelées Bootstrap. Accédez à ce lien vers Quick Start et laissez-le ouvert pour le moment. Une fois que nous aurons commencé à écrire le code client, vous pourrez remplacer mes anciens liens par la nouvelle version.

Maintenant, nous devons configurer les différentes vues pour notre application. Dans le répertoire de votre hébergeur où se trouvent les deux fichiers précédents (esp.php et getWeatherData.php), créez un nouveau dossier nommé weather_views. Ici, nous mettrons toutes nos pages qui correspondront chacune à un identifiant de notre base de données (1, 2 ou 3).

Dans le dossier, créez 3 fichiers (day.html, old.html et hier.html). Téléchargez le code joint et placez-le dans ces fichiers. Le code de DAY. HTML est commenté afin que vous puissiez comprendre ce qui se passe. Le code pour les 2 autres pages est fondamentalement le même (une partie différente dans old.html est commentée).

Une fois que vous avez terminé cette étape, passez à la suivante, qui est l'étape de programmation la plus difficile.

Étape 5: Fichier HTML principal

Dans cette étape, vous allez créer/éditer/lire le fichier HTML principal où vous allez tout afficher. Enregistrez le fichier joint (qui, comme toujours, est commenté) sous le nom espdata.html dans le même répertoire que esp.php. J'espère que vous pourrez y apporter quelques modifications et comprendre ce qui se passe réellement.

Il s'agit de la majeure partie de votre code, il est donc important de comprendre ce qui se passe.

Étape 6: Test de câblage sur une planche à pain

Nous allons maintenant tester que tout le code fonctionne avec notre matériel. Si vous ne l'avez pas déjà fait, soudez les broches d'en-tête sur le Feather Huzzah et le capteur BME280. Pour chaque étape, une photo est jointe.

1. Placez la plume sur la planche à pain. Connectez 3V au rail + et GND au rail -.

2. Connectez le capteur VIN au rail + et GND au rail -.

3. Connectez le capteur SDA à la broche 4 de la plume. Connectez SCL à la broche 5.

4. Placez la photorésistance sur la maquette avec un fil allant au rail +.

5. Connectez une résistance de 4,7 k au fil non connecté de la photorésistance. Connectez le fil non connecté du 4,7k à une résistance de 2k. Connectez l'extrémité non connectée de la résistance 2k au rail - (GND).

6. Connectez le joint des résistances 4,7k et 2k à la broche ADC (broche analogique). Nous venons de créer un diviseur de tension qui divise la tension maximale lue par la broche de 3,3V à moins de 1V. Vous pouvez jouer avec votre propre combinaison si vous le souhaitez, mais gardez à l'esprit que la tension fournie à la broche analogique doit être inférieure à 1V.

7. Enfin, connectez la broche RST (reset) de la plume à la broche 16 de la plume (fil orange sur la photo). Cette configuration permet au Feather Huzzah d'entrer en mode veille profonde pour économiser de l'énergie.

Maintenant, vous avez terminé ! Téléchargez le code sur votre plume huzzah et, espérons-le, vous pourrez voir la mise à jour de votre page Web (uniquement la page day.html). Sinon, essayez d'utiliser le moniteur série pour dépanner ou demandez dans les commentaires ci-dessous.

Étape 7: Projet permanent (facultatif)

En supposant que tout fonctionne, si vous le souhaitez, vous pouvez rendre ce projet plus permanent. Je ne le montrerai pas ici, mais vous pouvez souder tous les composants sur une carte perforée, puis les enfermer dans un conteneur. Je vais joindre les fichiers IPT du conteneur 3D que j'ai utilisé ci-dessous et quelques photos pour vous aider à démarrer. Le conteneur est destiné à l'inspiration car vous voudrez probablement le rendre plus personnel avec un design et un texte différents. Amusez-vous avec la personnalisation! Bonne chance!