ESP8266 Väderstation som visar data på en webbplats: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:45

Obs! Delar av denna handledning kan vara tillgängliga i videoformat på min YouTube -kanal - Tech Tribe

I denna instruerbara, kommer jag att visa hur man gör en väderstation som direkt skickar data till din webbplats. Därför behöver du din egen domän (Ex: msolonko.net). För att börja, här är det material du behöver:

Artiklar:

Feather Huzzah ($ 16,95)

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

Batteripaket ($ 25): Jag diskuterar senare vilken kapacitet du behöver under hur lång tid utan att ladda, så att du kan välja den kapacitet du vill ha. Detta är en länk till den jag använde. Du kan också bara driva den från ett uttag.

1 Fotoresistor

Några andra motstånd - diskuteras senare

Tråd

Perf Board ($ 5,59) - Förpackning med 20 st

BME280 temperatur-, tryck- och fuktighetssensor ($ 9,99)

Någon sorts låda; du kan 3D -skriva ut en, så visar jag dig min design.

Webbhotell och domän, om du vill följa med helt och hållet i handledningen

Verktyg:

Avbitartång

Lödkolv

Steg 1: Fjäder Huzzah -kod

Koden kommer att skrivas i Arduino IDE, som kan laddas ner här. Innan vi börjar, följ instruktionerna här för att konfigurera Arduino IDE för att fungera med din Feather Huzzah. Följ också dessa instruktioner för att ladda ner nödvändiga bibliotek för att få BME -sensorn att fungera. Kodfilen bifogas och all kod kommenteras så att du kan förstå den. När du har tittat på det, gå vidare till nästa steg där vi kommer att titta på koden som tar emot sensordata.

Steg 2: Ta emot data från Feather Huzzah

Vid det här laget förstår du förhoppningsvis hur Arduino -koden fungerar. Om inte, gå tillbaka till koden och läs mina kommentarer (jag kommenterade nästan varje rad). Nu skriver vi koden som tar emot data. Som förut kommenteras allt. Programmeringsspråket som används för detta är PHP, som du kan läsa mer om här.

Våra data kommer att lagras i en MySQL -databas, som du kan läsa mer om här. Data lagras i tabeller som har rader och kolumner. Innan vi skriver koden bör vi göra strukturen i vårt bord på vår hosting cPanel. Jag använder Arvixe Hosting, så din cPanel kan se annorlunda ut. Se en av bilderna för att se hur en del av min ser ut. Först vill du skapa en ny MySQL -databas om du inte redan har en. Du kan använda guiden för det. Det finns massor av online -resurser om detta om du behöver hjälp.

När du har konfigurerat en databas går du till phpMyAdmin och väljer din databas. Skapa en tabell med namnet weather_data med 9 kolumner. Konsultera en av mina bilder ovan för att se vad varje kolumn ska vara (kopiera namnet, datatypen och allt annat exakt om du vill använda min kod). Räknare kommer att vara vår primära nyckel och id kommer att hjälpa oss att identifiera vilken dag data gäller (1: idag, 2: igår, 3: allt annat). Eftersom vi kommer att ha mycket data kommer vi att radera en del av den när den blir äldre. Det är därför vi behöver id -kolumnen. Resten av kolumnerna är ganska självförklarande. Just nu borde din tabell i din databas se ut precis som min.

Ladda ner nu den bifogade koden och läs igenom den och mina kommentarer. När du är klar, gå vidare till nästa steg.

Obs! När du laddar ner koden, byt namn på den till esp.php. Av någon anledning fick jag ett felmeddelande när jag försökte ladda upp en PHP -fil.

Detta är i princip hur koden fungerar.

1. Samla in data var 10: e minut och visa den

2. En gång om dagen går genomsnittet var sjätte värde (för att spara DB -utrymme) så att det finns en datapunkt för varje timme

3. När ytterligare en dag passerar, genomsnitt den återstående data för den dagen och lagra den som endast en datapunkt

På så sätt kommer vi att kunna se fluktuationer i ljus, temperatur etc. under månaderna utan att börja distraheras av dagliga fluktuationer i temperatur, ljus etc.

Steg 3: Hämta data från databasen till visning

Så nu har vi kommit på hur vi kan samla in väderdata och ladda upp dem till vår databas. Nu måste vi kunna hämta det i en användbar form. Som tidigare bifogade jag en PHP -fil getWeatherData.txt som du ska spara till din värd och ändra filnamnstillägget till.php istället för.txt. All kod är kommenterad. Läs igenom det för att förstå det och gå vidare när du tror att du har fått det. Om du har frågor, ställ gärna nedan.

Steg 4: Installation av bibliotek och några andra saker

