ESP8266 vejrstation, der viser data på et websted: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

Bemærk: Dele af denne vejledning er muligvis tilgængelig i videoformat på min YouTube -kanal - Tech Tribe

I denne instruktive vil jeg vise, hvordan man laver en vejrstation, der direkte sender data til dit websted. Derfor har du brug for dit eget domæne (eks: msolonko.net). For at starte her er de materialer, du skal bruge:

Varer:

Feather Huzzah ($ 16,95)

Micro USB -kabel med data ($ 1,99)

Batteripakke ($ 25): Jeg vil senere diskutere, hvilken kapacitet du har brug for i hvilket tidsrum uden opladning, så du kan vælge den kapacitet, du ønsker. Dette er et link til den jeg brugte. Du kan også bare tænde det fra en stikkontakt.

1 Fotoresistor

Nogle andre modstande - diskuteret senere

Tråd

Perf Board ($ 5,59) - Pakke med 20 stk

BME280 temperatur-, tryk- og luftfugtighedssensor ($ 9,99)

En slags kasse; du kan 3D udskrive en, og jeg viser dig mit design.

Webhosting og domæne, hvis du vil følge helt med i selvstudiet

Værktøjer:

Trådskærer

Loddekolbe

Trin 1: Feather Huzzah Code

Koden skrives i Arduino IDE, som kan downloades her. Inden vi begynder, skal du følge instruktionerne her for at konfigurere Arduino IDE til at arbejde med din Feather Huzzah. Følg også disse instruktioner for at downloade de nødvendige biblioteker for at få BME -sensoren til at fungere. Kodefilen er vedhæftet, og al koden kommenteres, så du kan forstå den. Når du ser på det, skal du gå videre til det næste trin, hvor vi vil se på koden, der modtager sensordata.

Trin 2: Modtagelse af data fra Feather Huzzah

På nuværende tidspunkt forstår du forhåbentlig, hvordan Arduino -koden fungerer. Hvis ikke, gå tilbage til koden og læs mine kommentarer (jeg kommenterede næsten hver linje). Nu skriver vi koden, der modtager dataene. Som før er det hele kommenteret. Det programmeringssprog, der bruges til dette, er PHP, som du kan læse mere om her.

Vores data gemmes i en MySQL -database, som du kan læse mere om her. Data gemmes i tabeller, der har rækker og kolonner. Inden vi skriver koden, bør vi lave strukturen af vores bord på vores hosting cPanel. Jeg bruger Arvixe Hosting, så din cPanel kan se anderledes ud. Se et af billederne for at se, hvordan en del af min ser ud. Først vil du oprette en ny MySQL -database, hvis du ikke allerede har en. Du kan bruge guiden til det. Der er masser af online ressourcer til dette, hvis du har brug for hjælp.

Når du har oprettet en database, skal du gå til phpMyAdmin og vælge din database. Opret en tabel med navnet weather_data med 9 kolonner. Se et af mine billeder ovenfor for at se, hvad hver kolonne skal være (kopier navnet, datatypen og alt andet præcis, hvis du vil bruge min kode). Tæller vil være vores primære nøgle og id vil hjælpe os med at identificere, hvilken dag dataene vedrører (1: i dag, 2: i går, 3: alt andet). Da vi vil have mange data, sletter vi noget af det, når det bliver ældre. Derfor har vi brug for id -kolonnen. Resten af spalterne er ret selvforklarende. Lige nu skal din tabel i din database ligne min.

Download nu den vedhæftede kode og læs den og mine kommentarer igennem. Når du er færdig, skal du gå videre til næste trin.

Bemærk: Når du downloader koden, skal du omdøbe den til esp.php. Af en eller anden grund fik jeg en fejl, da jeg forsøgte at uploade en PHP -fil.

Dette er dybest set hvordan koden fungerer.

1. Indsaml data hvert 10. minut, og vis dem

2. Når der er gået en dag, gennemsnit hver 6. værdi (for at spare DB -plads), så der er et datapunkt for hver time

3. Når endnu en dag går, gennemsnit alle de resterende data for den pågældende dag og gem dem som kun et datapunkt

På denne måde vil vi kunne se udsving i lys, temperatur osv. I løbet af måneder uden at blive distraheret af daglige udsving i temperatur, lys osv.

Trin 3: Hentning af data fra databasen til visning

Så nu har vi fundet ud af, hvordan vi indsamler vejrdata og uploader dem til vores database. Nu skal vi kunne hente det i en brugbar form. Som før vedhæftede jeg en PHP -fil getWeatherData.txt, som du skulle gemme til din vært og ændre filnavnudvidelsen til.php i stedet for.txt. Al koden er kommenteret. Læs det igennem for at forstå det, og gå videre, når du tror, du har fået det. Hvis du har spørgsmål, er du velkommen til at stille nedenfor.

