ESP8266 Weerstasie wat data op 'n webwerf vertoon: 7 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

Nota: Dele van hierdie tutoriaal is moontlik in videoformaat beskikbaar op my YouTube -kanaal - Tech Tribe

In hierdie instruksies sal ek wys hoe u 'n weerstasie kan maak wat data direk na u webwerf stuur. Daarom benodig u u eie domein (byvoorbeeld: msolonko.net). Hier is die materiaal wat u nodig het om te begin:

Items:

Feather Huzzah ($ 16,95)

Mikro -USB -kabel met data ($ 1,99)

Batterypak ($ 25): ek bespreek later watter kapasiteit u benodig vir hoeveel tyd sonder om te laai, sodat u die kapasiteit kan kies wat u wil hê. Dit is 'n skakel na die een wat ek gebruik het. U kan dit ook net via 'n uitlaat aansluit.

1 Fotoresistor

'N Paar ander weerstande - later bespreek

Draad

Perf Board ($ 5,59) - 20 stuks

BME280 Temperatuur-, druk- en humiditeitsensor ($ 9,99)

Een of ander boks; u kan een in 3D druk, en ek sal u my ontwerp wys.

Webhosting en domein, as u die tutoriaal volledig wil volg

Gereedskap:

Draadsnyer

Soldeerbout

Stap 1: Feather Huzzah -kode

Die kode word in Arduino IDE geskryf, wat hier afgelaai kan word. Volg die instruksies hier voordat ons begin om die Arduino IDE op te stel om saam met u Feather Huzzah te werk. Volg ook hierdie instruksies om die nodige biblioteke af te laai om die BME -sensor te laat werk. Die kode lêer is aangeheg en al die kode word opgemerk sodat u dit kan verstaan. As u daarna kyk, gaan u na die volgende stap, waar ons na die kode kyk wat die sensordata ontvang.

Stap 2: Ontvang data van Feather Huzzah

Teen hierdie tyd verstaan u hopelik hoe die Arduino -kode werk. Indien nie, gaan terug na die kode en lees my kommentaar (ek het byna elke reël kommentaar gelewer). Nou skryf ons die kode wat die data ontvang. Soos voorheen, word alles opgemerk. Die programmeertaal wat hiervoor gebruik word, is PHP, waaroor u hier meer kan lees.

Ons data word in 'n MySQL -databasis gestoor, waaroor u hier meer kan lees. Data word gestoor in tabelle met rye en kolomme. Voordat ons die kode skryf, moet ons die struktuur van ons tafel op ons hosting cPanel maak. Ek gebruik Arvixe Hosting, sodat u cPanel anders kan lyk. Verwys na een van die beelde om te sien hoe 'n deel van myne lyk. Eerstens wil u 'n nuwe MySQL -databasis skep as u dit nog nie het nie. U kan die towenaar daarvoor gebruik. Daar is baie aanlynbronne hieroor as u hulp nodig het.

Sodra u 'n databasis opgestel het, gaan na phpMyAdmin en kies u databasis. Skep 'n tabel met die naam weather_data met 9 kolomme. Raadpleeg een van my prente hierbo om te sien wat elke kolom moet wees (kopieer die naam, datatipe en al die ander presies as u my kode wil gebruik). Teller is ons primêre sleutel en ID sal ons help om te bepaal watter dag die data betrekking het (1: vandag, 2: gister, 3: alles anders). Aangesien ons baie data sal hê, sal ons sommige daarvan uitvee namate dit ouer word. Daarom het ons die ID -kolom nodig. Die res van die kolomme is redelik vanselfsprekend. Op die oomblik behoort u tabel in u databasis presies soos myne te lyk.

Laai nou die aangehegte kode af en lees dit en my kommentaar deur. As u klaar is, gaan u na die volgende stap.

Let wel: wanneer u die kode aflaai, hernoem dit na esp.php. Om een of ander rede het ek 'n fout gekry toe ek 'n PHP -lêer probeer oplaai.

Dit is basies hoe die kode sal werk.

1. Versamel data elke 10 minute en vertoon dit

2. Sodra 'n dag verby is, gemiddeld elke 6 waardes (om DB -ruimte te bespaar), sodat daar 'n datapunt vir elke uur is

3. Sodra 'n ander dag verby is, gemiddeld al die oorblywende data vir daardie dag en stoor dit as slegs een datapunt

Op hierdie manier sal ons gedurende die tydperk van maande fluktuasies in lig, temperatuur, ens. Kan sien sonder om afgelei te word deur daaglikse skommelinge in temperatuur, lig, ens.

Stap 3: Haal data uit die databasis na vertoning

Ons het dus uitgevind hoe om weerdata te versamel en na ons databasis te laai. Nou moet ons dit in 'n bruikbare vorm kan ophaal. Soos voorheen het ek 'n PHP -lêer getWeatherData.txt aangeheg wat u by u gasheer moet stoor en die lêernaamuitbreiding moet verander na.php in plaas van.txt. Op al die kode word kommentaar gelewer. Lees dit deur om dit te verstaan en gaan aan sodra u dink dat u dit reggekry het. As u vrae het, vra gerus hieronder.

Stap 4: Opstel van biblioteke en 'n paar ander dinge

