ESP8266 Wetterstation, die Daten auf einer Website anzeigt - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Hinweis: Teile dieses Tutorials sind möglicherweise im Videoformat auf meinem YouTube-Kanal - Tech Tribe verfügbar

In diesem anweisbaren zeige ich, wie man eine Wetterstation macht, die Daten direkt an Ihre Website sendet. Daher benötigen Sie eine eigene Domain (Bsp.: msolonko.net). Um zu beginnen, sind hier die Materialien, die Sie benötigen:

Produkte:

Feder Huzzah($16,95)

Micro-USB-Kabel mit Daten ($1,99)

Akku ($ 25): Ich werde später besprechen, welche Kapazität Sie für welchen Zeitraum ohne Aufladen benötigen, damit Sie die gewünschte Kapazität auswählen können. Dies ist ein Link zu dem, den ich verwendet habe. Sie können es auch einfach über eine Steckdose mit Strom versorgen.

1 Fotowiderstand

Einige andere Widerstände - später besprochen

Kabel

Perf Board ($5,59) - Packung mit 20

BME280 Temperatur-, Druck- und Feuchtigkeitssensor($9,99)

Eine Art Kiste; Sie können einen in 3D drucken, und ich zeige Ihnen mein Design.

Webhosting und Domain, wenn Sie das Tutorial komplett mitmachen möchten

Werkzeuge:

Kabelschneider

Lötkolben

Schritt 1: Feder Huzzah Code

Der Code wird in der Arduino IDE geschrieben, die hier heruntergeladen werden kann. Bevor wir beginnen, befolgen Sie bitte die Anweisungen hier, um die Arduino IDE so einzurichten, dass sie mit Ihrem Feather Huzzah funktioniert. Befolgen Sie außerdem diese Anweisungen, um die erforderlichen Bibliotheken herunterzuladen, damit der BME-Sensor funktioniert. Die Codedatei ist angehängt und der gesamte Code ist kommentiert, damit Sie ihn verstehen können. Sobald Sie es sich angesehen haben, fahren Sie mit dem nächsten Schritt fort, in dem wir uns den Code ansehen, der die Sensordaten empfängt.

Schritt 2: Empfangen von Daten von Feather Huzzah

Jetzt haben Sie hoffentlich verstanden, wie der Arduino-Code funktioniert. Wenn nicht, gehen Sie zurück zum Code und lesen Sie meine Kommentare (ich habe fast jede Zeile kommentiert). Jetzt schreiben wir den Code, der die Daten empfängt. Wie bisher ist alles kommentiert. Die dafür verwendete Programmiersprache ist PHP, über die Sie hier mehr lesen können.

Unsere Daten werden in einer MySQL-Datenbank gespeichert, über die Sie hier mehr erfahren können. Daten werden in Tabellen mit Zeilen und Spalten gespeichert. Bevor wir den Code schreiben, sollten wir die Struktur unserer Tabelle auf unserem Hosting-cPanel erstellen. Ich verwende Arvixe Hosting, daher kann Ihr cPanel anders aussehen. Sehen Sie sich eines der Bilder an, um zu sehen, wie ein Teil von mir aussieht. Zuerst möchten Sie eine neue MySQL-Datenbank erstellen, falls Sie noch keine haben. Dazu können Sie den Assistenten verwenden. Es gibt viele Online-Ressourcen dazu, wenn Sie Hilfe benötigen.

Sobald Sie eine Datenbank eingerichtet haben, gehen Sie zu phpMyAdmin und wählen Sie Ihre Datenbank aus. Erstellen Sie eine Tabelle namens weather_data mit 9 Spalten. Sehen Sie sich eines meiner obigen Bilder an, um zu sehen, wie jede Spalte aussehen sollte (kopieren Sie den Namen, den Datentyp und alles andere genau, wenn Sie meinen Code verwenden möchten). Counter ist unser Primärschlüssel und die ID hilft uns zu identifizieren, an welchem Tag sich die Daten befinden (1: heute, 2: gestern, 3: alles andere). Da wir viele Daten haben werden, werden wir einige davon löschen, wenn sie älter werden. Deshalb brauchen wir die id-Spalte. Der Rest der Spalten ist ziemlich selbsterklärend. Im Moment sollte Ihre Tabelle in Ihrer Datenbank genau wie meine aussehen.

