Webbplatsstyrd julgran (vem som helst kan kontrollera den): 19 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:35

Vill du veta hur en webbplatsstyrd julgran ser ut?

Här är videon som visar upp mitt projekt av min julgran. Livestreamen har slutat nu, men jag gjorde en video där jag fångade vad som hände:

I år, i mitten av december, låg jag i min säng och försökte sova mitt i en arbetsvecka. Och istället för att sova tänkte jag på vad som skulle vara ett coolt julprojekt att göra. Och sedan slog en cool idé mig.

Eftersom jag är lat med julpynt, skulle det vara häftigt att låta någon annan styra mina julbelysning, så jag behöver inte oroa mig för det.

"Tänk om jag gjorde en julgransbelysning som NÅGON kunde styra via ett webbplatsgränssnitt?"

(lägg in två veckors sömnlösa nätter)

Så jag klarade det.

En julgran med tjugo RGB -lysdioder anslutna till internet via ESP8266 Arduino.

En av mina vänner (tack JP) hjälpte mig att skapa en webbplats (eftersom jag inte är en flytande programmerare för webbplatsrelaterade saker).

Och vi inrättade en 24/7 youtube live stream av mitt träd så att du kommer att kunna se vad du slår på eller av hela tiden.

Detta projekt är idealiskt för i år, eftersom många av oss var i lockdown och inte kunde träffas och umgås med vänner och familj. Varför inte förena dig via julgranen:)

I denna instruktionsbok kommer jag att förklara i detalj hur detta projekt gjordes.

Steg 1: Färdighetsnivå

Detta projekt är mer programvarorienterat. Men var inte rädd Lite tur och hjälp av farbror Google hjälper oerhört mycket:)

Du kommer att behöva ha en uppsättning av 3 färdigheter (eller du lär dig dem ingen oro): en webbserverdel, Arduino -delen och julgranen förstås!

Rekommenderad kunskap:

• Grundläggande dator- och programmeringskunskaper

• Grundläggande Linux -terminalkunskaper

• Grundläggande kunskaper i datanätverk

• Grundläggande elektronikkunskaper

• Färdigheter att använda Google och andra "speciella" förmågor

• Ska veta hur man sätter upp en julgran:)

Om du har en känsla av teknik och programmering bör du kunna lära dig att ställa in det här enligt denna instruerbara.

Steg 2: Verktyg och komponenter

På julgransidan behöver du: • julgran (d'oh …)

• Ett NodeMCU-mikrokontrollkort

(du kan också använda ESP32 eller andra Wi-Fi- eller Ethernet-kompatibla kort)

• Adresserbar RGB LED -remsa. adresserbar RGB -ledremsa kommer att spara många Arduino GPIO: er (https://www.sparkfun.com/products/11020)

• Programvara för NodeMCU (tillhandahålls i denna instruktion)

På serversidan behöver du:

• En virtuell privat server med offentlig IP. Här får du $ 100 gratis på DigitalOcean

• En domän (valfritt) som du kan registrera hos vilken registrarorganisation som helst, till exempel

• Dedikerad kod (levereras med denna instruktionsbok)

Steg 3: Konfigurera virtuell maskin (dator) DEL 1

Låt oss gå direkt till kodning:)

Vi behöver en server som kommunicerar med webbplatsen och NodeMCU.

Servrar på DigitalOcean tillåter oss att ha en virtuell maskin med en offentlig IP -adress, vilket innebär att vi kan köra tjänster på den och få tillgång till dem över hela världen.

När du har betalat en månatlig prenumeration på DigitalOcean (du kan använda 60 dagars gratis provperiod) skapar du ett projekt och kallar det en julgran eller vad du vill.

Du kan nu skapa din virtuella maskin (fjärrtillgänglig virtuell dator) genom att klicka på "Kom igång med en droppe" (som i princip är DigitalOceans namn på en virtuell maskin).

En konfigurationssida kommer upp och du kan bo med en standard: Ubuntu -bild, grundläggande plan och ingen blockering (5 $ /månad)

Steg 4: Konfigurera virtuell maskin (dator) DEL 2

En datacenterregion är platsen där din server skapas.

Välj den närmaste till dig och dina potentiella användare. Detta ger den lägsta svarstiden.

I avsnittet Autentisering kommer du att bli ombedd att ange ett lösenord för åtkomst till din virtuella dator.

I avsnittet Slutför och skapa, behåll standard på 1 droppe, välj ett värdnamn (julgran igen), välj ditt projekt som skapats tidigare om det inte valts som standard och klicka på Skapa droppe. Detta tar några minuter. Genom att klicka på ditt projekt i navigeringsavsnittet till vänster ser du din droppe.

Steg 5: Konfigurera virtuell maskin (dator) DEL 3

Genom att klicka på de tre prickarna till höger om droppen kan du klicka på Access -konsolen, vilket gör att du kommer åt din virtuella dator.

Ett nytt litet webbläsarfönster öppnas. Nu är detta inte en stationär miljö, som på din Windows 10 eller Ubuntu med grafisk gränssnittsdator.

Allt kan dock göras via ett konsolgränssnitt.

Det är inte så läskigt som det ser ut:)

