ESP8266 ilmajaam, mis kuvab veebisaidil andmeid: 7 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

Märkus. Selle õpetuse osad võivad olla saadaval YouTube'i kanalil - Tech Tribe

Selles juhendis näitan, kuidas teha ilmajaam, mis saadab otse teie veebisaidile andmeid. Seetõttu vajate oma domeeni (nt msolonko.net). Alustuseks on vaja järgmisi materjale:

Esemed:

Feather Huzzah (16,95 dollarit)

Micro USB -kaabel andmetega (1,99 dollarit)

Aku (25 dollarit): hiljem arutan, millist mahtu vajate ilma ajalaadimiseta, nii et saate valida soovitud võimsuse. See on link sellele, mida ma kasutasin. Saate toite toita ka pistikupesast.

1 Fototakisti

Mõned muud takistid - arutatakse hiljem

Traat

Perf Board (5,59 dollarit) - pakendis 20

BME280 temperatuuri, rõhu ja niiskuse andur (9,99 dollarit)

Mingi kast; saate 3D printida ja ma näitan teile oma disaini.

Veebimajutus ja domeen, kui soovite õpetust täielikult järgida

Tööriistad:

Traadi lõikur

Jootekolb

1. samm: Feather Huzzah kood

Kood kirjutatakse Arduino IDE -s, mille saate alla laadida siit. Enne alustamist järgige palun siin toodud juhiseid, et seadistada Arduino IDE oma Feather Huzzah'ga töötama. Järgige neid juhiseid ka vajalike raamatukogude allalaadimiseks, et BME andur tööle saada. Koodifail on manustatud ja kogu kood on kommenteeritud, et saaksite sellest aru. Kui olete seda vaadanud, liikuge järgmise sammu juurde, kus vaatame anduri andmeid vastuvõtvat koodi.

2. samm: andmete vastuvõtmine Feather Huzzah'lt

Nüüdseks saate loodetavasti aru, kuidas Arduino kood töötab. Kui ei, minge tagasi koodi juurde ja lugege minu kommentaare (kommenteerisin peaaegu iga rida). Nüüd kirjutame koodi, mis andmeid saab. Nagu varemgi, kommenteeritakse seda kõike. Programmeerimiskeel, mida selleks kasutatakse, on PHP, mille kohta saate rohkem lugeda siit.

Meie andmed salvestatakse MySQL -i andmebaasi, mille kohta saate rohkem lugeda siit. Andmeid hoitakse tabelites, kus on read ja veerud. Enne koodi kirjutamist peaksime oma tabeli ülesehituse tegema oma hostimise cPanelil. Ma kasutan Arvixe Hostingut, nii et teie cPanel võib välja näha teistsugune. Vaadake ühte pilti, et näha, milline minu osa välja näeb. Esiteks soovite luua uue MySQL -i andmebaasi, kui teil seda veel pole. Selleks saate kasutada viisardit. Kui vajate abi, on selle kohta palju online -ressursse.

Kui olete andmebaasi seadistanud, minge aadressile phpMyAdmin ja valige oma andmebaas. Looge 9 veeruga tabel nimega weather_data. Vaadake ühte minu ülaltoodud piltidest, et näha, milline peaks iga veerg olema (kopeerige nimi, andmetüüp ja kõik muu täpselt, kui soovite minu koodi kasutada). Loendur on meie esmane võti ja id aitab meil tuvastada, mis päeval andmed on seotud (1: täna, 2: eile, 3: kõik muu). Kuna meil on palju andmeid, kustutame osa neist vanemaks saades. Sellepärast vajame veergu id. Ülejäänud veerud on üsna iseenesestmõistetavad. Praegu peaks teie andmebaasi tabel välja nägema täpselt selline nagu minu oma.

Nüüd laadige alla lisatud kood ja lugege see ja minu kommentaarid läbi. Kui olete lõpetanud, liikuge järgmise sammu juurde.

Märkus. Koodi allalaadimisel nimetage see ümber esp.php -ks. Millegipärast sain PHP -faili üleslaadimisel tõrke.

Põhimõtteliselt kood töötab.

1. Koguge andmeid iga 10 minuti järel ja näidake neid

2. Kui päev möödub, keskendage iga 6 väärtust (DB ruumi säästmiseks), nii et iga tunni kohta oleks andmepunkt

3. Kui päev on möödas, keskmistage selle päeva ülejäänud andmed ja salvestage need ainult ühe andmepunktina

Sel viisil näeme kuude jooksul valguse, temperatuuri jms kõikumisi, ilma et hakkaksime segama igapäevaseid temperatuuri, valguse jms kõikumisi.

3. samm: andmete toomine andmebaasist kuvatavale

Nüüd oleme välja mõelnud, kuidas koguda ilmaandmeid ja need oma andmebaasi üles laadida. Nüüd peame suutma selle kasutataval kujul kätte saada. Nagu varemgi, lisasin PHP -faili getWeatherData.txt, mille peaksite oma hosti salvestama ja muutma failinimelaiendiks.tp asemel.php. Kõik koodid on kommenteeritud. Lugege see läbi, et sellest aru saada, ja liikuge edasi, kui arvate, et olete selle saanud. Kui teil on küsimusi, küsige julgelt allpool.

