Website-gestuurde kerstboom (iedereen kan hem bedienen): 19 stappen (met afbeeldingen)

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

Wil je weten hoe een websitegestuurde kerstboom eruitziet?

Hier is de video die mijn project van mijn kerstboom laat zien. De livestream is inmiddels afgelopen, maar ik heb een video gemaakt om vast te leggen wat er aan de hand was:

Dit jaar, midden december, lag ik in mijn bed, midden in een werkweek te proberen te slapen. En in plaats van te slapen dacht ik aan wat een cool kerstproject zou zijn om te doen. En toen schoot me een leuk idee te binnen.

Omdat ik lui ben met kerstversieringen, zou het cool zijn om iemand anders mijn kerstverlichting te laten bedienen, zodat ik me er geen zorgen over hoef te maken.

"Wat als ik een kerstboomverlichting zou maken die IEDEREEN zou kunnen bedienen via een website-interface?"

(vul twee weken slapeloze nachten in)

Dus ik heb het gehaald.

Een kerstboom met twintig RGB-leds die via Arduino ESP8266 met internet is verbonden.

Een vriend van mij (bedankt JP) heeft me geholpen met het opzetten van een website (omdat ik geen vloeiende programmeur ben voor website-gerelateerde dingen).

En we hebben een 24/7 youtube-livestream van mijn boom opgezet, zodat je te allen tijde kunt zien wat je aan- of uitzet.

Dit project is ideaal voor dit jaar, aangezien velen van ons in lockdown waren, niet in staat om vrienden en familie te ontmoeten en te socializen. Waarom niet verenigen via kerstboom:)

In deze Instructable zal ik in detail uitleggen hoe dit project is gemaakt.

Stap 1: Vaardigheidsniveau

Dit project is meer softwaregericht. Maar wees niet bang. Een beetje geluk en hulp van oom Google zal enorm helpen:)

Je moet een set van 3 vaardigheden hebben (anders leer je ze zonder zorgen): een webserver-gedeelte, het Arduino-gedeelte en natuurlijk de kerstboom!

Aanbevolen kennis:

• Basis computer- en programmeervaardigheden

• Basiskennis van Linux-terminals

• Basiskennis van computernetwerken

• Basiskennis elektronica

• Vaardigheden om Google en andere "speciale" vaardigheden te gebruiken

• Moet weten hoe je een kerstboom opzet:)

Als je enig gevoel voor technologie en programmeren hebt, zou je moeten kunnen leren om dit ding op te zetten volgens deze Instructable.

Stap 2: Gereedschappen en componenten

Aan de kant van de kerstboom heb je nodig:• Kerstboom (d'oh…)

• Een NodeMCU microcontrollerbord

(u kunt ook ESP32 of andere voor Wi-Fi of Ethernet geschikte kaarten gebruiken)

• Adresseerbare RGB ledstrip. adresseerbare RGB-ledstrip bespaart veel Arduino GPIO's (https://www.sparkfun.com/products/11020)

• Software voor de NodeMCU (geleverd in deze instructable)

Aan de serverkant heb je nodig:

• Een virtuele privéserver met een openbaar IP-adres. Hier krijg je $ 100 gratis op DigitalOcean

• Een domein (optioneel) dat u kunt registreren bij elke registrar-organisatie, bijvoorbeeld

• Dedicated Code (meegeleverd met deze Instructable)

Stap 3: Configureer virtuele machine (computer) DEEL 1

Laten we meteen beginnen met coderen:)

We hebben een server nodig die zal communiceren met de website en NodeMCU.

Servers op DigitalOcean stellen ons in staat om een virtuele machine te hebben met een openbaar IP-adres, wat betekent dat we er services op kunnen uitvoeren en deze wereldwijd kunnen benaderen.

Zodra je een maandelijks abonnement op DigitalOcean hebt betaald (je kunt een gratis proefperiode van 60 dagen gebruiken), maak je een project en noem je het een kerstboom of wat je maar wilt.

U kunt nu uw virtuele machine (op afstand toegankelijke virtuele computer) maken door te klikken op "Aan de slag met een druppel" (wat in feite de naam is van DigitalOcean voor een virtuele machine).

