ESP8266 Időjárás állomás, amely adatokat jelenít meg egy webhelyen: 7 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Megjegyzés: Ennek az oktatóanyagnak a részei elérhetők lehetnek video formátumban a YouTube -csatornámon - Tech Tribe

Ebben az utasításban megmutatom, hogyan készítsünk időjárás -állomást, amely közvetlenül adatokat küld a webhelyére. Ezért szüksége lesz saját domainjére (például: msolonko.net). A kezdéshez íme az anyagok, amelyekre szüksége lesz:

Tételek:

Feather Huzzah (16,95 dollár)

Micro USB kábel adatokkal (1,99 USD)

Akkumulátor (25 USD): Később megvitatom, hogy mennyi ideig van szüksége kapacitásra újratöltés nélkül, így kiválaszthatja a kívánt kapacitást. Ez egy link az általam használthoz. A tápellátást csak konnektorból is elvégezheti.

1 Fotorezisztor

Néhány más ellenállás - később tárgyaljuk

Huzal

Perf Board ($ 5,59) - 20 db -os csomag

BME280 hőmérséklet-, nyomás- és páratartalom -érzékelő (9,99 dollár)

Valamilyen doboz; kinyomtathat egyet, és megmutatom a tervemet.

Webtárhely és domain, ha teljes mértékben követni szeretné az oktatóanyagot

Eszközök:

Drótvágó

Forrasztópáka

1. lépés: Feather Huzzah Code

A kódot Arduino IDE -ben írják le, amely letölthető innen. Mielőtt elkezdenénk, kérjük, kövesse az itt található utasításokat, hogy beállítsa az Arduino IDE -t a Feather Huzzah készülékkel való együttműködésre. Ezenkívül kövesse ezeket az utasításokat a szükséges könyvtárak letöltéséhez, hogy a BME érzékelő működjön. A kódfájl csatolva van, és az összes kód megjegyzést fűz ahhoz, hogy megértse. Miután megnézte, folytassa a következő lépéssel, ahol megnézzük az érzékelő adatait fogadó kódot.

2. lépés: Adatok fogadása Feather Huzzah -tól

Mostanra remélhetőleg érti, hogyan működik az Arduino kód. Ha nem, akkor térjen vissza a kódhoz, és olvassa el a megjegyzéseimet (szinte minden sort kommentáltam). Most megírjuk az adatokat fogadó kódot. Mint korábban, az összeset kommentálják. Az ehhez használt programozási nyelv a PHP, amelyről itt olvashat bővebben.

Adatainkat egy MySQL adatbázisban tároljuk, amelyről itt olvashat bővebben. Az adatokat táblázatokban tárolják, amelyek sorokat és oszlopokat tartalmaznak. Mielőtt megírnánk a kódot, meg kell határoznunk a táblázat szerkezetét a tároló cPanel -en. Arvixe Hosting -ot használok, így a cPanel másképp nézhet ki. Tekintse meg az egyik képet, hogy megnézze, milyen az én részem. Először is új MySQL adatbázist szeretne létrehozni, ha még nem rendelkezik ilyennel. Ehhez használhatja a varázslót. Rengeteg online forrás található ezzel kapcsolatban, ha segítségre van szüksége.

Miután beállította az adatbázist, menjen a phpMyAdmin oldalra, és válassza ki az adatbázist. Hozzon létre egy időjárási adatok nevű táblázatot 9 oszloppal. Tekintse meg a fenti képeim egyikét, hogy megtudja, melyek legyenek az egyes oszlopok (másolja le a nevet, az adattípust és minden mást, ha használni szeretné a kódomat). A számláló lesz az elsődleges kulcsunk, és azonosítónk segít azonosítani, hogy az adatok mely napokon vannak (1: ma, 2: tegnap, 3: minden más). Mivel sok adatunk lesz, néhányat törlünk, ahogy idősebb lesz. Ezért van szükségünk az id oszlopra. A többi oszlop eléggé magától értetődő. Jelenleg az adatbázisának táblázatának pontosan úgy kell kinéznie, mint az enyémnek.

Most töltse le a mellékelt kódot, és olvassa el azt és a megjegyzéseimet. Ha kész, folytassa a következő lépéssel.

Megjegyzés: a kód letöltésekor nevezze át az esp.php fájlra. Valamilyen oknál fogva hibaüzenetet kaptam, amikor PHP fájlt próbáltam feltölteni.

A kód alapvetően így fog működni.

1. Gyűjtsön adatokat 10 percenként, és jelenítse meg

2. Egy nap elteltével minden 6 értéket átlagoljon (a DB -hely megtakarítása érdekében), hogy minden órára legyen adatpont

3. Egy újabb nap elteltével átlagolja az adott nap fennmaradó adatait, és tárolja csak egyetlen adatpontként

Így láthatjuk a fény, a hőmérséklet stb. Ingadozásait a hónapok alatt anélkül, hogy a hőmérséklet, a fény stb.

3. lépés: Adatok lekérése az adatbázisból a megjelenítésre

Így most kitaláltuk, hogyan gyűjthetjük az időjárási adatokat, és tölthetjük fel az adatbázisunkba. Most már képesnek kell lennünk arra, hogy használható formában lekérjük. Mint korábban, csatoltam egy getWeatherData.txt PHP fájlt, amelyet el kell mentenie a gazdagépre, és a fájlnévkiterjesztést.php -re kell változtatnia.txt helyett. Minden kód kommentálva van. Olvassa el, hogy megértse, és lépjen tovább, ha úgy gondolja, hogy megvan. Ha kérdése van, tegye fel bátran az alábbiakban.

