Verkkosivuston ohjaama joulukuusi (kuka tahansa voi hallita sitä): 19 vaihetta (kuvilla)

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Haluatko tietää miltä verkkosivustolla ohjattu joulukuusi näyttää?

Tässä on video, joka esittelee projektini joulukuusta. Suora lähetys on nyt päättynyt, mutta tein videon, jossa kerron tapahtumista:

Tänä vuonna, joulukuun puolivälissä, makasin sängyssä ja yritin nukkua keskellä työviikkoa. Ja nukkumisen sijaan ajattelin, mikä olisi hieno jouluprojekti. Ja sitten tuli mieleen hieno idea.

Koska olen laiska joulukoristeiden kanssa, olisi hienoa antaa jonkun muun ohjata jouluvalojani, joten minun ei tarvitse huolehtia siitä.

"Entä jos tekisin joulukuusilamput, joita KUKAAN voisi hallita verkkosivuston käyttöliittymän kautta?"

(lisää kaksi viikkoa unettomia öitä)

Joten onnistuin.

Joulukuusi, jossa on kaksikymmentä RGB -LEDiä yhdistettynä Internetiin ESP8266 Arduinon kautta.

Ystäväni (kiitos JP) auttoi minua perustamaan verkkosivuston (koska en ole sujuva ohjelmoija verkkosivustoihin liittyville asioille).

Ja perustimme puustani 24/7 youtube -livestriimin, jotta näet aina, mitä kytket päälle tai pois päältä.

Tämä projekti on ihanteellinen tälle vuodelle, koska monet meistä olivat suljetussa tilassa, eivät pystyneet tapaamaan ja seurustelemaan ystävien ja perheen kanssa. Mikset yhdistyisi joulukuun kautta:)

Tässä ohjeessa selitän yksityiskohtaisesti, miten tämä projekti tehtiin.

Vaihe 1: Taitotaso

Tämä projekti on enemmän ohjelmistosuuntautunut. Mutta älä pelkää. Onni ja Google -setän apu auttavat valtavasti:)

Sinulla on oltava 3 taitoa (tai opit ne ilman huolta): web -palvelinosa, Arduino -osa ja tietysti joulukuusi!

Suositeltava tieto:

• Perustietokone- ja ohjelmointitaidot

• Linux -päätelaitteiden perustiedot

• Tietokoneen perustiedot verkostosta

• Elektroniikan perustiedot

• Googlen ja muiden "erityisten" kykyjen käyttötaidot

• Pitäisi osata asettaa joulukuusi:)

Jos sinulla on jonkinlainen taito tekniikasta ja ohjelmoinnista, sinun pitäisi voida oppia asettamaan tämä asia tämän ohjeen mukaan.

Vaihe 2: Työkalut ja komponentit

Joulukuusen puolella tarvitset: • joulukuusi (d'oh…)

• NodeMCU-mikro-ohjainkortti

(voit myös käyttää ESP32: ta tai muita Wi-Fi- tai Ethernet-yhteensopivia kortteja)

• Osoitettava RGB -LED -nauha. Osoitteellinen RGB -LED -nauha säästää paljon Arduino GPIO -laitteita (https://www.sparkfun.com/products/11020)

• Ohjelmisto NodeMCU: lle (sisältyy tähän ohjeeseen)

Palvelinpuolella tarvitset:

• Virtuaalinen yksityinen palvelin, jolla on julkinen IP. Täältä saat 100 dollaria ilmaiseksi DigitalOceanissa

• Verkkotunnus (valinnainen), jonka voit rekisteröidä mihin tahansa rekisteröijäorganisaatioon, esimerkiksi

• Oma koodi (toimitetaan tämän ohjeen mukana)

Vaihe 3: Määritä virtuaalikone (tietokone) OSA 1

Mennään suoraan koodaukseen:)

Tarvitsemme palvelimen, joka kommunikoi verkkosivuston ja NodeMCU: n kanssa.

DigitalOceanin palvelimet mahdollistavat virtuaalikoneen, jolla on julkinen IP -osoite, mikä tarkoittaa, että voimme suorittaa palveluja sillä ja käyttää niitä maailmanlaajuisesti.

Kun olet maksanut DigitalOcean -kuukausitilauksen (voit käyttää 60 päivän ilmaista kokeilujaksoa), luo projekti ja nimeä se joulukuuseksi tai mitä haluat.

Voit nyt luoda virtuaalikoneesi (etäkäytettävän virtuaalitietokoneen) napsauttamalla "Aloita pisaralla" (joka on pohjimmiltaan DigitalOceanin nimi virtuaalikoneelle).

Määrityssivu tulee näkyviin, ja voit pysyä oletuksena: Ubuntu -kuva, perussuunnitelma ja ei estotilaa (5 dollaria kuukaudessa)

Vaihe 4: Määritä virtuaalikone (tietokone) OSA 2

Palvelinkeskus luodaan palvelinkeskukseksi.

Valitse lähin sinulle ja mahdollisille käyttäjillesi. Tämä antaa alhaisimman vasteajan.

Lisäksi Todennus -osassa sinua pyydetään antamaan salasana virtuaalikoneesi käyttämistä varten.

Viimeistele ja luo -osiossa säilytä oletusarvo 1 pisara, valitse isäntänimi (joulukuusi uudelleen), valitse aiemmin luotu projekti, jos sitä ei ole valittu oletusarvoisesti, ja napsauta Luo pisara. Tämä kestää muutaman minuutin. Napsauttamalla projektiasi vasemmalla olevassa navigointiosassa näet pisaran.

Vaihe 5: Määritä virtuaalikone (tietokone) OSA 3

Napsauttamalla pisaran oikealla puolella olevaa kolmea pistettä voit napsauttaa Access -konsolia, jolloin pääset käyttämään virtuaalitietokonettasi.

Uusi pieni selainikkuna avautuu. Tämä ei ole työpöytäympäristö, kuten Windows 10: ssä tai Ubuntussa, jossa on graafinen käyttöliittymä.

Kaikki voidaan kuitenkin tehdä konsolin käyttöliittymän kautta.

Ei se niin pelottavaa ole miltä näyttää:)

