Svetainės valdoma Kalėdų eglutė (ją gali valdyti kiekvienas): 19 žingsnių (su paveikslėliais)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Norite sužinoti, kaip atrodo svetainėje valdoma Kalėdų eglutė?

Čia yra vaizdo įrašas, parodantis mano Kalėdų eglutės projektą. Tiesioginis srautas jau baigėsi, bet aš padariau vaizdo įrašą, kuriame užfiksavau, kas vyksta:

Šiemet, gruodžio viduryje, gulėjau savo lovoje ir bandžiau užmigti vidury darbo savaitės. Ir vietoj miego galvojau, ką būtų šaunus Kalėdų projektas. Ir tada man kilo šauni idėja.

Kadangi esu tingus kalėdiniais papuošimais, būtų šaunu leisti kam nors kitam valdyti mano kalėdines lemputes, todėl neturėsiu dėl to jaudintis.

"O kas, jei aš padarysiu Kalėdų eglutės žibintus, kuriuos bet kas galėtų valdyti per svetainės sąsają?"

(įterpkite dvi savaites bemiegių naktų)

Taigi man pavyko.

Kalėdų eglutė su dvidešimčia RGB šviesos diodų, prijungta prie interneto per ESP8266 Arduino.

Mano draugas (ačiū JP) padėjo man sukurti svetainę (nes nesu sklandus programuotojas, susijęs su svetainėmis).

Ir mes sukūrėme 24/7 „YouTube“tiesioginį mano medžio srautą, kad jūs visada matytumėte, ką įjungiate ar išjungiate.

Šis projektas idealiai tinka šiais metais, nes daugelis iš mūsų buvo užrakinti, negalėdami susitikti ir pabendrauti su draugais ir šeima. Kodėl gi nesusivienijus per Kalėdų eglutę?:)

Šioje instrukcijoje išsamiai paaiškinsiu, kaip buvo sukurtas šis projektas.

1 žingsnis: įgūdžių lygis

Šis projektas labiau orientuotas į programinę įrangą. Bet nebijok Šiek tiek sėkmės ir dėdės „Google“pagalbos nepaprastai padės:)

Turėsite turėti 3 įgūdžių rinkinį (arba išmoksite juos nesijaudindami): žiniatinklio serverio dalį, „Arduino“dalį ir, žinoma, Kalėdų eglutę!

Rekomenduojamos žinios:

• Pagrindiniai darbo kompiuteriu ir programavimo įgūdžiai

• Pagrindinės „Linux“terminalo žinios

• Pagrindinės kompiuterių tinklo žinios

• Pagrindinės elektronikos žinios

• „Google“ir kitų „ypatingų“gebėjimų naudojimo įgūdžiai

• Turėtumėte žinoti, kaip pastatyti Kalėdų eglutę:)

Jei turite tam tikrą technologijos ir programavimo pojūtį, turėtumėte išmokti tai nustatyti pagal šią instrukciją.

2 žingsnis: įrankiai ir komponentai

