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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

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 postaju koja izravno šalje podatke na vašu web stranicu. Stoga će vam trebati vlastita domena (npr. Msolonko.net). Za početak, potrebni su vam sljedeći materijali:

Stavke:

Perje Huzzah (16,95 USD)

Mikro USB kabel s podacima (1,99 USD)

Baterija (25 USD): Kasnije ću raspraviti koji vam je kapacitet potreban za koliko vremena bez punjenja, tako da možete odabrati željeni kapacitet. Ovo je link na onaj koji sam koristio. Također ga možete napajati iz utičnice.

1 Fotootpornik

Neki drugi otpornici - raspravljat će se kasnije

Žica

Perf Board (5,59 USD) - Pakiranje 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: Kôd perja Huzzah

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. Kad ga pogledate, prijeđite na sljedeći korak gdje ćemo pogledati kod koji prima podatke senzora.

Korak 2: Primanje podataka od Feather Huzzaha

Nadamo se da ste do sada shvatili kako radi 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 više možete pročitati ovdje.

Naši će se podaci pohraniti u MySQL bazu podataka, o čemu možete pročitati više ovdje. Podaci se pohranjuju u tablice koje imaju retke i stupce. Prije nego što napišemo kôd, trebali bismo napraviti strukturu naše tablice na našem cPanelu za hosting. 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 imena weather_data s 9 stupaca. Pogledajte jednu od mojih slika gore da vidite što bi trebao biti svaki stupac (kopirajte naziv, tip podataka i sve ostalo točno ako želite koristiti moj kôd). Brojač će biti naš primarni ključ, a id će nam pomoći da utvrdimo koji dan podaci se odnose (1: danas, 2: jučer, 3: sve ostalo). Budući da ćemo imati puno podataka, neke ćemo podatke izbrisati kako postaju stariji. Zato nam je potreban stupac 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. Kad završite, prijeđite na sljedeći korak.

Napomena: prilikom preuzimanja koda preimenujte ga u esp.php. Iz nekog razloga, došlo mi je do pogreške kada sam pokušao prenijeti PHP datoteku.

U osnovi će kod funkcionirati.

1. Prikupljajte podatke svakih 10 minuta i prikazujte ih

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

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

Na taj ćemo način moći vidjeti fluktuacije svjetla, temperature itd. U razdoblju od mjeseci, a da pri tom ne omete dnevna kolebanja temperature, svjetla itd.

Korak 3: Dohvaćanje podataka iz baze podataka na prikaz

Stoga smo smislili kako prikupiti vremenske podatke i prenijeti ih u našu bazu podataka. Sada ga moramo moći dohvatiti 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 knjižnica i neke druge stvari

Za ovaj projekt, jedan od okvira koje ćemo koristiti je AngularJS, koji će nam pomoći u komunikaciji s bazom podataka i izgradnji SPA (Single Page Application). Da biste dobili knjižnicu, idite na ovu vezu i preuzmite verziju 1.64 ili noviju. Za ovaj vodič koristio sam 1.64, ali često se objavljuju 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 knjižnicu 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 pomoći će nam u upravljanju našim SPA-om i upravljati promjenom prikaza na stranici.

Želimo biti u mogućnosti lijepo prikazati grafikone naših podataka. Za to ćemo koristiti knjižnicu 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 za sada otvorenim. 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 mapu 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. Kôd za DAY. HTML komentiran je kako biste mogli razumjeti što se događa. Kôd 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. Spremite priloženu datoteku (koja se, kao i uvijek, komentira) kao espdata.html u isti direktorij kao i esp.php. Nadam se da ćete u njega unijeti neke promjene i razumjeti što se doista 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 radi li sav kod s našim hardverom. Ako već niste, lemite igle zaglavlja na Feather Huzzah i BME280 senzor. Za svaki korak prilaže se fotografija.

1. Stavite pero na ploču. Spojite 3V na + tračnicu i GND na - tračnicu.

2. Spojite VIN osjetnika na + tračnicu i GND na - tračnicu.

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

4. Postavite fotootpornik na ploču s jednim odvodom prema + vodilici.

5. Spojite otpornik od 4,7 k na nepovezani kabel fotootpornika. Spojite nepovezani kabel 4.7k na 2k otpornik. Spojite nepovezani kraj 2k otpornika na - tračnicu (GND).

6. Spojite spoj 4,7k i 2k otpornika na pin ADC (analogni pin). Upravo smo napravili razdjelnik napona koji dijeli maksimalni napon očitan iglom s 3,3 V na manje od 1 V. Možete se igrati vlastitom kombinacijom ako želite, ali imajte na umu da napon analognog pina 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ćuje Feather Huzzi da uđe u način dubokog sna radi uštede energije.

Sada ste gotovi! Prenesite kôd na svoje pero 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 u nastavku.

Korak 7: Stalni projekt (izborno)

Pod pretpostavkom da sve funkcionira, ako želite, ovaj projekt možete učiniti trajnijim. Ovdje ovo neću 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. Spremnik je namijenjen inspiraciji jer ćete ga vjerojatno htjeti učiniti osobnijim s drugačijim dizajnom i tekstom. Zabavite se s prilagođavanjem! Sretno!