Božično drevo, ki ga nadzira spletna stran (vsak ga lahko nadzoruje): 19 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Želite vedeti, kako izgleda božično drevo, ki ga nadzoruje spletna stran?

Tukaj je video, ki prikazuje moj projekt mojega božičnega drevesa. Prenos v živo se je do zdaj končal, vendar sem posnel video posnetek dogajanja:

Letos, sredi decembra, sem ležal v postelji in poskušal zaspati sredi delovnega tedna. Namesto spanja sem razmišljal, kaj bi bil kul božični projekt. In potem me je doletela kul ideja.

Ker sem len z božičnimi okraski, bi bilo kul, če bi kdo drug nadziral moje božične lučke, zato mi ne bo treba skrbeti za to.

"Kaj pa, če bi naredil lučke za božično drevo, ki bi jih lahko Kdorkoli nadzoroval prek vmesnika spletnega mesta?"

(vstavite dva tedna neprespanih noči)

Tako mi je uspelo.

Božično drevo z dvajsetimi LED diodami RGB, povezanimi z internetom prek ESP8266 Arduino.

Moj prijatelj (hvala JP) mi je pomagal vzpostaviti spletno stran (ker nisem tekoč programer za stvari, povezane s spletnim mestom).

Vzpostavili smo 24 -urni prenos mojega drevesa na youtube -u, tako da boste lahko ves čas videli, kaj vklapljate ali izklapljate.

Ta projekt je idealen za letošnje leto, saj smo bili mnogi zaprti in se nismo mogli srečati in družiti s prijatelji in družino. Zakaj se ne bi združili preko božičnega drevesa:)

V tem navodilu bom podrobno razložil, kako je ta projekt nastal.

1. korak: Raven spretnosti

Ta projekt je bolj programsko naravnan. Ampak ne bojte se, nekaj sreče in pomoč strica Googla bosta v veliko pomoč:)

Morali boste imeti nabor 3 spretnosti (ali pa se jih boste brez skrbi naučili): del spletnega strežnika, del Arduino in božično drevo seveda!

Priporočeno znanje:

• Osnovne računalniške in programske sposobnosti

• Osnovno znanje o terminalu Linux

• Osnovno znanje o računalniških omrežjih

• Osnovno znanje o elektroniki

• spretnosti uporabe Googla in drugih "posebnih" sposobnosti

• Morali bi vedeti, kako postaviti božično drevo:)

Če imate občutek za tehnologijo in programiranje, bi se morali naučiti nastaviti to stvar v skladu s tem navodilom.

Korak: Orodja in komponente

Na strani božičnega drevesa boste potrebovali: • božično drevo (d'oh …)

• mikrokrmilna plošča NodeMCU

(lahko uporabite tudi ESP32 ali druge plošče, ki podpirajo Wi-Fi ali Ethernet)

• Naslovljiv RGB LED trak. naslovljiv RGB LED trak bo prihranil veliko Arduino GPIO (https://www.sparkfun.com/products/11020)

• Programska oprema za NodeMCU (na voljo v tem navodilu)

Na strani strežnika boste potrebovali:

• Navidezni zasebni strežnik z javnim IP -jem. Tukaj dobite 100 USD brezplačno na DigitalOcean

• Domena (izbirno), ki jo lahko registrirate pri kateri koli registracijski organizaciji, na primer

• Namenska koda (priložena temu navodilu)

3. korak: Konfigurirajte navidezni stroj (računalnik) 1. DEL

Gremo naravnost v kodiranje:)

Potrebujemo strežnik, ki bo komuniciral s spletnim mestom in NodeMCU.

Strežniki na DigitalOceanu nam omogočajo navidezni stroj z javnim naslovom IP, kar pomeni, da lahko na njem izvajamo storitve in do njih dostopamo po vsem svetu.

Ko plačate mesečno naročnino na DigitalOcean (lahko uporabite 60 -dnevno brezplačno preskusno različico), ustvarite projekt in ga poimenujte božično drevo ali karkoli želite.

Zdaj lahko ustvarite svoj virtualni stroj (oddaljeni dostopni virtualni računalnik) s klikom na "Začni z kapljico" (kar je v bistvu ime DigitalOcean za navidezni stroj).

Odprla se bo stran s konfiguracijo in lahko ostanete privzeti: slika Ubuntu, osnovni načrt in brez shranjevanja blokov (5 USD /mesec)

4. korak: Konfigurirajte navidezni stroj (računalnik) 2. DEL

Regija podatkovnega središča je kraj, kjer bo strežnik ustvarjen.

Izberite najbližje sebi in svojim potencialnim uporabnikom. To bo zagotovilo najnižji odzivni čas.

Nadalje boste v razdelku Preverjanje pristnosti morali vnesti geslo za dostop do navideznega stroja.

V razdelku Dokončaj in ustvari ohrani privzeto 1 kapljico, izberite ime gostitelja (znova božično drevo), izberite že ustvarjen projekt, če privzeto ni izbran, in kliknite Ustvari kapljico. To bo trajalo nekaj minut. S klikom na vaš projekt v navigacijskem razdelku na levi boste videli svojo kapljico.

5. korak: Konfigurirajte navidezni stroj (računalnik) 3. DEL

S klikom na tri pike na desni strani kapljice lahko kliknete Access console, ki vam bo omogočil dostop do vašega virtualnega računalnika.

Odprlo se bo novo okno brskalnika. Zdaj to ni namizno okolje, na primer v sistemu Windows 10 ali Ubuntu z računalnikom z grafičnim vmesnikom.

Vse pa je mogoče storiti prek vmesnika konzole.

Ni tako strašno, kot izgleda:)

