Pema e Krishtlindjeve e kontrolluar nga uebfaqja (Çdokush mund ta kontrollojë atë): 19 hapa (me fotografi)

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Dëshironi të dini se si duket pema e Krishtlindjeve e kontrolluar nga një faqe në internet?

Këtu është videoja që tregon projektin tim të pemës sime të Krishtlindjes. Transmetimi i drejtpërdrejtë ka përfunduar deri tani, por unë bëra një video, duke kapur atë që po ndodhte:

Këtë vit, në mes të dhjetorit, unë isha shtrirë në shtratin tim, duke u përpjekur të fle në mes të një jave pune. Dhe në vend që të flija, po mendoja se çfarë do të ishte një projekt i mrekullueshëm i Krishtlindjeve për të bërë. Dhe pastaj më ra në mendje një ide interesante.

Meqenëse jam dembel me dekorimet e Krishtlindjeve, do të ishte mirë të lejoj dikë tjetër të kontrollojë dritat e mia të Krishtlindjeve, kështu që nuk do të duhet të shqetësohem për këtë.

"Po sikur të bëja dritat e pemës së Krishtlindjes që Çdokush mund të jetë në gjendje t'i kontrollojë përmes një ndërfaqeje në internet?"

(fut dy javë netë pa gjumë)

Kështu që ia dola.

Një pemë e Krishtlindjes me njëzet LED RGB të lidhur në internet përmes ESP8266 Arduino.

Një miku im (faleminderit JP) më ndihmoi të krijoj një faqe në internet (meqenëse nuk jam një programues i rrjedhshëm për gjëra të lidhura me uebfaqen).

Dhe ne vendosëm një transmetim të drejtpërdrejtë të pemës sime në youtube 24/7, kështu që ju do të jeni në gjendje të shihni atë që po aktivizoni ose fikni gjatë gjithë kohës.

Ky projekt është ideal për këtë vit, pasi shumë prej nesh ishin në izolim, të paaftë për t'u takuar dhe shoqëruar me miqtë dhe familjen. Pse të mos bashkoheni përmes pemës së Krishtlindjes:)

Në këtë Instructable unë do të shpjegoj në detaje se si është bërë ky projekt.

Hapi 1: Niveli i Aftësisë

Ky projekt është më i orientuar drejt softverit. Por mos kini frikë Disa fat dhe ndihma e xhaxhait Google do të ndihmojnë jashtëzakonisht:)

Do t'ju duhet të keni një grup prej 3 aftësish (ose do t'i mësoni pa u shqetësuar): një pjesë e serverit në internet, pjesa Arduino dhe pema e Krishtlindjeve natyrisht!

Njohuri të rekomanduara:

• Aftësitë bazë të kompjuterit dhe programimit

• Njohuri bazë terminale Linux

• Njohuri bazë të rrjeteve kompjuterike

• Njohuri bazë elektronike

• Aftësi për të përdorur Google dhe aftësi të tjera "speciale"

• Duhet të dijë të vendosë një pemë të Krishtlindjes:)

Nëse keni një ndjenjë të teknologjisë dhe programimit, duhet të jeni në gjendje të mësoni ta vendosni këtë gjë sipas këtij Udhëzuesi.

Hapi 2: Mjetet dhe Komponentët

Nga ana e pemës së Krishtlindjes, do t'ju duhet: • Pema e Krishtlindjes (d'oh…)

• Një bord i mikrokontrolluesit NodeMCU

(gjithashtu mund të përdorni ESP32 ose tabela të tjera të afta për Wi-Fi ose Ethernet)

• Rrip LED i adresueshëm. Shiriti i adresueshëm RGB i drejtuar do të kursejë shumë GPIO të Arduino (https://www.sparkfun.com/products/11020)

• Softuer për NodeMCU (dhënë në këtë udhëzues)

Nga ana e serverit do t'ju duhet:

• Një server privat virtual me IP publike. Këtu ju merrni 100 dollarë falas në DigitalOcean

• Një domain (opsional) që mund të regjistroheni në çdo organizatë regjistruese, për shembull

• Kod i Përkushtuar (i furnizuar me këtë Udhëzues)

Hapi 3: Konfiguroni Makinën Virtuale (kompjuter) PJESA 1

Le të kalojmë drejtpërdrejt në kodim:)