Steg 6: Konfigurera virtuell maskin (dator) DEL 4

Du har framgångsrikt skapat din egen virtuella maskin i ett DigitalOcean -moln.

I nästa steg kommer du att skapa en webbserver som heter Apache och skapa en egen webbsida.

Ladda ner Filezilla-klienten här https://filezilla-project.org/download.php?platfo… (eller hitta 32bit-versionen för 32bit-operativsystemet) och installera den. Det är en FTP -klient (File Transfer Protocol).

Du kommer att kunna komma åt och överföra filer från och till din virtuella dator.

När du har installerat klickar du på fil → webbplatshanterare → ny webbplats och anger data som på en bild ovan.

Protokoll: SFTP (Secure File Transfer Protocol)

Värd: IP för din server, hitta i ditt DigitalOcean -projekt.

Användare är rot och lösenord är vad du ställer in det när du skapar din droppe.

Klicka på OK och anslut till din virtuella dator.

Du kommer att varnas, värdnyckeln är okänd. Följ den andra bilden.

Skapa en lokal mapp för projektet och extrahera dina projektfiler som du laddar ner här.

Du redigerar dina filer på din dator och överför dem till din virtuella dator varje gång du vill testa eller uppdatera koden.

Steg 7: Installera en webbserver

Logga in på din droplet -konsol med användarnamnrot och ditt lösenord.

Eftersom vi inte har ett grafiskt gränssnitt använder vi kommandon för att styra din virtuella maskin. Här är några vanliga kommandon du kommer att använda på Ubuntu (Linux):

• pwd - skriv ut min nuvarande katalog

• ls - lista filer och mappar i min nuvarande katalog

• cd / - flytta till / katalog (mapp, som innehåller stora Linux -kataloger som etc, bin, boot, dev, root, home, var och så vidare)

Med kör menar jag, ange kommandot och tryck på enter.

Nu kör vi apt -get update -y för att uppdatera systemet.

Kör apt install apache2 -y för att installera Apache webbserver.

Din välkomstskärm för Apache bör vara tillgänglig på din https:// virtual-machine-ip från din webbläsare.

Ersätt virtual-machine-ip med din virtuella maskin ip, till exempel 165.12.45.123. Du kan också hoppa över https:// eftersom den läggs till automatiskt.

grattis!

Notera:

Om du vill att din webbplats ska vara tillgänglig via ett namn, snarare än IP -adress (som jag använde https://blinkmytree.live/), gå till domänleverantörens webbplats GoDaddy eller liknande (namecheap.com etc.) och följ instruktionerna här:

Vissa domännamn är mycket billiga. Min domän kostade bara 2 $ per år. Definitivt värt pengarna:)

Steg 8: Installera en webbapplikationsram

Tillbaka till vår konsol. Var inte rädd:)

Använd Filezilla för att skapa en mapp med namnet app inside /home, så /home /app blir din mapp

Kör cd /home /app för att gå till inuti appmappen.

Kör apt install npm -y, till installl npm pakethanteraren. Detta tar några minuter.

Kör npm init -y för att skapa ett filpaket.json som spårar/kommer ihåg viktiga paketdata om en app.

Kör npm -spara installation cors express för att installera moduler cors, express

Cors är modul för att konfigurera åtkomst över flera platser och express är ett ramverk för webbapplikationer.

Npm är en pakethanterare som vi använde och vi kommer att använda node.js JavaScript runtime för att programmera vårt applikationsprogrammeringsgränssnitt (API), som i kombination med en http -server accepterar HTTP -förfrågningar för att applicera färger på lysdioder, markera deras värden (färger) i minnet och skicka värdena till NodeMcu när det begär det.

Obs: Node i NodeMcu har ingenting att göra med nod i node.js. NodeMcu kan ersättas med alla internetanslutna arduino -utvecklingskort, NXP -utvecklingskort eller ett anpassat Microchip/NXP/Renesas/STM/Atmel PCB. Node.js kan också ersättas med. Net framework, PHP eller någon annan plattform. Men för enkelhetens skull använder vi NodeMCU och Node.js.

Nu kan vi göra ett test om vi kan köra ett litet program i node.js

