Կայքով վերահսկվող տոնածառ (յուրաքանչյուրը կարող է վերահսկել այն). 19 քայլ (նկարներով)

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Ուզու՞մ եք իմանալ, թե ինչ տեսք ունի վեբ կայքի կողմից կառավարվող տոնածառը:

Ահա տեսանյութը, որը ցույց է տալիս իմ տոնածառի նախագիծը: Ուղիղ հեռարձակումն արդեն ավարտվել է, բայց ես տեսահոլովակ եմ պատրաստել ՝ ֆիքսելով, թե ինչ է կատարվում.

Այս տարի ՝ դեկտեմբերի կեսերին, ես պառկած էի իմ անկողնում և փորձում էի քնել աշխատանքային շաբաթվա կեսին: Եվ քնելու փոխարեն ես մտածում էի, թե որն է լինելու սուրբծննդյան հիանալի նախագիծը: Եվ հետո մի զարմանահրաշ միտք ծագեց ինձ մոտ:

Քանի որ ես ծույլ եմ Սուրբ Christmasննդյան զարդարանքների մեջ, լավ կլինի, որ ուրիշին թույլ տամ վերահսկել իմ Սուրբ lightsննդյան լույսերը, այնպես որ ես դրա համար անհանգստանալու կարիք չունեմ:

«Ի՞նչ անել, եթե ես տոնածառի լույսեր պատրաստեի, որոնք YԱՆԿԱՆՈՄ կարող էր կառավարել կայքի ինտերֆեյսի միջոցով»:

(տեղադրեք երկու շաբաթ անքուն գիշերներ)

Այնպես որ, ես հասցրեցի:

ESP8266 Arduino- ի միջոցով ինտերնետին միացած RGB լուսադիոդներով քսան տոնածառ:

Իմ ընկերը (շնորհակալություն JP) օգնեց ինձ կայք ստեղծել (քանի որ ես սահուն ծրագրավորող չեմ կայքի հետ կապված նյութերի համար):

Եվ մենք ստեղծեցինք իմ ծառի 24/7 youtube- ի ուղիղ հեռարձակում, այնպես որ դուք կկարողանաք տեսնել, թե ինչ եք միացնում կամ անջատում բոլոր ժամանակներում:

Այս նախագիծը իդեալական է այս տարվա համար, քանի որ մեզանից շատերը գտնվում էին արգելափակման մեջ ՝ չկարողանալով հանդիպել և շփվել ընկերների և ընտանիքի հետ: Ինչու՞ չմիանալ տոնածառի միջոցով:)

Այս Instructable- ում ես մանրամասն կբացատրեմ, թե ինչպես է ստեղծվել այս նախագիծը:

Քայլ 1: Հմտության մակարդակ

Այս նախագիծը ավելի շատ ծրագրային ուղղվածություն ունի: Բայց մի վախեցեք: Որոշ հաջողություններ և քեռի Google- ի օգնությունը անչափ կօգնեն:)

Դուք պետք է ունենաք 3 հմտությունների հավաքածու (կամ առանց անհանգստության կսովորեք դրանք) ՝ վեբ սերվերի մաս, Arduino մաս և, իհարկե, տոնածառ:

Առաջարկվող գիտելիքներ.

• Համակարգչային և ծրագրավորման հիմնական հմտություններ

• Հիմնական Linux տերմինալային գիտելիքներ

• Համակարգչային ցանցերի հիմնարար գիտելիքներ

• Էլեկտրոնիկայի հիմնական գիտելիքներ

• Google- ի և այլ «հատուկ» ունակությունների օգտագործման հմտություններ

• Պետք է իմանա, թե ինչպես տեղադրել տոնածառ:)

Եթե դուք ունեք տեխնոլոգիայի և ծրագրավորման որոշակի զգացում, ապա պետք է կարողանաք սովորել այս բանը կարգավորել այս Հրահանգի համաձայն:

Քայլ 2: Գործիքներ և բաղադրիչներ