Ne kemi nevojë për një server, i cili do të komunikojë me faqen e internetit dhe NodeMCU.

Serverat në DigitalOcean na lejojnë të kemi një makinë virtuale me një adresë IP publike, që do të thotë, ne mund të drejtojmë shërbime në të dhe t'i qasemi në të gjithë botën.

Pasi të paguani një pajtim mujor DigitalOcean (mund të përdorni provë falas 60 ditore), krijoni një projekt dhe emërtojeni atë një pemë të Krishtlindjes ose çfarëdo që dëshironi.

Tani mund të krijoni makinën tuaj virtuale (kompjuter virtual me qasje në distancë) duke klikuar "Filloni me një pikë" (që në thelb është emri i DigitalOcean për një makinë virtuale).

Do të shfaqet një faqe konfigurimi dhe mund të qëndroni me një parazgjedhje: imazhi i Ubuntu, plani bazë dhe pa ruajtje blloku (5 $ /muaj)

Hapi 4: Konfiguroni Makinën Virtuale (kompjuter) PJESA 2

Një rajon i qendrës së të dhënave është vendi ku do të krijohet serveri juaj.

Zgjidhni atë më të afërt për ju dhe përdoruesit tuaj të mundshëm. Kjo do të sigurojë kohën më të ulët të përgjigjes.

Më tej, në seksionin Authentication, do t'ju kërkohet të vendosni një fjalëkalim për të hyrë në makinën tuaj virtuale.

Në seksionin Finalize and create, mbani parazgjedhjen e 1 pike, zgjidhni një emër hosti (pema e Krishtlindjes përsëri), zgjidhni projektin tuaj të krijuar më parë nëse nuk është zgjedhur si parazgjedhje dhe klikoni Krijo pikëzën. Kjo do të zgjasë disa minuta. Duke klikuar mbi projektin tuaj në seksionin e lundrimit në të majtë do të shihni pikëzën tuaj.

Hapi 5: Konfiguroni Makinën Virtuale (kompjuter) PJESA 3

Duke klikuar në tre pikat në të djathtë të pikës, mund të klikoni në tastierën Access, e cila do t'ju bëjë të hyni në kompjuterin tuaj virtual.

Do të hapet një dritare e re e vogël e shfletuesit. Tani, ky nuk është një mjedis desktop, si në Windows 10 ose Ubuntu tuaj me kompjuter ndërfaqe grafike.

Sidoqoftë, gjithçka mund të bëhet përmes një ndërfaqe të tastierës.

Nuk është aq e frikshme sa duket:)

Hapi 6: Konfiguroni Makinën Virtuale (kompjuter) PJESA 4

Ju keni krijuar me sukses makinën tuaj virtuale në një re DigitalOcean.

Në hapat e ardhshëm, do të krijoni një server në internet, të quajtur Apache dhe do të krijoni faqen tuaj në internet.

Shkarkoni klientin Filezilla këtu https://filezilla-project.org/download.php?platfo… (ose gjeni versionin 32bit për sistemin operativ 32bit) dhe instalojeni. Shtë një klient FTP (File Transfer Protocol).

Ju do të jeni në gjendje të përdorni dhe transferoni skedarë nga dhe në makinën tuaj virtuale.

Pasi të jetë instaluar, klikoni skedarin manager menaxherin e faqes site sitin e ri dhe futni të dhëna si në një imazh më sipër.

Protokolli: SFTP (Protokolli i Sigurt i Transferimit të Skedarëve)

Pritësi: IP e serverit tuaj, gjeni në projektin tuaj DigitalOcean.

Përdoruesi është rrënja dhe fjalëkalimi është ajo që keni vendosur në krijimin e pikëzës tuaj.

Klikoni OK dhe lidheni me makinën tuaj virtuale.

Do të paralajmëroheni, çelësi i hostit nuk dihet. Ndiqni imazhin e dytë.

Krijoni një dosje lokale për projektin dhe nxirrni skedarët e projektit tuaj që do të shkarkoni këtu.