Kalėdų eglutės pusėje jums reikės: • Kalėdų eglutės (d'oh…)

• „NodeMCU“mikrovaldiklio plokštė

(taip pat galite naudoti ESP32 ar kitas „Wi-Fi“ar „Ethernet“palaikančias plokštes)

• Adresuojama RGB LED juostelė. adresuojama RGB LED juostelė sutaupys daug „Arduino GPIO“(https://www.sparkfun.com/products/11020)

• „NodeMCU“programinė įranga (pateikiama šioje instrukcijoje)

Serverio pusėje jums reikės:

• Virtualus privatus serveris su viešu IP. Čia jūs gaunate 100 USD nemokamai „DigitalOcean“https://m.do.co/c/96d53c569fdb

• Domenas (pasirenkamas), kurį galite užregistruoti bet kurioje registratoriaus organizacijoje, pavyzdžiui, • Specialus kodas (pateikiamas kartu su šia instrukcija)

3 veiksmas: sukonfigūruokite virtualią mašiną (kompiuterį) 1 DALIS

Eikime tiesiai į kodavimą:)

Mums reikia serverio, kuris palaikys ryšį su svetaine ir „NodeMCU“.

„DigitalOcean“serveriai leidžia mums turėti virtualią mašiną su viešu IP adresu, o tai reiškia, kad galime paleisti paslaugas ir pasiekti jas visame pasaulyje.

Sumokėję „DigitalOcean“mėnesio prenumeratą (galite naudoti 60 dienų nemokamą bandomąją versiją), sukurkite projektą ir pavadinkite jį Kalėdų eglute ar bet kuo.

Dabar galite sukurti savo virtualią mašiną (nuotoliniu būdu pasiekiamą virtualų kompiuterį) spustelėdami „Pradėti nuo lašelio“(tai iš esmės yra „DigitalOcean“virtualios mašinos pavadinimas).

Pasirodys konfigūracijos puslapis ir galėsite likti pagal numatytuosius nustatymus: „Ubuntu“vaizdas, pagrindinis planas ir nėra blokavimo saugyklos (5 USD per mėnesį)

4 veiksmas: sukonfigūruokite virtualią mašiną (kompiuterį) 2 DALIS

Duomenų centro regionas yra vieta, kur bus sukurtas jūsų serveris.

Pasirinkite artimiausią jums ir jūsų potencialiems vartotojams. Tai užtikrins mažiausią atsako laiką.

Be to, skyriuje Autentifikavimas jūsų bus paprašyta įvesti slaptažodį, kad galėtumėte pasiekti savo virtualią mašiną.

Skiltyje „Užbaigti ir sukurti“išsaugokite numatytąjį 1 lašelį, pasirinkite pagrindinio kompiuterio pavadinimą (Kalėdų eglutė dar kartą), pasirinkite anksčiau sukurtą projektą, jei jis nebuvo pasirinktas pagal numatytuosius nustatymus, ir spustelėkite „Sukurti lašelį“. Tai užtruks kelias minutes. Spustelėję savo projektą naršymo skiltyje kairėje, pamatysite savo lašelį.

5 veiksmas: sukonfigūruokite virtualią mašiną (kompiuterį) 3 DALIS

Spustelėję tris taškus lašelio dešinėje, galite spustelėti „Access console“, kuri leis pasiekti virtualų kompiuterį.

Bus atidarytas naujas mažas naršyklės langas. Dabar tai nėra darbalaukio aplinka, kaip jūsų „Windows 10“ar „Ubuntu“su grafine sąsaja.

Tačiau viską galima padaryti per konsolės sąsają.

Nėra taip baisu, kaip atrodo:)

6 veiksmas: sukonfigūruokite virtualią mašiną (kompiuterį) 4 DALIS

Sėkmingai sukūrėte savo virtualią mašiną „DigitalOcean“debesyje.

Tolesniuose veiksmuose sukursite žiniatinklio serverį, pavadintą „Apache“, ir sukursite savo tinklalapį.

Atsisiųskite „Filezilla“klientą čia https://filezilla-project.org/download.php?platfo… (arba raskite 32 bitų versiją 32 bitų operacinei sistemai) ir įdiekite ją. Tai FTP (failų perdavimo protokolas) klientas.

Galėsite pasiekti ir perkelti failus iš savo virtualios mašinos ir į ją.

Įdiegę spustelėkite failą → svetainės tvarkyklė → nauja svetainė ir įveskite duomenis kaip aukščiau esančiame paveikslėlyje.

Protokolas: SFTP (saugaus failų perdavimo protokolas)

Priimančioji: savo serverio IP, suraskite savo „DigitalOcean“projekte.

Vartotojas yra root ir slaptažodis yra tai, ką nustatėte kurdami lašelį.

Spustelėkite Gerai ir prisijunkite prie savo virtualios mašinos.

Būsite įspėti, pagrindinio kompiuterio raktas nežinomas. Sekite antrą vaizdą.

