ESP8266 værstasjon som viser data på et nettsted: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

Merk: Deler av denne opplæringen kan være tilgjengelig i videoformat på min YouTube -kanal - Tech Tribe

I denne instruksen vil jeg vise hvordan du lager en værstasjon som direkte sender data til nettstedet ditt. Derfor trenger du ditt eget domene (eks: msolonko.net). For å starte, her er materialene du trenger:

Elementer:

Feather Huzzah ($ 16,95)

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

Batteripakke ($ 25): Jeg skal senere diskutere hvilken kapasitet du trenger for hvor lang tid uten å lade opp, så du kan velge kapasiteten du vil ha. Dette er en lenke til den jeg brukte. Du kan også bare koble den fra en stikkontakt.

1 fotoresistor

Noen andre motstander - diskutert senere

Metalltråd

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

BME280 temperatur-, trykk- og fuktighetssensor ($ 9,99)

En slags boks; du kan 3D -skrive ut en, så skal jeg vise deg designet mitt.

Webhosting og domene, hvis du vil følge helt med opplæringen

Verktøy:

Wire cutter

Loddejern

Trinn 1: Feather Huzzah Code

Koden skrives i Arduino IDE, som kan lastes ned her. Før vi begynner, følg instruksjonene her for å konfigurere Arduino IDE for å fungere med din Feather Huzzah. Følg også disse instruksjonene for å laste ned de nødvendige bibliotekene for å få BME -sensoren til å fungere. Kodefilen er vedlagt, og all koden kommenteres slik at du kan forstå den. Når du ser på det, går du videre til neste trinn hvor vi vil se på koden som mottar sensordata.

Trinn 2: Motta data fra Feather Huzzah

Nå forstår du forhåpentligvis hvordan Arduino -koden fungerer. Hvis ikke, gå tilbake til koden og les kommentarene mine (jeg kommenterte nesten hver linje). Nå skal vi skrive koden som mottar dataene. Som før er alt kommentert. Programmeringsspråket som brukes til dette er PHP, som du kan lese mer om her.

Dataene våre blir lagret i en MySQL -database, som du kan lese mer om her. Data lagres i tabeller som har rader og kolonner. Før vi skriver koden, bør vi lage strukturen i bordet vårt på vår hosting cPanel. Jeg bruker Arvixe Hosting, så cPanel kan se annerledes ut. Se et av bildene for å se hvordan en del av min ser ut. Først vil du opprette en ny MySQL -database hvis du ikke allerede har en. Du kan bruke veiviseren for det. Det er mange elektroniske ressurser på dette hvis du trenger hjelp.

Når du har konfigurert en database, går du til phpMyAdmin og velger databasen. Lag en tabell med navnet weather_data med 9 kolonner. Se ett av bildene mine ovenfor for å se hva hver kolonne skal være (kopier navnet, datatypen og alt annet nøyaktig hvis du vil bruke koden min). Teller vil være vår primære nøkkel og ID vil hjelpe oss med å identifisere hvilken dag dataene gjelder (1: i dag, 2: i går, 3: alt annet). Siden vi vil ha mye data, sletter vi noe av det etter hvert som det blir eldre. Det er derfor vi trenger id -kolonnen. Resten av kolonnene er ganske selvforklarende. Akkurat nå skal tabellen i databasen din se akkurat ut som min.

Last ned den vedlagte koden og les den og kommentarene mine. Når du er ferdig, går du videre til neste trinn.

Merk: når du laster ned koden, gi den nytt navn til esp.php. Av en eller annen grunn fikk jeg en feilmelding da jeg prøvde å laste opp en PHP -fil.

Dette er i utgangspunktet hvordan koden vil fungere.

1. Samle data hvert 10. minutt og vis dem

2. Når dagen går, gjennomsnitt hver sjette verdi (for å spare DB -plass) slik at det er et datapunkt for hver time

3. Når nok en dag passerer, gjennomsnitt alle gjenværende data for den dagen og lagre den som bare ett datapunkt

På denne måten vil vi kunne se svingninger i lys, temperatur etc. over måneds tid uten å bli distrahert av daglige svingninger i temperatur, lys, etc.

Trinn 3: Henter data fra databasen til visning

Så nå har vi funnet ut hvordan vi samler værdata og laster dem opp til databasen vår. Nå må vi kunne hente den i en brukbar form. Som før har jeg lagt ved en PHP -fil getWeatherData.txt som du bør lagre til verten din og endre filnavnutvidelsen til.php i stedet for.txt. All koden er kommentert. Les gjennom det for å forstå det, og gå videre når du tror du har fått det. Hvis du har spørsmål, kan du stille dem nedenfor.

Trinn 4: Oppsett av biblioteker og noen andre ting