Samm: raamatukogude seadistamine ja mõned muud asjad

Selle projekti puhul on üks raamistikke, mida me kasutame, AngularJS, mis aitab meil andmebaasiga suhelda ja SPA -d (Single Page Application) luua. Kogu hankimiseks minge sellele lingile ja laadige alla versioon 1.64 või uuem. Selle õpetuse jaoks kasutasin 1.64, kuid sageli avaldatakse uusi versioone, nii et saate kasutada teist. Leidke sellelt lehelt link, mis lõpeb järgmiselt: /VERSION/angular.min.js

Kopeerige link ja salvestage see turvalisse kohta. Saime just AngularJS raamatukogu lingi. Te vajate seda järgmise sammu jaoks. Nüüd otsige samal lehel link, mis näeb välja selline, ja kopeerige see ka: /VERSION/angular-route.min.js

Nurgeline marsruut aitab meil hallata meie SPA-d ja käsitleda lehel vaadete vahetamist.

Soovime, et saaksime oma andmete graafikuid kenasti kuvada. Selleks kasutame raamatukogu nimega ChartJS. Minge siia, valige uusim versioon ja salvestage link, mis lõpeb järgmiselt: VERSION/Chart.bundle.min.js

Lõpuks kasutame Bootstrap -nimeliste lehtede paigutamiseks raamatukogu. Minge sellele kiirkäivituse lingile ja jätke see praegu avatuks. Kui hakkame kliendikoodi kirjutama, saate minu vanad lingid uuema versiooniga asendada.

Nüüd peaksime oma rakenduse jaoks seadistama erinevad vaated. Looge oma hosti kataloogis, kus on kaks eelmist faili (esp.php ja getWeatherData.php), looge uus kaust nimega weather_views. Siia paneme kõik meie lehed, mis vastavad ID -le meie andmebaasist (1, 2 või 3).

Looge kausta 3 faili (päev.html, vana.html ja eile.html). Laadige alla lisatud kood ja lisage see nendesse failidesse. DAY. HTML koodi kommenteeritakse, et saaksite aru, mis toimub. Ülejäänud 2 lehe kood on põhimõtteliselt sama (kommenteeritakse erinevat osa vanas.html -s).

Kui olete selle sammuga lõpetanud, liikuge järgmise etapi juurde, mis on kõige raskem programmeerimisetapp.

Samm: peamine HTML -fail

Selles etapis teete/redigeerite/loete peamist HTML -faili, kus kuvatakse kõik. Salvestage manustatud fail (mida kommenteeritakse nagu alati) espdata.html samas kataloogis kui esp.php. Loodan, et saate selles muudatusi teha ja mõista, mis tegelikult toimub.

See on suurem osa teie koodist, seega on kindlasti oluline mõista, mis toimub.

Samm: juhtmestiku testimine leivaplaadil

Nüüd testime, kas kogu kood töötab meie riistvaraga. Kui te pole seda veel teinud, jootke Feather Huzzah ja BME280 anduri päiseotsikud. Iga sammu jaoks lisatakse foto.

1. Asetage sulg leivaplaadile. Ühendage 3V + rööpaga ja GND rööpaga.

2. Ühendage andur VIN + rööpaga ja GND rööpaga.

3. Ühendage andur SDA sulgede tihvtiga 4. Ühendage SCL tihvtiga 5.

4. Asetage fototakisti leivaplaadile, üks juhe + rööpale.

5. Ühendage 4.7k takisti fototakisti ühendamata juhtmega. Ühendage 4.7k ühendamata juhe 2k takistiga. Ühendage 2k takisti ühendamata ots rööpaga (GND).

6. Ühendage 4.7k ja 2k takisti ühendus ADC (analoogtapp) pistikuga. Tegime just pingejaguri, mis jagab tihvti poolt loetava maksimaalse pinge 3,3 V -lt alla 1 V. Soovi korral saate oma kombinatsiooniga mängida, kuid pidage meeles, et analoogpistikule antud pinge peab olema väiksem kui 1 V.

7. Lõpuks ühendage sulgede RST (lähtestamise) tihvt sulgi tihvtiga 16 (fotol oranž traat). See konfiguratsioon võimaldab Feather Huzzah'l energia säästmiseks siseneda sügavasse unerežiimi.

Nüüd olete valmis! Laadige kood oma sulgedele üles ja loodetavasti näete oma veebilehe värskendust (ainult leht day.html). Kui ei, proovige tõrkeotsinguks kasutada jadamonitori või küsige allolevatest kommentaaridest.

7. samm: alaline projekt (valikuline)

Eeldades, et kõik toimib, saate soovi korral selle projekti püsivamaks muuta. Ma ei näita seda siin, kuid võite kõik komponendid jootma perf -plaadile ja seejärel need konteinerisse sulgeda. Lisan 3D -konteineri IPT -failid, mida ma allpool kasutasin, ja mõned fotod alustamiseks. Konteiner on mõeldud inspiratsiooniks, sest tõenäoliselt soovite selle isikupärasemaks muuta erineva kujunduse ja tekstiga. Nautige kohandamist! Edu!