Laden Sie nun den angehängten Code herunter und lesen Sie ihn und meine Kommentare durch. Wenn Sie fertig sind, fahren Sie mit dem nächsten Schritt fort.

Hinweis: Wenn Sie den Code herunterladen, benennen Sie ihn in esp.php um. Aus irgendeinem Grund habe ich beim Hochladen einer PHP-Datei eine Fehlermeldung erhalten.

So funktioniert der Code im Grunde.

1. Sammeln Sie alle 10 Minuten Daten und zeigen Sie sie an

2. Sobald ein Tag vergeht, mitteln Sie alle 6 Werte (um DB-Speicherplatz zu sparen), so dass es für jede Stunde einen Datenpunkt gibt

3. Sobald ein weiterer Tag vergeht, mitteln Sie alle verbleibenden Daten für diesen Tag und speichern Sie sie als nur einen Datenpunkt

Auf diese Weise können wir Schwankungen von Licht, Temperatur usw. über einen Zeitraum von Monaten sehen, ohne von täglichen Schwankungen von Temperatur, Licht usw. abgelenkt zu werden.

Schritt 3: Abrufen von Daten aus der Datenbank zur Anzeige

Jetzt haben wir also herausgefunden, wie man Wetterdaten sammelt und in unsere Datenbank hochlädt. Jetzt müssen wir es in brauchbarer Form abrufen können. Wie zuvor habe ich eine PHP-Datei getWeatherData.txt angehängt, die Sie auf Ihrem Host speichern und die Dateinamenerweiterung in.php anstelle von.txt ändern sollten. Der gesamte Code ist kommentiert. Lesen Sie es durch, um es zu verstehen, und fahren Sie fort, wenn Sie denken, dass Sie es verstanden haben. Wenn Sie Fragen haben, können Sie diese gerne unten stellen.

Schritt 4: Einrichtung von Bibliotheken und einige andere Dinge

Für dieses Projekt verwenden wir AngularJS, das uns hilft, mit der Datenbank zu kommunizieren und eine SPA (Single Page Application) aufzubauen. Um die Bibliothek zu erhalten, gehen Sie zu diesem Link und laden Sie eine Version 1.64 oder höher herunter. Für dieses Tutorial habe ich 1.64 verwendet, aber es werden oft neue Versionen veröffentlicht, sodass Sie eine andere verwenden können. Suchen Sie auf dieser Seite einen Link, der so endet: /VERSION/angular.min.js

Kopieren Sie den Link und speichern Sie ihn an einem sicheren Ort. Wir haben gerade einen Link für die AngularJS-Bibliothek erhalten. Sie benötigen es für den nächsten Schritt. Suchen Sie nun auf derselben Seite einen Link, der so aussieht, und kopieren Sie ihn ebenfalls: /VERSION/angular-route.min.js

Die Winkelroute hilft uns bei der Verwaltung unseres SPA und beim Wechsel der Ansichten auf der Seite.

Wir möchten in der Lage sein, Diagramme unserer Daten schön darzustellen. Dazu verwenden wir eine Bibliothek namens ChartJS. Gehen Sie hierher, wählen Sie die neueste Version und speichern Sie einen Link, der so endet: VERSION/Chart.bundle.min.js

Schließlich verwenden wir eine Bibliothek, um die Seiten namens Bootstrap zu gestalten. Gehen Sie zu diesem Link zum Quick Start und lassen Sie diesen vorerst geöffnet. Sobald wir mit dem Schreiben des Client-Codes beginnen, können Sie meine alten Links durch die neuere Version ersetzen.

Nun sollten wir die verschiedenen Ansichten für unsere Anwendung einrichten. Erstellen Sie in dem Verzeichnis auf Ihrem Host, in dem sich die beiden vorherigen Dateien (esp.php und getWeatherData.php) befinden, einen neuen Ordner namens weather_views. Hier werden wir alle unsere Seiten ablegen, die jeweils einer ID aus unserer Datenbank entsprechen (1, 2 oder 3).