6. korak: Konfigurirajte navidezni stroj (računalnik) 4. DEL

Uspešno ste ustvarili svoj virtualni stroj v oblaku DigitalOcean.

V naslednjih korakih boste nastavili spletni strežnik, imenovan Apache, in nastavili svojo spletno stran.

Prenesite odjemalca Filezilla tukaj https://filezilla-project.org/download.php?platfo… (ali poiščite 32-bitno različico za 32-bitni operacijski sistem) in ga namestite. Je odjemalec FTP (File Transfer Protocol).

Do datotek boste lahko dostopali in jih prenašali iz in v vaš virtualni stroj.

Ko je nameščen, kliknite datoteka → upravitelj spletnega mesta → novo mesto in vnesite podatke, kot na zgornji sliki.

Protokol: SFTP (protokol varnega prenosa datotek)

Gostitelj: IP vašega strežnika, poiščite v svojem projektu DigitalOcean.

Uporabnik je root in geslo je tisto, kar ste nastavili pri ustvarjanju kapljice.

Kliknite V redu in se povežite z navideznim strojem.

Opozorili vas bomo, ključ gostitelja ni znan. Sledite drugi sliki.

Ustvarite lokalno mapo za projekt in izvlecite datoteke projekta, ki jih boste prenesli tukaj.

Datoteke boste v računalniku urejali in jih prenesli v navidezni stroj vsakič, ko boste želeli preskusiti ali posodobiti kodo.

7. korak: Namestite spletni strežnik

Prijavite se v konzolo za kapljice z uporabniškim imenom root in geslom.

Ker nimamo grafičnega vmesnika, uporabljamo ukaze za nadzor vašega virtualnega stroja. Tu je nekaj pogostih ukazov, ki jih boste uporabljali v Ubuntu (Linux):

• pwd - natisni moj trenutni imenik

• ls - seznam datotek in map v trenutnem imeniku

• cd / - premakni se v imenik / (mapa, ki vključuje glavne imenike linux, kot so etc, bin, boot, dev, root, home, var itd.)

Z zagonom, mislim, vnesite ukaz in pritisnite enter.

Zdaj bomo za posodobitev sistema zagnali apt -get update -y.

Zaženite apt install apache2 -y za namestitev spletnega strežnika Apache.

Vaš pozdravni zaslon Apache bi moral biti dostopen na vašem https:// virtual-machine-ip iz vašega brskalnika.

Ip virtual-machine-ip zamenjajte z ip navideznega stroja, na primer 165.12.45.123. Http: // lahko tudi preskočite, saj bo samodejno dodan.

Čestitke!

Opomba:

Če želite, da je vaše spletno mesto dostopno prek imena in ne IP naslova (kot sem uporabil https://blinkmytree.live/), pojdite na spletno mesto ponudnika domene GoDaddy ali podobno (namecheap.com itd.) In sledite navodilom tukaj:

Nekatera imena domen so zelo poceni. Moja domena je stala le 2 USD na leto. Vsekakor vredno denarja:)

8. korak: Namestite ogrodje spletnih aplikacij

Nazaj na našo konzolo. Ne bojte se:)

Z datoteko Filezilla ustvarite mapo z imenom app znotraj /home, zato bo /home /app vaša mapa

Zaženite cd /home /app, da se pomaknete v mapo aplikacije.

Zaženite apt install npm -y, da namestite upravitelja paketov npm. To bo trajalo nekaj minut.

Zaženite npm init -y, da ustvarite datoteko package.json, ki bo spremljala/zapomnila glavne podatke paketa o aplikaciji.

Zaženite npm -shranite install cors express za namestitev modulov cors, express

Cors je modul za konfiguriranje dostopa med spletnimi mesti, express pa ogrodje spletnih aplikacij.

Npm je upravitelj paketov, ki smo ga uporabili, in za izvajanje vmesnika za programiranje aplikacij (API) bomo uporabili node.js JavaScript runtime, ki bo v kombinaciji s strežnikom http sprejemal zahteve HTTP za nanašanje barv na LED, označeval njihove vrednosti (barve) v pomnilniku in posreduje vrednosti NodeMcu, ko to zahteva.

Opomba: Vozlišče v NodeMcu nima nič opraviti z vozliščem v node.js. NodeMcu bi lahko zamenjali s katero koli internetno povezano razvojno ploščo arduino, razvojno ploščo NXP ali PCB po meri Microchip/NXP/Renesas/STM/Atmel. Node.js bi lahko zamenjali tudi z. Net framework, PHP ali katero koli drugo platformo. Toda zaradi preprostosti uporabljamo NodeMCU in Node.js.

Zdaj pa naredimo test, če lahko zaženemo majhen program v node.js