Տոնածառի կողքին ձեզ հարկավոր կլինի. • Տոնածառ (d'oh…)

• NodeMCU միկրոհսկիչ տախտակ

(կարող եք նաև օգտագործել ESP32 կամ այլ Wi-Fi կամ Ethernet տախտակներ)

• հասցեավորվող RGB LED ժապավեն: հասցեավորվող RGB լուսադիոդային ժապավենը կփրկի շատ Arduino GPIO- ներ (https://www.sparkfun.com/products/11020)

• Softwareրագրակազմ NodeMCU- ի համար (տրամադրված է այս հրահանգում)

Սերվերի կողմից ձեզ հարկավոր է.

• Վիրտուալ մասնավոր սերվեր ՝ հանրային IP- ով: Այստեղ դուք ստանում եք 100 դոլար անվճար DigitalOcean- ում ՝

• տիրույթ (ըստ ցանկության), որը կարող եք գրանցել ցանկացած գրանցող կազմակերպությունում, օրինակ ՝

• Նվիրված ծածկագիր (տրամադրվում է սույն հրահանգով)

Քայլ 3. Կարգավորեք վիրտուալ մեքենա (համակարգիչ) ՄԱՍ 1

Անցնենք անմիջապես կոդավորմանը:)

Մեզ պետք է սերվեր, որը կշփվի կայքի և NodeMCU- ի հետ:

DigitalOcean- ի սերվերները մեզ թույլ են տալիս ունենալ վիրտուալ մեքենա ՝ հանրային IP հասցեով, ինչը նշանակում է, որ մենք կարող ենք ծառայություններ գործարկել դրա վրա և մուտք գործել դրանք ամբողջ աշխարհում:

DigitalOcean ամսական բաժանորդագրությունը վճարելուց հետո (կարող եք օգտագործել 60 օր անվճար փորձաշրջան), ստեղծեք նախագիծ և անվանեք այն տոնածառ կամ ինչ ուզում եք:

Այժմ կարող եք ստեղծել ձեր վիրտուալ մեքենան (հեռակա հասանելի վիրտուալ համակարգիչ) ՝ կտտացնելով «Սկսել կաթիլից» (որը հիմնականում DigitalOcean- ի անունն է վիրտուալ մեքենայի համար):

Կհայտնվի կազմաձևման էջ, և դուք կարող եք մնալ կանխադրված ՝ Ubuntu պատկեր, հիմնական ծրագիր և առանց արգելափակման պահեստավորման (5 $ /ամիս)

Քայլ 4. Կարգավորեք վիրտուալ մեքենա (համակարգիչ) ՄԱՍ 2

Տվյալների կենտրոնի տարածքն այն վայրն է, որտեղ կստեղծվի ձեր սերվերը:

Ընտրեք ձեզ և ձեր հավանական օգտագործողներին ամենամոտ մեկը: Սա կապահովի ամենացածր պատասխանի ժամանակը:

Ավելին, նույնականացման բաժնում ձեզանից կպահանջվի մուտքագրել ձեր վիրտուալ մեքենա մուտք գործելու գաղտնաբառ:

«Ավարտել և ստեղծել» բաժնում պահպանեք 1 կաթիլի լռելյայն տարբերակը, ընտրեք տանտիրոջ անունը (կրկին տոնածառ), ընտրեք նախկինում ստեղծված ձեր նախագիծը, եթե լռելյայն չի ընտրված և կտտացրեք Ստեղծել կաթիլ: Սա կտեւի մի քանի րոպե: Սեղմելով ձեր նախագծի վրա ՝ ձախ կողմում նավարկության բաժնում, կտեսնեք ձեր կաթիլը:

Քայլ 5. Կազմաձևեք վիրտուալ մեքենա (համակարգիչ) ՄԱՍ 3

Սեղմելով կաթիլից աջ գտնվող երեք կետերի վրա, կարող եք սեղմել Access վահանակը, որը ձեզ կստիպի մուտք գործել ձեր վիրտուալ համակարգիչ:

Բրաուզերի նոր փոքր պատուհան կբացվի: Այժմ սա աշխատասեղանի միջավայր չէ, ինչպես ձեր Windows 10 -ում կամ Ubuntu- ում ՝ Graphical interface համակարգչով:

Այնուամենայնիվ, ամեն ինչ կարելի է անել վահանակի ինտերֆեյսի միջոցով:

Դա այնքան սարսափելի չէ, որքան թվում է:)

Քայլ 6. Կարգավորեք վիրտուալ մեքենա (համակարգիչ) ՄԱՍ 4

Դուք հաջողությամբ ստեղծել եք ձեր սեփական վիրտուալ մեքենան DigitalOcean ամպի մեջ:

Հաջորդ քայլերում դուք կստեղծեք վեբ սերվեր, որը կոչվում է Apache և կստեղծեք ձեր սեփական վեբ էջը:

Ներբեռնեք Filezilla հաճախորդը այստեղ https://filezilla-project.org/download.php?platfo… (կամ գտեք 32 բիթանոց տարբերակը 32 բիթ օպերացիոն համակարգի համար) և տեղադրեք այն: Այն FTP (Ֆայլերի փոխանցման արձանագրություն) հաճախորդ է:

Դուք կկարողանաք մուտք գործել և փոխանցել ֆայլեր ձեր վիրտուալ մեքենայից:

Տեղադրվելուց հետո կտտացրեք ֆայլը → կայքի կառավարիչ → նոր կայք և մուտքագրեք տվյալները, ինչպես վերևի պատկերը:

Արձանագրություն. SFTP (Անվտանգ ֆայլերի փոխանցման արձանագրություն)

Հյուրընկալող ՝ ձեր սերվերի IP- ն, գտեք ձեր DigitalOcean նախագծում:

Օգտվողը արմատ է և գաղտնաբառը այն է, ինչ դուք սահմանել եք այն ձեր կաթիլների ստեղծման ժամանակ:

Կտտացրեք OK և միացեք ձեր վիրտուալ մեքենային:

Դուք նախազգուշացվելու եք, հյուրընկալողի բանալին անհայտ է: Հետևեք երկրորդ պատկերին:

Ստեղծեք ծրագրի տեղական թղթապանակ և հանեք ձեր ծրագրի ֆայլերը, որոնք ներբեռնելու եք այստեղ:

Դուք կփոխեք ձեր ֆայլերը ձեր համակարգչում և դրանք փոխանցեք ձեր վիրտուալ մեքենային ամեն անգամ, երբ ցանկանում եք ստուգել կամ թարմացնել կոդը:

Քայլ 7: Տեղադրեք վեբ սերվեր

Մուտք գործեք ձեր կաթիլային վահանակ ՝ օգտվողի անվան արմատով և գաղտնաբառով:

Քանի որ մենք չունենք գրաֆիկական ինտերֆեյս, մենք օգտագործում ենք հրամաններ ՝ ձեր վիրտուալ մեքենան կառավարելու համար: Ահա մի քանի սովորական հրամաններ, որոնք կօգտագործեք Ubuntu- ում (Linux).

• pwd - տպել իմ ընթացիկ գրացուցակը

• ls - ցուցակագրել ֆայլեր և թղթապանակներ իմ ընթացիկ գրացուցակում

• cd / - տեղափոխել / գրացուցակ (թղթապանակ, որը ներառում է Linux- ի հիմնական գրացուցակները և այլն, bin, boot, dev, root, home, var և այլն)

Run ասելով ՝ նկատի ունեմ, մուտքագրեք հրամանը և սեղմեք enter:

Այժմ մենք գործարկելու ենք apt -get update -y համակարգը թարմացնելու համար:

Գործարկեք apt install apache2 -y ՝ Apache վեբ սերվերը տեղադրելու համար:

Ձեր Apache ողջույնի էկրանը պետք է հասանելի լինի ձեր դիտարկիչից ձեր https:// virtual-machine-ip- ում:

Վիրտուալ մեքենա-ip- ը փոխարինեք ձեր վիրտուալ մեքենայի ip- ով, օրինակ ՝ 165.12.45.123: Կարող եք նաև բաց թողնել https://, քանի որ այն ինքնաբերաբար կավելացվի:

Շնորհավոր!

Նշում:

Եթե ցանկանում եք, որ ձեր կայքը հասանելի լինի անունով, այլ ոչ թե IP հասցեով (ինչպես ես օգտագործել եմ https://blinkmytree.live/), գնացեք տիրույթի մատակարար GoDaddy կայք կամ նմանատիպ (namecheap.com և այլն..) և հետևեք հրահանգներին այստեղ ՝

Որոշ տիրույթի անուններ շատ էժան են: Իմ տիրույթը տարեկան ընդամենը 2 դոլար արժեր: Միանշանակ արժե գումարը:)

Քայլ 8: Տեղադրեք վեբ հավելվածի շրջանակ