4. lépés: Könyvtárak beállítása és néhány más dolog

Ebben a projektben az egyik keretrendszer, amelyet használni fogunk, az AngularJS, amely segíteni fog nekünk az adatbázissal való kommunikációban és egy SPA (Single Page Application) létrehozásában. A könyvtár beszerzéséhez kattintson erre a linkre, és töltse le az 1.64 vagy újabb verziót. Ehhez az oktatóanyaghoz az 1.64 -et használtam, de gyakran új verziókat adnak ki, így használhat egy másikat. Keressen egy linket az oldalon, amely így végződik: /VERSION/angular.min.js

Másolja a linket, és mentse biztonságos helyre. Most kaptunk egy linket az AngularJS könyvtárhoz. Szüksége lesz rá a következő lépéshez. Most, ugyanazon az oldalon keressen egy linket, amely így néz ki, és másolja is: /VERSION/angular-route.min.js

A szögletes útvonal segít kezelni SPA-t és kezelni az oldal nézetváltását.

Szeretnénk szépen megjeleníteni adataink grafikonjait. Ehhez a ChartJS nevű könyvtárat fogjuk használni. Menjen ide, válassza ki a legújabb verziót, és mentsen el egy így végződő linket: VERSION/Chart.bundle.min.js

Végül könyvtárat használunk a Bootstrap nevű oldalak elrendezéséhez. Lépjen erre a linkre a Gyors kezdéshez, és hagyja nyitva ezt egyelőre. Amint elkezdjük írni az ügyfélkódot, lecserélheti régi linkjeimet az újabb verzióra.

Most be kell állítanunk a különböző nézeteket az alkalmazásunkhoz. A gazdagép könyvtárában, ahol az előző két fájl található (esp.php és getWeatherData.php), hozzon létre egy új mappát weather_views néven. Ide tesszük az összes olyan oldalt, amelyek mindegyike megegyezik az adatbázisunkból származó azonosítóval (1, 2 vagy 3).

A mappában hozzon létre 3 fájlt (nap.html, régi.html és tegnap.html). Töltse le a mellékelt kódot, és tegye be a fájlokba. A DAY. HTML kódja megjegyzésben van, hogy megértse, mi történik. A másik 2 oldal kódja alapvetően megegyezik (a old.html különböző része van megjegyezve).

Miután befejezte ezt a lépést, lépjen a következőre, amely a legnehezebb programozási lépés.

5. lépés: Fő HTML fájl

Ebben a lépésben elkészítheti/szerkesztheti/olvashatja a fő HTML fájlt, ahol mindent megjelenít. Mentse a csatolt fájlt (amely, mint mindig, megjegyzésként) espdata.html néven ugyanabban a könyvtárban, mint az esp.php. Remélem, tudsz rajta változtatni, és megérted, hogy mi is történik valójában.

Ez a kód nagy része, ezért feltétlenül fontos megérteni, mi történik.

6. lépés: Kábelezési teszt a kenyértáblán

Most teszteljük, hogy minden kód működik -e a hardverünkkel. Ha még nem tette meg, forrasztja le a fejléceket a Feather Huzzah -ra és a BME280 érzékelőre. Minden lépéshez egy fényképet csatolunk.

1. Helyezzen tollat a kenyértáblára. Csatlakoztassa a 3 V -ot a + sínhez és a GND -t a sínhez.

2. Csatlakoztassa a VIN érzékelőt a + sínhez és a GND -t a sínhez.

3. Csatlakoztassa az SDA érzékelőt a toll 4. tűjéhez. Csatlakoztassa az SCL -t az 5. tűhöz.

4. Helyezze a fényellenállást a kenyértáblára úgy, hogy az egyik vezeték a + sínre kerüljön.

5. Csatlakoztasson egy 4.7k ellenállást a fényellenállás nem csatlakoztatott vezetékéhez. Csatlakoztassa a 4.7k nem csatlakoztatott vezetékét egy 2k ellenálláshoz. Csatlakoztassa a 2k ellenállás nem csatlakoztatott végét a - sínhez (GND).

6. Csatlakoztassa a 4.7k és 2k ellenállás csatlakozóját az ADC (analóg tű) csatlakozóhoz. Most készítettünk egy feszültségosztót, amely elosztja a csap által leolvasott maximális feszültséget 3,3 V -ról 1 V -ra. Ha akarod, játszhatsz a saját kombinációddal, de ne feledd, hogy az analóg érintkezőnek adott feszültségnek kisebbnek kell lennie 1 V -nál.

7. Végül csatlakoztassa a toll RST (reset) csapját a toll 16. lábához (narancssárga vezeték a fotón). Ez a konfiguráció lehetővé teszi, hogy a Feather Huzzah mély alvó üzemmódba lépjen az energiatakarékosság érdekében.

Most kész! Töltse fel a kódot a tollára huzzah, és remélhetőleg láthatja a weboldal frissítését (csak a day.html oldalt). Ha nem, próbálja meg a soros monitort használni a hibaelhárításhoz, vagy kérdezze meg az alábbi megjegyzésekben.

7. lépés: Állandó projekt (nem kötelező)

Feltéve, hogy minden működik, ha akarja, tartósabbá teheti ezt a projektet. Ezt itt nem mutatom be, de az összes komponenst forraszthatja egy perforációs táblára, majd egy tartályba zárhatja. Csatolom az alább használt 3D tároló IPT fájljait és néhány fotót az induláshoz. A tartály inspirációnak szánt, mert valószínűleg személyesebbé kívánja tenni más dizájnnal és szöveggel. Jó szórakozást a testreszabáshoz! Sok szerencsét!