Nettstedskontrollert juletre (alle kan kontrollere det): 19 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Vil du vite hvordan et nettstedstyrt juletre ser ut?

Her er videoen som viser prosjektet mitt av juletreet mitt. Livestreamen er nå avsluttet, men jeg lagde en video for å fange det som foregikk:

I år, i midten av desember, lå jeg i sengen min og prøvde å sove midt i en arbeidsuke. Og i stedet for å sove tenkte jeg på hva som ville være et kult juleprosjekt å gjøre. Og så slo en kul idé meg.

Siden jeg er lat med julepynt, ville det være kult å la noen andre kontrollere julelysene mine, så jeg slipper å bekymre meg for det.

"Hva om jeg lager et juletreet lys som ALLE kan styre via et nettsted grensesnitt?"

(sett inn to uker med søvnløse netter)

Så jeg klarte det.

Et juletre med tjue RGB -lysdioder koblet til internett via ESP8266 Arduino.

En venn av meg (takk JP) hjalp meg med å sette opp et nettsted (siden jeg ikke er en flytende programmerer for nettstedsrelaterte ting).

Og vi opprettet en 24/7 youtube live stream av treet mitt, slik at du vil kunne se hva du slår på eller av til enhver tid.

Dette prosjektet er ideelt for i år, siden mange av oss var i lockdown og ikke klarte å møte og sosialisere med venner og familie. Hvorfor ikke forene deg via juletreet:)

I denne instruksen vil jeg forklare i detalj hvordan dette prosjektet ble laget.

Trinn 1: Ferdighetsnivå

Dette prosjektet er mer programvareorientert. Men ikke vær redd Litt hell og hjelp fra onkel Google vil hjelpe enormt:)

Du må ha et sett med 3 ferdigheter (eller du lærer dem ikke bekymre deg): en webserverdel, Arduino -delen og juletreet selvfølgelig!

Anbefalt kunnskap:

• Grunnleggende data- og programmeringskunnskaper

• Grunnleggende Linux -terminalkunnskaper

• Grunnleggende kunnskap om datanettverk

• Grunnleggende elektronikk kunnskap

• Ferdigheter til å bruke Google og andre "spesielle" evner

• Skal vite hvordan du setter opp et juletre:)

Hvis du har litt sans for teknologi og programmering, bør du kunne lære å sette opp dette i henhold til denne instruksjonsboken.

Trinn 2: Verktøy og komponenter

På juletresiden trenger du: • Juletre (d'oh…)

• Et NodeMCU mikrokontrollerkort

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

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

• Programvare for NodeMCU (følger med i denne instruksjonen)

På serversiden trenger du:

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

• Et domene (valgfritt) du kan registrere hos en hvilken som helst registrarorganisasjon, for eksempel

• Dedikert kode (følger med denne instruksjonsboken)

Trinn 3: Konfigurer Virtual Machine (datamaskin) DEL 1

La oss gå rett inn i koding:)

Vi trenger en server, som vil kommunisere med nettstedet og NodeMCU.

Servere på DigitalOcean lar oss ha en virtuell maskin med en offentlig IP -adresse, noe som betyr at vi kan kjøre tjenester på den og få tilgang til dem over hele verden.

Når du har betalt et DigitalOcean -månedlig abonnement (du kan bruke 60 dagers gratis prøveperiode), kan du lage et prosjekt og gi det et juletre eller hva du vil.

Du kan nå opprette din virtuelle maskin (ekstern tilgjengelig virtuell datamaskin) ved å klikke "Kom i gang med en dråpe" (som i utgangspunktet er DigitalOceans navn på en virtuell maskin).

En konfigurasjonsside kommer opp, og du kan bo med en standard: Ubuntu -bilde, grunnleggende plan og ingen blokklagring (5 $ /måned)

Trinn 4: Konfigurer Virtual Machine (datamaskin) DEL 2

Et datasenterområde er stedet serveren din skal opprettes på.

Velg den nærmeste til deg og dine potensielle brukere. Dette gir lavest responstid.

Videre, i delen Godkjenning, blir du bedt om å skrive inn et passord for å få tilgang til din virtuelle maskin.

I delen Fullfør og opprett beholder du 1 dråpe som standard, velger et vertsnavn (juletre igjen), velg prosjektet som er opprettet tidligere hvis det ikke er valgt som standard, og klikk på Opprett dråpe. Dette vil ta noen minutter. Ved å klikke på prosjektet ditt i navigasjonsdelen til venstre ser du dråpen din.

Trinn 5: Konfigurer Virtual Machine (datamaskin) DEL 3

Ved å klikke på de tre prikkene til høyre for dråpen kan du klikke på Access -konsollen, som gir deg tilgang til din virtuelle datamaskin.