Վերադառնանք մեր վահանակին: Մի վախեցիր:)

Օգտագործեք Filezilla- ը ՝ ներսում /տան ներսում ծրագիր անունով պանակ ստեղծելու համար, այնպես որ /տուն /ծրագիրը կդառնա ձեր թղթապանակը

Գործարկեք cd /home /ծրագիրը ՝ հավելվածի պանակ մուտք գործելու համար:

Գործարկեք apt install npm -y ՝ npm փաթեթի կառավարիչը տեղադրելու համար: Սա կտեւի մի քանի րոպե:

Գործարկեք npm init -y ֆայլը pack.json ստեղծելու համար, որը հետևելու/հիշելու է ծրագրի մասին հիմնական փաթեթի տվյալները:

Գործարկել npm -պահպանել տեղադրման cors express մոդուլները cors, express տեղադրելու համար

Cors- ը խաչաձև կայքի հասանելիությունը կազմաձևելու մոդուլ է և express- ը վեբ հավելվածի շրջանակ է:

Npm- ը փաթեթների կառավարիչ է, որը մենք օգտագործել ենք, և մենք կօգտագործենք node.js JavaScript- ի գործարկումը ՝ ծրագրավորման ծրագրավորման ինտերֆեյսը (API) ծրագրավորելու համար, որը, http սերվերի հետ համատեղ, կընդունի LED- ների վրա գույներ կիրառելու HTTP հարցումները, կնշի դրանց արժեքները (գույները) հիշողության մեջ, և արժեքները փոխանցեք NodeMcu- ին, երբ դա պահանջի:

Նշում. NodeMcu- ի հանգույցը կապ չունի node.js.- ի հանգույցի հետ: NodeMcu- ն կարող է փոխարինվել ինտերնետին միացած arduino զարգացման տախտակով, NXP զարգացման տախտակով կամ հատուկ Microchip/NXP/Renesas/STM/Atmel PCB- ով: Node.js- ը կարող է փոխարինվել նաև. Net շրջանակով, PHP- ով կամ որևէ այլ հարթակով: Բայց պարզության համար մենք օգտագործում ենք NodeMCU և Node.js.

Այժմ, եկեք փորձարկենք, եթե կարողանանք մի փոքր ծրագիր գործարկել node.js- ում

