Vremenska postaja ESP8266, ki prikazuje podatke na spletnem mestu: 7 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

Opomba: Deli te vadnice so lahko na voljo v video obliki na mojem kanalu YouTube - Tech Tribe

V tem navodilu bom pokazal, kako narediti vremensko postajo, ki neposredno pošilja podatke na vašo spletno stran. Zato boste potrebovali svojo domeno (npr. Msolonko.net). Za začetek potrebujete naslednje materiale:

Predmeti:

Perje Huzzah (16,95 USD)

Kabel mikro USB s podatki (1,99 USD)

Baterija (25 USD): kasneje bom razpravljal o tem, koliko zmogljivosti potrebujete za koliko časa brez ponovnega polnjenja, tako da lahko izberete želeno zmogljivost. To je povezava do tistega, ki sem ga uporabil. Napajate ga lahko tudi iz vtičnice.

1 Fotografski upor

Nekateri drugi upori - obravnavani kasneje

Žica

Perf Board (5,59 USD) - Paket 20

Senzor temperature, tlaka in vlažnosti BME280 (9,99 USD)

Nekakšna škatla; eno lahko natisnete 3D, jaz pa vam bom pokazal svoj dizajn.

Spletno gostovanje in domena, če želite v celoti slediti vadnici

Orodja:

Rezalnik žice

Spajkalnik

1. korak: Koda perja Huzzah

Koda bo napisana v Arduino IDE, ki jo lahko prenesete tukaj. Preden začnemo, sledite spodnjim navodilom, da nastavite Arduino IDE za delo z vašim Feather Huzzahom. Upoštevajte tudi ta navodila za prenos potrebnih knjižnic za delovanje senzorja BME. Datoteka s kodo je priložena in vsa koda je komentirana, da jo lahko razumete. Ko ga pogledate, pojdite na naslednji korak, kjer bomo pogledali kodo, ki sprejema podatke senzorja.

2. korak: Prejemanje podatkov od Feather Huzzah

Do zdaj ste upali, da razumete, kako deluje koda Arduino. Če ne, se vrnite na kodo in preberite moje komentarje (komentiral sem skoraj vsako vrstico). Zdaj bomo napisali kodo, ki prejema podatke. Tako kot prej je vse komentirano. Programski jezik, ki se uporablja za to, je PHP, o katerem si lahko preberete več tukaj.

Naši podatki bodo shranjeni v zbirki podatkov MySQL, o kateri si lahko preberete več tukaj. Podatki so shranjeni v tabelah, ki vsebujejo vrstice in stolpce. Preden napišemo kodo, bi morali narediti strukturo naše tabele na gostujočem cPanelu. Uporabljam Arvixe gostovanje, zato bo vaš cPanel morda videti drugače. Na eni od slik si oglejte, kako izgleda moj del. Najprej želite ustvariti novo bazo podatkov MySQL, če je še nimate. Za to lahko uporabite čarovnika. Če potrebujete pomoč, obstaja veliko spletnih virov o tem.

Ko nastavite bazo podatkov, pojdite na phpMyAdmin in izberite svojo bazo podatkov. Ustvarite tabelo z imenom weather_data z 9 stolpci. Oglejte si eno od mojih zgornjih slik, da vidite, kateri naj bi bil vsak stolpec (natančno kopirajte ime, podatkovni tip in vse ostalo, če želite uporabiti mojo kodo). Števec bo naš primarni ključ, ID pa nam bo pomagal ugotoviti, za kateri dan se podatki nanašajo (1: danes, 2: včeraj, 3: vse ostalo). Ker bomo imeli veliko podatkov, jih bomo s starostjo izbrisali. Zato potrebujemo stolpec id. Preostali stolpci so precej samoumevni. Takoj bi morala biti vaša tabela v vaši bazi podatkov podobna moji.

Zdaj prenesite priloženo kodo, preberite jo in moje komentarje. Ko končate, pojdite na naslednji korak.

Opomba: ko prenesete kodo, jo preimenujte v esp.php. Iz nekega razloga sem dobil napako, ko sem poskušal naložiti datoteko PHP.

V bistvu bo koda delovala.

1. Zbirajte podatke vsakih 10 minut in jih prikažite

2. Ko enkrat mine dan, povprečno vsakih 6 vrednosti (da prihranite prostor v bazi podatkov), tako da je za vsako uro podatkovna točka

3. Ko mine še en dan, povprečite vse preostale podatke za ta dan in jih shranite kot samo eno podatkovno točko

Na ta način bomo lahko videli nihanja svetlobe, temperature itd. V obdobju mesecev, ne da bi se začeli motiti zaradi dnevnih nihanj temperature, svetlobe itd.

3. korak: pridobivanje podatkov iz baze podatkov v prikaz

Tako smo zdaj ugotovili, kako zbiramo vremenske podatke in jih naložimo v svojo bazo podatkov. Zdaj ga moramo imeti na voljo v uporabni obliki. Kot prej sem priložil datoteko PHP getWeatherData.txt, ki jo shranite v gostitelja in namesto.txt spremenite razširitev imena datoteke v.php. Vsa koda je komentirana. Preberite, da ga razumete, in pojdite naprej, ko mislite, da ga imate. Če imate vprašanja, vas prosimo, da vprašate spodaj.