Er verschijnt een configuratiepagina en u kunt bij een standaard blijven: Ubuntu-afbeelding, basisplan en geen blokopslag (5 $ / maand)

Stap 4: Configureer virtuele machine (computer) DEEL 2

Een datacenterregio is de plaats waar uw server wordt gemaakt.

Kies de dichtstbijzijnde voor u en uw potentiële gebruikers. Dit zorgt voor de laagste responstijd.

Verder wordt u in het gedeelte Verificatie gevraagd een wachtwoord in te voeren voor toegang tot uw virtuele machine.

Houd in het gedeelte Voltooien en maken de standaardwaarde van 1 druppel, kies een hostnaam (weer kerstboom), selecteer uw eerder gemaakte project als dit niet standaard is geselecteerd en klik op Druppel maken. Dit gaat een paar minuten duren. Door op uw project in het navigatiegedeelte aan de linkerkant te klikken, ziet u uw druppel.

Stap 5: Configureer virtuele machine (computer) DEEL 3

Door op de drie stippen rechts van de druppel te klikken, kunt u op Toegangsconsole klikken, waarmee u toegang krijgt tot uw virtuele computer.

Er wordt een nieuw klein browservenster geopend. Dit is nu geen desktopomgeving, zoals op uw Windows 10 of Ubuntu met grafische interface-computer.

Alles kan echter worden gedaan via een console-interface.

Het is niet zo eng als het lijkt:)

Stap 6: Virtuele machine (computer) configureren DEEL 4

U hebt met succes uw eigen virtuele machine gemaakt in een DigitalOcean-cloud.

In de volgende stappen ga je een webserver opzetten, genaamd Apache, en je eigen webpagina opzetten.

Download hier de Filezilla-client https://filezilla-project.org/download.php?platfo… (of zoek een 32-bits versie voor een 32-bits besturingssysteem) en installeer het. Het is een FTP-client (File Transfer Protocol).

U kunt bestanden openen en overbrengen van en naar uw virtuele machine.

Eenmaal geïnstalleerd, klikt u op bestand → sitebeheer → nieuwe site en voert u gegevens in zoals op een afbeelding hierboven.

Protocol: SFTP (Secure File Transfer Protocol)

Host: IP van uw server, vind in uw DigitalOcean-project.

Gebruiker is root en wachtwoord is wat je instelt bij het maken van je droplet.

Klik op OK en maak verbinding met uw virtuele machine.

U wordt gewaarschuwd, de hostsleutel is onbekend. Volg de tweede afbeelding.

Maak een lokale map voor het project en pak uw projectbestanden uit die u hier zult downloaden.

Elke keer dat u de code wilt testen of bijwerken, bewerkt u uw bestanden op uw computer en brengt u ze over naar uw virtuele machine.

Stap 7: Installeer een webserver

Log in op uw droplet-console met gebruikersnaam root en uw wachtwoord.

Omdat we geen grafische interface hebben, gebruiken we commando's om uw virtuele machine te besturen. Hier zijn enkele veelvoorkomende opdrachten die u op Ubuntu (Linux) zult gebruiken:

• pwd – print mijn huidige directory

• ls – lijst met bestanden en mappen in mijn huidige map

• cd / – verplaats naar / directory (map, die de belangrijkste linux-directory's bevat, zoals etc, bin, boot, dev, root, home, var enzovoort)

Met uitvoeren bedoel ik, voer de opdracht in en druk op enter.

Nu zullen we apt-get update -y uitvoeren om het systeem bij te werken.

Voer apt install apache2 -y uit om de Apache-webserver te installeren.

Uw Apache-welkomstscherm zou vanuit uw browser toegankelijk moeten zijn op uw

Vervang virtual-machine-ip door uw virtuele machine-ip, bijvoorbeeld 165.12.45.123. U kunt de https:// ook overslaan, omdat deze automatisch wordt toegevoegd.

Proficiat!

Opmerking:

Als u wilt dat uw website toegankelijk is via een naam in plaats van een IP-adres (zoals ik https://blinkmytree.live/ heb gebruikt), ga dan naar de domeinprovidersite GoDaddy of iets dergelijks (namecheap.com enz.) en volg de instructies hier:

Sommige domeinnamen zijn erg goedkoop. Mijn domein kostte maar 2$ per jaar. Zeker het geld waard:)

Stap 8: Installeer een webtoepassingsframework

Terug naar onze console. Wees niet bang:)

