Website-gesteuerter Weihnachtsbaum (jeder kann ihn steuern) - Gunook

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

Sie möchten wissen, wie ein webseitengesteuerter Weihnachtsbaum aussieht?

Hier ist das Video, das mein Projekt von meinem Weihnachtsbaum zeigt. Der Live-Stream ist inzwischen zu Ende, aber ich habe ein Video gemacht, das festhält, was vor sich ging:

Dieses Jahr, Mitte Dezember, lag ich in meinem Bett und versuchte mitten in einer Arbeitswoche zu schlafen. Und anstatt zu schlafen, dachte ich über ein cooles Weihnachtsprojekt nach. Und dann kam mir eine coole Idee.

Da ich mit Weihnachtsdekoration faul bin, wäre es cool, jemand anderen meine Weihnachtsbeleuchtung kontrollieren zu lassen, damit ich mir keine Sorgen machen muss.

"Was wäre, wenn ich eine Weihnachtsbaumbeleuchtung machen würde, die JEDER über eine Website-Schnittstelle steuern könnte?"

(zwei Wochen schlaflose Nächte einfügen)

Also habe ich es geschafft.

Ein Weihnachtsbaum mit zwanzig RGB-LEDs, die über ESP8266 Arduino mit dem Internet verbunden sind.

Ein Freund von mir (danke JP) half mir, eine Website einzurichten (da ich kein fließender Programmierer für Website-bezogene Dinge bin).

Und wir haben einen 24/7-YouTube-Live-Stream meines Baumes eingerichtet, damit Sie jederzeit sehen können, was Sie ein- oder ausschalten.

Dieses Projekt ist ideal für dieses Jahr, da viele von uns im Lockdown waren und nicht in der Lage waren, Freunde und Familie zu treffen und Kontakte zu knüpfen. Warum nicht über den Weihnachtsbaum vereinen:)

In diesem Instructable werde ich im Detail erklären, wie dieses Projekt gemacht wurde.

Schritt 1: Fähigkeitslevel

Dieses Projekt ist eher softwareorientiert. Aber keine Angst Etwas Glück und Hilfe von Onkel Google werden immens helfen:)

Sie benötigen eine Reihe von 3 Fähigkeiten (oder Sie werden sie ohne Sorge lernen): einen Webserver-Teil, den Arduino-Teil und natürlich einen Weihnachtsbaum!

Empfohlene Kenntnisse:

• Grundlegende Computer- und Programmierkenntnisse

• Grundlegende Linux-Terminal-Kenntnisse

• Grundkenntnisse in Computernetzwerken

• Grundkenntnisse in der Elektronik

• Fähigkeiten zur Verwendung von Google und andere "besondere" Fähigkeiten

• Sollte wissen, wie man einen Weihnachtsbaum aufstellt:)

Wenn Sie ein Gefühl für Technologie und Programmierung haben, sollten Sie in der Lage sein, dieses Ding gemäß dieser Anleitung einzurichten.

Schritt 2: Werkzeuge und Komponenten

