Webstedskontrolleret juletræ (alle kan kontrollere det): 19 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Vil du vide, hvordan et webstedskontrolleret juletræ ser ud?

Her er videoen, der viser mit projekt af mit juletræ. Livestreamen er slut nu, men jeg lavede en video, hvor jeg fanger, hvad der foregik:

I år, midt i december, lå jeg i min seng og forsøgte at sove midt i en arbejdsuge. Og i stedet for at sove tænkte jeg på, hvad der ville være et fedt juleprojekt at lave. Og så slog en fed idé mig.

Da jeg er doven med julepynt, ville det være fedt at lade en anden styre mine julelys, så jeg behøver ikke bekymre mig om det.

"Hvad nu hvis jeg lavede et juletræslys, som ALLE kunne styre via en webstedsgrænseflade?"

(indsæt to ugers søvnløse nætter)

Så jeg klarede det.

Et juletræ med tyve RGB -lysdioder forbundet til internettet via ESP8266 Arduino.

En af mine venner (tak JP) hjalp mig med at oprette et websted (da jeg ikke er en flydende programmør for webstedsrelaterede ting).

Og vi oprettede en 24/7 youtube livestream af mit træ, så du hele tiden kan se, hvad du tænder eller slukker.

Dette projekt er ideelt for i år, da mange af os var i lockdown og ikke var i stand til at mødes og socialisere med venner og familie. Hvorfor ikke forene dig via juletræ:)

I denne instruktionsbog vil jeg i detaljer forklare, hvordan dette projekt blev lavet.

Trin 1: Færdighedsniveau

Dette projekt er mere softwareorienteret. Men vær ikke bange Nogle held og hjælp fra onkel Google hjælper enormt meget:)

Du skal have et sæt med 3 færdigheder (eller du lærer dem ingen bekymring): en webserverdel, Arduino -delen og juletræet selvfølgelig!

Anbefalet viden:

• Grundlæggende computer- og programmeringsevner

• Grundlæggende Linux -terminal viden

• Grundlæggende computernetværkskendskab

• Grundlæggende elektronikviden

• Færdigheder til at bruge Google og andre "særlige" evner

• Skal vide, hvordan man opsætter et juletræ:)

Hvis du har en fornemmelse af teknologi og programmering, bør du være i stand til at lære at indstille denne ting i henhold til denne Instructable.

Trin 2: Værktøjer og komponenter

På juletræssiden skal du bruge: • Juletræ (d'oh…)

• Et NodeMCU mikro-controller-kort

(du kan også bruge ESP32 eller andre Wi-Fi- eller Ethernet-kompatible kort)

• Adresserbar RGB LED -strip. adresserbar RGB LED -strip vil spare mange Arduino GPIO'er (https://www.sparkfun.com/products/11020)

• Software til NodeMCU (findes i denne instruktion)

På serversiden skal du bruge:

• En virtuel privat server med offentlig IP. Her får du $ 100 gratis på DigitalOcean

• Et domæne (valgfrit), du kan registrere hos enhver registratororganisation, f.eks.

• Dedikeret kode (følger med denne instruks)

Trin 3: Konfigurer virtuel maskine (computer) DEL 1

Lad os gå direkte ind i kodning:)

Vi har brug for en server, som vil kommunikere med webstedet og NodeMCU.

Servere på DigitalOcean giver os mulighed for at have en virtuel maskine med en offentlig IP -adresse, hvilket betyder, at vi kan køre tjenester på den og få adgang til dem over hele verden.

Når du har betalt et DigitalOcean månedligt abonnement (du kan bruge 60 dages gratis prøveperiode), skal du oprette et projekt og kalde det et juletræ eller hvad du nu vil.

Du kan nu oprette din virtuelle maskine (fjerntilgængelig virtuel computer) ved at klikke på "Kom godt i gang med en dråbe" (som grundlæggende er DigitalOcean's navn på en virtuel maskine).

En konfigurationsside kommer op, og du kan forblive med en standard: Ubuntu -billede, grundlæggende plan og ingen bloklagring (5 $ /måned)

Trin 4: Konfigurer virtuel maskine (computer) DEL 2

Et datacenterområde er det sted, din server vil blive oprettet.

Vælg den nærmeste til dig og dine potentielle brugere. Dette giver den laveste svartid.

I afsnittet Godkendelse bliver du desuden bedt om at indtaste et kodeord for at få adgang til din virtuelle maskine.

I afsnittet Afslut og opret, behold standard på 1 dråbe, vælg et værtsnavn (juletræ igen), vælg dit projekt, der er oprettet tidligere, hvis det ikke er valgt som standard, og klik på Opret dråbe. Dette vil tage et par minutter. Ved at klikke på dit projekt i navigationsafsnittet til venstre vil du se din dråbe.

Trin 5: Konfigurer virtuel maskine (computer) DEL 3

Ved at klikke på de tre prikker til højre for dråben kan du klikke på Adgangskonsol, som får dig til at få adgang til din virtuelle computer.

Et nyt lille browservindue åbnes. Nu er dette ikke et skrivebordsmiljø, som på din Windows 10 eller Ubuntu med grafisk interface -computer.

Alt kan dog gøres via en konsolgrænseflade.

Det er ikke så skræmmende som det ser ud:)

