Mti wa Krismasi unaodhibitiwa na Wavuti (Mtu yeyote Anaweza Kuudhibiti): Hatua 19 (na Picha)

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:48

Unataka kujua jinsi tovuti ya mti wa Krismasi inayodhibitiwa inavyoonekana?

Hapa kuna video inayoonyesha mradi wangu wa mti wangu wa Krismasi. Mtiririko wa moja kwa moja umekamilika kwa sasa, lakini nilitengeneza video, nikinasa kinachoendelea:

Mwaka huu, katikati ya Desemba, nilikuwa nimelala kitandani kwangu, nikijaribu kulala katikati ya wiki ya kazi. Na badala ya kulala nilikuwa nikifikiria mradi mzuri wa Krismasi kufanya. Na kisha wazo nzuri likanigonga.

Kwa kuwa mimi ni mvivu na mapambo ya Krismasi, itakuwa nzuri kumruhusu mtu mwingine kudhibiti taa zangu za Krismasi, kwa hivyo sina haja ya kuwa na wasiwasi juu yake.

"Je! Ikiwa nitatengeneza taa za mti wa Krismasi ambazo MTU yeyote anaweza kudhibiti kupitia kiolesura cha wavuti?"

(ingiza wiki mbili za usiku wa kulala)

Kwa hivyo niliifanya.

Mti wa Krismasi ulio na RGB ishirini za RGB zilizounganishwa kwenye mtandao kupitia ESP8266 Arduino.

Rafiki yangu (asante JP) alinisaidia kuanzisha wavuti (kwa kuwa mimi sio programu mahiri ya vitu vinavyohusiana na wavuti).

Na tunaanzisha mkondo wa moja kwa moja wa 24/7 wa mti wangu ili uweze kuona unazima au kuzima wakati wote.

Mradi huu ni bora kwa mwaka huu, kwani wengi wetu tulikuwa katika shida, tukishindwa kukutana na kushirikiana na marafiki na familia. Kwa nini usiungane kupitia mti wa Krismasi:)

Katika Agizo hili nitaelezea kwa kina jinsi mradi huu ulifanywa.

Hatua ya 1: Kiwango cha Ujuzi

Mradi huu umeelekezwa zaidi kwa programu. Lakini usiogope Bahati fulani na msaada wa mjomba Google itasaidia sana:)

Utahitaji kuwa na seti ya ustadi 3 (au hautajifunza kuwa na wasiwasi): sehemu ya seva ya wavuti, sehemu ya Arduino na mti wa Krismasi kwa kweli!

Ujuzi uliopendekezwa:

• Ujuzi wa kimsingi wa kompyuta na programu

• Maarifa ya msingi ya Linux

• Maarifa ya kimsingi ya mitandao ya kompyuta

• Maarifa ya kimsingi ya elektroniki

• Ujuzi wa kutumia Google na uwezo mwingine "maalum"

• Inapaswa kujua jinsi ya kuweka mti wa Krismasi:)

Ikiwa una hali fulani ya teknolojia na programu unapaswa kuwa na uwezo wa kujifunza kuweka kitu hiki kulingana na hii inayoweza kufundishwa.

Hatua ya 2: Zana na Vipengele