Een van die raamwerke wat ons vir hierdie projek sal gebruik, is AngularJS, wat ons sal help om met die databasis te kommunikeer en 'n SPA (Single Page Application) te bou. Gaan na hierdie skakel om die biblioteek te kry en laai 'n weergawe 1.64 of hoër af. Vir hierdie tutoriaal het ek 1.64 gebruik, maar daar word gereeld nuwe weergawes vrygestel, sodat u 'n ander een kan gebruik. Soek 'n skakel op die bladsy wat so eindig: /VERSION/angular.min.js

Kopieer die skakel en stoor dit op 'n veilige plek. Ons het pas 'n skakel na die AngularJS -biblioteek gekry. U benodig dit vir die volgende stap. Soek nou op dieselfde bladsy 'n skakel wat so lyk en kopieer dit ook: /VERSION/angular-route.min.js

Die hoekroete sal ons help om ons SPA te bestuur en die omskakeling van aansigte op die bladsy te hanteer.

Ons wil graag grafieke van ons data kan vertoon. Hiervoor gebruik ons 'n biblioteek genaamd ChartJS. Gaan hierheen, kies die nuutste weergawe en stoor 'n skakel wat so eindig: VERSIE/Chart.bundle.min.js

Uiteindelik sal ons 'n biblioteek gebruik om die bladsye genaamd Bootstrap op te stel. Gaan na hierdie skakel na Quick Start en laat dit vir eers oop. Sodra ons die kliëntkode begin skryf het, sal u my ou skakels met die nuwer weergawe kan vervang.

Nou moet ons die verskillende sienings vir ons toepassing opstel. Skep 'n nuwe gids met die naam weather_views in die gids op u gasheer waar u die vorige twee lêers het (esp.php en getWeatherData.php). Hier plaas ons al ons bladsye wat elk ooreenstem met 'n ID uit ons databasis (1, 2 of 3).

Skep 3 lêers in die gids (day.html, old.html en gister.html). Laai die aangehegte kode af en plaas dit in die lêers. Die kode vir DAY. HTML word opgemerk sodat u kan verstaan wat aan die gebeur is. Die kode vir die ander 2 bladsye is basies dieselfde (daar word kommentaar gelewer op verskillende dele in old.html).

As u klaar is met hierdie stap, gaan u na die volgende stap, wat die moeilikste programmeerstap is.

Stap 5: Hoof HTML -lêer

In hierdie stap maak/redigeer/lees u die hoof HTML -lêer waar u alles sal vertoon. Stoor die aangehegte lêer (wat soos altyd kommentaar lewer) as espdata.html in dieselfde gids as esp.php. Ek hoop dat u 'n paar veranderings daaraan kan maak en kan verstaan wat werklik aan die gang is.

Dit is die grootste deel van u kode, dus dit is beslis belangrik om te verstaan wat aan die gang is.

Stap 6: Bedradingstoets op 'n broodbord

Nou sal ons toets dat al die kode met ons hardeware werk. As u dit nog nie gedoen het nie, soldeer kopstukke op die Feather Huzzah en die BME280 -sensor. Vir elke stap word 'n foto aangeheg.

1. Plaas veer op die broodbord. Koppel 3V aan die + rail en GND to - rail.

2. Koppel die sensor VIN aan + rail en GND aan - rail.

3. Koppel sensor SDA aan pen 4 op veer. Koppel SCL aan pen 5.

4. Plaas fotoresistor op die broodbord met een leiding na die + -rail.

5. Koppel 'n weerstand van 4,7k aan die onaangeslote leiding van die fotoresistor. Koppel die los verbinding van die 4,7k aan 'n 2k -weerstand. Koppel die nie -gekoppelde einde van die 2k -weerstand aan die - rail (GND).

6. Verbind die verbinding van die 4.7k en 2k weerstand met pin ADC (analoog pen). Ons het pas 'n spanningsverdeler gemaak wat die maksimum spanning wat deur die pen gelees word, van 3,3V tot minder as 1V verdeel. U kan met u eie kombinasie speel, maar hou in gedagte dat die spanning wat aan die analoog pen gegee word, minder as 1V moet wees.

7. Koppel laastens die RST (reset) pen op die veer aan pen 16 op die veer (oranje draad op die foto). Met hierdie opset kan die Feather Huzzah die diep slaapmodus betree om krag te bespaar.

Nou is jy klaar! Laai die kode op na u veerhuzzah, en hopelik kan u u webbladopdatering sien (slegs die day.html -bladsy). Indien nie, probeer om die seriële monitor te gebruik om die probleem op te los of vra die kommentaar hieronder.

Stap 7: Permanente projek (opsioneel)

As u aanvaar dat alles werk, kan u hierdie projek meer permanent maak as u wil. Ek sal dit nie hier wys nie, maar u kan al die komponente aan 'n perf -bord soldeer en dit dan in 'n houer toemaak. Ek heg die IPT -lêers vir die 3D -houer wat ek hieronder gebruik het en 'n paar foto's aan om aan die gang te kom. Die houer is bedoel vir inspirasie, want u sal dit waarskynlik meer persoonlik wil maak met 'n ander ontwerp en teks. Om pret te hê met aanpassing! Sterkte!