Ստեղծեք index.js անունով ֆայլ ՝ գրանցամատյանում/նոթատետրում ++ կամ ձեր օգտագործած այլ խմբագրիչով կամ զարգացման ինտեգրված միջավայրով (Visual Studio Code https://code.visualstudio.com/) ձեր տեղական թղթապանակում:

Տեղադրեք այս կոդը դրա մեջ.

var http = պահանջում ('http');

http.createServer (գործառույթ (պահանջ, res) {

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

res.end («Բարև աշխարհ»);

}): լսեք (8080);

Պահեք այն և փոխանցեք այն թղթապանակ/տուն/ծրագիր որպես index.js ՝ FileZilla- ում ֆայլը կրկնակի սեղմելով/քաշելով:

Գործարկեք node index.js և թողեք այն գործարկված:

Այժմ, մեր դիտարկիչից կարող ենք մուտք գործել մեր էջը ՝ https:// virtual-machine-ip: 8080: Կհայտնվի սպիտակ էջ Hello World տեքստով:

Շնորհավորում եմ, դուք պարզապես վեբ սերվեր եք ստեղծել node.js- ում:

Քայլ 9: Պատրաստեք ծրագրակազմը

Գնացեք վահանակ և դադարեցրեք ծրագիրը ՝ սեղմելով ctrl+C:

Փոխարինեք ձեր index.js ֆայլը/home/app/և այն փոխարինեք մեր index.js- ով:

Կայքի բոլոր ֆայլերը կարող եք ներբեռնել այստեղ ՝

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

Պատճենեք մեր Chrismas ծառի ծածկագիրը html թղթապանակից դեպի հեռավոր գրացուցակ/var/www/html/Filezilla- ով: Որոշ ժամանակ կպահանջվի: Եթե դա ձեզ խնդրում է, index.html- ը փոխարինեք նորով:

Կրկին տեղադրեք ձեր IP հասցեն ձեր նախընտրած վեբ դիտարկիչում:

Դուք պարզապես վեբ հավելվածը հասանելի դարձրեցիք https:// virtual-machine-ip կայքում:

Քայլ 10. Back-end կոդի չհասկացում և այն աշխատեցնելը

Նշում. Ձեր հետևի կոդը գտնվում է /տանը /ծրագրում

Հիշեք, որ ձեր կոդը տեղական խմբագրելուց հետո մի մոռացեք այն վերբեռնել ձեր սերվեր FileZilla- ի միջոցով և վերագործարկեք ձեր հանգույցի ծրագիրը (մխիթարել ՝ ctrl+c, սլաքը վերև (ցույց է տալիս վերջին հրամանի հանգույցը index.js), մուտքագրեք)

Կոդն աշխատելու համար նախ պետք է մուտքագրեք մի քանի տվյալ:

Նախ, ձեզ հարկավոր է index.js- ում hostname փոփոխական փոխել ձեր սեփական տիրույթին կամ IP- ին (ինչ -որ բան նման է ՝ 165.13.45.123):

Երկրորդ, ես ձեզ կառաջնորդեմ կոդի միջոցով այն հասկանալու համար: Համոզվեք, որ բաց չթողնեք կոդով իմ արած մեկնաբանությունները:

Index.js ֆայլում կարող եք տեսնել, որ մենք ստեղծում ենք ծրագիր ՝ օգտագործելով արագ մոդուլ: Այնուհետև մենք դրա վրա կիրառում ենք CORS կանոններ, ավելացնում API- ներ և սկսում http սերվեր: Այս սերվերը չի սպասարկի վեբ էջ GET http հարցումների միջոցով, բայց կծառայի առաջնորդվող պետություններին GET http հարցման միջոցով և կթարմացնի led պետությունները ստացված PUT http հարցումների դեպքում:

API- ները սովորական պրակտիկա են `ծրագրերի միջև տեղեկատվության փոխանակման համար: Ամենատարածվածը, որն օգտագործում ենք, REST API- ն է, որը մենք ինքներս ենք օգտագործում: Նրանք քաղաքացիություն չունեն և չունեն մշտական կապ (shorturl.at/aoBC3, PUT- ի հարցումները պարզապես թարմացնում են առաջնորդվող վիճակները հավելվածների զանգվածի փոփոխականում (հիշողություն), GET- ի հարցումները պարզապես ուղարկում են առաջնորդվող պետությունները հաճախորդին:

Հաճախորդի պատասխանը սովորաբար JSON նշման մեջ է, բայց 30 LED վիճակի այս պարզ պատասխանի համար մենք պարզապես ուղարկում ենք 30 ստորակետով առանձնացված արժեքների տող:

Քայլ 11. Հասկանալ առաջնային ծածկագիրը և այն դարձնել աշխատող ՄԱՍ 1

Նշում. Ձեր առաջնային ծածկագիրը `/var/www/html

Հիշեք, որ ձեր կոդը տեղական խմբագրելուց հետո մի մոռացեք այն վերբեռնել ձեր սերվեր ՝ օգտագործելով FileZilla- ն: Ի տարբերություն node.js- ի, Apache- ն ինքնաբերաբար վերագործարկվում է, բայց դուք ստիպված կլինեք ձեր էջը վերաբեռնել ձեր դիտարկիչում: Օգտագործեք ctrl+f5 ՝ ձեր էջի քեշը թարմացնելու և ջնջելու համար:

Որպեսզի կոդը աշխատի, ձեզ հարկավոր է մուտքագրել մի քանի տվյալներ: Նախ, դուք պետք է փոխեք send.request գործառույթի url փոփոխականը index.html- ից blinkmytree.live ձեր սեփական տիրույթին կամ IP- ին, օրինակ ՝ 165.13.45.123:

Երկրորդ, ես ձեզ կառաջնորդեմ կոդի միջոցով այն հասկանալու համար: Համոզվեք, որ բաց չթողնեք կոդով իմ արած մեկնաբանությունները: Էջը HTML փաստաթուղթ է: Մի կողմ թողնելով CSS- ի բոլոր կանոնները (էջի ոճը և բովանդակության դիրքը), մենք կանդրադառնանք գործառույթների կարևոր բովանդակությանը: CSS- ի մասին ավելին իմանալու համար այցելեք

Մենք ցանկանում էինք, որ այս հիմնական հնարավորությունները (արագաշարժ մեթոդների փորձագետները կասեն օգտվողի պատմությունները) էջում.

• Էջում տեղադրված կենդանի տեսանյութ

• Տոնածառի վրա սեղմվող լուսադիոդներ, որոնք շահարկվել են Gimp պատկերի խմբագրիչում (https://www.gimp.org/):

• Փաստացի հաղորդակցություն սերվերի հետ, որը սպասում է փոխել պետությունները:

Քայլ 12. Հասկանալ առաջնային ծածկագիրը և այն դարձնել աշխատող ՄԱՍ 2

Երբ մենք ունենանք մեր տոնածառը `LED- ների և գույների ընտրությամբ, մենք պետք է տարածքներ ստեղծենք և գործողություններ կատարենք դրանց վրա, այնպես որ, երբ կտտացնենք գունավոր LED- ին պատկերի ընտրող հատվածում, կընտրվի գույն, և մեկը մենք կտտացնում ենք LED- ի վրա, հրամանը կուղարկվի սերվերին, որտեղ Arduino- ն կընտրի իր արժեքը:

HTML5- ում ՝ HTML- ի նորագույն ստանդարտում, կա մի բան, որը կոչվում է պատկերի քարտեզ: Այն թույլ է տալիս սահմանել նկարի վրա տարածքներ, որոնք կարող ենք կիրառել գործողությունների ունկնդիրների վրա:

Քանի որ մենք շատ տարածքներ ունենք սահմանելու, մենք առցանց գործիք օգտագործեցինք https://www.image-map.net/ ՝ այս տարածքները սահմանելու համար և պատճենեցինք HTML կոդը մեր էջում:

Երբ դա անենք, մենք կարող ենք onclick իրադարձությունը տեղադրել այն գործառույթով, որն այն կանչում է և LED համարի պարամետր այս տարածքներից յուրաքանչյուրի համար: Տես վերևի սքրինշոթը:

Քայլ 13. Հասկանալով առաջնային ծածկագիրը և այն գործարկել ՄԱՍ 3

HTML- ի վերջի ներսում, տարածաշրջանում, մենք տեղադրում ենք JavaScript ՝ որոշելու այն գործառույթները, որոնք մենք անվանում ենք onclick իրադարձություններում: Գլոբալ առումով մենք սահմանում ենք XMLHttpRequest, որն օգտագործում ենք PUT հարցում ուղարկելու համար

Մենք ունենք երկու գործառույթ.

ֆունկցիա set_color (val)

գործառույթ send_quest (id)

API- ի խնդրանքը փորձարկելու համար խորհուրդ եմ տալիս սովորաբար օգտագործվող ծրագրային գործիք, որը կոչվում է Փոստատար https://www.postman.com/: Այն թույլ է տալիս մեզ պարզապես API- ի հարցում ուղարկել սերվերին ՝ առանց ծրագրավորման հմտությունների: Այն թույլ է տալիս ծաղրել սերվերին և ընդունել նաև հարցումները:

Քայլ 14. Հասկանալով առաջնային ծածկագիրը և այն գործարկել ՄԱՍ 4

Ձեր դիմումն աշխատում է:

Տեղյակ եղեք, որ թվերը հակառակ են, այսինքն ՝ 20 -ը 1 է, 1 -ը ՝ 20, դա պայմանավորված է նրանով, որ ծառի վրա LED- ները սկսվում են ներքևից, բայց ավելի լավ օգտագործողի փորձի համար մենք սկիզբ ենք դնում դեպի վերև:

Եթե ցանկանում եք, դեռ պետք է ստեղծեք ուղիղ հեռարձակում YouTube- ում և փոխարինեք YouTube տեսանյութի ներկառուցված ծածկագիրը ձեր սեփականով:

Քայլ 15. Arduino ծածկագիրը

ESP8266- ը վարում է HTTP Client- ի հիմնական ուրվագիծը, որը փոքր -ինչ փոփոխված է ՝ տվյալները ստանալով իմ կայքից API կանչի միջոցով:

Դուք նաև պետք է գրադարաններ տեղադրեք LED շերտը վերահսկելու համար, եթե ցանկանում եք օգտագործել նույն հասցեագրված RGB ժապավենը, ինչ ես:

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

Կցվածս ուրվագծում դուք պետք է ձեր wi-fi անունը և գաղտնաբառը մուտքագրեք ձեր վեբ կայք (տես մեկնաբանությունները)

Մենք հիմնականում փոխում ենք http պատասխանը C տիպի տողի, այնպես որ կարող ենք օգտագործել strtok C գործառույթը ՝ տողը ստորակետներով բաժանելու և leds աղյուսակը սերվերից կարդացած արժեքներով լրացնելու համար: Այնուհետև մենք կոչում ենք մի գործառույթ, որտեղ մենք անցնում ենք աղյուսակով, և արժեքների հիման վրա մենք դարձնում ենք ճիշտ գույնը, որն օգտվողն ակնկալում է:

Վերջ!

Շնորհավորում եմ, հաջողվեց:

Քայլ 16: RGB LED շղթա

Օ,, օh Հիմա ժամանակն է մի փոքր դադար առնել բոլոր կոդավորումներից:)

Քանի որ ESP8266- ը չունի բազմաթիվ GPIO կապում LED- ները անհատապես վերահսկելու համար, ես օգտագործեցի այս հասցեական RGB LED շղթան.

www.sparkfun.com/products/11020

Այս կերպ, բոլոր 20 RGB լուսարձակները (ընդամենը 60 led) կարող են վերահսկվել միայն երկու կապով `« տվյալների »և« ժամացույցի »և 5 Վ լարման միջոցով անմիջապես ESP8266- ից:

Շերտը NodeMcu- ին միացնելը հեշտ է: 5V դեպի Vin NodeMcu- ում (5V USB- ից), դեղին մետաղալար ՝ 12 -րդ կապին, կանաչ մետաղալար ՝ 14 -ին, գետնից գետնին:

Կարող եք սահմանել անհատական RGB գույն և պայծառություն: Գույների որոշակի խառնուրդով դուք կարող եք արտադրել ՇԱՏ Գույներ յուրաքանչյուր LED- ի համար:

Կա նաև շատ զով գրադարան այս LED- ների հետ բոլոր տեսակի զով արտարժույթի էֆեկտների համար: Փորձեք այն, եթե ցանկանում եք.

github.com/r41d/WS2801FX

Քայլ 17: Deարդարեք տոնածառը:

Դարձրեք այն գեղեցիկ և համոզվեք, որ բոլոր LED- ները տեսանելի են և գեղեցիկ տարածված են ծառի վրա:

Քայլ 18: Վերջնական հպումներ

Երբ ծառը պատրաստ լինի, գեղեցիկ լուսանկարեք և կրկնում եք սեղմման ենթակա դիրքերի պատկերային քարտեզ ստեղծելու քայլը (LED դիրքեր)

Սա LED- ների հետ շփման ամենաինտուիտիվ միջոցն է:

Եթե դուք չեք ցանկանում չափազանց բարդացնել իրերը, կարող եք օգտագործել սովորական կոճակներ:

Դուք նաև պետք է սկսեք ձեր ծառի ուղիղ հեռարձակում YouTube- ում (եթե ցանկանում եք դիտել, թե ինչ է տեղի ունենում իրական ժամանակում) և հոսքը տեղադրել ձեր կայքում:

Քայլ 19: Հիացեք ձեր կայքով

Դուք հիանալի եք, եթե հասաք մինչև հիմա:) Հրավիրեք ձեր ընկերներին (և իհարկե ինձ: P) և ստիպեք նրանց որքան հնարավոր է սեղմել ձեր ծառին:)

n

Սա շատ երկար ուսանելի էր, բավականին բարդ նախագծի համար: Բայց վերջում արժե: D

Շնորհակալություն! Եթե ցանկանում եք կապի մեջ մնալ այն ամենի հետ, ինչի վրա ես աշխատում եմ.

Դուք կարող եք բաժանորդագրվել իմ YouTube ալիքին.

www.youtube.com/c/JTMakesIt

Կարող եք հետևել ինձ նաև Facebook- ում և Instagram- ում

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

փչացնողների համար այն, ինչի վրա ես այժմ աշխատում եմ, կուլիսներում և այլ հավելումներով: Հ. Գ.,:)

www.buymeacoffee.com/JTMakesIt

Եվ մի մոռացեք քվեարկել այս Instructable- ի համար «Ամեն ինչ գնում է» մրցույթում:)