Stația meteo ESP8266 care afișează date pe un site web: 7 pași

2025 Autor: John Day | [email protected]. Modificat ultima dată: 2025-01-13 06:58

Notă: părți ale acestui tutorial pot fi disponibile în format video pe canalul meu YouTube - Tech Tribe

În acest instructable, voi arăta cum să creați o stație meteo care trimite direct date către site-ul dvs. web. Prin urmare, veți avea nevoie de propriul dvs. domeniu (Ex: msolonko.net). Pentru început, iată materialele de care aveți nevoie:

Articole:

Feather Huzzah (16,95 dolari)

Cablu micro USB cu date (1,99 USD)

Acumulator (25 USD): Voi discuta mai târziu de ce capacitate aveți nevoie pentru ce perioade de timp fără reîncărcare, astfel încât să puteți alege capacitatea dorită. Acesta este un link către cel pe care l-am folosit. De asemenea, îl puteți alimenta de la o priză.

1 Fotorezistor

Alte rezistențe - discutate mai târziu

Sârmă

Perf Board (5,59 USD) - pachet de 20

Senzor de temperatură, presiune și umiditate BME280 (9,99 USD)

Un fel de cutie; puteți imprima unul în 3D și vă voi arăta designul meu.

Webhosting și domeniu, dacă doriți să urmați complet cu tutorialul

Instrumente:

Cleste de sarma

Ciocan de lipit

Pasul 1: Codul Huzzah Feather

Codul va fi scris în Arduino IDE, care poate fi descărcat de aici. Înainte de a începe, vă rugăm să urmați instrucțiunile de aici pentru a configura Arduino IDE pentru a lucra cu Feather Huzzah. De asemenea, urmați aceste instrucțiuni pentru a descărca bibliotecile necesare pentru ca senzorul BME să funcționeze. Fișierul de cod este atașat și tot codul este comentat, astfel încât să îl puteți înțelege. Odată ce îl priviți, treceți la pasul următor, unde vom analiza codul care primește datele senzorului.

Pasul 2: Primirea datelor de la Feather Huzzah

Până acum, veți înțelege cum funcționează codul Arduino. Dacă nu, reveniți la cod și citiți comentariile mele (am comentat aproape fiecare rând). Acum vom scrie codul care primește datele. La fel ca înainte, toate acestea sunt comentate. Limbajul de programare utilizat pentru aceasta este PHP, despre care puteți citi mai multe aici.

Datele noastre vor fi stocate într-o bază de date MySQL, despre care puteți citi mai multe aici. Datele sunt stocate în tabele care au rânduri și coloane. Înainte de a scrie codul, ar trebui să realizăm structura tabelului pe cPanel-ul nostru de găzduire. Folosesc Arvixe Hosting, astfel încât cPanel poate arăta diferit. Consultați una dintre imagini pentru a vedea cum arată partea mea. În primul rând, doriți să creați o nouă bază de date MySQL dacă nu aveți deja una. Puteți folosi vrăjitorul pentru asta. Există multe resurse online în acest sens dacă aveți nevoie de ajutor.

După ce ați configurat o bază de date, accesați phpMyAdmin și selectați baza de date. Creați un tabel numit weather_data cu 9 coloane. Consultați una dintre imaginile mele de mai sus pentru a vedea ce trebuie să fie fiecare coloană (copiați numele, tipul de date și orice altceva exact dacă doriți să utilizați codul meu). Contorul va fi cheia noastră principală și ID-ul ne va ajuta să identificăm în ce zi fac datele (1: azi, 2: ieri, 3: orice altceva). Deoarece vom avea o mulțime de date, vom șterge unele dintre ele pe măsură ce devin mai vechi. De aceea avem nevoie de coloana id. Restul coloanelor se explică de la sine. În acest moment, tabelul dvs. din baza de date ar trebui să arate exact ca al meu.

Acum, descărcați codul atașat și citiți-l și comentariile mele. Când ați terminat, treceți la pasul următor.

Notă: când descărcați codul, redenumiți-l în esp.php. Din anumite motive, am primit o eroare când am încercat să încărc un fișier PHP.

Acesta este practic modul în care va funcționa codul.

1. Colectați date la fiecare 10 minute și afișați-le

2. Odată ce trece o zi, mediați la fiecare 6 valori (pentru a economisi spațiu pe DB), astfel încât să existe un punct de date pentru fiecare oră

3. Odată ce trece o altă zi, mediați toate datele rămase pentru ziua respectivă și stocați-le ca un singur punct de date

În acest fel, vom putea vedea fluctuații de lumină, temperatură etc. pe parcursul lunilor, fără a începe să ne distragem de fluctuațiile zilnice de temperatură, lumină etc.

Pasul 3: Preluarea datelor din baza de date pentru afișare

Deci, acum ne-am gândit cum să colectăm date meteo și să le încărcăm în baza noastră de date. Acum trebuie să îl putem prelua într-o formă utilizabilă. Ca și înainte, am atașat un fișier PHP getWeatherData.txt pe care ar trebui să îl salvați pe gazda dvs. și să schimbați extensia numelui de fișier în.php în loc de.txt. Tot codul este comentat. Citiți-o pentru a o înțelege și continuați odată ce credeți că ați obținut-o. Dacă aveți întrebări, nu ezitați să întrebați mai jos.