Auf der Weihnachtsbaumseite benötigen Sie: • Weihnachtsbaum (d'oh…)

• Eine NodeMCU-Mikrocontrollerplatine

(Sie können auch ESP32 oder andere Wi-Fi- oder Ethernet-fähige Karten verwenden)

• Adressierbarer RGB-LED-Streifen. adressierbarer RGB-LED-Streifen spart viele Arduino GPIOs (https://www.sparkfun.com/products/11020)

• Software für die NodeMCU (in dieser Anleitung enthalten)

Auf der Serverseite benötigen Sie:

• Ein virtueller privater Server mit öffentlicher IP. Hier erhalten Sie 100 US-Dollar kostenlos auf DigitalOcean

• Eine Domain (optional), die Sie bei jeder Registrar-Organisation registrieren können, zum Beispiel

• Dedizierter Code (im Lieferumfang dieser Anleitung enthalten)

Schritt 3: Konfigurieren der virtuellen Maschine (Computer) TEIL 1

Kommen wir direkt zum Codieren:)

Wir benötigen einen Server, der mit der Website und NodeMCU kommuniziert.

Server auf DigitalOcean ermöglichen es uns, eine virtuelle Maschine mit einer öffentlichen IP-Adresse zu haben, was bedeutet, dass wir Dienste darauf ausführen und weltweit darauf zugreifen können.

Sobald Sie ein DigitalOcean-Monatsabonnement bezahlt haben (Sie können eine kostenlose 60-Tage-Testversion nutzen), erstellen Sie ein Projekt und nennen Sie es einen Weihnachtsbaum oder was auch immer Sie möchten.

Sie können jetzt Ihre virtuelle Maschine (einen virtuellen Computer mit Fernzugriff) erstellen, indem Sie auf "Erste Schritte mit einem Droplet" klicken (was im Grunde der Name von DigitalOcean für eine virtuelle Maschine ist).

Eine Konfigurationsseite wird angezeigt und Sie können bei einem Standard bleiben: Ubuntu-Image, Basisplan und kein Blockspeicher (5 $ / Monat)

Schritt 4: Konfigurieren der virtuellen Maschine (Computer) TEIL 2

Eine Rechenzentrumsregion ist der Ort, an dem Ihr Server erstellt wird.

Wählen Sie die Ihnen und Ihren potenziellen Benutzern am nächsten gelegene aus. Dies bietet die kürzeste Reaktionszeit.

Außerdem werden Sie im Abschnitt Authentifizierung aufgefordert, ein Passwort für den Zugriff auf Ihre virtuelle Maschine einzugeben.

Behalten Sie im Abschnitt Finalisieren und Erstellen den Standardwert von 1 Droplet bei, wählen Sie einen Hostnamen (wieder Weihnachtsbaum), wählen Sie Ihr zuvor erstelltes Projekt aus, wenn es nicht standardmäßig ausgewählt ist, und klicken Sie auf Droplet erstellen. Das wird ein paar Minuten dauern. Wenn Sie links im Navigationsbereich auf Ihr Projekt klicken, sehen Sie Ihr Droplet.

Schritt 5: Konfigurieren der virtuellen Maschine (Computer) TEIL 3

Durch Klicken auf die drei Punkte rechts neben dem Droplet können Sie auf Zugriffskonsole klicken, wodurch Sie auf Ihren virtuellen Computer zugreifen können.

Es öffnet sich ein neues kleines Browserfenster. Nun, dies ist keine Desktop-Umgebung, wie auf Ihrem Windows 10 oder Ubuntu-Computer mit grafischer Oberfläche.

Alles kann jedoch über eine Konsolenschnittstelle erfolgen.

Es ist nicht so gruselig wie es aussieht:)

Schritt 6: Konfigurieren der virtuellen Maschine (Computer) TEIL 4

Sie haben erfolgreich Ihre eigene virtuelle Maschine in einer DigitalOcean-Cloud erstellt.

In den nächsten Schritten richten Sie einen Webserver namens Apache ein und richten Ihre eigene Webseite ein.

Laden Sie den Filezilla-Client hier https://filezilla-project.org/download.php?platfo… herunter (oder suchen Sie die 32-Bit-Version für das 32-Bit-Betriebssystem) und installieren Sie ihn. Es ist ein FTP-Client (File Transfer Protocol).

Sie können auf Dateien von und zu Ihrer virtuellen Maschine zugreifen und diese übertragen.

Klicken Sie nach der Installation auf Datei→Site-Manager→Neue Site und geben Sie Daten wie in einem Bild oben ein.

Protokoll: SFTP (Secure File Transfer Protocol)

Host: IP Ihres Servers, finden Sie in Ihrem DigitalOcean-Projekt.

Der Benutzer ist root und das Passwort ist das, was Sie beim Erstellen Ihres Droplets festgelegt haben.

Klicken Sie auf OK und stellen Sie eine Verbindung zu Ihrer virtuellen Maschine her.

Sie werden gewarnt, der Hostschlüssel ist unbekannt. Folgen Sie dem zweiten Bild.

Erstellen Sie einen lokalen Ordner für das Projekt und extrahieren Sie Ihre Projektdateien, die Sie hier herunterladen.

