ESP8266 weerstation dat gegevens op een website weergeeft - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Opmerking: delen van deze tutorial zijn mogelijk beschikbaar in videoformaat op mijn YouTube-kanaal - Tech Tribe

In deze instructable laat ik zien hoe je een weerstation maakt dat rechtstreeks gegevens naar je website stuurt. Daarom heeft u uw eigen domein nodig (bijvoorbeeld: msolonko.net). Om te beginnen, hier zijn de materialen die je nodig hebt:

Artikelen:

Veer Huzza ($16.95)

Micro-USB-kabel met gegevens ($ 1,99)

Battery Pack ($ 25): Ik zal later bespreken welke capaciteit je nodig hebt voor welke hoeveelheid tijd zonder op te laden, zodat je de capaciteit kunt kiezen die je wilt. Dit is een link naar degene die ik heb gebruikt. Je kunt hem ook gewoon van stroom voorzien via een stopcontact.

1 fotoweerstand

Enkele andere weerstanden - later besproken

Draad

Perf Board ($5.59) - Pak van 20

BME280 temperatuur-, druk- en vochtigheidssensor ($ 9,99)

Een soort doos; je kunt er een 3D-printen, en ik zal je mijn ontwerp laten zien.

Webhosting en domein, als je de tutorial volledig wilt volgen

Gereedschap:

Draadknipper

Soldeerbout

Stap 1: Veer Huzzah-code

De code wordt geschreven in Arduino IDE, die je hier kunt downloaden. Voordat we beginnen, volgt u de instructies hier om de Arduino IDE in te stellen om met uw Feather Huzzah te werken. Volg ook deze instructies om de benodigde bibliotheken te downloaden om de BME-sensor te laten werken. Het codebestand is bijgevoegd en alle code is van commentaar voorzien zodat u het kunt begrijpen. Zodra u ernaar kijkt, gaat u verder met de volgende stap, waar we naar de code kijken die de sensorgegevens ontvangt.

Stap 2: Gegevens ontvangen van Feather Huzzah

Inmiddels begrijp je hopelijk hoe de Arduino-code werkt. Zo niet, ga dan terug naar de code en lees mijn opmerkingen (ik heb op bijna elke regel commentaar gegeven). Nu gaan we de code schrijven die de gegevens ontvangt. Zoals eerder is alles becommentarieerd. De programmeertaal die hiervoor gebruikt wordt is PHP, waarover je hier meer kunt lezen.

Onze gegevens worden opgeslagen in een MySQL-database, waarover u hier meer kunt lezen. Gegevens worden opgeslagen in tabellen met rijen en kolommen. Voordat we de code schrijven, moeten we de structuur van onze tabel op ons hosting-cPanel maken. Ik gebruik Arvixe Hosting, dus je cPanel kan er anders uitzien. Raadpleeg een van de afbeeldingen om te zien hoe een deel van de mijne eruit ziet. Eerst wil je een nieuwe MySQL-database maken als je die nog niet hebt. U kunt daarvoor de wizard gebruiken. Er zijn tal van online bronnen hierover als je hulp nodig hebt.

Zodra u een database hebt ingesteld, gaat u naar phpMyAdmin en selecteert u uw database. Maak een tabel met de naam weather_data met 9 kolommen. Raadpleeg een van mijn afbeeldingen hierboven om te zien wat elke kolom zou moeten zijn (kopieer de naam, het gegevenstype en al het andere precies als je mijn code wilt gebruiken). Teller is onze primaire sleutel en id helpt ons te bepalen op welke dag de gegevens betrekking hebben (1: vandaag, 2: gisteren, 3: al het andere). Omdat we veel gegevens zullen hebben, zullen we een deel ervan wissen naarmate het ouder wordt. Daarom hebben we de id-kolom nodig. De rest van de kolommen spreken voor zich. Op dit moment zou uw tabel in uw database er precies zo uit moeten zien als de mijne.

Download nu de bijgevoegde code en lees deze en mijn opmerkingen door. Als u klaar bent, gaat u verder met de volgende stap.

Opmerking: wanneer u de code downloadt, hernoemt u deze naar esp.php. Om de een of andere reden kreeg ik een foutmelding toen ik probeerde een PHP-bestand te uploaden.

Dit is in principe hoe de code zal werken.

1. Verzamel elke 10 minuten gegevens en geef deze weer

2. Zodra een dag verstrijkt, neemt u het gemiddelde van elke 6 waarden (om DB-ruimte te besparen) zodat er voor elk uur een gegevenspunt is

3. Zodra er weer een dag voorbij is, neemt u het gemiddelde van alle resterende gegevens voor die dag en slaat u deze op als slechts één gegevenspunt

Op deze manier zullen we in staat zijn om schommelingen in licht, temperatuur enz. over een periode van maanden te zien zonder te worden afgeleid door dagelijkse schommelingen in temperatuur, licht, enz.

Stap 3: Gegevens ophalen uit de database om weer te geven

Dus nu hebben we ontdekt hoe we weergegevens kunnen verzamelen en uploaden naar onze database. Nu moeten we het in een bruikbare vorm kunnen ophalen. Zoals eerder heb ik een PHP-bestand getWeatherData.txt bijgevoegd dat u op uw host moet opslaan en de bestandsnaamextensie moet wijzigen in.php in plaats van.txt. Alle code is becommentarieerd. Lees het door om het te begrijpen en ga verder als je denkt dat je het hebt. Als u vragen heeft, kunt u deze hieronder stellen.

