ESP8266 Meteorološka stanica koja prikazuje podatke na web stranici: 7 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:07

Napomena: Dijelovi ovog vodiča mogu biti dostupni u video formatu na mom YouTube kanalu - Tech Tribe

U ovom uputstvu pokazat ću kako napraviti vremensku stanicu koja direktno šalje podatke na vašu web stranicu. Stoga će vam trebati vaša vlastita domena (npr. Msolonko.net). Za početak, evo materijala koji će vam trebati:

Stavke:

Perje Huzzah (16,95 USD)

Mikro USB kabel s podacima (1,99 USD)

Baterija (25 USD): Kasnije ću razgovarati o tome koji vam kapacitet treba koliko sati bez punjenja, tako da možete izabrati željeni kapacitet. Ovo je link do onog koji sam koristio. Možete ga i napajati iz utičnice.

1 Fotootpornik

Neki drugi otpornici - o kojima će biti riječi kasnije

Žica

Perf Board (5,59 USD) - Pakovanje od 20 komada

BME280 Senzor temperature, pritiska i vlažnosti (9,99 USD)

Neka vrsta kutije; možete 3D ispisati, a ja ću vam pokazati svoj dizajn.

Webhosting i domena, ako želite u potpunosti slijediti vodič

Alati:

Rezač žice

Lemilica

Korak 1: Kod Huzzah Perja

Kôd će biti napisan u Arduino IDE -u, koji se može preuzeti ovdje. Prije nego počnemo, slijedite upute ovdje kako biste postavili Arduino IDE za rad s vašim Feather Huzzahom. Također slijedite ove upute za preuzimanje potrebnih knjižnica za rad BME senzora. Datoteka koda je priložena, a sav kôd je komentiran kako biste je razumjeli. Kada ga pogledate, prijeđite na sljedeći korak gdje ćemo pogledati kôd koji prima podatke senzora.

Korak 2: Primanje podataka od Feather Huzzaha

Nadamo se da ste do sada shvatili kako funkcionira Arduino kod. Ako ne, vratite se kodu i pročitajte moje komentare (komentirao sam gotovo svaki redak). Sada ćemo napisati kôd koji prima podatke. Kao i prije, sve se komentira. Programski jezik koji se koristi za to je PHP, o čemu možete pročitati više ovdje.

Naši podaci će biti pohranjeni u MySQL bazi podataka, o čemu možete pročitati više ovdje. Podaci se pohranjuju u tablice koje sadrže redove i stupce. Prije nego što napišemo kôd, trebali bismo napraviti strukturu naše tablice na našem hosting cPanelu. Koristim Arvixe hosting, pa bi vaš cPanel mogao izgledati drugačije. Pogledajte jednu od slika da vidite kako moj dio izgleda. Prvo želite stvoriti novu MySQL bazu podataka ako je već nemate. Za to možete koristiti čarobnjak. O tome postoji mnoštvo internetskih resursa ako vam je potrebna pomoć.

Nakon što postavite bazu podataka, idite na phpMyAdmin i odaberite svoju bazu podataka. Napravite tablicu s imenom weather_data s 9 stupaca. Posavjetujte se sa jednom od mojih slika gore da vidite koja bi svaka kolona trebala biti (kopirajte naziv, tip podataka i sve ostalo ako želite koristiti moj kôd). Brojač će biti naš primarni ključ, a id će nam pomoći da identificiramo koji dan se podaci odnose (1: danas, 2: jučer, 3: sve ostalo). Budući da ćemo imati puno podataka, neke ćemo izbrisati s godinama. Zato nam je potrebna kolona id. Ostatak kolumni prilično je jasan. Trenutno bi vaša tablica u vašoj bazi podataka trebala izgledati potpuno poput moje.

Sada preuzmite priloženi kôd i pročitajte ga i moje komentare. Kada završite, prijeđite na sljedeći korak.

Napomena: kada preuzmete kôd, preimenujte ga u esp.php. Iz nekog razloga, došlo mi je do greške kada sam pokušao učitati PHP datoteku.

U osnovi će kod funkcionirati.

1. Prikupljajte podatke svakih 10 minuta i prikažite ih

2. Jednom dnevno prođe prosjek svakih 6 vrijednosti (radi uštede prostora u bazi podataka), tako da postoji tačka podataka za svaki sat

3. Nakon što prođe još jedan dan, procijenite sve preostale podatke za taj dan i pohranite ih kao samo jednu točku podataka

Na ovaj način ćemo moći vidjeti fluktuacije svjetla, temperature itd. U razdoblju od mjeseci, a da pri tom ne omete dnevne oscilacije temperature, svjetlosti itd.

Korak 3: Preuzimanje podataka iz baze podataka na prikaz

Sada smo smislili kako prikupiti vremenske podatke i postaviti ih u našu bazu podataka. Sada ga moramo moći preuzeti u upotrebljivom obliku. Kao i prije, priložio sam PHP datoteku getWeatherData.txt koju biste trebali spremiti na svoj host i promijeniti nastavak naziva datoteke u.php umjesto u.txt. Sav kôd je komentiran. Pročitajte ga da biste ga razumjeli i krenite dalje kad mislite da ga imate. Ako imate pitanja, slobodno pitajte ispod.