Sie bearbeiten Ihre Dateien auf Ihrem Computer und übertragen sie jedes Mal auf Ihre virtuelle Maschine, wenn Sie den Code testen oder aktualisieren möchten.

Schritt 7: Installieren Sie einen Webserver

Melden Sie sich mit dem Benutzernamen root und Ihrem Passwort an Ihrer Droplet-Konsole an.

Da wir keine grafische Oberfläche haben, verwenden wir Befehle, um Ihre virtuelle Maschine zu steuern. Hier sind einige gängige Befehle, die Sie unter Ubuntu (Linux) verwenden werden:

• pwd – mein aktuelles Verzeichnis drucken

• ls – Dateien und Ordner in meinem aktuellen Verzeichnis auflisten

• cd / – in das Verzeichnis / verschieben (Ordner, der die wichtigsten Linux-Verzeichnisse wie etc, bin, boot, dev, root, home, var usw. enthält)

Mit Ausführen meine ich, geben Sie den Befehl ein und drücken Sie die Eingabetaste.

Jetzt führen wir apt-get update -y aus, um das System zu aktualisieren.

Führen Sie apt install apache2 -y aus, um den Apache-Webserver zu installieren.

Ihr Apache-Willkommensbildschirm sollte auf Ihrer https://virtual-machine-ip von Ihrem Browser aus zugänglich sein.

Ersetzen Sie virtual-machine-ip durch die IP Ihrer virtuellen Maschine, zum Beispiel 165.12.45.123. Sie können das https:// auch überspringen, da es automatisch hinzugefügt wird.

Herzlichen Glückwunsch!

Notiz:

Wenn Sie möchten, dass Ihre Website über einen Namen und nicht über eine IP-Adresse zugänglich ist (wie ich https://blinkmytree.live/ verwendet habe), gehen Sie zur Domain-Provider-Site GoDaddy oder ähnlich (namecheap.com usw.) und folgen Sie den Anweisungen hier:

Einige Domainnamen sind sehr preiswert. Meine Domain hat nur 2$ pro Jahr gekostet. Das Geld auf jeden Fall wert:)

Schritt 8: Installieren Sie ein Webanwendungs-Framework

Zurück zu unserer Konsole. Keine Angst:)

Verwenden Sie Filezilla, um einen Ordner namens app in /home zu erstellen, sodass /home/app Ihr Ordner ist

Führen Sie cd /home/app aus, um in den App-Ordner zu gelangen.

Führen Sie apt install npm -y aus, um den npm-Paketmanager zu installieren. Das wird ein paar Minuten dauern.

Führen Sie npm init -y aus, um eine Datei package.json zu erstellen, die wichtige Paketdaten zu einer App verfolgt/merkt.

Führen Sie npm --save install cors express aus, um die Module cors, express. zu installieren

Cors ist ein Modul zur Konfiguration des Cross-Site-Zugriffs und Express ist ein Webanwendungs-Framework.

Npm ist ein von uns verwendeter Paketmanager und wir werden die JavaScript-Laufzeit von node.js verwenden, um unsere Anwendungsprogrammierschnittstelle (API) zu programmieren, die in Kombination mit einem http-Server HTTP-Anforderungen zum Anwenden von Farben auf LEDs akzeptiert und deren Werte (Farben) markiert. im Speicher und übergeben Sie die Werte an NodeMcu, wenn es dies anfordert.

Hinweis: Node in NodeMcu hat nichts mit Node in node.js zu tun. NodeMcu kann durch jedes mit dem Internet verbundene Arduino-Entwicklungsboard, NXP-Entwicklungsboard oder ein benutzerdefiniertes Microchip / NXP / Renesas / STM / Atmel-PCB ersetzt werden. Node.js könnte auch durch. Net Framework, PHP oder eine andere Plattform ersetzt werden. Aber der Einfachheit halber verwenden wir NodeMCU und Node.js.

Machen wir nun einen Test, ob wir ein kleines Programm in node.js ausführen können