Trin 4: Opsætning af biblioteker og nogle andre ting

For dette projekt er et af de rammer, vi vil bruge, AngularJS, som hjælper os med at kommunikere med databasen og opbygge et SPA (Single Page Application). For at få biblioteket skal du gå til dette link og downloade en version 1.64 eller højere. Til denne vejledning brugte jeg 1,64, men der udgives ofte nye versioner, så du kan bruge en anden. Find et link på den side, der ender sådan: /VERSION/angular.min.js

Kopier linket og gem det et sikkert sted. Vi har lige fået et link til AngularJS -biblioteket. Du får brug for det til det næste trin. Find nu på samme side et link, der ligner dette, og kopier det også: /VERSION/angular-route.min.js

Angular-ruten hjælper os med at administrere vores SPA og håndtere skift af visninger på siden.

Vi ønsker at være i stand til pænt at vise diagrammer over vores data. Til dette vil vi bruge et bibliotek kaldet ChartJS. Gå her, vælg den nyeste version og gem et link, der ender sådan: VERSION/Chart.bundle.min.js

Endelig vil vi bruge et bibliotek til at layoute siderne kaldet Bootstrap. Gå til dette link til Hurtig start, og lad det være åbent for nu. Når vi begynder at skrive klientkoden, vil du være i stand til at erstatte mine gamle links med den nyere version.

Nu bør vi konfigurere de forskellige visninger til vores applikation. Opret en ny mappe ved navn weather_views i biblioteket på din vært, hvor du har de to foregående filer (esp.php og getWeatherData.php). Her vil vi sætte alle vores sider, der hver vil svare til et id fra vores database (1, 2 eller 3).

Opret 3 filer i mappen (day.html, old.html og gær.html). Download den vedhæftede kode, og sæt den i disse filer. Koden til DAY. HTML kommenteres, så du kan forstå, hvad der sker. Koden for de andre 2 sider er stort set den samme (forskellig del i old.html kommenteres).

Når du er færdig med dette trin, skal du gå videre til det næste, hvilket er det vanskeligste programmeringstrin.

Trin 5: Hoved HTML -fil

I dette trin vil du lave/redigere/læse den vigtigste HTML -fil, hvor du vil vise alt. Gem den vedhæftede fil (som som altid kommenteres) som espdata.html i samme bibliotek som esp.php. Jeg håber, at du kan foretage nogle ændringer i det og forstå, hvad der virkelig foregår.

Dette er hovedparten af din kode, så det er bestemt vigtigt at forstå, hvad der foregår.

Trin 6: Ledningstest på et brødbræt

Nu vil vi teste, at al koden fungerer med vores hardware. Hvis du ikke allerede har gjort det, skal du lodde headerstifter på Feather Huzzah og BME280 -sensoren. For hvert trin vedhæftes et foto.

1. Læg fjer på brødbrættet. Tilslut 3V til + skinnen og GND til - skinnen.

2. Tilslut sensoren VIN til + skinne og GND til - skinne.

3. Tilslut sensor SDA til pin 4 på fjer. Tilslut SCL til pin 5.

4. Placer fotoresistor på brødbrættet med en ledning til + skinnen.

5. Tilslut en 4,7k modstand til fotoresistorens uforbundne ledning. Tilslut den uforbundne ledning på 4,7k til en 2k modstand. Tilslut den ikke tilsluttede ende af 2k modstanden til - skinnen (GND).

6. Tilslut leddet på 4,7k og 2k modstanden til pin ADC (analog pin). Vi har lige lavet en spændingsdeler, der deler den maksimale spænding, der læses af stiften, fra 3,3V til mindre end 1V. Du kan lege med din egen kombination, hvis du vil, men husk på, at spændingen givet til den analoge pin skal være mindre end 1V.

7. Tilslut til sidst RST (reset) stiften på fjer til pin 16 på fjer (orange ledning på billedet). Denne konfiguration giver Feather Huzzah mulighed for at gå i dyb dvaletilstand for at spare strøm.

Nu er du færdig! Upload koden til din fjer -huzzah, og forhåbentlig kan du se din webside -opdatering (kun day.html -siden). Hvis ikke, kan du prøve at bruge den serielle skærm til fejlfinding eller spørge i kommentarerne herunder.

Trin 7: Permanent projekt (valgfrit)

Forudsat at alt fungerer, kan du gøre dette projekt mere permanent, hvis du ønsker det. Jeg vil ikke vise dette her, men du kan lodde alle komponenterne til et perf bord og derefter omslutte dem i en beholder. Jeg vedhæfter IPT -filerne til 3D -containeren, som jeg brugte herunder, og et par fotos for at komme i gang. Beholderen er beregnet til inspiration, fordi du sandsynligvis vil gøre den mere personlig med et andet design og tekst. God fornøjelse med tilpasning! Held og lykke!