Vaihe 6: Määritä virtuaalikone (tietokone) OSA 4

Olet luonut oman virtuaalikoneesi DigitalOcean -pilveen.

Seuraavissa vaiheissa määrität Apache -nimisen verkkopalvelimen ja määrität oman verkkosivusi.

Lataa Filezilla-asiakas täältä https://filezilla-project.org/download.php?platfo… (tai etsi 32-bittinen versio 32-bittiselle käyttöjärjestelmälle) ja asenna se. Se on FTP (File Transfer Protocol) -asiakas.

Voit käyttää ja siirtää tiedostoja virtuaalikoneestasi ja sieltä.

Kun olet asentanut, napsauta tiedosto → sivustonhallinta → uusi sivusto ja syötä tiedot kuten yllä olevassa kuvassa.

Protokolla: SFTP (Secure File Transfer Protocol)

Isäntä: Palvelimesi IP -osoite, joka löytyy DigitalOcean -projektistasi.

Käyttäjä on pääkäyttäjä ja salasana on se, jonka asetit sen luomisen yhteydessä.

Napsauta OK ja muodosta yhteys virtuaalikoneeseesi.

Sinua varoitetaan, isäntäavain on tuntematon. Seuraa toista kuvaa.

Luo projektille paikallinen kansio ja poimi täältä lataamasi projektitiedostot.

Voit muokata tiedostojasi tietokoneellasi ja siirtää ne virtuaalikoneeseesi aina, kun haluat testata tai päivittää koodin.

Vaihe 7: Asenna verkkopalvelin

Kirjaudu pisarakonsoliin käyttäjätunnuksellasi ja salasanallasi.

Koska meillä ei ole graafista käyttöliittymää, käytämme komentoja virtuaalikoneesi ohjaamiseen. Seuraavassa on joitain yleisiä komentoja, joita käytät Ubuntussa (Linux):

• pwd - tulosta nykyinen hakemistoni

• ls - luetteloi nykyisen hakemistoni tiedostot ja kansiot

• cd / - siirry / hakemistoon (kansio, joka sisältää Linuxin päähakemistot, kuten etc, bin, boot, dev, root, home, var ja niin edelleen)

Käynnillä tarkoitan komentoa ja paina enter.

Päivitämme nyt järjestelmän apt -get update -y.

Asenna Apache -verkkopalvelin suorittamalla apt install apache2 -y.

Apache-aloitusnäytön pitäisi olla käytettävissä https:// virtual-machine-ip -selaimellasi selaimestasi.

Korvaa virtual-machine-ip virtuaalikoneesi ip: llä, esimerkiksi 165.12.45.123. Voit myös ohittaa https://, koska se lisätään automaattisesti.

Onnittelut!

Huomautus:

Jos haluat, että verkkosivustosi on käytettävissä nimen kautta IP -osoitteen sijaan (kuten käytin https://blinkmytree.live/), siirry verkkotunnuksen tarjoajan sivustoon GoDaddy tai vastaava (namecheap.com jne.) Ja seuraa ohjeita täällä:

Jotkut verkkotunnukset ovat erittäin halpoja. Verkkotunnukseni maksoi vain 2 dollaria vuodessa. Ehdottomasti rahan arvoinen:)