Erstellen Sie eine Datei namens index.js mit notepad/notepad++ oder einem anderen Editor oder einer von Ihnen verwendeten integrierten Entwicklungsumgebung (Visual Studio Code https://code.visualstudio.com/) in Ihrem lokalen Ordner.

Füge diesen Code hinein:

var http = erfordern('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Inhaltstyp': 'text/plain'});

res.end('Hallo Welt!');

}).hören(8080);

Speichern Sie es und übertragen Sie es als index.js in den Ordner /home/app mit Doppelklick/Drag-Drop auf die Datei in FileZilla.

Führen Sie den Knoten index.js aus und lassen Sie ihn laufen.

Jetzt können wir von unserem Browser aus auf unsere Seite unter https://virtual-machine-ip:8080 zugreifen. Eine weiße Seite mit Hello World-Text wird angezeigt.

Herzlichen Glückwunsch, Sie haben gerade einen Webserver in node.js erstellt!

Schritt 9: Bereiten Sie die Software vor

Gehen Sie zur Konsole und stoppen Sie das Programm, indem Sie Strg+C drücken.

Ersetzen Sie Ihre index.js-Datei in /home/app/ und ersetzen Sie sie durch unsere index.js in.

Hier können Sie alle Dateien für die Website herunterladen:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Kopieren Sie unseren Chrismas Tree-Code mit Filezilla aus dem HTML-Ordner in das Remote-Verzeichnis /var/www/html/. Es wird einige Zeit in Anspruch nehmen. Wenn Sie dazu aufgefordert werden, ersetzen Sie index.html durch eine neue.

Geben Sie Ihre IP erneut in Ihren bevorzugten Webbrowser ein.

Sie haben soeben Ihr Webanwendungs-Frontend auf https://virtual-machine-ip verfügbar gemacht.

Schritt 10: Back-End-Code verstehen und zum Laufen bringen

Hinweis: Ihr Back-End-Code befindet sich unter /home/app

Denken Sie daran, nachdem Sie Ihren Code lokal bearbeitet haben, vergessen Sie nicht, ihn mit FileZilla auf Ihren Server hochzuladen und Ihre Node-Anwendung neu zu starten (Konsole: Strg+C, Pfeil nach oben (zeigt den letzten Befehl node index.js), Enter)

Damit der Code funktioniert, müssen Sie zuerst einige Daten eingeben.

Zuerst müssen Sie die Hostname-Variable in index.js in Ihre eigene Domain oder IP ändern (etwas, das so aussieht: 165.13.45.123).

Zweitens werde ich Sie durch den Code führen, um ihn zu verstehen. Stellen Sie sicher, dass Sie keine Kommentare überspringen, die ich im Code gemacht habe.

Sie können in der Datei index.js sehen, dass wir eine App mit dem Express-Modul erstellen. Dann wenden wir CORS-Regeln darauf an, fügen die APIs hinzu und starten einen http-Server. Dieser Server bedient eine Webseite nicht über GET-HTTP-Anfragen, aber er bedient LED-Zustände über GET-HTTP-Anfragen und aktualisiert LED-Zustände bei empfangenen PUT-HTTP-Anfragen.