Trin 6: Konfigurer virtuel maskine (computer) DEL 4

Du har med succes oprettet din egen virtuelle maskine i en DigitalOcean -sky.

I de næste trin vil du oprette en webserver, kaldet Apache og oprette din egen webside.

Download Filezilla-klient her https://filezilla-project.org/download.php?platfo… (eller find 32bit version til 32bit operativsystem) og installer det. Det er en FTP -klient (File Transfer Protocol).

Du vil få adgang til og overføre filer fra og til din virtuelle maskine.

Når det er installeret, skal du klikke på fil → site manager → nyt websted og indtaste data som på et billede ovenfor.

Protokol: SFTP (Secure File Transfer Protocol)

Host: IP på din server, find i dit DigitalOcean -projekt.

Bruger er rod og adgangskode er, hvad du indstiller den til oprettelse af din dråbe.

Klik på OK, og opret forbindelse til din virtuelle maskine.

Du vil blive advaret, værtsnøglen er ukendt. Følg det andet billede.

Opret en lokal mappe til projektet, og udpak dine projektfiler, du vil downloade her.

Du redigerer dine filer på din computer og overfører dem til din virtuelle maskine, hver gang du vil teste eller opdatere koden.

Trin 7: Installer en webserver

Log ind på din dråbe konsol med brugernavn rod og din adgangskode.

Da vi ikke har en grafisk grænseflade, bruger vi kommandoer til at styre din virtuelle maskine. Her er nogle almindelige kommandoer, du vil bruge på Ubuntu (Linux):

• pwd - udskriv mit nuværende bibliotek

• ls - liste filer og mapper i mit nuværende bibliotek

• cd / - flytte til / bibliotek (mappe, som indeholder linux store mapper som etc, bin, boot, dev, root, home, var og så videre)

Ved kørsel, mener jeg, indtast kommandoen, og tryk på enter.

Nu kører vi apt -get update -y for at opdatere systemet.

Kør apt install apache2 -y for at installere Apache webserver.

Din velkomstskærm fra Apache skal være tilgængelig på din https:// virtual-machine-ip fra din browser.

Erstat virtual-machine-ip med din virtuelle maskine ip, for eksempel 165.12.45.123. Du kan også springe https:// over, da den automatisk tilføjes.

Tillykke!

Bemærk:

Hvis du vil have, at dit websted skal være tilgængeligt via et navn frem for IP -adresse (som jeg brugte https://blinkmytree.live/), skal du gå til domæneudbyderwebstedet GoDaddy eller lignende (namecheap.com osv.) Og følge instruktionerne her:

Nogle domænenavne er meget billige. Mit domæne kostede kun 2 $ om året. Helt sikkert pengene værd:)

Trin 8: Installer en webapplikationsramme

Tilbage til vores konsol. Vær ikke bange:)

Brug Filezilla til at oprette en mappe med navnet app inside /home, så /home /app vil være din mappe

Kør cd /home /app for at gå til inde i appmappen.

Kør apt install npm -y, til installl npm pakkehåndtering. Dette vil tage et par minutter.

Kør npm init -y for at oprette en fil package.json, som sporer/husker større pakkedata om en app.

Kør npm -gem installation cors express for at installere moduler cors, express

Cors er modul til konfiguration af adgang på tværs af websteder og express er en ramme for webapplikationer.

Npm er en pakkehåndterer, vi brugte, og vi vil bruge node.js JavaScript -runtime til at programmere vores applikationsprogrammeringsinterface (API), som kombineret med en http -server accepterer HTTP -anmodninger om anvendelse af farver på lysdioder, markerer deres værdier (farver) i hukommelsen, og videregive værdierne til NodeMcu, når den anmoder om det.

Bemærk: Node i NodeMcu har intet at gøre med node i node.js. NodeMcu kan erstattes med ethvert internetforbundet arduino -udviklingsbord, NXP -udviklingsbord eller et brugerdefineret Microchip/NXP/Renesas/STM/Atmel PCB. Node.js kan også erstattes med. Net framework, PHP eller enhver anden platform. Men for enkelheds skyld bruger vi NodeMCU og Node.js.

Lad os nu lave en test, hvis vi kan køre et lille program i node.js