Skapa en fil som heter index.js med anteckningsblock/anteckningar ++ eller annan redaktör eller integrerad utvecklingsmiljö som du använder (Visual Studio Code https://code.visualstudio.com/) i din lokala mapp.

Sätt den här koden i den:

var http = require ('http');

http.createServer (function (req, res) {

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

res.end ('Hello World!');

}). lyssna (8080);

Spara den och överför den till mapp/hem/app som index.js med dubbelklicka/dra-släpp-fil i FileZilla.

Kör nod index.js och låt den vara igång.

Nu kan vi komma åt vår sida på https:// virtual-machine-ip: 8080 från vår webbläsare. En vit sida med Hello World -text visas.

Grattis, du har just skapat en webbserver i node.js!

Steg 9: Förbered programvaran

Gå till konsolen och stoppa programmet genom att trycka på ctrl+C.

Ersätt din index.js -fil i/home/app/och ersätt den med vår index.js i.

Du kan ladda ner alla filer för webbplatsen här:

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

Kopiera vår Chrismas trädkod från html -mappen till fjärrkatalogen/var/www/html/med Filezilla. Det kommer att ta lite tid. Om den frågar dig, ersätt index.html med en ny.

Lägg din IP igen i din favorit webbläsare.

Du har just gjort din webbapplikations front-end tillgänglig på https:// virtual-machine-ip.

Steg 10: Oavsiktlig back-end-kod och få den att fungera

Obs: din back-end-kod finns på /home /app

Kom ihåg att efter att du har redigerat din kod lokalt, glöm inte att ladda upp den till din server med FileZilla och starta om nodprogrammet (konsol: ctrl+c, pil upp (visar sista kommandonoden index.js), ange)

För att koden ska fungera måste du ange några data först.

För det första måste du ändra värdnamnsvariabeln i index.js till din egen domän eller IP, (något som ser ut som: 165.13.45.123).

För det andra kommer jag att vägleda dig genom koden för att förstå den. Se till att inte hoppa över kommentarer jag gjorde i kod.

Du kan se i index.js -filen att vi skapar en app med hjälp av expressmodul. Sedan tillämpar vi CORS -regler på den, lägger till API: erna och startar en http -server. Den här servern serverar inte en webbsida via GET http-förfrågningar, men den kommer att betjäna ledda tillstånd via GET http-begäran och uppdatera ledda tillstånd på mottagna PUT

API: er är vanlig metod för att utbyta information mellan applikationer. Det vanligaste vi använder är REST API: er vi använder själva. De är statslösa och har inte en beständig anslutning (shorturl.at/aoBC3, PUT -förfrågningar uppdaterar helt enkelt ledstaterna i appmatrisvariabel (minne), GET -förfrågningar skickar helt enkelt ledstater till en klient.

Svaret till klienten är vanligtvis i JSON -notation, men för detta enkla svar med 30 LED -tillstånd skickar vi helt enkelt en sträng med 30 kommaseparerade värden.

Steg 11: Förstå front-end-koden och få den att fungera DEL 1

Obs! Din front-end-kod är på/var/www/html

Kom ihåg att när du har redigerat din kod lokalt, glöm inte att ladda upp den till din server med FileZilla. Till skillnad från node.js startar Apache om automatiskt, men du måste ladda om din sida i din webbläsare. Använd ctrl+f5 för att uppdatera och ta bort cacheminnet på din sida också.

För att koden ska fungera måste du ange få data. Först måste du ändra webbadressvariabeln i funktionen send_request inuti index.html från blinkmytree.live till din egen domän eller IP, till exempel: 165.13.45.123.

För det andra leder jag dig genom koden för att förstå den. Se till att inte hoppa över kommentarer jag gjorde i kod. Sidan är ett HTML -dokument. Om vi lämnar alla CSS -regler (sidstil och innehållsposition) åt sidan kommer vi att titta på funktionalitetsviktigt innehåll. Mer information om CSS finns på

Vi ville ha dessa huvudfunktioner (experter på smidiga metoder skulle säga användarberättelser) på sidan:

• Live -video inbäddad på sidan

• En klickbar lysdiod på en julgran, som manipulerades i Gimp bildredigerare (https://www.gimp.org/).

• Faktisk kommunikation med en server, väntar på att ändra ledda tillstånd.

Steg 12: Förstå front-end-koden och få den att fungera DEL 2

När vi har vår julgran med antal lysdioder och färger att välja, måste vi skapa områden och tillämpa åtgärder på dem, så när vi klickar på den färgade lysdioden i en plockare av en bild, kommer en färg att väljas, och en vi klickar på en lysdiod, kommandot skickas till servern, där Arduino väljer sitt värde.

I HTML5, den nyaste HTML -standarden, finns det något som kallas en bildkarta. Det tillåter oss att definiera områden på en bild, som vi kan tillämpa actionlyssnare på den.

Eftersom vi har många områden att definiera använde vi ett verktyg https://www.image-map.net/ för att definiera dessa områden och kopierade HTML-kod till vår sida.

När vi väl gjort det kan vi lägga till onclick -händelse med en funktion som den anropar och parameter för ett LED -nummer till vart och ett av dessa områden. Se skärmdumpen ovan.

Steg 13: Förstå front-end-koden och få den att fungera DEL 3

I slutet av HTML -kroppen, i en region, lägger vi lite JavaScript för att definiera de funktioner vi kallar in vid klickhändelser. Globalt definierar vi en XMLHttpRequest, som vi använder för att skicka en PUT -begäran

Vi har två funktioner:

funktion set_color (val)

funktion send_request (id)

För att testa API -begäran rekommenderar jag ett vanligt programvaruverktyg som kallas Postman https://www.postman.com/. Det tillåter oss att helt enkelt skicka API -begäran till servern, utan programmeringskunskaper. Det gör det möjligt att håna en server och acceptera förfrågningar också.

Steg 14: Förstå front-end-koden och få den att fungera DEL 4

Din ansökan fungerar.

Var medveten om att siffrorna är omvända, det vill säga 20 är 1 och 1 är 20, detta beror på att lysdioder på trädet börjar på botten, men för bättre användarupplevelse satte vi en start ledd till toppen.

Du måste fortfarande skapa en livestream på YouTube om du vill ha det och ersätta inbäddningskoden för YouTube -videon med din egen.

Steg 15: Arduino -koden

ESP8266 kör en grundläggande exempelskiss på HTTP -klient som är något modifierad och tar emot data från min webbplats via ett API -samtal.

Du måste också installera bibliotek för att styra LED -remsan om du vill använda samma adresserbara RGB -remsa som jag gjorde.

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

I skissen jag bifogade måste du infoga ditt wi-fi-namn och lösenord och en webbadress till din webbplats (se kommentarerna)

Vi konverterar i princip ett http-svar till en C-typad sträng, så vi kan använda C-funktionen strtok för att dela strängen med kommatecken och fylla LED-tabellen med värden som läses från en server. Än så kallar vi en funktion där vi går igenom tabellen, och baserat på värdena vrider vi rätt färg som användaren förväntar sig.

Det är det!

Grattis, du klarade det!

Steg 16: RGB LED -kedja

Hoppsan. Nu är det dags att ta en liten paus från all kodning:)

Eftersom ESP8266 inte har många GPIO -stift för att styra lysdioder individuellt använde jag denna adresserbara RGB LED -kedja:

www.sparkfun.com/products/11020

På så sätt kan alla 20 RGB -lysdioder (totalt 60 LED) styras av endast två stift - "data" och "klocka" och 5V ström direkt från ESP8266.

Det är enkelt att ansluta remsan till NodeMcu. 5V till Vin på NodeMcu (5V från USB), gul tråd till stift 12, grön tråd till stift 14, mark till jord.

Du kan ställa in individuell RGB -färg och ljusstyrka. Med lite färgblandning kan du producera MASSOR av färger för varje LED.

Det finns också ett väldigt coolt bibliotek för alla möjliga coola FX -effekter med dessa lysdioder. Prova om du gillar:

github.com/r41d/WS2801FX

Steg 17: Dekorera julgranen

Gör det vackert och se till att alla lysdioder är synliga och snyggt spridda över trädet.

Steg 18: Sista handen

När du har trädet klart, ta ett fint foto och upprepa steget för att skapa bildkartan för de klickbara positionerna (LED -positioner)

Detta är det mest intuitiva sättet att interagera med lysdioderna.

Om du inte vill överkomplicera saker kan du använda vanliga knappar.

Du bör också starta en livestream av ditt träd på YouTube (om du vill titta på vad som händer i realtid) och bädda in strömmen på din webbplats.

Steg 19: Beundra din webbplats

Du är fantastisk om du har kommit så här långt:) Bjud in dina vänner (och mig förstås: P) och få dem att klicka på ditt träd så mycket som möjligt:)

n

Detta var en mycket lång instruerbar, för ett ganska komplicerat projekt. Men det är värt det i slutet: D

Tack! Om du vill hålla kontakten med vad jag arbetar med:

Du kan prenumerera på min YouTube -kanal:

www.youtube.com/c/JTMakesIt

Du kan också följa mig på Facebook och Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

för spoilers på det jag håller på med just nu, bakom kulisserna och andra tillbehör! PS:., Om du verkligen, verkligen gillade det, kan du också köpa mig en kaffe här, så jag kommer att ha mer energi för framtida projekt (den här tog 2 veckors sömn ifrån mig, eftersom jag fick den här idén för sent):)

www.buymeacoffee.com/JTMakesIt

Och glöm inte att rösta på denna Instructable i "Anything Goes" -tävlingen:)