Sukurkite vietinį projekto aplanką ir išskleiskite čia atsisiųstus projekto failus.

Jūs redaguosite failus savo kompiuteryje ir perkelsite juos į savo virtualią mašiną kiekvieną kartą, kai norite išbandyti ar atnaujinti kodą.

7 veiksmas: įdiekite žiniatinklio serverį

Prisijunkite prie savo lašelių konsolės naudodami vartotojo vardą root ir slaptažodį.

Kadangi neturime grafinės sąsajos, mes naudojame komandas jūsų virtualiai mašinai valdyti. Štai keletas bendrų komandų, kurias naudosite „Ubuntu“(„Linux“):

• pwd - spausdinti dabartinį katalogą

• ls - sąrašas failų ir aplankų mano dabartiniame kataloge

• cd / - pereiti į / katalogą (aplanką, kuriame yra pagrindiniai „Linux“katalogai, pvz., Tt, bin, boot, dev, root, home, var ir pan.)

Turėdamas omenyje „Run“, įveskite komandą ir paspauskite „Enter“.

Dabar paleisime apt -get update -y, kad atnaujintume sistemą.

Norėdami įdiegti „Apache“žiniatinklio serverį, paleiskite apt install apache2 -y.

„Apache“pasveikinimo ekranas turėtų būti pasiekiamas jūsų https:// virtual-machine-ip naršyklėje.

Pakeiskite virtual-machine-ip savo virtualios mašinos ip, pavyzdžiui, 165.12.45.123. Taip pat galite praleisti https://, nes jis bus automatiškai pridėtas.

Sveikinimai!

Pastaba:

Jei norite, kad jūsų svetainė būtų pasiekiama naudojant pavadinimą, o ne IP adresą (pvz., Naudojau https://blinkmytree.live/), eikite į domeno teikėjo svetainę „GoDaddy“ar panašią svetainę (namecheap.com ir kt.) Ir vadovaukitės instrukcijomis čia:

Kai kurie domenų vardai yra labai nebrangūs. Mano domenas kainavo tik 2 USD per metus. Tikrai verta pinigų:)

8 veiksmas: įdiekite žiniatinklio programų sistemą

Grįžkime prie mūsų konsolės. Nebijok:)

Naudokite „Filezilla“, kad sukurtumėte aplanką pavadinimu app viduje /home, taigi /home /app bus jūsų aplankas

Norėdami pereiti į programos aplanką, paleiskite cd /home /app.

Paleiskite apt install npm -y, kad įdiegtumėte npm paketų tvarkyklę. Tai užtruks kelias minutes.

Paleiskite „npm init -y“, kad sukurtumėte failą „package.json“, kuris stebės/prisimins pagrindinius programos paketo duomenis.

Vykdyti npm -išsaugokite „install cors express“, kad įdiegtumėte modulius cors, express

„Cors“yra modulis, skirtas sukonfigūruoti kelių svetainių prieigą, o „Express“yra žiniatinklio programų sistema.

„Npm“yra paketų tvarkyklė, kurią mes naudojome, ir mes naudosime „JavaScript“vykdymo laiką programų programavimo sąsajai (API) programuoti, kuri kartu su http serveriu priims HTTP užklausas dėl spalvų pritaikymo šviesos diodams, pažymės jų reikšmes (spalvas) atmintyje ir perduokite reikšmes „NodeMcu“, kai to paprašo.

Pastaba: „NodeMcu“mazgas neturi nieko bendra su mazgu node.js. „NodeMcu“galima pakeisti bet kuria prie interneto prijungta arduino kūrimo plokšte, NXP kūrimo plokšte arba pasirinktine „Microchip“/NXP/„Renesas“/STM/„Atmel“PCB. „Node.js“taip pat gali būti pakeistas. Net Framework, PHP ar bet kuria kita platforma. Tačiau paprastumo dėlei naudojame „NodeMCU“ir „Node.js“.