Pasul 4: Configurarea bibliotecilor și alte lucruri

Pentru acest proiect, unul dintre cadrele pe care le vom folosi este AngularJS, care ne va ajuta să comunicăm cu baza de date și să construim un SPA (Single Page Application). Pentru a obține biblioteca, accesați acest link și descărcați o versiune 1.64 sau mai recentă. Pentru acest tutorial, am folosit 1.64, dar versiunile noi sunt lansate deseori, astfel încât să puteți utiliza una diferită. Găsiți un link pe pagina respectivă care se termină astfel: /VERSION/angular.min.js

Copiați linkul și salvați-l undeva în siguranță. Tocmai am primit un link pentru biblioteca AngularJS. Veți avea nevoie de acesta pentru următorul pas. Acum, pe aceeași pagină găsiți un link care arată astfel și copiați-l și: /VERSION/angular-route.min.js

Traseul unghiular ne va ajuta să ne gestionăm SPA-ul și să gestionăm comutarea vizualizărilor din pagină.

Vrem să putem afișa frumos diagrame ale datelor noastre. Pentru aceasta vom folosi o bibliotecă numită ChartJS. Mergeți aici, alegeți cea mai recentă versiune și salvați un link care se termină astfel: VERSION / Chart.bundle.min.js

În cele din urmă, vom folosi o bibliotecă pentru a aranja paginile numite Bootstrap. Accesați acest link către Pornire rapidă și lăsați acest lucru deschis pentru moment. Odată ce începem să scriem codul clientului, veți putea înlocui vechile mele legături cu versiunea mai nouă.

Acum, ar trebui să configurăm diferite vizualizări pentru aplicația noastră. În directorul de pe gazda dvs. unde aveți cele două fișiere anterioare (esp.php și getWeatherData.php), creați un nou folder numit weather_views. Aici, vom pune toate paginile noastre care vor corespunde fiecare cu un id din baza noastră de date (1, 2 sau 3).

În dosar, creați 3 fișiere (day.html, old.html și ieri.html). Descărcați codul atașat și puneți-l în acele fișiere. Codul pentru DAY. HTML este comentat, astfel încât să puteți înțelege ce se întâmplă. Codul pentru celelalte 2 pagini este practic același (este comentată o parte diferită din old.html).

Odată ce ați terminat cu acest pas, treceți la următorul, care este cel mai dificil pas de programare.

Pasul 5: Fișier HTML principal

În acest pas, veți crea / edita / citi fișierul HTML principal unde veți afișa totul. Salvați fișierul atașat (care, ca întotdeauna, este comentat) ca espdata.html în același director ca esp.php. Sper că puteți face unele modificări și să înțelegeți ce se întâmplă cu adevărat.

Aceasta este cea mai mare parte a codului dvs., deci este cu siguranță important să înțelegeți ce se întâmplă.

Pasul 6: Testarea cablajului pe o placă de calcul

Acum vom testa că tot codul funcționează cu hardware-ul nostru. Dacă nu ați făcut-o deja, lipiți știfturile antetului de pe Feather Huzzah și senzorul BME280. Pentru fiecare pas, este atașată o fotografie.

1. Așezați pană pe panou. Conectați 3V la șina + și GND la - șina.

2. Conectați senzorul VIN la + șină și GND la - șină.

3. Conectați senzorul SDA la pinul 4 de pe pană. Conectați SCL la pinul 5.

4. Așezați fotorezistorul pe panou cu un cablu care merge spre șina +.

5. Conectați un rezistor de 4.7k la cablul neconectat al fotorezistorului. Conectați cablul neconectat al 4.7k la un rezistor de 2k. Conectați capătul neconectat al rezistorului 2k la șina - (GND).

6. Conectați îmbinarea rezistenței 4.7k și 2k la pinul ADC (pin analogic). Tocmai am făcut un divizor de tensiune care împarte tensiunea maximă citită de pin de la 3,3V la mai puțin de 1V. Puteți juca cu propria combinație, dacă doriți, dar rețineți că tensiunea dată pinului analogic trebuie să fie mai mică de 1V.

7. În cele din urmă, conectați pinul RST (resetare) de pe pană la pinul 16 de pe pană (fir portocaliu în fotografie). Această configurație permite Feather Huzzah să intre în modul de somn profund pentru a economisi energie.

Acum ai terminat! Încărcați codul pe huzzah-ul dvs. de pene și, sperăm, puteți vedea actualizarea paginii dvs. web (doar pagina day.html). Dacă nu, încercați să utilizați monitorul serial pentru a depana sau întrebați în comentariile de mai jos.

Pasul 7: Proiect permanent (opțional)

Presupunând că totul funcționează, dacă doriți, puteți face acest proiect mai permanent. Nu voi arăta acest lucru aici, dar puteți lipi toate componentele pe o placă de perfecționare și apoi le puteți închide într-un container. Voi atașa fișierele IPT pentru containerul 3D pe care le-am folosit mai jos și câteva fotografii pentru a începe. Containerul este destinat inspirației, deoarece probabil că veți dori să îl faceți mai personal cu un design și un text diferit. Distrează-te cu personalizarea! Noroc!