För detta projekt är ett av ramarna som vi kommer att använda AngularJS, som hjälper oss att kommunicera med databasen och bygga ett SPA (Single Page Application). För att få biblioteket, gå till den här länken och ladda ner en version 1.64 eller högre. För denna handledning använde jag 1,64 men nya versioner släpps ofta så att du kan använda en annan. Hitta en länk på den sidan som slutar så här: /VERSION/angular.min.js

Kopiera länken och spara den någonstans säkert. Vi har precis fått en länk till AngularJS -biblioteket. Du kommer att behöva det för nästa steg. Nu, på samma sida, hitta en länk som ser ut så här och kopiera den också: /VERSION/angular-route.min.js

Vinkelvägen hjälper oss att hantera vårt SPA och hantera bytet av vyer på sidan.

Vi vill snyggt kunna visa diagram över våra data. För detta kommer vi att använda ett bibliotek som heter ChartJS. Gå hit, välj den senaste versionen och spara en länk som slutar så här: VERSION/Chart.bundle.min.js

Slutligen kommer vi att använda ett bibliotek för att layouta sidorna som heter Bootstrap. Gå till den här länken till Snabbstart och låt den vara öppen för tillfället. När vi börjar skriva klientkoden kommer du att kunna ersätta mina gamla länkar med den nyare versionen.

Nu bör vi ställa in de olika vyerna för vår applikation. Skapa en ny mapp med namnet weather_views i katalogen på din värd där du har de två föregående filerna (esp.php och getWeatherData.php). Här kommer vi att lägga alla våra sidor som var och en motsvarar ett ID från vår databas (1, 2 eller 3).

Skapa tre filer i mappen (day.html, old.html ochesterday.html). Ladda ner den bifogade koden och lägg den i dessa filer. Koden för DAY. HTML kommenteras så att du kan förstå vad som händer. Koden för de andra två sidorna är i princip densamma (annan del i old.html kommenteras).

När du är klar med det här steget, gå vidare till nästa, vilket är det svåraste programmeringssteget.

Steg 5: Huvud HTML -fil

I det här steget kommer du att göra/redigera/läsa huvud HTML -filen där du kommer att visa allt. Spara den bifogade filen (som, som alltid, kommenteras) som espdata.html i samma katalog som esp.php. Jag hoppas att du kan göra några ändringar i det och förstå vad som verkligen händer.

Detta är huvuddelen av din kod, så det är definitivt viktigt att förstå vad som händer.

Steg 6: Kabeltest på en brödbräda

Nu ska vi testa att all kod fungerar med vår hårdvara. Om du inte redan har gjort det, löd huvudstiften på Feather Huzzah och BME280 -sensorn. För varje steg bifogas ett foto.

1. Lägg fjäder på brödbrädan. Anslut 3V till + skenan och GND till - skenan.

2. Anslut sensorn VIN till + skena och GND till skena.

3. Anslut sensorn SDA till stift 4 på fjädern. Anslut SCL till stift 5.

4. Placera fotoresistor på brödbrädan med en ledning till + skenan.

5. Anslut ett motstånd på 4,7 k till fotoresistorns okopplade ledning. Anslut den oanslutna ledningen på 4,7k till ett 2k -motstånd. Anslut den icke anslutna änden av 2k -motståndet till - skenan (GND).

6. Anslut skarven på motståndet 4,7k och 2k till stift ADC (analog stift). Vi har just gjort en spänningsdelare som delar den maximala spänningen som läses av stiftet från 3,3V till mindre än 1V. Du kan leka med din egen kombination om du vill, men kom ihåg att spänningen som ges till den analoga stiftet måste vara mindre än 1V.

7. Anslut slutligen RST (reset) stiftet på fjädern till stift 16 på fjädern (orange tråd på bilden). Denna konfiguration gör att Feather Huzzah kan gå in i djupt viloläge för att spara ström.

Nu är du klar! Ladda upp koden till din fjäderhuzzah, och förhoppningsvis kan du se uppdateringen av din webbsida (endast sidan day.html). Om inte, försök använda den seriella bildskärmen för att felsöka eller fråga i kommentarerna nedan.

Steg 7: Permanent projekt (valfritt)

Om du antar att allt fungerar, kan du göra detta projekt mer permanent om du vill. Jag kommer inte att visa detta här, men du kan lödda alla komponenterna till en perf kartong och sedan bifoga dem i en behållare. Jag bifogar IPT -filerna för 3D -behållaren som jag använde nedan och några foton för att komma igång. Behållaren är avsedd för inspiration eftersom du förmodligen vill göra den mer personlig med en annan design och text. Ha kul med anpassning! Lycka till!