Vaihe 8: Asenna verkkosovelluskehys

Takaisin konsoliin. Älä pelkää:)

Luo Filezillan avulla kansio nimeltä app sisälle /home, joten /home /app on kansio

Suorita cd /home /app siirtyäksesi sovelluskansioon.

Suorita apt install npm -y asennusohjelman npm paketinhallintaan. Tämä kestää muutaman minuutin.

Suorita npm init -y ja luo tiedosto package.json, joka seuraa/muistaa sovelluksen tärkeimmät pakettitiedot.

Suorita npm -tallenna asennus cors express asentaaksesi moduulit cors, express

Cors on moduuli sivustojen välisen pääsyn määrittämiseen ja express on verkkosovelluskehys.

Npm on käyttämämme paketinhallintaohjelmisto, ja käytämme node.js JavaScriptin ajonaikaista ohjelmointirajapintaa (API), joka yhdessä http -palvelimen kanssa hyväksyy HTTP -pyynnöt LEDien väreille, merkitsee niiden arvot (värit) muistiin ja välitä arvot NodeMcuille, kun se sitä pyytää.

Huomautus: NodeMcu -solmulla ei ole mitään tekemistä node.js -solmun kanssa. NodeMcu voidaan korvata millä tahansa Internetiin yhdistetyllä arduino -kehityskortilla, NXP -kehityskortilla tai mukautetulla Microchip/NXP/Renesas/STM/Atmel -piirilevyllä. Node.js voidaan myös korvata. Net -kehyksellä, PHP: llä tai muulla alustalla. Mutta yksinkertaisuuden vuoksi käytämme NodeMCU: ta ja Node.js.

Tehdään nyt testi, jos voimme suorittaa pienen ohjelman solmussa.js