Gebruik Filezilla om een map met de naam app in /home te maken, dus /home/app wordt je map

Voer cd /home/app uit om naar de binnenkant van de app-map te gaan.

Voer apt install npm -y uit om npm package manager te installeren. Dit gaat een paar minuten duren.

Voer npm init -y uit om een bestand package.json te maken, dat belangrijke pakketgegevens over een app zal volgen/onthouden.

Voer npm uit --save install cors express om modules cors, express. te installeren

Cors is een module voor het configureren van cross-site-toegang en express is een webtoepassingsframework.

Npm is een pakketbeheerder die we hebben gebruikt en we zullen node.js JavaScript-runtime gebruiken om onze Application Programming Interface (API) te programmeren, die, in combinatie met een http-server, HTTP-verzoeken accepteert voor het toepassen van kleuren op LED's, hun waarden markeert (kleuren) in het geheugen en geef de waarden door aan NodeMcu, wanneer het daarom vraagt.

Opmerking: Node in NodeMcu heeft niets te maken met node in node.js. NodeMcu kan worden vervangen door elk met internet verbonden Arduino-ontwikkelbord, NXP-ontwikkelbord of een aangepaste Microchip/NXP/Renesas/STM/Atmel-PCB. Node.js kan ook worden vervangen door. Net-framework, PHP of een ander platform. Maar voor de eenvoud gebruiken we NodeMCU en Node.js.

Laten we nu een test doen, als we een klein programma kunnen uitvoeren in node.js