APIs sind gängige Praxis, um Informationen zwischen Anwendungen auszutauschen. Am häufigsten verwenden wir REST-APIs, die wir selbst verwenden. Sie sind zustandslos und haben keine dauerhafte Verbindung (shorturl.at/aoBC3, PUT-Anfragen aktualisieren einfach die LED-Zustände in der App-Array-Variable (Speicher), GET-Anfragen senden einfach die LED-Zustände an einen Client.

Die Antwort an den Client erfolgt normalerweise in JSON-Notation, aber für diese einfache Antwort von 30 LED-Zuständen senden wir einfach eine Zeichenfolge mit 30 durch Kommas getrennten Werten.

Schritt 11: Den Front-End-Code verstehen und ihn zum Laufen bringen TEIL 1

Hinweis: Ihr Front-End-Code befindet sich unter /var/www/html

Denken Sie daran, nachdem Sie Ihren Code lokal bearbeitet haben, vergessen Sie nicht, ihn mit FileZilla auf Ihren Server hochzuladen. Im Gegensatz zu node.js startet Apache sich automatisch neu, aber Sie müssen Ihre Seite in Ihrem Browser neu laden. Verwenden Sie Strg+F5, um den Cache Ihrer Seite zu aktualisieren und auch zu löschen.

Damit der Code funktioniert, müssen Sie wenige Daten eingeben. Zuerst müssen Sie die URL-Variable in der Funktion send_request in index.html von blinkmytree.live in Ihre eigene Domain oder IP ändern, zum Beispiel: 165.13.45.123.

Zweitens werde ich Sie durch den Code führen, um ihn zu verstehen. Stellen Sie sicher, dass Sie keine Kommentare überspringen, die ich im Code gemacht habe. Seite ist ein HTML-Dokument. Abgesehen von allen CSS-Regeln (Seitenstil und Inhaltsposition) werden wir uns funktionswichtige Inhalte ansehen. Um mehr über CSS zu erfahren, besuchen Sie

Wir wollten diese Hauptmerkmale (Experten für agile Methoden würden User Stories sagen) auf der Seite:

• In die Seite eingebettetes Live-Video

• Anklickbare LEDs an einem Weihnachtsbaum, die im Gimp-Bildeditor (https://www.gimp.org/) bearbeitet wurden.

• Tatsächliche Kommunikation mit einem Server, der darauf wartet, den LED-Status zu ändern.

Schritt 12: Den Front-End-Code verstehen und ihn zum Laufen bringen TEIL 2

Sobald wir unseren Weihnachtsbaum mit einer Anzahl von LEDs und Farben zur Auswahl haben, müssen wir Bereiche erstellen und Aktionen auf sie anwenden. Sobald wir also auf die farbige LED in einem Auswahlbereich eines Bildes klicken, wird eine Farbe ausgewählt und eine Wir klicken auf eine LED, der Befehl wird an den Server gesendet, wo der Arduino seinen Wert auswählt.

In HTML5, dem neuesten HTML-Standard, gibt es eine sogenannte Imagemap. Es ermöglicht uns, Bereiche auf einem Bild zu definieren, auf die wir Aktionslistener anwenden können.

Da wir viele Bereiche definieren müssen, haben wir ein Tool im Internet https://www.image-map.net/ verwendet, um diese Bereiche zu definieren und HTML-Code auf unsere Seite kopiert.

Sobald wir das getan haben, können wir das onclick-Ereignis mit einer Funktion, die es aufruft, und dem Parameter einer LED-Nummer in jeden dieser Bereiche legen. Siehe den Screenshot oben.

Schritt 13: Den Front-End-Code verstehen und ihn zum Laufen bringen TEIL 3

Am Ende des HTML-Bodys setzen wir in einer Region etwas JavaScript, um die Funktionen zu definieren, die wir in onclick-Ereignissen aufrufen. Global definieren wir eine XMLHttpRequest, mit der wir eine PUT-Anfrage senden

Wir haben zwei Funktionen:

Funktion set_color(val)

Funktion send_request(id)

Zum Testen der API-Anfrage empfehle ich ein häufig verwendetes Softwaretool namens Postman https://www.postman.com/. Es ermöglicht uns, ohne Programmierkenntnisse einfach eine API-Anfrage an den Server zu senden. Es ermöglicht, einen Server zu verspotten und auch Anfragen zu akzeptieren.

Schritt 14: Den Front-End-Code verstehen und ihn zum Laufen bringen TEIL 4

Ihre Bewerbung funktioniert.

Beachten Sie, dass die Zahlen umgekehrt sind, d.

Sie müssen weiterhin einen Live-Stream auf YouTube erstellen, wenn Sie möchten, und den Einbettungscode des YouTube-Videos durch Ihren eigenen ersetzen.

Schritt 15: Der Arduino-Code

Der ESP8266 führt eine einfache HTTP-Client-Beispielskizze aus, die leicht modifiziert wurde und die Daten von meiner Website über einen API-Aufruf empfängt.

Sie müssen auch Bibliotheken zur Steuerung des LED-Streifens installieren, wenn Sie denselben adressierbaren RGB-Streifen wie ich verwenden möchten.

github.com/adafruit/Adafruit-WS2801-Librar…

In der Skizze, die ich angehängt habe, müssen Sie Ihren WLAN-Namen und Ihr Passwort sowie eine URL zu Ihrer Website eingeben (siehe Kommentare).

Im Grunde konvertieren wir eine HTTP-Antwort in eine Zeichenfolge vom Typ C, sodass wir die C-Funktion strtok verwenden können, um die Zeichenfolge durch Kommas aufzuteilen und die LED-Tabelle mit Werten zu füllen, die von einem Server gelesen werden. Dann rufen wir eine Funktion auf, bei der wir die Tabelle durchgehen, und basierend auf den Werten drehen wir die richtige Farbe, die der Benutzer erwartet.

Das ist es!

Glückwunsch, du hast es geschafft!

Schritt 16: RGB-LED-Kette

Äh, äh. Jetzt ist es an der Zeit, eine kleine Pause von all dem Programmieren einzulegen:)

Da der ESP8266 nicht viele GPIO-Pins hat, um LEDs einzeln anzusteuern, habe ich diese adressierbare RGB-LED-Kette verwendet:

www.sparkfun.com/products/11020

Auf diese Weise können alle 20 RGB-LEDs (insgesamt 60 LEDs) von nur zwei Pins gesteuert werden - "Daten" und "Takt" und 5V-Strom direkt vom ESP8266.

Das Anschließen des Strips an das NodeMcu ist einfach. 5V an Vin an NodeMcu (5V von USB), gelbes Kabel an Pin 12, grünes Kabel an Pin 14, Masse an Masse.

Sie können individuelle RGB-Farbe und Helligkeit einstellen. Mit etwas Farbmischung können Sie für jede LED viele Farben erzeugen.

Es gibt auch eine sehr coole Bibliothek für alle möglichen coolen FX-Effekte mit diesen LEDs. Probieren Sie es aus, wenn Sie mögen:

github.com/r41d/WS2801FX

Schritt 17: Schmücken Sie den Weihnachtsbaum

Machen Sie es hübsch und stellen Sie sicher, dass alle LEDs sichtbar und schön über den Baum verteilt sind.

Schritt 18: Letzter Schliff

Wenn Sie den Baum fertig haben, machen Sie ein schönes Foto und wiederholen Sie den Schritt zum Erstellen der Imagemap der anklickbaren Positionen (LED-Positionen)

Dies ist die intuitivste Art der Verbindung mit den LEDs.

Wenn Sie die Dinge nicht zu komplizieren möchten, können Sie normale Schaltflächen verwenden.

Sie sollten auch einen Live-Stream Ihres Baumes auf YouTube starten (wenn Sie in Echtzeit sehen möchten, was passiert) und den Stream in Ihre Website einbetten.

Schritt 19: Bewundern Sie Ihre Website

Du bist großartig, wenn du es bis hierher geschafft hast:) Lade deine Freunde ein (und mich natürlich:P) und lass sie so oft wie möglich auf deinen Baum klicken:)

n

Dies war ein sehr langes Instructable, für ein ziemlich kompliziertes Projekt. Aber es lohnt sich am Ende:D

Dankeschön! Wenn Sie über meine Arbeit in Kontakt bleiben möchten:

Sie können meinen YouTube-Kanal abonnieren:

www.youtube.com/c/JTMakesIt

Du kannst mir auch auf Facebook und Instagram folgen

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

für Spoiler zu dem, woran ich gerade arbeite, hinter den Kulissen und anderen Extras! PS:., wenn es dir WIRKLICH, WIRKLICH gefallen hat, kannst du mir hier auch einen Kaffee kaufen, damit ich mehr Energie für zukünftige Projekte habe (diese hat mir 2 Wochen Schlaf weggenommen, da ich diese Idee zu spät bekam):)

www.buymeacoffee.com/JTMakesIt

Und vergessen Sie nicht, für dieses Instructable im Wettbewerb "Anything Goes" zu stimmen:)