Et nytt lite nettleservindu åpnes. Nå er dette ikke et skrivebordsmiljø, som på Windows 10 eller Ubuntu med grafisk grensesnittmaskin.

Alt kan imidlertid gjøres via et konsollgrensesnitt.

Det er ikke så skummelt som det ser ut:)

Trinn 6: Konfigurer Virtual Machine (datamaskin) DEL 4

Du har opprettet din egen virtuelle maskin i en DigitalOcean -sky.

I de neste trinnene vil du sette opp en webserver, kalt Apache og sette opp din egen webside.

Last ned Filezilla-klienten her https://filezilla-project.org/download.php?platfo… (eller finn 32-biters versjon for 32-biters operativsystem) og installer den. Det er en FTP -klient (File Transfer Protocol).

Du vil få tilgang til og overføre filer fra og til din virtuelle maskin.

Når den er installert, klikker du fil → nettstedbehandling → nytt nettsted og skriver inn data som på bildet ovenfor.

Protokoll: SFTP (Secure File Transfer Protocol)

Vert: IP -adressen til serveren din, finn i ditt DigitalOcean -prosjekt.

Brukeren er roten og passordet er det du setter den ved opprettelsen av din dråpe.

Klikk OK og koble til din virtuelle maskin.

Du vil bli advart, vertsnøkkelen er ukjent. Følg det andre bildet.

Lag en lokal mappe for prosjektet, og trekk ut prosjektfilene du vil laste ned her.

Du vil redigere filene dine på datamaskinen din og overføre dem til din virtuelle maskin hver gang du vil teste eller oppdatere koden.

Trinn 7: Installer en webserver

Logg på dråpekonsollen med brukernavn og passord.

Siden vi ikke har et grafisk grensesnitt, bruker vi kommandoer for å kontrollere din virtuelle maskin. Her er noen vanlige kommandoer du vil bruke på Ubuntu (Linux):

• pwd - skriv ut min nåværende katalog

• ls - vis filer og mapper i min nåværende katalog

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

Med run, mener jeg, skriv inn kommandoen og trykk enter.

Nå vil vi kjøre apt -get update -y for å oppdatere systemet.

Kjør apt install apache2 -y for å installere Apache webserver.

Velkomstskjermen til Apache skal være tilgjengelig på https:// virtual-machine-ip fra nettleseren din.

Erstatt virtual-machine-ip med din virtuelle maskin ip, for eksempel 165.12.45.123. Du kan også hoppe over https:// siden den blir lagt til automatisk.

Gratulerer!

Merk:

Hvis du vil at nettstedet ditt skal være tilgjengelig via et navn, i stedet for IP -adresse (som jeg brukte https://blinkmytree.live/), går du til domenetilbyderens nettsted GoDaddy eller lignende (namecheap.com osv.) Og følger instruksjonene her:

Noen domenenavn er veldig rimelige. Domenet mitt kostet bare 2 $ per år. Absolutt verdt pengene:)

Trinn 8: Installer et webapplikasjonsrammeverk

Tilbake til konsollen vår. Ikke vær redd:)

Bruk Filezilla til å lage en mappe som heter app inside /home, så /home /app blir mappen din

Kjør cd /home /app for å gå til innsiden av appmappen.

Kjør apt install npm -y, til installl npm package manager. Dette vil ta noen minutter.

Kjør npm init -y for å opprette en fil package.json, som vil spore/huske store pakkedata om en app.

Kjør npm -lagre installer cors express for å installere moduler cors, express

Cors er modul for konfigurering av tilgang på tvers av webområder og express er et rammeverk for webapplikasjoner.

Npm er en pakkebehandler vi brukte, og vi vil bruke node.js JavaScript -runtime for å programmere vårt programmeringsgrensesnitt (API), som, kombinert med en http -server, godtar HTTP -forespørsler for å bruke farger på lysdioder, markere deres verdier (farger) i minnet, og overfør verdiene til NodeMcu når den ber om det.

Merk: Node i NodeMcu har ingenting å gjøre med node i node.js. NodeMcu kan erstattes med et internett -tilkoblet arduino -utviklingskort, NXP -utviklingskort eller et tilpasset Microchip/NXP/Renesas/STM/Atmel PCB. Node.js kan også erstattes med. Net framework, PHP eller en hvilken som helst annen plattform. Men for enkelhets skyld bruker vi NodeMCU og Node.js.

La oss gjøre en test hvis vi kan kjøre et lite program i node.js