Dabar padarykime testą, ar galime paleisti nedidelę programą „node.js“

Vietiniame aplanke sukurkite failą pavadinimu index.js naudodami užrašų knygelę/užrašų knygelę ++ arba kitą redaktorių arba integruotą kūrimo aplinką („Visual Studio Code“https://code.visualstudio.com/).

Įdėkite šį kodą:

var http = reikalauti ('http');

http.createServer (funkcija (req, res) {

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

res.end ('Labas pasaulis!');

}). klausykitės (8080);

Išsaugokite jį ir perkelkite į aplanką/namus/programą kaip index.js, dukart spustelėdami/nuvilkdami failą „FileZilla“.

Paleiskite mazgą index.js ir palikite jį veikti.

Dabar iš savo naršyklės galime pasiekti savo puslapį adresu https:// virtual-machine-ip: 8080. Bus rodomas baltas puslapis su „Hello World“tekstu.

Sveikiname, ką tik sukūrėte žiniatinklio serverį „node.js“!

9 žingsnis: Paruoškite programinę įrangą

Eikite į konsolę ir sustabdykite programą paspausdami „Ctrl“+C.

Pakeiskite savo index.js failą/home/app/ir pakeiskite jį į mūsų index.js.

Visus svetainės failus galite atsisiųsti čia:

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

Nukopijuokite mūsų Kalėdų eglutės kodą iš html aplanko į nuotolinį katalogą/var/www/html/naudodami „Filezilla“. Tai užtruks šiek tiek laiko. Jei jūsų paprašys, pakeiskite index.html nauju.

Vėl įdėkite savo IP į savo mėgstamą interneto naršyklę.

Jūs ką tik padarėte savo žiniatinklio programų sąsają prieinamą https:// virtual-machine-ip.

10 veiksmas: nesupraskite galinio kodo ir priverskite jį veikti

Pastaba: jūsų galinis kodas yra /home /app

Atminkite, kad redagavę kodą vietoje, nepamirškite įkelti jo į savo serverį naudodami „FileZilla“ir iš naujo paleiskite mazgo programą (konsolė: ctrl+c, rodyklė aukštyn (rodo paskutinę komandą node index.js), įveskite)

Kad kodas veiktų, pirmiausia turėsite įvesti keletą duomenų.

Pirma, turėsite pakeisti index.js pagrindinio kompiuterio kintamąjį į savo domeną arba IP (kažkas panašaus į: 165.13.45.123).

Antra, aš padėsiu jums suprasti kodą. Nepamirškite praleisti komentarų, kuriuos pateikiau kodu.

Faile index.js matote, kad mes sukuriame programą naudodami greitąjį modulį. Tada pritaikome CORS taisykles, pridedame API ir paleidžiame http serverį. Šis serveris nepateiks tinklalapio per GET http užklausas, tačiau jis aptarnaus vedamas būsenas per GET http užklausą ir atnaujins vedamas būsenas gautose PUT http užklausose.

API yra įprasta keistis informacija tarp programų. Dažniausiai naudojame REST API, kurias naudojame patys. Jie yra be pilietybės ir neturi nuolatinio ryšio (shorturl.at/aoBC3, PUT užklausos tiesiog atnaujina vedamas būsenas programų masyvo kintamajame (atmintyje), GET užklausos tiesiog siunčia ledines būsenas klientui.

Atsakymas klientui paprastai pateikiamas JSON žymėjime, tačiau į šį paprastą 30 LED būsenų atsakymą mes tiesiog siunčiame 30 kableliais atskirtų verčių.

11 veiksmas: „Front-end Code“supratimas ir jo veikimas 1 DALIS

Pastaba: jūsų vartotojo sąsajos kodas yra/var/www/html

Atminkite, kad vietiniu redagavimu nepamirškite įkelti jo į savo serverį naudodami „FileZilla“. Skirtingai nuo node.js, „Apache“automatiškai paleidžiamas iš naujo, tačiau turėsite iš naujo įkelti puslapį į savo naršyklę. Norėdami atnaujinti ir ištrinti savo puslapio talpyklą, naudokite ctrl+f5.

Kad kodas veiktų, turėsite įvesti keletą duomenų. Pirma, turėsite pakeisti URL kintamąjį funkcijoje send_request, esantį index.html, iš blinkmytree.live į savo domeną arba IP, pavyzdžiui: 165.13.45.123.

Antra, aš padėsiu jums suprasti kodą. Nepamirškite praleisti komentarų, kuriuos pateikiau kodu. Puslapis yra HTML dokumentas. Palikdami nuošalyje visas CSS taisykles (puslapio stilių ir turinio poziciją), apžvelgsime svarbų funkcionalumą. Norėdami sužinoti daugiau apie CSS, apsilankykite

Mes norėjome šios pagrindinės funkcijos (judrių metodų ekspertai pasakytų naudotojų istorijas) puslapyje:

• Tiesioginis vaizdo įrašas įterptas į puslapį

• Paspaudžiami Kalėdų eglutės šviesos diodai, kuriais buvo manipuliuojama „Gimp“vaizdo redaktoriuje (https://www.gimp.org/).

• Faktinis bendravimas su serveriu, laukiantis, kol pasikeis vedamos būsenos.

12 veiksmas: „Front-end Code“supratimas ir jo veikimas 2 DALIS

Kai turėsime savo Kalėdų eglutę su daugybe šviesos diodų ir spalvų, kurias turime pasirinkti, turime sukurti sritis ir pritaikyti joms veiksmus, taigi, kai spustelėsime spalvotą šviesos diodą vaizdo rinkiklio skiltyje, bus pasirinkta spalva ir viena spustelime šviesos diodą, komanda bus nusiųsta į serverį, kur „Arduino“pasirinks jo vertę.

Naujausiame HTML standarte HTML5 yra kažkas, kas vadinama vaizdo žemėlapiu. Tai leidžia mums apibrėžti vaizdo sritis, kurias galime pritaikyti veiksmo klausytojams.

Kadangi turime daug sričių, kurias reikia apibrėžti, šioms sritims apibrėžti naudojome internetinį https://www.image-map.net/ įrankį ir nukopijavome HTML kodą į mūsų puslapį.

Kai tai padarysime, į kiekvieną iš šių sričių galime įdėti „onclick“įvykį su jo iškviesta funkcija ir LED numerio parametru. Žr. Ekrano kopiją aukščiau.

13 veiksmas: „Front-end Code“supratimas ir jo veikimas 3 DALIS

HTML turinio gale, regione, įdėjome „JavaScript“, kad apibrėžtume funkcijas, kurias iškviečiame „onclick“įvykių metu. Visame pasaulyje mes apibrėžiame XMLHttpRequest, kurį naudojame PUT užklausai siųsti

Turime dvi funkcijas:

funkcija set_color (val)

funkcija send_request (id)

Norėdami išbandyti API užklausą, rekomenduoju dažniausiai naudojamą programinės įrangos įrankį, pavadintą „Postman“https://www.postman.com/. Tai leidžia mums tiesiog nusiųsti API užklausą į serverį be programavimo įgūdžių. Tai leidžia tyčiotis iš serverio ir priimti užklausas.

14 veiksmas: „Front-end Code“supratimas ir jo veikimas 4 DALIS

Jūsų programa veikia.

Atminkite, kad skaičiai yra atvirkštiniai, tai yra, 20 yra 1, o 1 yra 20, nes medžio šviesos diodai prasideda apačioje, tačiau, siekiant geresnės vartotojo patirties, pradžią vedame į viršų.

Jei norite, vis tiek turėsite sukurti tiesioginį srautą „YouTube“ir pakeisti „YouTube“vaizdo įrašo įterpimo kodą savo.

15 žingsnis: „Arduino“kodas

ESP8266 vykdo pagrindinį HTTP kliento pavyzdžio eskizą, kuris yra šiek tiek pakeistas ir gauna duomenis iš mano svetainės per API skambutį.

Jei norite naudoti tą pačią adresuojamą RGB juostą, kaip ir aš, turėsite įdiegti bibliotekas, skirtas LED juostelėms valdyti.

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

Pridėtame eskize turėsite į savo svetainę įterpti savo „Wi-Fi“vardą ir slaptažodį bei URL (žr. Komentarus)

Mes iš esmės konvertuojame http atsakymą į C tipo eilutę, todėl galime naudoti funkciją C strtok, kad padalintume eilutę kableliais ir užpildytume LED lentelę vertėmis, nuskaitytomis iš serverio. Mes nevadiname funkcijos, kai einame per lentelę ir, remdamiesi vertėmis, sukuriame teisingą spalvą, kurios vartotojas tikisi.

Štai ir viskas!

Sveikinu, tau pavyko!

16 žingsnis: RGB LED grandinė

Uh Oh. Dabar atėjo laikas šiek tiek pailsėti nuo viso kodavimo:)

Kadangi ESP8266 nėra daug GPIO kaiščių, skirtų atskirai valdyti šviesos diodus, aš naudoju šią adresuojamą RGB LED grandinę:

www.sparkfun.com/products/11020

Tokiu būdu visus 20 RGB šviesos diodų (iš viso 60 šviesos diodų) galima valdyti tik dviem kaiščiais - „duomenimis“ir „laikrodžiu“bei 5 V maitinimo šaltiniu tiesiogiai iš ESP8266.

Juostelę lengva prijungti prie „NodeMcu“. 5 V prie „Vin“„NodeMcu“(5 V iš USB), geltona viela prie 12 kaiščio, žalia viela prie 14 kaiščio, įžeminta iki žemės.

Galite nustatyti individualias RGB spalvas ir ryškumą. Maišydami spalvas, galite pagaminti daug spalvų kiekvienam šviesos diodui.

Taip pat yra labai šauni biblioteka, skirta visų rūšių šauniems FX efektams su šiais šviesos diodais. Išbandykite, jei jums patinka:

github.com/r41d/WS2801FX

17 žingsnis: papuoškite Kalėdų eglutę

Padarykite tai gražiai ir įsitikinkite, kad visi šviesos diodai yra matomi ir gražiai pasiskirstę ant medžio.

18 žingsnis: paskutiniai prisilietimai

Kai medis bus paruoštas, nufotografuokite gražią nuotrauką ir pakartokite žingsnį, kad sukurtumėte spustelėjamų pozicijų (LED pozicijų) vaizdų žemėlapį

Tai intuityviausias sąsajos su šviesos diodais būdas.

Jei nenorite per daug apsunkinti dalykų, galite naudoti įprastus mygtukus.

Taip pat turėtumėte pradėti tiesioginį medžio srautą „YouTube“(jei norite stebėti, kas vyksta realiuoju laiku) ir įterpti srautą į savo svetainę.

19 žingsnis: grožėkitės savo svetaine

Tu esi nuostabus, jei pasiekei tiek:)

n

Tai buvo labai ilgas instrukcija, skirta gana sudėtingam projektui. Bet galų gale verta: D

Ačiū! Jei norite palaikyti ryšį su tuo, ką aš dirbu:

Galite užsiprenumeruoti mano „YouTube“kanalą:

www.youtube.com/c/JTMakesIt

Taip pat galite sekti mane „Facebook“ir „Instagram“

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

spoileriams apie tai, ką šiuo metu dirbu, užkulisiuose ir kitus priedus! PS:., Jei jums TIKRAI, TIKRAI patiko, čia taip pat galite man nusipirkti kavos, todėl turėsiu daugiau energijos būsimiems projektams (šis atėmė 2 savaites nuo manęs, nes šią idėją gavau per vėlai):)

www.buymeacoffee.com/JTMakesIt

Ir nepamirškite balsuoti už šį instrukciją konkurse „Viskas vyksta“:)