Stap 4: Bibliotheken instellen en enkele andere dingen

Voor dit project is een van de frameworks die we zullen gebruiken AngularJS, dat ons zal helpen communiceren met de database en een SPA (Single Page Application) bouwen. Om de bibliotheek te krijgen, ga naar deze link en download een versie 1.64 of hoger. Voor deze tutorial heb ik 1.64 gebruikt, maar er worden vaak nieuwe versies uitgebracht, zodat je een andere kunt gebruiken. Zoek een link op die pagina die als volgt eindigt: /VERSION/angular.min.js

Kopieer de link en sla deze op een veilige plek op. We hebben zojuist een link gekregen voor de AngularJS-bibliotheek. Je hebt het nodig voor de volgende stap. Zoek nu op dezelfde pagina een link die er zo uitziet en kopieer deze ook: /VERSION/angular-route.min.js

De hoekroute helpt ons bij het beheren van onze SPA en bij het wisselen van weergaven op de pagina.

We willen grafieken van onze gegevens mooi kunnen weergeven. Hiervoor gebruiken we een bibliotheek genaamd ChartJS. Ga hierheen, kies de nieuwste versie en sla een link op die als volgt eindigt: VERSION/Chart.bundle.min.js

Ten slotte zullen we een bibliotheek gebruiken om de pagina's genaamd Bootstrap in te delen. Ga naar deze link naar Quick Start en laat deze voorlopig open. Zodra we beginnen met het schrijven van de klantcode, kunt u mijn oude links vervangen door de nieuwere versie.

Nu moeten we de verschillende weergaven voor onze toepassing instellen. Maak in de map op je host waar je de vorige twee bestanden hebt (esp.php en getWeatherData.php), een nieuwe map met de naam weather_views. Hierin zullen we al onze pagina's plaatsen die elk corresponderen met een id uit onze database (1, 2 of 3).

Maak in de map 3 bestanden (dag.html, oud.html en gisteren.html). Download de bijgevoegde code en plaats deze in die bestanden. De code voor DAY. HTML is becommentarieerd zodat u kunt begrijpen wat er gebeurt. De code voor de andere 2 pagina's is in principe hetzelfde (ander deel in old.html is becommentarieerd).

Als u klaar bent met deze stap, gaat u verder met de volgende, de moeilijkste programmeerstap.

Stap 5: Hoofd HTML-bestand

In deze stap maakt/bewerkt/lees je het HTML-hoofdbestand waarin je alles weergeeft. Bewaar het bijgevoegde bestand (dat, zoals altijd, wordt becommentarieerd) als espdata.html in dezelfde map als esp.php. Ik hoop dat je er wat aan kunt veranderen en begrijpt wat er werkelijk aan de hand is.

Dit is het grootste deel van uw code, dus het is absoluut belangrijk om te begrijpen wat er aan de hand is.

Stap 6: bedradingstest op een breadboard

Nu gaan we testen of alle code werkt met onze hardware. Als je dat nog niet hebt gedaan, soldeer je de header-pinnen op de Feather Huzzah en de BME280-sensor. Bij elke stap is een foto bijgevoegd.

1. Plaats veer op het breadboard. Sluit 3V aan op de + rail en GND op - rail.

2. Sluit de sensor VIN aan op + rail en GND op - rail.

3. Sluit sensor SDA aan op pin 4 op veer. Sluit SCL aan op pin 5.

4. Plaats de fotoresistor op het breadboard met één kabel naar de + rail.

5. Sluit een weerstand van 4,7 k aan op de niet-aangesloten kabel van de fotoweerstand. Sluit de niet-aangesloten kabel van de 4.7k aan op een 2k-weerstand. Sluit het niet-aangesloten uiteinde van de 2k-weerstand aan op de - rail (GND).

6. Sluit de verbinding van de weerstand van 4,7 k en 2 k aan op pin ADC (analoge pin). We hebben zojuist een spanningsdeler gemaakt die de maximale spanning die door de pin wordt gelezen, verdeelt van 3,3V tot minder dan 1V. Je kunt desgewenst met je eigen combinatie spelen, maar houd er rekening mee dat de spanning die aan de analoge pin wordt gegeven minder dan 1V moet zijn.

7. Sluit tot slot de RST (reset) pin op de veer aan op pin 16 op de veer (oranje draad op de foto). Met deze configuratie kan de Feather Huzzah in de diepe slaapmodus gaan om energie te besparen.

Nu ben je klaar! Upload de code naar je Feather Huzzah, en hopelijk kun je je webpagina-update zien (alleen de day.html-pagina). Als dat niet het geval is, probeer dan de seriële monitor te gebruiken om problemen op te lossen of vraag het in de opmerkingen hieronder.

Stap 7: Permanent project (optioneel)

Ervan uitgaande dat alles werkt, kunt u dit project, als u dat wenst, permanenter maken. Ik zal dit hier niet laten zien, maar je kunt alle componenten op een perfboard solderen en ze vervolgens in een container insluiten. Ik zal de IPT-bestanden bijvoegen voor de 3D-container die ik hieronder heb gebruikt en een paar foto's om u op weg te helpen. De container is bedoeld ter inspiratie omdat je hem waarschijnlijk persoonlijker wilt maken met een ander ontwerp en andere tekst. Veel plezier met maatwerk! Veel geluk!