Ju do të redaktoni skedarët tuaj në kompjuterin tuaj dhe do t'i transferoni në makinën tuaj virtuale çdo herë që dëshironi të provoni ose përditësoni kodin.

Hapi 7: Instaloni një Web Server

Hyni në tastierën tuaj të pikave me rrënjën e emrit të përdoruesit dhe fjalëkalimin tuaj.

Meqenëse nuk kemi një ndërfaqe grafike, ne përdorim komanda për të kontrolluar makinën tuaj virtuale. Këtu janë disa komanda të zakonshme që do të përdorni në Ubuntu (Linux):

• pwd - printoni direktorinë time aktuale

• ls - listoni skedarët dhe dosjet në drejtorinë time aktuale

• cd / - kaloni në / drejtori (dosje, e cila përfshin drejtoritë kryesore Linux si etj, bin, boot, dev, root, home, var dhe kështu me radhë)

Me drejtimin, dua të them, futni komandën dhe shtypni enter.

Tani, ne do të ekzekutojmë apt -get update -y për të përditësuar sistemin.

Drejtoni apt install apache2 -y për të instaluar serverin në internet Apache.

Ekrani juaj i mirëseardhjes Apache duhet të jetë i arritshëm në https:// virtual-machine-ip nga shfletuesi juaj.

Zëvendësoni virtuale-makinën-ip me ip-in tuaj të makinës virtuale, për shembull 165.12.45.123. Ju gjithashtu mund të kaloni https:// pasi do të shtohet automatikisht.

Urime!

Shënim:

Nëse dëshironi që faqja juaj e internetit të jetë e arritshme përmes një emri, në vend të adresës IP (siç kam përdorur https://blinkmytree.live/), shkoni te faqja e ofruesit të domain -it GoDaddy ose të ngjashme (namecheap.com etj..) dhe ndiqni udhëzimet këtu:

Disa emra domain janë shumë të lirë. Domeni im kushtoi vetëm 2 dollarë në vit. Padyshim që ia vlen paratë:)

Hapi 8: Instaloni një Kornizë të Aplikimit në Ueb

Kthehu në tastierën tonë. Mos ki frike:)

Përdorni Filezilla për të krijuar një dosje të quajtur app brenda /home, kështu që /home /app do të jetë dosja juaj

Drejtoni cd /home /app për të shkuar në dosjen brenda aplikacionit.

Drejtoni apt install npm -y, për të instaluar menaxherin e paketave npm. Kjo do të zgjasë disa minuta.

Drejtoni npm init -y për të krijuar një skedar pack.json, i cili do të gjurmojë/mbajë mend të dhënat kryesore të paketës në lidhje me një aplikacion.

Drejtoni npm -ruani instalimin e cors express për të instaluar module cors, express

Cors është modul për konfigurimin e aksesit ndër faqe dhe express është një kornizë e aplikacionit në internet.

Npm është një menaxher paketash që kemi përdorur dhe ne do të përdorim node.js JavaScript runtime për të programuar ndërfaqen tonë të programimit të aplikacionit (API), e cila, e kombinuar me një server http, do të pranojë kërkesat HTTP për aplikimin e ngjyrave në LED, do të shënojë vlerat e tyre (ngjyrat) në memorje, dhe kaloni vlerat në NodeMcu, kur e kërkon atë.

Shënim: Nyja në NodeMcu nuk ka të bëjë me nyjen në node.js. NodeMcu mund të zëvendësohet me çdo bord të zhvillimit arduino të lidhur në internet, bord zhvillimi NXP ose një mikroçip të personalizuar/NXP/Renesas/STM/Atmel PCB. Node.js gjithashtu mund të zëvendësohet me. Net framework, PHP ose ndonjë platformë tjetër. Por për thjeshtësi, ne po përdorim NodeMCU dhe Node.js.

Tani, le të bëjmë një provë, nëse mund të ekzekutojmë një program të vogël në node.js