4. korak: Nastavitev knjižnic in nekatere druge stvari

Za ta projekt je eden od okvirov, ki jih bomo uporabljali, AngularJS, ki nam bo pomagal pri komunikaciji z bazo podatkov in izdelavi SPA (Single Page Application). Če želite dobiti knjižnico, pojdite na to povezavo in prenesite različico 1.64 ali novejšo. Za to vadnico sem uporabil 1.64, vendar se pogosto pojavljajo nove različice, tako da lahko uporabite drugo. Na tej strani poiščite povezavo, ki se konča tako: /VERSION/angular.min.js

Kopirajte povezavo in jo shranite na varno. Pravkar smo dobili povezavo do knjižnice AngularJS. Potrebovali ga boste za naslednji korak. Zdaj na isti strani poiščite povezavo, ki izgleda tako, in jo tudi kopirajte: /VERSION/angular-route.min.js

Kotna pot nam bo pomagala pri upravljanju našega SPA-ja in pri spreminjanju pogledov na strani.

Želimo si lahko lepo prikazati grafikone svojih podatkov. Za to bomo uporabili knjižnico z imenom ChartJS. Pojdite sem, izberite najnovejšo različico in shranite povezavo, ki se konča tako: VERSION/Chart.bundle.min.js

Nazadnje bomo za postavitev strani z imenom Bootstrap uporabili knjižnico. Pojdite na to povezavo za hitri začetek in zaenkrat pustite to odprto. Ko začnemo pisati kodo odjemalca, boste lahko stare povezave zamenjali z novejšo različico.

Zdaj bi morali nastaviti različne poglede za našo aplikacijo. V imeniku na svojem gostitelju, kjer imate prejšnji dve datoteki (esp.php in getWeatherData.php), ustvarite novo mapo z imenom weather_views. Tukaj bomo postavili vse naše strani, ki bodo ustrezale ID -ju iz naše baze podatkov (1, 2 ali 3).

V mapi ustvarite 3 datoteke (dan.html, old.html in včeraj.html). Prenesite priloženo kodo in jo vnesite v te datoteke. Koda za DAY. HTML je komentirana, tako da lahko razumete, kaj se dogaja. Koda za drugi 2 strani je v bistvu enaka (drugačen del v old.html je komentiran).

Ko končate s tem korakom, pojdite na naslednjega, ki je najtežji korak programiranja.

5. korak: Glavna datoteka HTML

V tem koraku boste naredili/uredili/prebrali glavno datoteko HTML, kjer boste vse prikazali. Priloženo datoteko (ki je kot vedno komentirana) shranite kot espdata.html v isti imenik kot esp.php. Upam, da ga boste lahko spremenili in razumeli, kaj se v resnici dogaja.

To je večina vaše kode, zato je vsekakor pomembno razumeti, kaj se dogaja.

6. korak: Preskus ožičenja na ploščici

Zdaj bomo preverili, ali vsa koda deluje z našo strojno opremo. Če tega še niste storili, spajkajte nožice glave na Feather Huzzah in senzorju BME280. Za vsak korak je priložena fotografija.

1. Pero položite na mizo. Priključite 3V na + tirnico in GND na - tirnico.

2. VIN senzor priključite na + tirnico in GND na tirnico.

3. Priključite senzor SDA na pin 4 na perju. Priključite SCL na pin 5.

4. Fotografski upor postavite na ploščo z enim vodilom proti + tirnici.

5. Priključite 4,7 k upor na nepovezani vod fotorezistorja. Nepovezan kabel 4.7k priključite na 2k upor. Priključite nepovezan konec 2k upora na vodilo (GND).

6. Spoj 4,7k in 2k upora priklopite na pin ADC (analogni pin). Pravkar smo naredili delilnik napetosti, ki deli največjo napetost, ki jo odčita pin, s 3,3 V na manj kot 1 V. Če želite, se lahko poigrate s svojo kombinacijo, vendar ne pozabite, da mora biti napetost na analognem zatiču manjša od 1 V.

7. Na koncu priključite zatič RST (ponastavitev) na pero na pin 16 na perju (oranžna žica na fotografiji). Ta konfiguracija omogoča, da Feather Huzzah vstopi v način globokega spanja, da prihrani energijo.

Zdaj ste končali! Naložite kodo na svoj peresni huzzah in upajmo, da boste videli posodobitev svoje spletne strani (samo stran day.html). Če ne, poskusite uporabiti serijski monitor za odpravljanje težav ali vprašajte v spodnjih komentarjih.

7. korak: Stalni projekt (neobvezno)

Če želite, da vse deluje, lahko po želji naredite ta projekt trajnejši. Tukaj tega ne bom pokazal, lahko pa vse komponente spajkate na ploščo perf in jih nato vstavite v posodo. Za začetek bom priložil datoteke IPT za vsebnik 3D, ki sem jih uporabil spodaj, in nekaj fotografij. Posoda je namenjena navdihu, ker jo boste verjetno želeli narediti bolj osebno z drugačnim dizajnom in besedilom. Zabavajte se s prilagajanjem! Vso srečo!