Maak een bestand met de naam index.js met notepad/notepad++ of een andere editor of geïntegreerde ontwikkelomgeving die u gebruikt (Visual Studio Code https://code.visualstudio.com/) in uw lokale map.

Zet deze code erin:

var http = vereisen('http');

http.createServer(functie (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hallo wereld!');

}).luister(8080);

Sla het op en breng het over naar de map /home/app als index.js met dubbelklikken/slepen en neerzetten in FileZilla.

Voer node index.js uit en laat het draaien.

Nu hebben we vanuit onze browser toegang tot onze pagina op https://virtual-machine-ip:8080. Er verschijnt een witte pagina met Hello World-tekst.

Gefeliciteerd, je hebt zojuist een webserver gemaakt in node.js!

Stap 9: Bereid de software voor

Ga naar console en stop het programma door op ctrl+C te drukken.

Vervang uw index.js-bestand in /home/app/ en vervang het door onze index.js in.

U kunt hier alle bestanden voor de website downloaden:

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

Kopieer onze kerstboomcode van de html-map naar de externe map /var/www/html/ met Filezilla. Het zal enige tijd duren. Als het u vraagt, vervangt u index.html door een nieuwe.

Zet je IP opnieuw in je favoriete webbrowser.

U heeft zojuist uw webapplicatie front-end beschikbaar gemaakt op

Stap 10: Back-endcode ongedaan maken en het laten werken

Let op: je back-endcode staat op /home/app

Vergeet niet om, nadat u uw code lokaal hebt bewerkt, deze naar uw server te uploaden met FileZilla en uw node-toepassing opnieuw te starten (console: ctrl+c, pijl omhoog (toont laatste opdracht node index.js), enter)

Om de code te laten werken, moet u eerst een paar gegevens invoeren.

Ten eerste moet u de hostnaamvariabele in index.js wijzigen in uw eigen domein of IP (iets dat eruitziet als: 165.13.45.123).

Ten tweede zal ik je door de code leiden om het te begrijpen. Zorg ervoor dat je geen opmerkingen overslaat die ik in code heb gemaakt.

U kunt in het index.js-bestand zien dat we een app maken met behulp van de express-module. Vervolgens passen we CORS-regels toe, voegen de API's toe en starten een http-server. Deze server zal geen webpagina bedienen via GET http-verzoeken, maar het zal led-statussen leveren via GET http-verzoeken en led-statussen bijwerken op ontvangen PUT

API's zijn gebruikelijk om informatie tussen applicaties uit te wisselen. De meest voorkomende die we gebruiken zijn REST API's die we zelf gebruiken. Ze zijn staatloos en hebben geen permanente verbinding (shorturl.at/aoBC3, PUT-verzoeken werken eenvoudig de led-statussen bij in app-arrayvariabele (geheugen), GET-verzoeken sturen eenvoudig led-statussen naar een client.

Het antwoord aan de client is meestal in JSON-notatie, maar voor deze eenvoudige reactie van 30 LED-statussen sturen we eenvoudig een reeks van 30 door komma's gescheiden waarden.

Stap 11: De front-endcode begrijpen en deze laten werken DEEL 1

Opmerking: uw front-endcode staat op /var/www/html

Vergeet niet dat u, nadat u uw code lokaal hebt bewerkt, niet vergeet om deze met FileZilla naar uw server te uploaden. In tegenstelling tot node.js, herstart Apache zichzelf automatisch, maar je zult je pagina opnieuw moeten laden in je browser. Gebruik ctrl+f5 om te vernieuwen en ook om de cache van uw pagina te verwijderen.

Om de code te laten werken, hoeft u weinig gegevens in te voeren. Eerst moet u de url-variabele in de functie send_request binnen index.html wijzigen van blinkmytree.live naar uw eigen domein of IP, bijvoorbeeld: 165.13.45.123.

Ten tweede zal ik je door de code leiden om het te begrijpen. Zorg ervoor dat je geen opmerkingen overslaat die ik in code heb gemaakt. Pagina is een HTML-document. Alle CSS-regels (paginastijl en inhoudspositie) buiten beschouwing latend, zullen we kijken naar functionaliteit die belangrijk is voor inhoud. Ga voor meer informatie over CSS naar

We wilden deze hoofdkenmerken (experts van agile-methoden zouden gebruikersverhalen zeggen) op de pagina:

• Live video ingebed in de pagina

• Een klikbare LED op een kerstboom, die werd gemanipuleerd in de Gimp-afbeeldingseditor (https://www.gimp.org/).

• Daadwerkelijke communicatie met een server, wachtend om de led-statussen te wijzigen.

Stap 12: De front-endcode begrijpen en deze laten werken DEEL 2

Zodra we onze kerstboom hebben met het aantal LED's en kleuren om uit te kiezen, moeten we gebieden maken en er acties op toepassen, dus zodra we op de gekleurde LED in een kiezergedeelte van een afbeelding klikken, wordt een kleur geselecteerd en een we klikken op een LED, het commando wordt naar de server gestuurd, waar de Arduino zijn waarde kiest.

In HTML5, de nieuwste HTML-standaard, is er iets dat een imagemap wordt genoemd. Hiermee kunnen we gebieden op een afbeelding definiëren, waarop we actieluisteraars kunnen toepassen.

Omdat we veel gebieden moeten definiëren, hebben we een tool online gebruikt https://www.image-map.net/ om deze gebieden te definiëren en HTML-code naar onze pagina te kopiëren.

Zodra we dat hebben gedaan, kunnen we een onclick-gebeurtenis plaatsen met een functie die het aanroept en een parameter van een LED-nummer voor elk van deze gebieden. Zie de schermafbeelding hierboven.

Stap 13: De front-endcode begrijpen en deze laten werken DEEL 3

Aan het einde van de HTML-body, in een regio, plaatsen we wat JavaScript om de functies te definiëren die we aanroepen in onclick-gebeurtenissen. Globaal definiëren we een XMLHttpRequest, die we gebruiken om een PUT-verzoek te verzenden

We hebben twee functies:

functie set_color(val)

functie send_request(id)

Voor het testen van API-verzoeken raad ik een veelgebruikte softwaretool aan genaamd Postman https://www.postman.com/. Het stelt ons in staat om eenvoudig een API-verzoek naar de server te sturen, zonder programmeervaardigheden. Het maakt het mogelijk om een server te bespotten en ook verzoeken te accepteren.

Stap 14: De front-endcode begrijpen en deze laten werken DEEL 4

Uw applicatie werkt.

Let op, de cijfers zijn omgekeerd, dat wil zeggen, 20 is 1 en 1 is 20, dit komt omdat LED's op de boom onderaan beginnen, maar voor een betere gebruikerservaring hebben we een start geleid naar de bovenkant.

Je moet nog steeds een livestream op YouTube maken als je dat wilt, en de insluitcode van de YouTube-video vervangen door die van jezelf.

Stap 15: De Arduino-code

De ESP8266 voert een standaard HTTP Client-voorbeeldschets uit die enigszins is aangepast en de gegevens van mijn website ontvangt via een API-aanroep.

Je zult ook bibliotheken moeten installeren voor het aansturen van de LED-strip als je dezelfde adresseerbare RGB-strip wilt gebruiken als ik deed.

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

In de schets die ik heb bijgevoegd, moet je je wifi-naam en wachtwoord en een url naar je website invoeren (zie de opmerkingen)

We zetten in feite een http-antwoord om in een C-type string, zodat we de C-functie strtok kunnen gebruiken om de string te splitsen door komma's en de leds-tabel te vullen met waarden die van een server zijn gelezen. Dan roepen we een functie aan waarbij we door de tabel gaan, en op basis van de waarden draaien we de juiste kleur die de gebruiker verwacht.

Dat is het!

Gefeliciteerd, het is je gelukt!

Stap 16: RGB LED-keten

Oh Oh. Nu is het tijd om een kleine pauze te nemen van al het coderen:)

Omdat de ESP8266 niet veel GPIO-pinnen heeft om LED's afzonderlijk aan te sturen, heb ik deze adresseerbare RGB LED-keten gebruikt:

www.sparkfun.com/products/11020

Op deze manier kunnen alle 20 RGB-leds (60 leds in totaal) worden bestuurd door slechts twee pinnen - "data" en "clock" en 5V-voeding rechtstreeks van ESP8266.

Het aansluiten van de strip op de NodeMcu is eenvoudig. 5V naar Vin op NodeMcu (5V van USB), gele draad naar pin 12, groene draad naar pin 14, aarde naar aarde.

U kunt individuele RGB-kleur en helderheid instellen. Met wat kleurmenging kun je VEEL kleuren voor elke LED produceren.

Er is ook een hele coole bibliotheek voor allerlei coole FX-effecten met deze LED's. Probeer het uit als je wilt:

github.com/r41d/WS2801FX

Stap 17: Versier de kerstboom

Maak het mooi en zorg ervoor dat alle LED's zichtbaar zijn en mooi verspreid over de boom.

Stap 18: laatste hand

Als je de boom klaar hebt, maak je een mooie foto en herhaal je de stap voor het maken van de imagemap van de aanklikbare posities (LED-posities)

Dit is de meest intuïtieve manier om met de LED's te communiceren.

Als je dingen niet te ingewikkeld wilt maken, kun je gewone knoppen gebruiken.

Je moet ook een livestream van je stamboom op YouTube starten (als je wilt zien wat er in realtime gebeurt) en de stream in je site insluiten.

Stap 19: Bewonder uw website

Je bent geweldig als je zo ver bent gekomen:) Nodig je vrienden uit (en mij natuurlijk:P) en laat ze zoveel mogelijk op je boom klikken:)

N

Dit was een zeer lange Instructable, voor een vrij ingewikkeld project. Maar het is het uiteindelijk waard:D

Bedankt! Als je op de hoogte wilt blijven van waar ik mee bezig ben:

Je kunt je abonneren op mijn YouTube-kanaal:

www.youtube.com/c/JTMakesIt

Je kunt me ook volgen op Facebook en Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

voor spoilers over waar ik momenteel aan werk, achter de schermen en andere extra's! PS:., als je het ECHT, ECHT leuk vond, je kunt hier ook een koffie voor me kopen, zodat ik meer energie heb voor toekomstige projecten (deze kostte me 2 weken slaap, omdat ik dit idee te laat kreeg):)

www.buymeacoffee.com/JTMakesIt

En vergeet niet te stemmen voor deze Instructable in "Anything Goes" wedstrijd:)