Luo tiedosto nimeltä index.js, jossa on muistio/muistilehtiö ++ tai jokin muu editori tai käyttöympäristö, jota käytät (Visual Studio Code https://code.visualstudio.com/) paikalliseen kansioon.

Laita tähän koodi:

var http = vaatia ('http');

http.createServer (function (req, res) {

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

res.end ('Hei maailma!');

}). kuuntele (8080);

Tallenna se ja siirrä se kansioon/kotiin/sovellukseen nimellä index.js kaksoisnapsauttamalla/vetämällä tiedosto FileZillan tiedostoon.

Suorita solmu index.js ja anna sen olla käynnissä.

Nyt pääsemme sivullemme osoitteessa https:// virtual-machine-ip: 8080 selaimeltamme. Näkyviin tulee valkoinen sivu, jossa on Hello World -teksti.

Onnittelut, olet juuri luonut verkkopalvelimen node.js -osoitteeseen!

Vaihe 9: Valmistele ohjelmisto

Siirry konsoliin ja pysäytä ohjelma painamalla ctrl+C.

Korvaa index.js -tiedostosi/home/app/ja korvaa se index.js -tiedostolla.

Voit ladata kaikki verkkosivuston tiedostot täältä:

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

Kopioi joulukuusikoodimme html -kansiosta etähakemistoon/var/www/html/Filezillan avulla. Se kestää jonkin aikaa. Jos se pyytää sinua, korvaa index.html uudella.

Aseta IP -osoite uudelleen suosikkiselaimellesi.

Olet juuri asettanut verkkosovelluksesi käyttöliittymän saataville osoitteessa https:// virtual-machine-ip.

Vaihe 10: Taustakoodin ymmärtäminen ja sen toimiminen

Huomautus: taustakoodisi on /home /app

Muista, että kun olet muokannut koodiasi paikallisesti, älä unohda ladata sitä palvelimellesi FileZillalla ja käynnistä solmusovellus uudelleen (konsoli: ctrl+c, nuoli ylös (näyttää viimeisen komennon node index.js), enter)

Jotta koodi toimisi, sinun on ensin syötettävä muutama tieto.

Ensinnäkin sinun on vaihdettava isäntänimen muuttuja index.js -tiedostossa omaan verkkotunnukseesi tai IP -osoitteeseesi (jotain, joka näyttää: 165.13.45.123).

Toiseksi opastan sinua koodin ymmärtämiseksi. Varmista, että et ohita kommentteja, jotka olen kirjoittanut koodiin.

Tiedostosta index.js näet, että luomme sovelluksen pikamoduulin avulla. Sitten käytämme siihen CORS -sääntöjä, lisäämme sovellusliittymät ja aloitamme http -palvelimen. Tämä palvelin ei palvele verkkosivua GET-http-pyyntöjen kautta, mutta se palvelee led-tiloja GET-http-pyynnön kautta ja päivittää led-tilat vastaanotetuista PUT-http-pyynnöistä.

Sovellusliittymät ovat yleinen käytäntö tietojen vaihtamisessa sovellusten välillä. Yleisimmin käytämme itse käyttämiämme REST -sovellusliittymiä. Ne ovat kansalaisuudettomia, eikä niillä ole jatkuvaa yhteyttä (shorturl.at/aoBC3, PUT -pyynnöt yksinkertaisesti päivittävät LED -tilat sovellusmatriisimuuttujassa (muisti), GET -pyynnöt yksinkertaisesti lähettävät led -tilat asiakkaalle.

Vastaus asiakkaalle on yleensä JSON -merkinnöissä, mutta tähän yksinkertaiseen 30 LED -tilan vastaukseen lähetämme vain 30 pilkulla erotetun arvon merkkijonon.

Vaihe 11: Käyttöliittymän ymmärtäminen ja toimiminen OSA 1

Huomautus: käyttöliittymäkoodisi on/var/www/html

Muista, että kun olet muokannut koodiasi paikallisesti, älä unohda ladata sitä palvelimellesi FileZillan avulla. Toisin kuin node.js, Apache käynnistyy uudelleen automaattisesti, mutta sinun on ladattava sivu uudelleen selaimessasi. Päivitä ja poista myös sivusi välimuisti näppäinyhdistelmällä ctrl+f5.

Jotta koodi toimisi, sinun on syötettävä vähän tietoja. Ensin sinun on muutettava index.html -tiedoston send_request -funktion url -muuttuja blinkmytree.live -osoitteesta omaan verkkotunnukseen tai IP -osoitteeseen, esimerkiksi: 165.13.45.123.

Toiseksi opastan sinua koodin ymmärtämiseksi. Varmista, että et ohita kommentteja, jotka olen kirjoittanut koodiin. Sivu on HTML -asiakirja. Jättämällä kaikki CSS -säännöt (sivutyyli ja sisällön sijainti) sivuun, tarkastelemme toiminnallisuuden kannalta tärkeää sisältöä. Lisätietoja CSS: stä on osoitteessa

Halusimme sivulle nämä pääominaisuudet (ketterien menetelmien asiantuntijat sanoisivat käyttäjäjuttuja):

• Sivulle upotettu live -video

• Joulukuun napsautettavat LED -valot, joita käsiteltiin Gimp -kuvankäsittelyohjelmassa (https://www.gimp.org/).

• Todellinen kommunikointi palvelimen kanssa odottaen led -tilojen vaihtamista.

Vaihe 12: Käyttöliittymän ymmärtäminen ja toimiminen OSA 2

Kun meillä on joulukuusi, jossa on valittavia LED -valoja ja värejä, meidän on luotava alueita ja sovellettava niihin toimintoja, joten kun napsautamme värillistä LEDiä kuvan poimintaosassa, väri valitaan ja yksi napsautamme LEDiä, komento lähetetään palvelimelle, jossa Arduino valitsee arvon.

Uusimmassa HTML5 -standardissa HTML5: ssä on kuvakartta. Sen avulla voimme määritellä kuvalle alueita, joita voimme käyttää toiminnon kuuntelijoihin.

Koska meillä on paljon määriteltäviä alueita, määritimme nämä alueet online-työkalulla https://www.image-map.net/ ja kopioimme HTML-koodin sivullemme.

Kun olemme tehneet sen, voimme laittaa onclick -tapahtuman sen kutsumalla toiminnolla ja LED -numeron parametrin kullekin näistä alueista. Katso kuvakaappaus yllä.

Vaihe 13: Käyttöliittymän ymmärtäminen ja toimiminen OSA 3

HTML -tekstin loppuun, alueelle, laitamme jonkin verran JavaScriptiä määritelläksemme toiminnot, joita kutsumme onclick -tapahtumiin. Maailmanlaajuisesti määritämme XMLHttpRequest, jota käytämme PUT -pyynnön lähettämiseen

Meillä on kaksi toimintoa:

toiminto set_color (val)

toiminto send_request (id)

API -pyynnön testaamiseen suosittelen yleisesti käytettyä ohjelmistotyökalua nimeltä Postman https://www.postman.com/. Sen avulla voimme yksinkertaisesti lähettää API -pyynnön palvelimelle ilman ohjelmointitaitoja. Sen avulla voidaan pilkata palvelinta ja hyväksyä myös pyyntöjä.

Vaihe 14: Käyttöliittymän ymmärtäminen ja toimiminen OSA 4

Sovelluksesi toimii.

Huomaa, että numerot ovat päinvastaisia, eli 20 on 1 ja 1 on 20, koska puun LED -valot alkavat alhaalta, mutta paremman käyttökokemuksen vuoksi laitamme alkuun johtavan alkuun.

Jos haluat, sinun on silti luotava suoratoisto YouTubessa ja korvattava YouTube -videon upotuskoodi omallasi.

Vaihe 15: Arduino -koodi

ESP8266 suorittaa HTTP -asiakasesimerkin luonnoksen, jota on muutettu hieman ja joka vastaanottaa tiedot verkkosivustoltani API -kutsun kautta.

Sinun on myös asennettava kirjastoja LED -nauhan hallitsemiseksi, jos haluat käyttää samaa osoitteellista RGB -nauhaa kuin minä.

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

Liitteessäni luonnoksessa sinun on lisättävä wi-fi-nimesi ja salasanasi URL-osoitteeksi verkkosivustollesi (katso kommentit)

Muuntamme periaatteessa http-vastauksen C-tyypin merkkijonoksi, joten voimme käyttää funktiota strtok jakamaan merkkijonon pilkuilla ja täyttämään led-taulukon palvelimelta luetuilla arvoilla. Me kutsumme funktiota, jossa käymme taulukon läpi, ja muutamme arvojen perusteella oikean värin, jota käyttäjä odottaa.

Siinäpä se!

Onnittelut, onnistuit!

Vaihe 16: RGB -LED -ketju

Voi ei. Nyt on aika pitää pieni tauko kaikesta koodauksesta:)

Koska ESP8266: ssa ei ole monia GPIO -nastoja LEDien ohjaamiseen yksitellen, käytin tätä osoitettavaa RGB -LED -ketjua:

www.sparkfun.com/products/11020

Tällä tavalla kaikkia 20 RGB -lediä (yhteensä 60 lediä) voidaan ohjata vain kahdella nastalla - "data" ja "kello" ja 5 V: n virta suoraan ESP8266: sta.

Nauhan liittäminen NodeMcuun on helppoa. 5V Viniin NodeMcu: ssa (5V USB: stä), keltainen johto nastaan 12, vihreä johto nastaan 14, maadoitettu maahan.

Voit asettaa yksilöllisen RGB -värin ja kirkkauden. Joidenkin värien sekoittamisen avulla voit tuottaa PALJON värejä kullekin LED -valolle.

Näillä LEDeillä on myös erittäin viileä kirjasto kaikenlaisille viileille FX -tehosteille. Kokeile, jos pidät:

github.com/r41d/WS2801FX

Vaihe 17: Koristele joulukuusi

Tee siitä kaunis ja varmista, että kaikki LEDit näkyvät ja leviävät kauniisti puun yli.

Vaihe 18: Viimeiset kosketukset

Kun puu on valmis, ota hieno valokuva ja toista vaihe, jolla luot napsautettavien paikkojen (LED -sijainnit) kuvakartan

Tämä on intuitiivisin tapa liittää LEDit.

Jos et halua tehdä asioista liian monimutkaisia, voit käyttää tavallisia painikkeita.

Sinun pitäisi myös aloittaa puun suoratoisto YouTubessa (jos haluat seurata reaaliajassa tapahtuvaa) ja upottaa stream sivustoosi.

Vaihe 19: Ihaile verkkosivustoasi

Olet mahtava, jos olet päässyt tähän asti:) Kutsu ystäväsi (ja tietysti minä: P) ja pakota heidät napsauttamaan puusi mahdollisimman paljon:)

n

Tämä oli erittäin pitkä Instructable, melko monimutkaiselle projektille. Mutta se on sen arvoista lopussa: D

Kiitos! Jos haluat pysyä yhteydessä siihen, mitä työstän:

Voit tilata YouTube -kanavani:

www.youtube.com/c/JTMakesIt

Voit seurata minua myös Facebookissa ja Instagramissa

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

spoilereille siitä, mitä parhaillaan työskentelen, kulissien takana ja muita lisäosia! PS:. Jos todella, todella pidit siitä, voit myös ostaa minulle kahvin täältä, joten minulla on enemmän energiaa tuleviin projekteihin (tämä vei 2 viikon unen pois minulta, koska sain tämän idean liian myöhään):)

www.buymeacoffee.com/JTMakesIt

Ja älä unohda äänestää tätä Instructablea "Anything Goes" -kilpailussa:)