Ustvarite datoteko z imenom index.js z beležnico/beležnico ++ ali drugim urejevalnikom ali integriranim razvojnim okoljem, ki ga uporabljate (koda Visual Studio https://code.visualstudio.com/) v vaši lokalni mapi.

Vanj vnesite to kodo:

var http = require ('http');

http.createServer (funkcija (req, res) {

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

res.end ('Pozdravljen svet!');

}). poslušaj (8080);

Shranite ga in prenesite v mapo/dom/aplikacijo kot index.js z dvojnim klikom/povleci-spusti datoteko v FileZilla.

Zaženite vozlišče index.js in ga pustite delovati.

Zdaj lahko iz našega brskalnika dostopamo do naše strani na naslovu https:// virtual-machine-ip: 8080. Pojavila se bo bela stran z besedilom Hello World.

Čestitamo, pravkar ste ustvarili spletni strežnik v node.js!

9. korak: Pripravite programsko opremo

Pojdite na konzolo in ustavite program s pritiskom na ctrl+C.

Zamenjajte datoteko index.js v/home/app/in jo zamenjajte z našo index.js v.

Vse datoteke za spletno stran lahko prenesete tukaj:

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

Kopirajte našo kodo božičnega drevesa iz mape html v oddaljeni imenik/var/www/html/s programom Filezilla. To bo trajalo nekaj časa. Če vas vpraša, zamenjajte index.html z novim.

Znova postavite svoj IP v svoj najljubši spletni brskalnik.

Pravkar ste dali na voljo vmesnik svoje spletne aplikacije na naslovu https:// virtual-machine-ip.

10. korak: Neuporabna zaledna koda in njeno delovanje

Opomba: vaša zaledna koda je at /home /app

Ne pozabite: ko lokalno uredite kodo, je ne pozabite naložiti na strežnik s pomočjo FileZilla in znova zagnati aplikacijo vozlišča (konzola: ctrl+c, puščica navzgor (prikazuje zadnje ukazno vozlišče index.js), vnesite)

Če želite, da koda deluje, morate najprej vnesti nekaj podatkov.

Najprej boste morali spremeniti spremenljivko imena gostitelja v index.js v svojo domeno ali IP (nekaj podobnega: 165.13.45.123).

Drugič, vodil vas bom skozi kodo, da jo boste razumeli. Pazite, da ne preskočite komentarjev, ki sem jih naredil v kodi.

V datoteki index.js lahko vidite, da z uporabo hitrega modula ustvarimo aplikacijo. Nato zanj uporabimo pravila CORS, dodamo API -je in zaženemo strežnik http. Ta strežnik ne bo služil spletni strani z zahtevami GET http, vendar bo služil vodenim stanjem prek zahteve GET http in posodabljal stanje led na prejetih zahtevah http PUT.

API -ji so običajna praksa za izmenjavo informacij med aplikacijami. Najpogosteje uporabljamo API -je REST, ki jih uporabljamo sami. So brez državljanstva in nimajo vztrajne povezave (shorturl.at/aoBC3, Zahteve PUT preprosto posodobijo stanja led v spremenljivki matrike aplikacij (pomnilnik), zahteve GET preprosto pošljejo stanja led stranki.

Odgovor odjemalcu je običajno v zapisu JSON, vendar za ta preprost odziv 30 LED stanj preprosto pošljemo niz 30 vrednosti, ločenih z vejicami.

11. korak: Razumevanje sprednje kode in njeno delovanje 1. DEL

Opomba: vaša vmesna koda je na/var/www/html

Ne pozabite: ko lokalno uredite kodo, je ne pozabite naložiti na strežnik s pomočjo FileZilla. Za razliko od node.js se Apache samodejno znova zažene, vendar boste morali stran znova naložiti v brskalniku. Za osvežitev in brisanje predpomnilnika strani uporabite ctrl+f5.

Če želite, da koda deluje, morate vnesti nekaj podatkov. Najprej boste morali spremeniti spremenljivko url v funkciji send_request znotraj index.html iz blinkmytree.live v svojo domeno ali IP, na primer: 165.13.45.123.

Drugič, vodil vas bom skozi kodo, da jo boste razumeli. Pazite, da ne preskočite komentarjev, ki sem jih naredil v kodi. Stran je dokument HTML. Če pustimo vsa pravila CSS (slog strani in položaj vsebine) ob strani, bomo pogledali vsebino, ki je pomembna za funkcionalnost. Če želite izvedeti več o CSS, obiščite

Na strani smo želeli te glavne funkcije (strokovnjaki za agilne metode bi povedali uporabniške zgodbe):

• Video v živo, vdelan na stran

• LED lučke, ki jih je mogoče klikniti na božičnem drevesu, s katerimi je bilo manipulirano v urejevalniku slik Gimp (https://www.gimp.org/).

• Dejanska komunikacija s strežnikom, ki čaka na spremembo stanja led.

12. korak: Razumevanje sprednje kode in njeno delovanje 2. DEL

Ko imamo na izbiro naše božično drevo s številkami LED in barv, moramo ustvariti območja in nanje uporabiti dejanja, zato bo, ko kliknemo na barvno LED v razdelku za izbiro slike, izbrana barva in ena kliknemo na LED, ukaz bo poslan na strežnik, kjer bo Arduino izbral svojo vrednost.

V HTML5, najnovejšem standardu HTML, obstaja nekaj, kar se imenuje slikovni zemljevid. Omogoča nam, da na sliki določimo področja, na katera lahko uporabimo poslušalce dejanj.

Ker moramo določiti veliko področij, smo za opredelitev teh področij uporabili spletno orodje https://www.image-map.net/ in kodo HTML kopirali na našo stran.

Ko to storimo, lahko na vsako od teh področij postavimo dogodek onclick s funkcijo, ki jo pokliče, in parametrom številke LED. Oglejte si zgornji posnetek zaslona.

13. korak: Razumevanje sprednje kode in njeno delovanje 3. DEL

Znotraj konca telesa HTML v regiji smo dali nekaj JavaScripta, da definiramo funkcije, ki jih kličemo pri dogodkih onclick. Globalno definiramo XMLHttpRequest, ki ga uporabljamo za pošiljanje zahteve PUT

Imamo dve funkciji:

funkcija set_color (val)

funkcija send_request (id)

Za preizkušanje zahteve API priporočam pogosto uporabljeno programsko orodje, imenovano Poštar https://www.postman.com/. Omogoča nam preprosto pošiljanje zahteve API -ja strežniku brez veščin programiranja. Omogoča posmeh strežniku in tudi sprejemanje zahtev.

14. korak: Razumevanje sprednje kode in njeno delovanje 4. DEL

Vaša aplikacija deluje.

Zavedajte se, da so številke obrnjene, to je, da je 20 1 in 1 je 20, to je zato, ker se LED na drevesu začne na dnu, vendar smo za boljšo uporabniško izkušnjo začeli voditi na vrh.

Če želite, boste še vedno morali ustvariti prenos v živo na YouTubu in kodo za vdelavo videoposnetka YouTube zamenjati z lastno.

Korak 15: Koda Arduino

ESP8266 izvaja osnovno skico odjemalca HTTP, ki je nekoliko spremenjena in prejema podatke z moje spletne strani prek klica API.

Prav tako boste morali namestiti knjižnice za nadzor LED traku, če želite uporabiti enak naslovljiv trak RGB kot jaz.

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

V skici, ki sem jo priložil, boste morali na svoje spletno mesto vnesti ime in geslo za wi-fi ter url (glej komentarje)

Odgovor HTTP v bistvu pretvorimo v niz, ki je vtipkan v C, zato lahko s funkcijo strtok C razdelimo niz z vejicami in napolnimo tabelo LED z vrednostmi, prebranimi s strežnika. Nato pokličemo funkcijo, ko gremo skozi tabelo, in na podlagi vrednosti obrnemo pravo barvo, ki jo pričakuje uporabnik.

To je to!

Čestitam, uspelo vam je!

Korak 16: RGB LED veriga

Ojoj. Zdaj je čas, da se malo odpočijete od vseh kodiranj:)

Ker ESP8266 nima veliko zatičev GPIO za posamezno upravljanje LED, sem uporabil to naslovljivo verigo LED RGB:

www.sparkfun.com/products/11020

Na ta način je mogoče vseh 20 RGB LED (skupaj 60 LED) upravljati samo z dvema zatičema - "podatki" in "ura" ter 5V napajanjem neposredno iz ESP8266.

Priključitev traku na NodeMcu je enostavna. 5V na Vin na NodeMcu (5V iz USB -ja), rumena žica na pin 12, zelena žica na pin 14, ozemljitev na zemljo.

Nastavite lahko posamezno barvo RGB in svetlost. Z nekaj mešanjem barv lahko za vsako LED ustvarite veliko barv.

Obstaja tudi zelo kul knjižnica za vse vrste kul efektov FX s temi LED. Preizkusite, če vam je všeč:

github.com/r41d/WS2801FX

17. korak: Okrasite božično drevo

Naj bo lepo in poskrbite, da bodo vse LED diode vidne in lepo razporejene po drevesu.

18. korak: Zadnji dotiki

Ko je drevo pripravljeno, naredite lepo fotografijo in ponovite korak za ustvarjanje slikovnega zemljevida položajev, ki jih je mogoče klikniti (LED položaji)

To je najbolj intuitiven način povezovanja z LED.

Če ne želite preveč komplicirati, lahko uporabite običajne gumbe.

Prav tako morate zagnati prenos svojega drevesa v živo na YouTubu (če želite spremljati dogajanje v realnem času) in vdelati tok na svoje spletno mesto.

Korak 19: Občudujte svojo spletno stran

Super ste, če ste prišli tako daleč:) Povabite svoje prijatelje (in mene seveda: P) in jih čim bolj klikajte na drevo:)

n

To je bil zelo dolg Instructable, za precej zapleten projekt. Ampak na koncu se splača: D

Hvala vam! Če želite ostati v stiku s tem, na čem delam:

Lahko se naročite na moj YouTube kanal:

www.youtube.com/c/JTMakesIt

Spremljate me lahko tudi na Facebooku in Instagramu

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

za spojlerje, na čem trenutno delam, zakulisje in druge dodatke! PS:., Če ti je bilo res, res všeč, mi lahko tukaj kupiš tudi kavo, tako da bom imel več energije za prihodnje projekte (ta mi je vzel 2 tedna spanja, saj sem to idejo prepozno dobil):)

www.buymeacoffee.com/JTMakesIt

In ne pozabite glasovati za ta Instructable na natečaju "Anything Goes":)