Opret en fil med navnet index.js med notesblok/notesblok ++ eller anden editor eller et integreret udviklingsmiljø, du bruger (Visual Studio Code https://code.visualstudio.com/) i din lokale mappe.

Indsæt denne kode i den:

var http = require ('http');

http.createServer (funktion (req, res) {

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

res.end ('Hej verden!');

}). lyt (8080);

Gem det og overfør det til mappe/hjem/app som index.js med dobbeltklik/træk-slip på fil i FileZilla.

Kør node index.js, og lad det køre.

Nu kan vi få adgang til vores side på https:// virtual-machine-ip: 8080 fra vores browser. En hvid side med Hello World -tekst vises.

Tillykke, du har lige oprettet en webserver i node.js!

Trin 9: Forbered softwaren

Gå til konsol, og stop programmet ved at trykke på ctrl+C.

Erstat din index.js -fil i/home/app/og erstat den med vores index.js i.

Du kan downloade alle filerne til webstedet her:

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

Kopier vores Chrismas -trækode fra html -mappe til fjernmappe/var/www/html/med Filezilla. Det vil tage noget tid. Hvis det spørger dig, skal du erstatte index.html med en ny.

Indsæt din IP igen i din foretrukne webbrowser.

Du har netop gjort din webapplikations frontend tilgængelig på https:// virtual-machine-ip.

Trin 10: Ubestemt back-end kode og få den til at fungere

Bemærk: din back-end-kode er på /home /app

Husk, at når du har redigeret din kode lokalt, skal du ikke glemme at uploade den til din server ved hjælp af FileZilla, og genstarte din node -applikation (konsol: ctrl+c, pil op (viser sidste kommando node index.js), indtast)

For at koden skal fungere, skal du først indtaste et par data.

For det første skal du ændre hostname -variablen i index.js til dit eget domæne eller din IP (noget der ligner: 165.13.45.123).

For det andet vil jeg guide dig gennem koden for at forstå den. Sørg for ikke at springe kommentarer over, som jeg lavede i kode.

Du kan se i filen index.js, at vi opretter en app ved hjælp af ekspressmodul. Derefter anvender vi CORS -regler på det, tilføjer API'erne og starter en http -server. Denne server betjener ikke en webside via GET http-anmodninger, men den betjener ledede tilstande gennem GET http-anmodning og opdaterer LED-tilstande om modtagne PUT

API'er er almindelig praksis for at udveksle oplysninger mellem applikationer. Mest almindelige, vi bruger, er REST API'er, vi selv bruger. De er statsløse og har ikke en vedvarende forbindelse (shorturl.at/aoBC3, PUT -anmodninger opdaterer simpelthen led -tilstande i app -arrayvariabel (hukommelse), GET -anmodninger sender simpelthen led -tilstande til en klient.

Svaret til klienten er normalt i JSON -notation, men for dette enkle svar på 30 LED -tilstande sender vi simpelthen en streng med 30 kommaadskilte værdier.

Trin 11: Forstå front-end-koden og få den til at fungere DEL 1

Bemærk: din front-end-kode er på/var/www/html

Husk, at når du har redigeret din kode lokalt, skal du ikke glemme at uploade den til din server ved hjælp af FileZilla. I modsætning til node.js genstarter Apache sig selv automatisk, men du bliver nødt til at genindlæse din side i din browser. Brug ctrl+f5 til at opdatere og også slette cachen på din side.

For at kode skal fungere, skal du indtaste få data. Først skal du ændre urlvariablen i send_request -funktionen indeks.html fra blinkmytree.live til dit eget domæne eller din IP, f.eks.: 165.13.45.123.

For det andet vil jeg guide dig gennem kode for at forstå den. Sørg for ikke at springe kommentarer over, som jeg lavede i kode. Siden er et HTML -dokument. Forlader vi alle CSS -regler (sidestil og indholdsposition) til side, vil vi se på funktionalitetsvigtigt indhold. For at lære mere om CSS, tjek

Vi ville have disse hovedfunktioner (eksperter i agile metoder ville sige brugerhistorier) på siden:

• Live video integreret i siden

• En klikbar lysdiode på et juletræ, som blev manipuleret i Gimp billedredigerer (https://www.gimp.org/).

• Faktisk kommunikation med en server, der venter på at ændre ledede tilstande.

Trin 12: Forstå front-end-koden og få den til at fungere DEL 2

Når vi har vores juletræ med mange lysdioder og farver at vælge, skal vi oprette områder og anvende handlinger på dem, så når vi klikker på den farvede LED i en plukkersektion i et billede, vælges en farve og en vi klikker på en LED, kommandoen sendes til serveren, hvor Arduino vælger dens værdi.

I HTML5, den nyeste HTML -standard, er der noget, der kaldes et billedkort. Det giver os mulighed for at definere områder på et billede, som vi kan anvende actionlyttere på.

Da vi har mange områder at definere, brugte vi et værktøj online https://www.image-map.net/ til at definere disse områder og kopierede HTML-kode til vores side.

Når vi har gjort det, kan vi sætte onclick -begivenhed med en funktion, den kalder og parameter for et LED -nummer til hvert af disse områder. Se skærmbilledet ovenfor.

Trin 13: Forstå front-end-koden og få den til at fungere DEL 3

Inde i slutningen af HTML -brødteksten, i en region, sætter vi noget JavaScript til at definere de funktioner, vi kalder til ved klikhændelser. Globalt definerer vi en XMLHttpRequest, som vi bruger til at sende en PUT -anmodning

Vi har to funktioner:

funktion sæt_farve (val)

funktion send_request (id)

Til test af API -anmodning anbefaler jeg et almindeligt anvendt softwareværktøj kaldet Postman https://www.postman.com/. Det giver os mulighed for ganske enkelt at sende API -anmodning til serveren uden programmeringsevner. Det giver mulighed for at håne en server og også acceptere anmodninger.

Trin 14: Forstå front-end-koden og få den til at fungere DEL 4

Din applikation fungerer.

Vær opmærksom på, at tallene er omvendt, det vil sige 20 er 1 og 1 er 20, det er fordi lysdioder på træet starter på bunden, men for bedre brugeroplevelse satte vi en start ført til toppen.

Du skal stadig oprette en livestream på YouTube, hvis du vil have det, og erstatte YouTube -videoens integreringskode med din egen.

Trin 15: Arduino -koden

ESP8266 kører en grundlæggende HTTP -klienteksempelskitse, der er lidt ændret, og modtager dataene fra mit websted via et API -opkald.

Du bliver også nødt til at installere biblioteker til styring af LED -stripen, hvis du vil bruge den samme adresserbare RGB -strip, som jeg gjorde.

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

I den skitse, jeg vedhæfter, skal du indsætte dit wi-fi-navn og adgangskode og en url til dit websted (se kommentarerne)

Vi konverterer dybest set et http-svar til en C-tastet streng, så vi kan bruge C-funktion strtok til at opdele strengen med kommaer og fylde lysdioderne med værdier læst fra en server. End vi kalder en funktion, hvor vi går gennem tabellen, og baseret på værdierne drejer vi den korrekte farve, som brugeren forventer.

Det er det!

Tillykke, du klarede det!

Trin 16: RGB LED -kæde

Åh åh. Nu er det tid til at tage en lille pause fra al kodning:)

Da ESP8266 ikke har mange GPIO -ben til at styre LED'er individuelt, brugte jeg denne adresserbare RGB LED -kæde:

www.sparkfun.com/products/11020

På denne måde kan alle 20 RGB -leds (i alt 60 leds) styres af kun to ben - "data" og "ur" og 5V strøm direkte fra ESP8266.

Tilslutning af strimlen til NodeMcu er let. 5V til Vin på NodeMcu (5V fra USB), gul ledning til pin 12, grøn ledning til pin 14, jord til jord.

Du kan indstille individuel RGB -farve og lysstyrke. Med lidt farveblanding kan du producere en masse farver for hver LED.

Der er også et meget fedt bibliotek til alle slags fede FX -effekter med disse lysdioder. Prøv det, hvis du kan lide:

github.com/r41d/WS2801FX

Trin 17: Dekorer juletræet

Gør det smukt og sørg for, at alle lysdioder er synlige og pænt spredt ud over træet.

Trin 18: Sidste hånd

Når du har træet klar, skal du tage et flot foto og gentage trinnet for at oprette billedkortet over de klikbare positioner (LED -positioner)

Dette er den mest intuitive måde at interagere med lysdioderne på.

Hvis du ikke vil overkomplicere ting, kan du bruge almindelige knapper.

Du bør også starte en livestream af dit træ på YouTube (hvis du vil se, hvad der sker i realtid) og integrere strømmen på dit websted.

Trin 19: Beundre dit websted

Du er fantastisk, hvis du nåede så langt:) Inviter dine venner (og mig selvfølgelig: P) og få dem til at klikke på dit træ så meget som muligt:)

n

Dette var en meget lang instruerbar, for et temmelig kompliceret projekt. Men det er det værd i sidste ende: D

Tak skal du have! Hvis du vil holde kontakten med det, jeg arbejder med:

Du kan abonnere på min YouTube -kanal:

www.youtube.com/c/JTMakesIt

Du kan også følge mig på Facebook og Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

til spoilere om det, jeg arbejder på i øjeblikket, bag kulisserne og andre statister! PS:., Hvis du virkelig, virkelig kunne lide det, kan du også købe mig en kop kaffe her, så jeg vil have mere energi til fremtidige projekter (denne tog 2 ugers søvn fra mig, da jeg fik denne idé for sent):)

www.buymeacoffee.com/JTMakesIt

Og glem ikke at stemme på denne Instructable i "Anything Goes" -konkurrencen:)