Korak 4: Postavljanje biblioteka i neke druge stvari

Za ovaj projekt, jedan od okvira koji ćemo koristiti je AngularJS, koji će nam pomoći u komunikaciji s bazom podataka i izgradnji SPA (Single Page Application). Da biste dobili biblioteku, idite na ovu vezu i preuzmite verziju 1.64 ili noviju. Za ovaj vodič koristio sam 1.64, ali se često pojavljuju nove verzije pa možete koristiti drugu. Pronađite vezu na toj stranici koja završava ovako: /VERSION/angular.min.js

Kopirajte vezu i spremite je na sigurno mjesto. Upravo smo dobili vezu za biblioteku AngularJS. Trebat će vam za sljedeći korak. Sada na istoj stranici pronađite vezu koja izgleda ovako i kopirajte je: /VERSION/angular-route.min.js

Ugaona ruta će nam pomoći u upravljanju našim SPA-om i rukovanju promjenom prikaza na stranici.

Želimo biti u mogućnosti lijepo prikazati grafikone naših podataka. Za to ćemo koristiti biblioteku pod nazivom ChartJS. Idite ovdje, odaberite najnoviju verziju i spremite vezu koja završava ovako: VERSION/Chart.bundle.min.js

Konačno, biblioteku ćemo koristiti za postavljanje stranica pod nazivom Bootstrap. Idite na ovu vezu za Brzi početak i ostavite ovo otvoreno za sada. Kad počnemo pisati šifru klijenta, moći ćete zamijeniti moje stare veze novom verzijom.

Sada bismo trebali postaviti različite poglede za našu aplikaciju. U direktoriju na vašem hostu u kojem imate prethodne dvije datoteke (esp.php i getWeatherData.php) stvorite novu fasciklu pod nazivom weather_views. Ovdje ćemo staviti sve naše stranice koje će svaka odgovarati id -u iz naše baze podataka (1, 2 ili 3).

U mapi stvorite 3 datoteke (day.html, old.html i juče.html). Preuzmite priloženi kôd i stavite ga u te datoteke. Kod za DAY. HTML je komentiran tako da možete razumjeti šta se dešava. Kod za ostale 2 stranice je u osnovi isti (komentira se drugi dio u old.html).

Kada završite s ovim korakom, prijeđite na sljedeći, koji je najteži korak programiranja.

Korak 5: Glavna HTML datoteka

U ovom koraku ćete napraviti/urediti/pročitati glavnu HTML datoteku u kojoj ćete sve prikazati. Sačuvajte priloženu datoteku (koja se, kao i uvijek, komentira) kao espdata.html u istom direktoriju kao i esp.php. Nadam se da ćete u njega unijeti neke promjene i razumjeti što se zaista događa.

Ovo je najveći dio vašeg koda, pa je definitivno važno razumjeti što se događa.

Korak 6: Test ožičenja na pločici

Sada ćemo testirati da li sav kod radi s našim hardverom. Ako već niste, zalijepite zaglavlja zaglavlja na Feather Huzzah i BME280 senzor. Za svaki korak prilaže se fotografija.

1. Stavite pero na matičnu ploču. Priključite 3V na + tračnicu i GND na - šinu.

2. Spojite VIN osjetnika na + šinu i GND na - šinu.

3. Spojite SDA senzor na pin 4 na perju. Spojite SCL na pin 5.

4. Postavite fotootpornik na matičnu ploču s jednim odvodom prema + šini.

5. Priključite otpornik od 4,7 k na nepovezani vod foto otpornika. Spojite nepovezani vod 4.7k na 2k otpornik. Spojite nepovezani kraj 2k otpornika na - šinu (GND).

6. Spojite spoj 4,7k i 2k otpornika na pin ADC (analogni pin). Upravo smo napravili razdjelnik napona koji dijeli maksimalni očitani napon sa pina sa 3,3 V na manje od 1 V. Možete se igrati sa vlastitom kombinacijom ako želite, ali imajte na umu da napon analognom pinu mora biti manji od 1V.

7. Na kraju, spojite iglu RST (reset) na pero s iglom 16 na pero (narančasta žica na fotografiji). Ova konfiguracija omogućava Feather Huzzi da uđe u način dubokog sna radi uštede energije.

Sada ste gotovi! Otpremite kôd na svoje pero i nadamo se da ćete vidjeti ažuriranje svoje web stranice (samo stranicu day.html). Ako ne, pokušajte koristiti Serijski monitor za rješavanje problema ili pitajte u komentarima ispod.

Korak 7: Stalni projekat (izborno)

Pod pretpostavkom da sve funkcionira, ako želite, ovaj projekt možete učiniti trajnijim. Ovo neću ovdje prikazivati, ali sve komponente možete lemiti na perf ploču, a zatim ih staviti u spremnik. U nastavku ću priložiti IPT datoteke za 3D spremnik koje sam koristio i nekoliko fotografija za početak. Kontejner je namijenjen inspiraciji jer ćete ga vjerojatno htjeti učiniti ličnijim s drugačijim dizajnom i tekstom. Zabavite se s prilagođavanjem! Sretno!