Lag en fil som heter index.js med notisblokk/notepad ++ eller annet redaktør eller integrert utviklingsmiljø du bruker (Visual Studio Code https://code.visualstudio.com/) i din lokale mappe.

Sett denne koden i den:

var http = require ('http');

http.createServer (funksjon (krav, res) {

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

res.end ('Hello World!');

}). lytte (8080);

Lagre den og overfør den til mappe/hjem/app som index.js med dobbeltklikk/dra-slipp-fil i FileZilla.

Kjør node index.js, og la den gå.

Nå kan vi få tilgang til siden vår på https:// virtual-machine-ip: 8080 fra nettleseren vår. En hvit side med Hello World -tekst vises.

Gratulerer, du har nettopp opprettet en webserver i node.js!

Trinn 9: Forbered programvaren

Gå til konsollen og stopp programmet ved å trykke ctrl+C.

Erstatt din index.js -fil i/home/app/og erstatt den med vår index.js i.

Du kan laste ned alle filene for nettstedet her:

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

Kopier vår Chrismas -trekode fra html -mappen til den eksterne katalogen/var/www/html/med Filezilla. Det vil ta litt tid. Hvis den spør deg, kan du erstatte index.html med en ny.

Sett IP -adressen din igjen i din favoritt nettleser.

Du har nettopp gjort webapplikasjonens front-end tilgjengelig på https:// virtual-machine-ip.

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

Merk: back-end-koden din er på /home /app

Husk at etter at du har redigert koden lokalt, ikke glem å laste den opp til serveren din ved hjelp av FileZilla, og start nodeprogrammet på nytt (konsoll: ctrl+c, pil opp (viser siste kommando node index.js), skriv inn)

For at koden skal fungere, må du skrive inn noen data først.

For det første må du endre vertsnavnvariabelen i index.js til ditt eget domene eller din IP (noe som ser ut som: 165.13.45.123).

For det andre vil jeg veilede deg gjennom koden for å forstå den. Sørg for å ikke hoppe over kommentarer jeg kom med i kode.

Du kan se i index.js -filen at vi lager en app ved hjelp av ekspressmodul. Deretter bruker vi CORS -regler på den, legger til APIene og starter en http -server. Denne serveren vil ikke servere en webside gjennom GET http-forespørsler, men den vil betjene ledede stater gjennom GET http-forespørsel og oppdatere led-tilstander på mottatte PUT

APIer er vanlig praksis for å utveksle informasjon mellom applikasjoner. Det vanligste vi bruker er REST APIer vi bruker selv. De er statsløse og har ikke en vedvarende forbindelse (shorturl.at/aoBC3, PUT -forespørsler oppdaterer enkelt led -tilstandene i app -arrayvariabelen (minne), GET -forespørsler sender enkelt ledede tilstander til en klient.

Svaret til klienten er vanligvis i JSON -notasjon, men for dette enkle svaret på 30 LED -tilstander sender vi ganske enkelt en streng med 30 kommaadskilte verdier.

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

Merk: front-end-koden din er på/var/www/html

Husk at etter at du har redigert koden lokalt, ikke glem å laste den opp til serveren din ved hjelp av FileZilla. I motsetning til node.js starter Apache seg selv på nytt automatisk, men du må laste siden på nytt i nettleseren din. Bruk ctrl+f5 for å oppdatere og slette bufferen på siden din også.

For at koden skal fungere, må du skrive inn få data. Først må du endre URL -variabelen i send_request -funksjonen inne i index.html fra blinkmytree.live til ditt eget domene eller din IP, for eksempel: 165.13.45.123.

For det andre vil jeg veilede deg gjennom koden for å forstå den. Sørg for å ikke hoppe over kommentarer jeg kom med i kode. Siden er et HTML -dokument. Hvis vi forlater alle CSS -regler (sidestil og innholdsposisjon) til side, ser vi på funksjonelt viktig innhold. For å lære mer om CSS, sjekk

Vi ønsket disse hovedfunksjonene (eksperter på smidige metoder vil si brukerhistorier) på siden:

• Levende video innebygd på siden

• En klikkbar LED på et juletre, som ble manipulert i Gimp bildeditor (https://www.gimp.org/).

• Faktisk kommunikasjon med en server og venter på å endre ledede tilstander.

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

Når vi har juletreet vårt med antall lysdioder og farger å velge, må vi lage områder og bruke handlinger på dem, så når vi klikker på den fargede LED -en i en plukkerseksjon av et bilde, vil en farge bli valgt, og en vi klikker på en LED, kommandoen blir sendt til serveren, der Arduino vil velge verdien.

I HTML5, den nyeste HTML -standarden, er det noe som kalles et bildekart. Den lar oss definere områder på et bilde, som vi kan bruke actionlyttere på.

Siden vi har mange områder å definere, brukte vi et verktøy https://www.image-map.net/ for å definere disse områdene og kopierte HTML-kode til siden vår.

Når vi gjør det, kan vi sette onclick -hendelse med en funksjon den kaller og parameter for et LED -nummer til hvert av disse områdene. Se skjermbildet ovenfor.

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

Inne på slutten av HTML -kroppen, i en region, legger vi til litt JavaScript for å definere funksjonene vi kaller inn på klikkhendelser. Globalt definerer vi en XMLHttpRequest, som vi bruker til å sende en PUT -forespørsel

Vi har to funksjoner:

funksjonssett_farge (val)

funksjon send_request (id)

For å teste API -forespørsel, anbefaler jeg et vanlig programvareverktøy kalt Postman https://www.postman.com/. Det lar oss ganske enkelt sende API -forespørsel til serveren, uten programmeringskunnskaper. Det gjør det mulig å håne en server, og godta forespørsler også.

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

Søknaden din fungerer.

Vær oppmerksom på at tallene er omvendt, det vil si at 20 er 1 og 1 er 20, dette er fordi lysdioder på treet starter på bunnen, men for bedre brukeropplevelse satte vi en start ledet til toppen.

Du må fortsatt opprette en livestream på YouTube hvis du vil ha det, og erstatte innebyggingskoden til YouTube -videoen med din egen.

Trinn 15: Arduino -koden

ESP8266 kjører en grunnleggende HTTP -klienteksempelskisse som er litt modifisert, og mottar dataene fra nettstedet mitt via et API -anrop.

Du må også installere biblioteker for å kontrollere LED -stripen hvis du vil bruke den samme adresserbare RGB -stripen som jeg gjorde.

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

I skissen jeg legger ved, må du sette inn wi-fi-navnet og passordet og en url til nettstedet ditt (se kommentarene)

Vi konverterer i utgangspunktet et http-svar til en C-typet streng, slik at vi kan bruke C-funksjon strtok til å dele strengen med kommaer og fylle LED-tabellen med verdier lest fra en server. Enn vi kaller en funksjon der vi går gjennom tabellen, og basert på verdiene, snur vi den riktige fargen brukeren forventer.

Det er det!

Gratulerer, du klarte det!

Trinn 16: RGB LED -kjede

UH oh. Nå er det på tide å ta en liten pause fra all kodingen:)

Siden ESP8266 ikke har mange GPIO -pinner for å styre lysdioder individuelt, brukte jeg denne adresserbare RGB LED -kjeden:

www.sparkfun.com/products/11020

På denne måten kan alle 20 RGB -lysdioder (totalt 60 leds) styres av bare to pinner - "data" og "klokke" og 5V strøm direkte fra ESP8266.

Det er enkelt å koble stripen til NodeMcu. 5V til Vin på NodeMcu (5V fra USB), gul ledning til pinne 12, grønn ledning til pinne 14, jordet til bakken.

Du kan angi individuell RGB -farge og lysstyrke. Med litt fargeblanding kan du produsere MYE farger for hver LED.

Det er også et veldig kult bibliotek for alle slags kule FX -effekter med disse lysdiodene. Prøv det hvis du liker:

github.com/r41d/WS2801FX

Trinn 17: Dekorer juletreet

Gjør det pent og sørg for at alle lysdiodene er synlige og pent spredt over treet.

Trinn 18: Siste berøringer

Når du har treet klart, ta et fint bilde og gjenta trinnet for å lage bildekartet over de klikkbare posisjonene (LED -posisjoner)

Dette er den mest intuitive måten å kommunisere med lysdiodene på.

Hvis du ikke vil overkomplisere ting, kan du bruke vanlige knapper.

Du bør også starte en direktesending av treet ditt på YouTube (hvis du vil se hva som skjer i sanntid) og legge strømmen inn på nettstedet ditt.

Trinn 19: Beundre nettstedet ditt

Du er fantastisk hvis du har kommet så langt:) Inviter vennene dine (og meg selvfølgelig: P) og få dem til å klikke på treet ditt så mye som mulig:)

n

Dette var en veldig lang instruks, for et ganske komplisert prosjekt. Men det er verdt det på slutten: D

Takk skal du ha! Hvis du vil holde kontakten med det jeg jobber med:

Du kan abonnere på YouTube -kanalen min:

www.youtube.com/c/JTMakesIt

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

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

for spoilere på det jeg jobber med, bak kulissene og andre statister! PS:., Hvis du VIRKELIG, VIRKELIG likte det, kan du også kjøpe meg en kaffe her, så jeg vil ha mer energi til fremtidige prosjekter (denne tok 2 ukers søvn fra meg, siden jeg fikk denne ideen for sent):)

www.buymeacoffee.com/JTMakesIt

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