Erstellen Sie im Ordner 3 Dateien (day.html, old.html und gestern.html). Laden Sie den angehängten Code herunter und fügen Sie ihn in diese Dateien ein. Der Code für DAY. HTML ist kommentiert, damit Sie verstehen können, was passiert. Der Code für die anderen 2 Seiten ist im Grunde der gleiche (anderer Teil in old.html ist kommentiert).

Wenn Sie mit diesem Schritt fertig sind, fahren Sie mit dem nächsten fort, dem schwierigsten Programmierschritt.

Schritt 5: Haupt-HTML-Datei

In diesem Schritt erstellen/bearbeiten/lesen Sie die Haupt-HTML-Datei, in der Sie alles anzeigen. Speichern Sie die angehängte Datei (die wie immer kommentiert ist) als espdata.html im selben Verzeichnis wie esp.php. Ich hoffe, Sie können einige Änderungen daran vornehmen und verstehen, was wirklich vor sich geht.

Dies ist der Großteil Ihres Codes, daher ist es auf jeden Fall wichtig zu verstehen, was vor sich geht.

Schritt 6: Verdrahtungstest auf einem Steckbrett

Jetzt werden wir testen, ob der gesamte Code mit unserer Hardware funktioniert. Falls noch nicht geschehen, löten Sie die Header-Pins an der Feather Huzzah und dem BME280-Sensor an. Für jeden Schritt ist ein Foto beigefügt.

1. Legen Sie die Feder auf das Steckbrett. Verbinden Sie 3V mit der + Schiene und GND mit der - Schiene.

2. Verbinden Sie den Sensor VIN mit der + Schiene und GND mit der - Schiene.

3. Schließen Sie den Sensor SDA an Pin 4 der Feder an. Verbinden Sie SCL mit Pin 5.

4. Legen Sie den Fotowiderstand auf das Steckbrett, wobei eine Leitung zur + Schiene führt.

5. Schließen Sie einen 4,7k-Widerstand an die nicht angeschlossene Leitung des Fotowiderstands an. Verbinden Sie das nicht verbundene Kabel des 4.7k mit einem 2k Widerstand. Verbinden Sie das nicht verbundene Ende des 2k-Widerstands mit der - Schiene (GND).

6. Verbinden Sie die Verbindung des 4,7k- und 2k-Widerstands mit dem Pin ADC (analoger Pin). Wir haben gerade einen Spannungsteiler erstellt, der die maximale Spannung, die vom Pin gelesen wird, von 3,3 V auf weniger als 1 V teilt. Sie können mit Ihrer eigenen Kombination herumspielen, wenn Sie möchten, aber denken Sie daran, dass die an den analogen Pin gegebene Spannung weniger als 1 V betragen muss.

7. Verbinden Sie schließlich den RST-Pin (Reset) an der Feder mit Pin 16 an der Feder (orangefarbener Draht auf dem Foto). Diese Konfiguration ermöglicht es dem Feather Huzzah, in den Tiefschlafmodus zu wechseln, um Strom zu sparen.

Jetzt sind Sie fertig! Laden Sie den Code in Ihr Federhuzzah hoch und hoffentlich können Sie Ihr Webseiten-Update sehen (nur die day.html-Seite). Wenn nicht, versuchen Sie es mit dem seriellen Monitor zur Fehlerbehebung oder fragen Sie in den Kommentaren unten nach.

Schritt 7: Permanentes Projekt (optional)

Vorausgesetzt, dass alles funktioniert, können Sie dieses Projekt auf Wunsch dauerhafter gestalten. Ich werde dies hier nicht zeigen, aber Sie können alle Komponenten auf ein Perfboard löten und dann in einen Behälter legen. Ich werde die IPT-Dateien für den 3D-Container, den ich unten verwendet habe, und ein paar Fotos anhängen, um Ihnen den Einstieg zu erleichtern. Der Container ist als Inspiration gedacht, da Sie ihn wahrscheinlich mit einem anderen Design und Text persönlicher gestalten möchten. Viel Spaß beim Anpassen! Viel Glück!