Krijoni një skedar të quajtur index.js me notepad/notepad ++ ose redaktues tjetër ose mjedis të integruar të zhvillimit që përdorni (Visual Studio Code https://code.visualstudio.com/) në dosjen tuaj lokale.

Vendoseni këtë kod në të:

var http = kërkoj ('http');

http.createServer (funksioni (kërkesa, res) {

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

res.end ('Përshëndetje Botë!');

}). dëgjoni (8080);

Ruajeni atë dhe transferojeni në dosje/shtëpi/aplikacion si index.js me klikim të dyfishtë/drag-drop në skedar në FileZilla.

Drejtoni nyjen index.js dhe lëreni të funksionojë.

Tani, ne mund të hyjmë në faqen tonë në https:// virtual-machine-ip: 8080 nga shfletuesi ynë. Do të shfaqet një faqe e bardhë me tekstin Hello World.

Urime, ju sapo krijuat një web server në node.js!

Hapi 9: Përgatitni Softuerin

Shkoni në tastierë dhe ndaloni programin duke shtypur ctrl+C.

Zëvendësoni skedarin tuaj index.js në/home/app/dhe zëvendësojeni atë me index.js tonë në.

Ju mund t'i shkarkoni të gjithë skedarët për faqen në internet këtu:

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

Kopjoni kodin tonë të pemës Chrismas nga dosja html në drejtorinë e largët/var/www/html/me Filezilla. Do të duhet pak kohë. Nëse ju kërkon, zëvendësoni index.html me një të re.

Vendosni IP -në tuaj përsëri në shfletuesin tuaj të preferuar të internetit.

Ju sapo keni vënë në dispozicion aplikacionin tuaj në internet të përparme në https:// virtual-machine-ip.

Hapi 10: Kuptimi i kodit të prapambetur dhe bërja e tij funksionale

Shënim: kodi juaj i pasmë është në /shtëpi /aplikacion

Mos harroni, pasi të redaktoni kodin tuaj në vend, mos harroni ta ngarkoni në serverin tuaj duke përdorur FileZilla dhe rinisni aplikacionin tuaj të nyjes (tastiera: ctrl+c, shigjeta lart (tregon nyjen e fundit të komandës index.js), futni)

Që kodi të funksionojë, së pari duhet të futni disa të dhëna.

Së pari, do t'ju duhet të ndryshoni ndryshoren e emrit të hostit në index.js në domenin ose IP -në tuaj, (diçka që duket si: 165.13.45.123).

Së dyti, unë do t'ju udhëheq përmes kodit për ta kuptuar atë. Sigurohuni që të mos kaloni komentet që kam bërë në kod.

Ju mund të shihni në skedarin index.js, që ne krijojmë një aplikacion duke përdorur modulin e shprehur. Pastaj, ne zbatojmë rregullat CORS në të, shtojmë API -të dhe fillojmë një server http. Ky server nuk do t'i shërbejë një faqe në internet përmes kërkesave GET http, por do t'i shërbejë shteteve të udhëhequra përmes kërkesës GET http dhe azhurnimit të shteteve të udhëhequra në kërkesat e pranuara PUT

API -të janë praktikë e zakonshme për shkëmbimin e informacionit midis aplikacioneve. Më të zakonshmet që përdorim janë API -të e REST -it që i përdorim vetë. Ata janë pa shtetësi dhe nuk kanë një lidhje të vazhdueshme (shorturl.at/aoBC3, Kërkesat PUT thjesht azhurnojnë gjendjet e drejtuara në ndryshoren e grupit të aplikacioneve (memorja), kërkesat GET thjesht dërgon gjendjet e drejtuara te një klient.

Përgjigja për klientin është zakonisht në shënimin JSON, por për këtë përgjigje të thjeshtë të 30 gjendjeve LED, ne thjesht dërgojmë një varg prej 30 vlerash të ndara me presje.

Hapi 11: Kuptimi i Kodit Front-End dhe bërja e tij PJESA 1

Shënim: kodi juaj front-end është në/var/www/html

Mos harroni, pasi të redaktoni kodin tuaj në vend, mos harroni ta ngarkoni në serverin tuaj duke përdorur FileZilla. Ndryshe nga node.js, Apache riniset automatikisht, por ju do të duhet të rimbushni faqen tuaj në shfletuesin tuaj. Përdorni ctrl+f5 për të rifreskuar dhe fshirë gjithashtu cache -in e faqes tuaj.

Që kodi të funksionojë, do t'ju duhet të futni pak të dhëna. Së pari, do t'ju duhet të ndryshoni ndryshoren url në funksionin send_request brenda index.html nga blinkmytree.live në domenin ose IP -në tuaj, për shembull: 165.13.45.123.

Së dyti, unë do t'ju udhëheq përmes kodit për ta kuptuar atë. Sigurohuni që të mos kaloni komentet që kam bërë në kod. Faqja është një dokument HTML. Duke lënë mënjanë të gjitha rregullat e CSS (stili i faqes dhe pozicioni i përmbajtjes), ne do të shikojmë përmbajtje të rëndësishme të funksionalitetit. Për të mësuar më shumë rreth CSS, kontrolloni

Ne donim që këto veçori kryesore (ekspertët e metodave të shkathëta do të thoshin histori të përdoruesve) në faqe:

• Video e drejtpërdrejtë e ngulitur në faqe

• Një LED e klikueshme në një pemë të Krishtlindjes, e cila u manipulua në redaktorin e imazhit Gimp (https://www.gimp.org/).

• Komunikimi aktual me një server, duke pritur për të ndryshuar gjendjet e udhëhequra.

Hapi 12: Kuptimi i Kodit Front-End dhe bërja e tij PJESA 2

Pasi të kemi pemën tonë të Krishtlindjes me një numër të LEDs dhe ngjyrave për të zgjedhur, ne duhet të krijojmë zona dhe të zbatojmë veprime për to, kështu që sapo të klikojmë në LED me ngjyrë në një seksion zgjedhës të një imazhi, një ngjyrë do të zgjidhet dhe një ne klikojmë në një LED, komanda do t'i dërgohet serverit, ku Arduino do të zgjedhë vlerën e tij.

Në HTML5, standardi më i ri HTML, ekziston diçka që quhet një hartë imazhi. Kjo na lejon të përcaktojmë zonat në një imazh, të cilat mund t'i aplikojmë dëgjuesit e veprimit në të.

Meqenëse kemi shumë zona për të përcaktuar, ne përdorëm një mjet në internet https://www.image-map.net/ për të përcaktuar këto zona dhe kopjuam kodin HTML në faqen tonë.

Pasi ta bëjmë këtë, ne mund të vendosim ngjarje onclick me një funksion që thërret dhe parametër të një numri LED në secilën nga këto zona. Shikoni pamjen e ekranit më lart.

Hapi 13: Kuptimi i Kodit Front-End dhe bërja e tij PJESA 3

Brenda fundit të trupit HTML, në një rajon, ne vendosim disa JavaScript, për të përcaktuar funksionet që ne i quajmë në ngjarjet onclick. Globalisht, ne përcaktojmë një XMLHttpRequest, të cilën e përdorim për të dërguar një kërkesë PUT

Kemi dy funksione:

funksioni set_color (val)

funksioni send_quest (id)

Për testimin e kërkesës API, unë rekomandoj një mjet softuer të përdorur zakonisht të quajtur Postier https://www.postman.com/. Na lejon që thjesht të dërgojmë kërkesë API në server, pa aftësi programimi. Lejon të tallet me një server dhe të pranojë gjithashtu kërkesa.

Hapi 14: Kuptimi i Kodit të Përpara dhe bërja e tij PJESA 4

Aplikimi juaj punon.

Jini të vetëdijshëm, numrat janë të kundërt, domethënë 20 është 1 dhe 1 është 20, kjo sepse LED -të në pemë fillojnë nga poshtë, por për një përvojë më të mirë të përdoruesit, ne vendosim një fillim të udhëhequr në krye.

Ju ende do të keni nevojë të krijoni një transmetim të drejtpërdrejtë në YouTube nëse dëshironi dhe të zëvendësoni kodin e integruar të videos së YouTube me tuajin.

Hapi 15: Kodi Arduino

ESP8266 ekzekuton një skicë bazë të shembullit të HTTP Client që është modifikuar pak, duke marrë të dhënat nga faqja ime në internet përmes një thirrjeje API.

Ju gjithashtu do të duhet të instaloni biblioteka për kontrollin e shiritit LED nëse dëshironi të përdorni të njëjtën shirit RGB të adresueshëm si unë.

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

Në skicën që kam bashkangjitur, do t'ju duhet të futni emrin dhe fjalëkalimin tuaj wi-fi një url në faqen tuaj të internetit (shikoni komentet)

Ne në thelb konvertojmë një përgjigje http në një varg të shtypur në C, kështu që ne mund të përdorim funksionin C strtok për të ndarë vargun me presje dhe për të mbushur tabelën leds me vlera të lexuara nga një server. Se ne e quajmë një funksion ku kalojmë nëpër tabelë, dhe bazuar në vlerat, ne kthejmë ngjyrën e duhur që përdoruesi pret.

Kaq eshte!

Urime, ja dolët!

Hapi 16: Zinxhiri LED RGB

Uh Oh. Tani është koha për të bërë një pushim të vogël nga të gjitha kodimet:)

Meqenëse ESP8266 nuk ka shumë kunja GPIO për të kontrolluar LED -të individualisht, kam përdorur këtë zinxhir LED të adresueshëm RGB:

www.sparkfun.com/products/11020

Në këtë mënyrë, të gjitha 20 led RGB (gjithsej 60 led) mund të kontrollohen nga vetëm dy kunja - "të dhëna" dhe "orë" dhe fuqi 5V direkt nga ESP8266.

Lidhja e shiritit me NodeMcu është e lehtë. 5V në Vin në NodeMcu (5V nga USB), tela të verdhë në pin 12, tela jeshilë në pin 14, tokë në tokë.

Mund të vendosni ngjyrën dhe shkëlqimin individual të RGB. Me disa përzierje ngjyrash, mund të prodhoni SHUM ngjyra për secilën LED.

Ekziston gjithashtu një bibliotekë shumë e lezetshme për të gjitha llojet e efekteve të lezetshme FX me këto LED. Provojeni nëse ju pëlqen:

github.com/r41d/WS2801FX

Hapi 17: Dekoroni Pemën e Krishtlindjes

Bëjeni të bukur dhe sigurohuni që të gjitha LED -të të jenë të dukshme dhe të përhapura bukur mbi pemë.

Hapi 18: Prekjet përfundimtare

Kur ta keni pemën gati, bëni një fotografi të bukur dhe përsëritni hapin për krijimin e hartës së imazhit të pozicioneve të klikueshme (pozicionet LED)

Kjo është mënyra më intuitive e ndërlidhjes me LED -të.

Nëse nuk doni të komplikoni gjërat, mund të përdorni butona të rregullt.

Ju gjithashtu duhet të filloni një transmetim të drejtpërdrejtë të pemës tuaj në YouTube (nëse doni të shikoni se çfarë ndodh në kohë reale) dhe ta vendosni transmetimin në faqen tuaj.

Hapi 19: Admironi faqen tuaj te internetit

Ju jeni të mrekullueshëm nëse keni arritur deri këtu:) Ftoni miqtë tuaj (dhe mua sigurisht: P) dhe i bëni ata të klikojnë pemën tuaj sa më shumë që të jetë e mundur:)

n

Ky ishte një Udhëzues shumë i gjatë, për një projekt mjaft të komplikuar. Por ja vlen në fund: D

Faleminderit! Nëse doni të qëndroni në kontakt me atë që unë jam duke punuar:

Mund të regjistroheni në kanalin tim në YouTube:

www.youtube.com/c/JTMakesIt

Ju gjithashtu mund të më ndiqni në Facebook dhe Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

për spoilerët në atë që po punoj aktualisht, prapa skenave dhe ekstra të tjera! PS:., Nëse vërtet, vërtet ju pëlqeu, ju gjithashtu mund të më blini një kafe këtu, kështu që unë do të kem më shumë energji për projektet e ardhshme (kjo më mori 2 javë gjumë larg, pasi e mora këtë ide shumë vonë):)

www.buymeacoffee.com/JTMakesIt

Dhe mos harroni të votoni për këtë Instructable në konkursin "Çdo gjë shkon":)