Kwa upande wa mti wa Krismasi, utahitaji: • Mti wa Krismasi (d'oh…)

• Bodi ndogo ya mtawala ya NodeMCU

(unaweza pia kutumia ESP32 au bodi zingine zenye uwezo wa Wi-Fi au Ethernet)

• Anwani ya RGB ya anwani ya LED. Ukanda unaoongozwa wa RGB utaokoa Arduino GPIO nyingi (https://www.sparkfun.com/products/11020)

• Programu ya NodeMCU (imetolewa katika maelezo haya)

Kwa upande wa seva utahitaji:

• Seva ya kibinafsi yenye IP ya umma. Hapa unapata $ 100 bila malipo kwenye DigitalOther

Kikoa (hiari) unaweza kujiandikisha katika shirika lolote la msajili, kwa mfano

• Nambari ya Kujitolea (imetolewa na hii inayoweza kufundishwa)

Hatua ya 3: Sanidi Mashine ya Virtual (kompyuta) SEHEMU YA 1

Wacha tuingie moja kwa moja kwenye usimbuaji:)

Tunahitaji seva, ambayo itawasiliana na wavuti na NodeMCU.

Seva zilizo kwenye DigitalOther zinaturuhusu kuwa na mashine halisi yenye anwani ya IP ya umma, ambayo inamaanisha, tunaweza kuendesha huduma juu yake, na kuipata ulimwenguni.

Mara tu utakapolipa usajili wa kila mwezi wa DigitalOther (unaweza kutumia jaribio la bure la siku 60), tengeneza mradi na uupe jina la mti wa Krismasi au chochote unachotaka.

Sasa unaweza kuunda mashine yako halisi (kompyuta inayopatikana kijijini inayopatikana) kwa kubofya "Anza na droplet" (ambayo kimsingi ni jina la DigitalOther`s kwa mashine halisi).

Ukurasa wa usanidi utakuja na unaweza kukaa na chaguo-msingi: Picha ya Ubuntu, mpango wa kimsingi na hakuna hifadhi ya kuzuia (5 $ / mwezi)

Hatua ya 4: Sanidi Mashine Halisi (kompyuta) SEHEMU YA 2

Eneo la kuhifadhi data ni mahali ambapo seva yako itaundwa.

Chagua iliyo karibu zaidi kwako na watumiaji wako watarajiwa. Hii itatoa wakati wa kujibu chini kabisa.

Kwa kuongezea, katika sehemu ya Uthibitishaji, utaulizwa kuweka nenosiri la kupata mashine yako halisi.

Katika sehemu ya Kamilisha na uunda, weka chaguo-msingi la droplet 1, chagua jina la mwenyeji (mti wa Krismasi tena), chagua mradi wako ulioundwa hapo awali ikiwa haukuchaguliwa kwa chaguo-msingi na bonyeza Unda droplet. Hii itachukua dakika chache. Kwa kubonyeza mradi wako katika sehemu ya urambazaji upande wa kushoto utaona droplet yako.

Hatua ya 5: Sanidi Mashine Halisi (kompyuta) SEHEMU YA 3

Kwa kubonyeza dots tatu upande wa kulia wa droplet unaweza kubofya Access console, ambayo itakufanya ufikie kompyuta yako halisi.

Dirisha jipya la kivinjari litafunguliwa. Sasa, hii sio mazingira ya eneo-kazi, kama kwenye Windows 10 yako au Ubuntu iliyo na kompyuta ya kielelezo cha Picha.

Walakini, yote yanaweza kufanywa kupitia kiolesura cha kiweko.

Sio ya kutisha jinsi inavyoonekana:)

Hatua ya 6: Sanidi Mashine ya Virtual (kompyuta) SEHEMU YA 4

Umefanikiwa kuunda mashine yako mwenyewe kwenye wingu la DigitalOther.

Katika hatua zifuatazo, utaweka seva ya wavuti, inayoitwa Apache na usanidi ukurasa wako wa wavuti.

Pakua mteja wa Filezilla hapa https://filezilla-project.org/download.php?platfo… (au pata toleo la 32bit kwa mfumo wa uendeshaji wa 32bit) na usakinishe. Ni mteja wa FTP (File Protocol Transfer).

Utaweza kufikia na kuhamisha faili kutoka na kwa mashine yako halisi.

Mara tu ikiwa imewekwa, bonyeza faili → msimamizi wa tovuti → tovuti mpya na weka data kama kwenye picha hapo juu.

Itifaki: SFTP (Itifaki Salama ya Uhamisho wa Faili)

Jeshi: IP ya seva yako, pata mradi wako wa DigitalOther.

Mtumiaji ni mzizi na nywila ndio unayoiweka wakati wa kuunda droplet yako.

Bonyeza sawa na unganisha kwenye mashine yako halisi.

Utaonywa, ufunguo wa mwenyeji haujulikani. Fuata picha ya pili.

Unda folda ya eneo lako kwa mradi huo, na utoe faili zako za mradi utakazopakua hapa.

Utabadilisha faili zako kwenye kompyuta yako na kuzihamishia kwenye mashine yako halisi kila wakati unataka kujaribu au kusasisha nambari.

Hatua ya 7: Sakinisha Seva ya Wavuti

Ingia kwenye kiweko chako cha droplet na mizizi ya jina la mtumiaji na nywila yako.

Kwa kuwa hatuna kielelezo cha picha, tunatumia amri kudhibiti mashine yako halisi. Hapa kuna maagizo ya kawaida utakayotumia kwenye Ubuntu (Linux):

• pwd - chapisha saraka yangu ya sasa

• l - orodha ya faili na folda katika saraka yangu ya sasa

• cd / - songa kwa / saraka (folda, ambayo inajumuisha saraka kuu za linux kama n.k, bin, boot, dev, mzizi, nyumba, var na kadhalika)

Kwa kukimbia, namaanisha, ingiza amri na bonyeza ingiza.

Sasa, tutaendesha kupata -sasisho -y kusasisha mfumo.

Run run apt apache2 -y kusanikisha seva ya wavuti ya Apache.

Skrini yako ya kukaribisha Apache inapaswa kupatikana kwenye https:// virtual-machine-ip kutoka kwa kivinjari chako.

Badilisha mashine-ip-ip na mashine yako ip, kwa mfano 165.12.45.123. Unaweza pia kuruka https:// kwani itaongezwa kiatomati.

Hongera!

Kumbuka:

Ikiwa unataka tovuti yako ipatikane kupitia jina, badala ya anwani ya IP (kama nilivyotumia https://blinkmytree.live/), nenda kwenye wavuti ya mtoa huduma wa kikoa GoDaddy au sawa (namecheap.com nk.) Na ufuate maagizo hapa:

Baadhi ya majina ya kikoa ni ya bei rahisi sana. Kikoa changu kiligharimu $ 2 tu kwa mwaka. Hakika ina thamani ya pesa:)

Hatua ya 8: Sakinisha Mfumo wa Maombi ya Wavuti

Rudi kwenye kiweko chetu. Usiogope:)

Tumia Filezilla kuunda folda inayoitwa programu ndani / nyumbani, kwa hivyo / nyumbani / programu itakuwa folda yako

Endesha cd / nyumbani / programu kwenda kwenye folda ya ndani ya programu.

Run run install npm -y, installl npm meneja wa kifurushi. Hii itachukua dakika chache.

Endesha npm init -y kuunda kifurushi cha faili.json, ambayo itafuatilia / kukumbuka data kuu ya kifurushi kuhusu programu.

Run npm - save install cors express kusanikisha moduli za cors, Express

Cors ni moduli ya kusanidi ufikiaji wa tovuti ya msalaba na kuelezea ni mfumo wa matumizi ya wavuti.

Npm ni meneja wa kifurushi tuliotumia na tutatumia node.js wakati wa kukimbia wa programu kupanga programu-tumizi ya programu ya programu (API), ambayo, pamoja na seva ya http, itakubali maombi ya HTTP ya kutumia rangi kwa LED, alama alama zao (rangi) katika kumbukumbu, na upitishe maadili kwa NodeMcu, wakati inaiomba.

Kumbuka: Node katika NodeMcu haihusiani na node katika node.js. NodeMcu inaweza kubadilishwa na bodi yoyote ya maendeleo iliyounganishwa na bodi ya arduino, bodi ya maendeleo ya NXP, au Microchip / NXP / Renesas / STM / Atmel PCB ya kawaida. Node.js pia inaweza kubadilishwa na mfumo wa. Net, PHP au jukwaa lingine lolote. Lakini kwa unyenyekevu, tunatumia NodeMCU na Node.js.

Sasa, hebu tufanye mtihani, ikiwa tunaweza kuendesha programu ndogo katika node.js

Unda faili iliyoitwa index.js na notepad / notepad ++ au mhariri mwingine au mazingira jumuishi ya maendeleo utumizi wako (Visual Studio Code https://code.visualstudio.com/) katika folda yako ya karibu.

Weka nambari hii ndani:

var http = kuhitaji ('http');

http.createServer (kazi (req, res) {

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

res.end ('Hello World!');

}). sikiliza (8080);

Hifadhi na uhamishe kwenye folda / nyumbani / programu kama index.js na bonyeza mara mbili / buruta-dondosha kwenye faili katika FileZilla.

Run node index.js, na uiache ikifanya kazi.

Sasa, tunaweza kufikia ukurasa wetu kwa https:// virtual-machine-ip: 8080 kutoka kwa kivinjari chetu. Ukurasa mweupe na maandishi ya Hello World itaonekana.

Hongera, umeunda tu seva ya wavuti katika node.js!

Hatua ya 9: Andaa Programu

Nenda kufariji na usimamishe programu kwa kubonyeza ctrl + C.

Badilisha faili yako ya index.js ndani / nyumbani / programu / na ubadilishe na index.js yetu katika.

Unaweza kupakua faili zote za wavuti hapa:

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

Nakili nambari yetu ya mti wa Chrismas kutoka folda ya html hadi saraka ya mbali / var / www / html / na Filezilla. Itachukua muda. Ikiwa inakuuliza, badilisha index.html na mpya.

Weka IP yako tena kwenye kivinjari chako unachopenda.

Umefanya tu programu ya wavuti mbele-mwisho ipatikane kwenye https:// virtual-machine-ip.

Hatua ya 10: Kutengua Msimbo wa Mwisho na Kuifanya ifanye kazi

Kumbuka: nambari yako ya nyuma iko nyumbani / programu

Kumbuka, baada ya kuhariri nambari yako ndani, usisahau kuipakia kwenye seva yako ukitumia FileZilla, na uanze upya programu yako ya nodi (koni: ctrl + c, kisha juu (inaonyesha amri ya mwisho node index.js), ingiza)

Ili msimbo ufanye kazi, utahitaji kuingiza data chache kwanza.

Kwanza, utahitaji kubadilisha jina la mpangishaji katika index.js kwa kikoa chako au IP, (kitu kinachoonekana kama: 165.13.45.123).

Pili, nitakuongoza kupitia nambari ili kuielewa. Hakikisha usiruke maoni niliyotoa kwa nambari.

Unaweza kuona katika faili ya index.js, kwamba tunaunda programu kwa kutumia moduli ya kuelezea. Halafu, tunatumia sheria za CORS kwake, ongeza API na uanze seva ya http. Seva hii haitatumikia ukurasa wa wavuti kupitia maombi ya GET http, lakini itatumikia majimbo yaliyoongozwa kupitia ombi la GET http na kusasisha majimbo yaliyoongozwa kwenye maombi ya PUT http yaliyopokelewa.

API ni kawaida ya kubadilishana habari kati ya programu. Kawaida tunayotumia ni REST APIs tunatumia wenyewe. Hawana utaifa na hawana unganisho endelevu (shorturl.at/aoBC3, PUT maombi husasisha tu majimbo yaliyoongozwa katika anuwai ya programu (kumbukumbu), GET maombi hutuma tu hali zilizoongozwa kwa mteja.

Jibu kwa mteja kawaida huwa katika nukuu ya JSON, lakini kwa jibu hili rahisi la majimbo 30 ya LED, tunatuma tu kamba ya maadili 30 yaliyotenganishwa kwa koma.

Hatua ya 11: Kuelewa Msimbo wa Mbele na kuifanya ifanye kazi SEHEMU YA 1

Kumbuka: nambari yako ya mwisho iko katika / var / www / html

Kumbuka, baada ya kuhariri nambari yako ndani, usisahau kuipakia kwenye seva yako ukitumia FileZilla. Tofauti na node.js, Apache inajirudia yenyewe, lakini italazimika kupakia tena ukurasa wako kwenye kivinjari chako. Tumia ctrl + f5 kuburudisha na kufuta kashe ya ukurasa wako pia.

Ili msimbo ufanye kazi, utahitaji kuingiza data chache. Kwanza, utahitaji kubadilisha ubadilishaji wa url katika kazi ya send_request ndani ya index.html kutoka blinkmytree.live kwa uwanja wako mwenyewe au IP, kwa mfano: 165.13.45.123.

Pili, nitakuongoza kupitia nambari ili kuielewa. Hakikisha usiruke maoni niliyotoa kwa nambari. Ukurasa ni hati ya HTML. Kuacha sheria zote za CSS (mtindo wa ukurasa na nafasi ya yaliyomo) kando, tutaangalia utendaji wa yaliyomo muhimu. Ili kujifunza zaidi kuhusu CSS, angalia

Tulitaka sifa hizi kuu (wataalam wa njia za agile wangesema hadithi za watumiaji) kwenye ukurasa:

• Video ya moja kwa moja iliyoingia kwenye ukurasa

• Taa za kubonyeza kwenye mti wa Krismasi, ambazo zilitumiwa kama kihariri cha picha cha Gimp (https://www.gimp.org/).

• Mawasiliano halisi na seva, ikingojea kubadilisha majimbo yaliyoongozwa.

Hatua ya 12: Kuelewa Nambari ya mwisho na kuifanya ifanye kazi SEHEMU YA 2

Mara tu tunapokuwa na mti wetu wa Krismasi na nambari za LED na rangi za kuchukua, tunahitaji kuunda maeneo na kutumia vitendo kwao, kwa hivyo mara tu tutakapobofya kwenye mwangaza wa rangi katika sehemu ya kichaguaji cha picha, rangi itachaguliwa, na moja tunabofya kwenye LED, amri itatumwa kwa seva, ambapo Arduino itachukua thamani yake.

Katika HTML5, kiwango kipya zaidi cha HTML, kuna kitu kinachoitwa ramani ya picha. Inaturuhusu kufafanua maeneo kwenye picha, ambayo tunaweza kutumia wasikilizaji wa vitendo juu yake.

Kwa kuwa tuna maeneo mengi ya kufafanua, tulitumia zana mkondoni https://www.image-map.net/ kufafanua maeneo haya na kunakili nambari ya HTML kwenye ukurasa wetu.

Mara tu tutakapofanya hivyo, tunaweza kuweka hafla ya kubofya na kazi inayoita na parameta ya nambari ya LED kwa kila moja ya maeneo haya. Tazama picha ya skrini hapo juu.

Hatua ya 13: Kuelewa Kanuni za mwisho na kuifanya ifanye kazi SEHEMU YA 3

Ndani ya mwisho wa mwili wa HTML, katika mkoa, tunaweka JavaScript, ili kufafanua kazi tunazoita katika hafla za kubonyeza. Ulimwenguni, tunafafanua XMLHttpRequest, ambayo tunatumia kutuma ombi la PUT

Tuna kazi mbili:

kazi set_color (val)

kazi send_request (id)

Kwa kujaribu ombi la API, ninapendekeza zana ya programu inayotumika inayoitwa Postman https://www.postman.com/. Inaturuhusu kutuma tu ombi la API kwa seva, bila ujuzi wa programu. Inaruhusu kubeza seva, na kukubali maombi pia.

Hatua ya 14: Kuelewa Nambari ya mwisho na kuifanya ifanye kazi SEHEMU YA 4

Maombi yako hufanya kazi.

Jihadharini, nambari zimebadilishwa, ambayo ni, 20 ni 1 na 1 ni 20, hii ni kwa sababu LED kwenye mti huanza chini, lakini kwa uzoefu bora wa watumiaji, tunaanza kuanza kuongoza juu.

Bado utahitaji kuunda mkondo wa moja kwa moja kwenye YouTube ikiwa unataka, na ubadilishe nambari ya kupachika ya video ya YouTube na yako mwenyewe.

Hatua ya 15: Nambari ya Arduino

ESP8266 inaendesha mchoro wa mfano wa mteja wa HTTP ambao umebadilishwa kidogo, kupokea data kutoka kwa wavuti yangu kupitia simu ya API.

Utahitaji pia kusanikisha maktaba za kudhibiti ukanda wa LED ikiwa unataka kutumia ukanda wa RGB unaoweza kushughulikiwa kama nilivyofanya.

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

Katika mchoro nilioshikilia, utahitaji kuingiza jina lako la wi-fi na nywila ya url kwenye wavuti yako (angalia maoni)

Sisi kimsingi tunabadilisha jibu la http kuwa kamba iliyowekwa kwa C, kwa hivyo tunaweza kutumia C kazi strtok kugawanya kamba na koma na kujaza meza ya leds na maadili yaliyosomwa kutoka kwa seva. Kuliko tunaita kazi ambapo tunapita kwenye meza, na kulingana na maadili, tunageuza rangi sahihi ambayo mtumiaji anatarajia.

Hiyo ni yake!

Hongera, umeifanya!

Hatua ya 16: RGB LED Chain

Uh, oh. Sasa ni wakati wake wa kupumzika kidogo kutoka kwa usimbuaji wote:)

Kwa kuwa ESP8266 haina pini nyingi za GPIO kudhibiti LED moja kwa moja, nilitumia mnyororo huu wa RGB LED unaoweza kushughulikiwa:

www.sparkfun.com/products/11020

Kwa njia hii, risasi zote 20 za RGB (jumla ya leds 60) zinaweza kudhibitiwa na pini mbili tu - "data" na "saa" na nguvu ya 5V moja kwa moja kutoka ESP8266.

Kuunganisha ukanda kwa NodeMcu ni rahisi. 5V hadi Vin kwenye NodeMcu (5V kutoka USB), waya wa manjano kubandika 12, waya wa kijani kubandika 14, chini hadi chini.

Unaweza kuweka rangi ya mtu binafsi ya RGB, na mwangaza. Kwa mchanganyiko wa rangi, unaweza kutoa rangi nyingi kwa kila LED.

Kuna pia maktaba baridi sana kwa kila aina ya athari nzuri za FX na hizi LED. Jaribu ikiwa unapenda:

github.com/r41d/WS2801FX

Hatua ya 17: Pamba Mti wa Krismasi

Fanya uzuri na uhakikishe kuwa LED zote zinaonekana na zimeenea vizuri juu ya mti.

Hatua ya 18: Kugusa Mwisho

Unapokuwa na mti tayari, piga picha nzuri na kurudia hatua ya kuunda ramani ya picha ya nafasi zinazoweza kubofyeka (Nafasi za LED)

Hii ndiyo njia angavu zaidi ya kuingiliana na taa za taa.

Ikiwa hautaki kuzidisha vitu, unaweza kutumia vifungo vya kawaida.

Unapaswa pia kuanza mtiririko wa moja kwa moja wa mti wako kwenye YouTube (ikiwa unataka kutazama kinachotokea kwa wakati halisi) na upachike mkondo kwenye wavuti yako.

Hatua ya 19: Pendeza Wavuti Yako

Wewe ni wa kushangaza ikiwa umeifanya kufikia hapa:) Alika marafiki wako (na mimi kwa kweli: P) na uwafanye bonyeza mti wako iwezekanavyo:)

n

Hii ilikuwa ya Agizo ndefu sana, kwa mradi ngumu sana. Lakini inafaa mwishoni: D

Asante! Ikiwa unataka kuwasiliana na kile ninachofanya kazi:

Unaweza kujisajili kwenye kituo changu cha YouTube:

www.youtube.com/c/JTMakesIt

Unaweza pia kunifuata kwenye Facebook na Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

kwa waharibifu juu ya kile ninachofanya kazi sasa, nyuma ya pazia na nyongeza zingine! PS::)

www.buymeacoffee.com/JTMakesIt

Na usisahau kupiga kura kwa hii inayoweza kufundishwa katika shindano la "Chochote Kinachoenda":)