For dette prosjektet er et av rammene vi vil bruke AngularJS, som vil hjelpe oss å kommunisere med databasen og bygge et SPA (Single Page Application). For å få biblioteket, gå til denne lenken og last ned en versjon 1.64 eller nyere. For denne opplæringen brukte jeg 1,64, men nye versjoner blir ofte utgitt, slik at du kan bruke en annen. Finn en lenke på siden som ender slik: /VERSION/angular.min.js

Kopier lenken og lagre den et trygt sted. Vi har nettopp fått en lenke til AngularJS -biblioteket. Du trenger det for neste trinn. Nå, på den samme siden finner du en lenke som ser slik ut, og kopier den også: /VERSION/angular-route.min.js

Vinkelruten vil hjelpe oss med å administrere SPA og håndtere bytte av visninger på siden.

Vi ønsker å kunne vise diagrammer over dataene våre pent. For dette vil vi bruke et bibliotek kalt ChartJS. Gå hit, velg den nyeste versjonen og lagre en lenke som ender slik: VERSJON/Chart.bundle.min.js

Til slutt skal vi bruke et bibliotek til å sette opp sidene som heter Bootstrap. Gå til denne lenken til Hurtigstart og la dette stå åpent for nå. Når vi begynner å skrive klientkoden, vil du kunne erstatte de gamle koblingene mine med den nyere versjonen.

Nå bør vi sette opp de forskjellige visningene for applikasjonen vår. Opprett en ny mappe med navnet weather_views i katalogen på verten din der du har de to foregående filene (esp.php og getWeatherData.php). Her vil vi sette alle våre sider som hver vil korrespondere med en ID fra databasen vår (1, 2 eller 3).

I mappen oppretter du 3 filer (day.html, old.html og gær.html). Last ned den vedlagte koden og legg den inn i disse filene. Koden for DAY. HTML kommenteres slik at du kan forstå hva som skjer. Koden for de to andre sidene er i utgangspunktet den samme (annen del i old.html kommenteres).

Når du er ferdig med dette trinnet, går du videre til neste, som er det vanskeligste programmeringstrinnet.

Trinn 5: Hoved HTML -fil

I dette trinnet vil du lage/redigere/lese hoved HTML -filen der du vil vise alt. Lagre den vedlagte filen (som, som alltid, kommenteres) som espdata.html i samme katalog som esp.php. Jeg håper du kan gjøre noen endringer i det og forstå hva som egentlig skjer.

Dette er hoveddelen av koden din, så det er definitivt viktig å forstå hva som skjer.

Trinn 6: Kabeltest på et brødbrett

Nå skal vi teste at all koden fungerer med maskinvaren vår. Hvis du ikke allerede har gjort det, loddetopphoder på Feather Huzzah og BME280 -sensoren. For hvert trinn er et bilde vedlagt.

1. Legg fjær på brødbrettet. Koble 3V til + skinnen og GND til - skinnen.

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

3. Koble sensor SDA til pinne 4 på fjær. Koble SCL til pin 5.

4. Plasser fotoresistor på brødbrettet med en ledning til + skinnen.

5. Koble en motstand på 4,7 k til den ikke -tilkoblede ledningen til fotoresistoren. Koble den ikke -tilkoblede ledningen til 4,7k til en 2k -motstand. Koble den ikke -tilkoblede enden av 2k -motstanden til - skinnen (GND).

6. Koble leddet på 4,7k og 2k motstanden til pin ADC (analog pin). Vi har nettopp laget en spenningsdeler som deler maksimal spenning lest av pinnen fra 3,3V til mindre enn 1V. Du kan leke med din egen kombinasjon hvis du vil, men husk at spenningen gitt til den analoge pinnen må være mindre enn 1V.

7. Til slutt kobler du RST (reset) pinnen på fjæren til pinne 16 på fjæren (oransje ledning på bildet). Denne konfigurasjonen lar Feather Huzzah gå inn i dyp dvalemodus for å spare strøm.

Nå er du ferdig! Last opp koden til fjærhuzzahen din, og forhåpentligvis kan du se oppdateringen av nettsiden din (bare day.html -siden). Hvis ikke, kan du prøve å bruke den serielle skjermen til å feilsøke eller spør i kommentarene nedenfor.

Trinn 7: Permanent prosjekt (valgfritt)

Forutsatt at alt fungerer, kan du gjøre dette prosjektet mer permanent hvis du ønsker det. Jeg skal ikke vise dette her, men du kan lodde alle komponentene til et perf -bord og deretter legge dem i en beholder. Jeg vil legge ved IPT -filene for 3D -beholderen som jeg brukte nedenfor og noen få bilder for å komme i gang. Beholderen er ment for inspirasjon fordi du sannsynligvis vil gjøre den mer personlig med et annet design og tekst. Ha det gøy med tilpasning! Lykke til!