Ar vietni kontrolēta Ziemassvētku eglīte (ikviens to var kontrolēt): 19 soļi (ar attēliem)

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:51

Vai vēlaties uzzināt, kā izskatās vietnē kontrolēta Ziemassvētku eglīte?

Šeit ir video, kurā parādīts mans Ziemassvētku eglītes projekts. Šobrīd tiešraide ir beigusies, bet es izveidoju video, fiksējot notiekošo:

Šogad decembra vidū es gulēju savā gultā un centos aizmigt darba nedēļas vidū. Un tā vietā, lai gulētu, es domāju, kāds būtu foršs Ziemassvētku projekts. Un tad man ienāca prātā forša ideja.

Tā kā esmu slinks ar Ziemassvētku rotājumiem, būtu forši ļaut kādam citam kontrolēt manas Ziemassvētku gaismas, tāpēc man par to nav jāuztraucas.

"Ko darīt, ja es izgatavotu Ziemassvētku eglīšu gaismiņas, kuras KĀDS varētu kontrolēt, izmantojot vietnes saskarni?"

(ievietojiet divas nedēļas bezmiega naktis)

Tātad man izdevās.

Ziemassvētku eglīte ar divdesmit RGB gaismas diodēm, kas savienotas ar internetu, izmantojot ESP8266 Arduino.

Mans draugs (paldies JP) palīdzēja man izveidot vietni (jo es neesmu tekošs programmētājs ar vietnēm saistītām lietām).

Un mēs izveidojām 24/7 youtube tiešraidi no mana koka, lai jūs vienmēr varētu redzēt, ko ieslēdzat vai izslēdzat.

Šis projekts ir ideāli piemērots šim gadam, jo daudzi no mums bija bloķēti un nevarēja tikties un socializēties ar draugiem un ģimeni. Kāpēc ne apvienoties caur Ziemassvētku eglīti?:)

Šajā pamācībā es detalizēti paskaidrošu, kā šis projekts tika izveidots.

1. darbība: prasmju līmenis

Šis projekts ir vairāk orientēts uz programmatūru. Bet nebaidieties, veiksme un onkuļa Google palīdzība ārkārtīgi palīdzēs:)

Jums būs jābūt 3 prasmju kopumam (vai arī jūs tās neuztraucieties): tīmekļa servera daļa, Arduino daļa un, protams, Ziemassvētku eglīte!

Ieteicamās zināšanas:

• Pamatprasmes darbā ar datoru un programmēšanu

• Linux termināļa pamatzināšanas

• Pamatzināšanas par datoru tīklu

• Pamatzināšanas par elektroniku

• Prasmes izmantot Google un citas “īpašas” spējas

• Jāzina, kā uzstādīt Ziemassvētku eglīti:)

Ja jums ir zināma tehnoloģiju un programmēšanas izjūta, jums vajadzētu būt iespējai iemācīties iestatīt šo lietu saskaņā ar šo pamācību.

2. darbība: rīki un sastāvdaļas

Ziemassvētku eglītes pusē jums būs nepieciešams: • Ziemassvētku eglīte (d'oh…)

• NodeMCU mikrokontrolleru plate

(varat izmantot arī ESP32 vai citas ar Wi-Fi vai Ethernet aprīkotas plates)

• Adresējama RGB LED sloksne. adresējama RGB LED sloksne ietaupīs daudz Arduino GPIO (https://www.sparkfun.com/products/11020)

• Programmatūra NodeMCU (iekļauta šajā pamācībā)

Servera pusē jums būs nepieciešams:

• Virtuāls privāts serveris ar publisku IP. Šeit jūs saņemat bezmaksas USD 100 vietnē DigitalOcean

• Domēns (pēc izvēles), kuru varat reģistrēt jebkurā reģistratūras organizācijā, piemēram, • Īpašs kods (komplektā ar šo pamācību)

3. darbība. Virtuālās mašīnas (datora) konfigurēšana 1. DAĻA

Ķersimies tieši pie kodēšanas:)

Mums ir nepieciešams serveris, kas sazināsies ar vietni un NodeMCU.

DigitalOcean serveri ļauj mums izveidot virtuālu mašīnu ar publisku IP adresi, kas nozīmē, ka mēs varam tajā palaist pakalpojumus un piekļūt tiem visā pasaulē.

Kad esat samaksājis DigitalOcean ikmēneša abonementu (varat izmantot 60 dienu bezmaksas izmēģinājuma versiju), izveidojiet projektu un nosauciet to par Ziemassvētku eglīti vai visu, ko vēlaties.

Tagad varat izveidot savu virtuālo mašīnu (attālināti pieejamu virtuālo datoru), noklikšķinot uz "Sākt darbu ar pilienu" (kas būtībā ir DigitalOcean virtuālās mašīnas nosaukums).

Tiks parādīta konfigurācijas lapa, un jūs varat palikt pie noklusējuma: Ubuntu attēls, pamata plāns un bez bloķēšanas (5 USD mēnesī)

4. darbība. Virtuālās mašīnas (datora) konfigurēšana 2. DAĻA

Datu centra reģions ir vieta, kur tiks izveidots jūsu serveris.

Izvēlieties sev un potenciālajiem lietotājiem tuvāko. Tas nodrošinās viszemāko reakcijas laiku.

Turklāt sadaļā Autentifikācija jums tiks lūgts ievadīt paroli, lai piekļūtu virtuālajai mašīnai.

Sadaļā Pabeigt un izveidot noklusējuma vērtību ir 1 piliens, izvēlieties saimniekdatora nosaukumu (atkal Ziemassvētku eglīte), atlasiet iepriekš izveidoto projektu, ja tas nav atlasīts pēc noklusējuma, un noklikšķiniet uz Izveidot pilienu. Tas prasīs dažas minūtes. Noklikšķinot uz sava projekta navigācijas sadaļā pa kreisi, jūs redzēsit savu pilienu.

5. darbība. Virtuālās mašīnas (datora) konfigurēšana 3. DAĻA

Noklikšķinot uz trim punktiem pilienu labajā pusē, varat noklikšķināt uz Piekļuves konsole, kas ļaus jums piekļūt virtuālajam datoram.

Tiks atvērts jauns mazs pārlūkprogrammas logs. Tagad šī nav darbvirsmas vide, piemēram, jūsu Windows 10 vai Ubuntu ar grafiskā interfeisa datoru.

Tomēr visu var izdarīt, izmantojot konsoles saskarni.

Tas nav tik biedējoši, kā izskatās:)

6. darbība. Virtuālās mašīnas (datora) konfigurēšana 4. DAĻA

Jūs esat veiksmīgi izveidojis savu virtuālo mašīnu DigitalOcean mākonī.

Nākamajās darbībās jūs iestatīsit tīmekļa serveri ar nosaukumu Apache un izveidosit savu tīmekļa lapu.

Lejupielādējiet Filezilla klientu šeit: https://filezilla-project.org/download.php?platfo… (vai atrodiet 32 bitu versiju 32 bitu operētājsistēmai) un instalējiet to. Tas ir FTP (failu pārsūtīšanas protokols) klients.

Jūs varēsit piekļūt un pārsūtīt failus no savas virtuālās mašīnas un uz to.

Pēc instalēšanas noklikšķiniet uz faila → vietnes pārvaldnieks → jauna vietne un ievadiet datus, piemēram, iepriekš redzamajā attēlā.

Protokols: SFTP (Secure File Transfer Protocol)

Saimnieks: sava servera IP, atrodiet savā DigitalOcean projektā.

Lietotājs ir root un parole ir tā, ko jūs iestatījāt, izveidojot pilienu.

Noklikšķiniet uz Labi un izveidojiet savienojumu ar savu virtuālo mašīnu.

Jūs tiksit brīdināts, saimniekdatora atslēga nav zināma. Sekojiet otrajam attēlam.

Izveidojiet vietējo mapi projektam un izvelciet šeit lejupielādējamos projekta failus.

Jūs rediģēsit failus savā datorā un pārsūtīsit tos uz savu virtuālo mašīnu katru reizi, kad vēlaties pārbaudīt vai atjaunināt kodu.

7. darbība: instalējiet tīmekļa serveri

Piesakieties savā pilienu konsolē ar lietotājvārda sakni un paroli.

Tā kā mums nav grafiskā interfeisa, mēs izmantojam komandas, lai kontrolētu jūsu virtuālo mašīnu. Šeit ir dažas izplatītas komandas, kuras izmantosit Ubuntu (Linux):

• pwd - izdrukāt manu pašreizējo direktoriju

• ls - sarakstu ar failiem un mapēm manā pašreizējā direktorijā

• cd / - pāriet uz / direktoriju (mape, kurā ir galvenie Linux katalogi, piemēram, utt., Bin, boot, dev, root, home, var un tā tālāk)

Ar run, es domāju, ievadiet komandu un nospiediet enter.

Tagad mēs palaidīsim apt -get update -y, lai atjauninātu sistēmu.

Palaidiet apt install apache2 -y, lai instalētu Apache tīmekļa serveri.

Jūsu Apache sveiciena ekrānam vajadzētu būt pieejamam jūsu https:// virtual-machine-ip pārlūkprogrammā.

Nomainiet virtual-machine-ip ar savu virtuālo mašīnu ip, piemēram, 165.12.45.123. Varat arī izlaist https://, jo tas tiks automātiski pievienots.

Apsveicu!

Piezīme:

Ja vēlaties, lai jūsu vietne būtu pieejama, izmantojot nosaukumu, nevis IP adresi (piemēram, es izmantoju https://blinkmytree.live/), dodieties uz domēna nodrošinātāja vietni GoDaddy vai līdzīgu vietni (namecheap.com utt.) Un izpildiet norādījumus šeit:

Daži domēna vārdi ir ļoti lēti. Mans domēns maksāja tikai 2 USD gadā. Noteikti naudas vērts:)

8. darbība: instalējiet tīmekļa lietojumprogrammu ietvaru

Atpakaļ pie mūsu konsoles. Nebaidies:)

Izmantojiet Filezilla, lai izveidotu mapi ar nosaukumu app iekšā /home, tāpēc /home /app būs jūsu mape

Palaidiet cd /home /app, lai pārietu uz lietotņu mapi.

Palaidiet apt install npm -y, lai instalētu npm pakotņu pārvaldnieku. Tas prasīs dažas minūtes.

Palaidiet npm init -y, lai izveidotu failu package.json, kas izsekos/atcerēsies galvenos paketes datus par lietotni.

Palaist npm -saglabājiet instalēšanas cors express, lai instalētu moduļus cors, express

Cors ir modulis, lai konfigurētu piekļuvi vietnēm, un Express ir tīmekļa lietojumprogrammu ietvars.

Npm ir pakotņu pārvaldnieks, kuru mēs izmantojām, un mēs izmantosim JavaScript izpildlaiku, lai ieprogrammētu mūsu lietojumprogrammu saskarni (API), kas kopā ar http serveri pieņems HTTP pieprasījumus par krāsu piemērošanu gaismas diodēm, atzīmēs to vērtības (krāsas) atmiņā un nododiet vērtības NodeMcu, kad tas to pieprasa.

Piezīme. NodeMcu mezglam nav nekāda sakara ar mezglu nod.js. NodeMcu var aizstāt ar jebkuru ar interneta pieslēgtu arduino izstrādes plati, NXP izstrādes plati vai pielāgotu Microchip/NXP/Renesas/STM/Atmel PCB. Node.js var aizstāt arī ar. Net Framework, PHP vai jebkuru citu platformu. Bet vienkāršības labad mēs izmantojam NodeMCU un Node.js.

Tagad pārbaudīsim, vai mēs varam palaist nelielu programmu nod.js

Vietējā mapē izveidojiet failu ar nosaukumu index.js ar piezīmju grāmatiņu/piezīmju grāmatiņu ++ vai citu redaktoru vai integrētu izstrādes vidi (Visual Studio kods

Ievietojiet tajā šo kodu:

var http = prasīt ('http');

http.createServer (funkcija (req, res) {

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

res.end ('Sveika pasaule!');

}). klausies (8080);

Saglabājiet to un pārsūtiet to uz mapi/mājas/lietotni kā index.js, veicot dubultklikšķi/velkot uz failu FileZilla.

Palaidiet mezglu index.js un atstājiet to darboties.

Tagad mēs no savas pārlūkprogrammas varam piekļūt savai lapai vietnē https:// virtual-machine-ip: 8080. Parādīsies balta lapa ar tekstu Hello World.

Apsveicam, jūs tikko izveidojāt tīmekļa serveri nod.js!

9. solis: Sagatavojiet programmatūru

Dodieties uz konsoli un apturiet programmu, nospiežot ctrl+C.

Nomainiet failu index.js mapē/home/app/un aizstājiet to ar mūsu index.js failā.

Šeit varat lejupielādēt visus vietnes failus:

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

Kopējiet mūsu Ziemassvētku koka kodu no mapes html uz attālo direktoriju/var/www/html/ar Filezilla. Tas prasīs zināmu laiku. Ja tiek prasīts, nomainiet index.html ar jaunu.

Ievietojiet savu IP vēlreiz savā iecienītākajā tīmekļa pārlūkprogrammā.

Jūs tikko padarījāt savu tīmekļa lietojumprogrammu priekšpusi pieejamu vietnē https:// virtual-machine-ip.

10. darbība. Izpratne par aizmugurējo kodu un tā darbība

Piezīme. Jūsu aizmugurējais kods atrodas vietnē /home /app

Atcerieties, ka pēc koda lokālas rediģēšanas neaizmirstiet to augšupielādēt savā serverī, izmantojot FileZilla, un restartējiet mezgla lietojumprogrammu (konsole: ctrl+c, bultiņa uz augšu (parāda pēdējo komandu mezgls index.js), ievadiet)

Lai kods darbotos, vispirms būs jāievada daži dati.

Pirmkārt, jums būs jāmaina resursdatora nosaukuma mainīgais indeksā.js uz savu domēnu vai IP (kaut kas līdzīgs: 165.13.45.123).

Otrkārt, es jums parādīšu kodu, lai to saprastu. Noteikti neizlaidiet komentārus, ko es ievietoju kodā.

Failā index.js varat redzēt, ka mēs izveidojam lietotni, izmantojot ekspresmoduli. Pēc tam mēs tam piemērojam CORS noteikumus, pievienojam API un sākam http serveri. Šis serveris neapkalpos tīmekļa lapu, izmantojot GET http pieprasījumus, bet tas apkalpos vadītos stāvokļus, izmantojot GET http pieprasījumu, un atjauninās vadītos stāvokļus saņemtajos PUT http pieprasījumos.

API ir izplatīta prakse informācijas apmaiņai starp lietojumprogrammām. Visbiežāk mēs izmantojam REST API, kuras izmantojam paši. Viņi ir bezvalstnieki un tiem nav pastāvīga savienojuma (shorturl.at/aoBC3, PUT pieprasījumi vienkārši atjaunina LED stāvokļus lietotņu masīva mainīgajā (atmiņā), GET pieprasījumi vienkārši nosūta vadītos stāvokļus klientam.

Atbilde klientam parasti ir JSON apzīmējumā, bet, lai atbildētu uz šo vienkāršo 30 LED stāvokļu atbildi, mēs vienkārši nosūtām virkni ar 30 komatatdalītām vērtībām.

11. darbība. Izpratne par priekšgala kodeksu un tā funkcionēšana 1. DAĻA

Piezīme: jūsu priekšgala kods ir/var/www/html

Atcerieties, ka pēc koda lokālas rediģēšanas neaizmirstiet to augšupielādēt savā serverī, izmantojot FileZilla. Atšķirībā no node.js, Apache automātiski restartējas, bet jums būs pārlādēt lapu pārlūkprogrammā. Izmantojiet ctrl+f5, lai atsvaidzinātu un izdzēstu arī savas lapas kešatmiņu.

Lai kods darbotos, jums būs jāievada daži dati. Pirmkārt, jums ir jāmaina URL mainīgais funkcijā send_request iekš index.html no blinkmytree.live uz savu domēnu vai IP, piemēram: 165.13.45.123.

Otrkārt, es jums parādīšu kodu, lai to saprastu. Noteikti neizlaidiet komentārus, ko es ievietoju kodā. Lapa ir HTML dokuments. Atstājot malā visus CSS noteikumus (lapas stilu un satura pozīciju), mēs apskatīsim svarīgu funkcionalitātes saturu. Lai uzzinātu vairāk par CSS, apmeklējiet vietni

Mēs vēlējāmies šīs galvenās funkcijas (veiklu metožu eksperti teiktu lietotāju stāstus) lapā:

• Lapā iebūvēts tiešraides video

• Noklikšķināmas gaismas diodes uz Ziemassvētku eglītes, ar kurām tika manipulēts Gimp attēlu redaktorā (https://www.gimp.org/).

• Faktiska saziņa ar serveri, gaidot, lai mainītu vadītos stāvokļus.

12. solis. Izpratne par priekšgala kodu un tā darbības nodrošināšana 2. DAĻA

Kad mūsu Ziemassvētku eglīte ir izvēlēta ar vairākiem gaismas diodēm un krāsām, mums ir jāizveido apgabali un jāpielieto tiem darbības, tāpēc, noklikšķinot uz krāsainās gaismas diodes attēla atlasītāja sadaļā, tiks izvēlēta krāsa un mēs noklikšķinām uz gaismas diodes, komanda tiks nosūtīta uz serveri, kur Arduino izvēlēsies savu vērtību.

Jaunākajā HTML standartā HTML5 ir kaut kas, ko sauc par attēlu karti. Tas ļauj mums definēt attēla apgabalus, kurus mēs varam izmantot darbības klausītājiem.

Tā kā mums ir daudz jomu, ko definēt, mēs izmantojām rīku tiešsaistē https://www.image-map.net/, lai definētu šīs jomas, un nokopējām HTML kodu uz mūsu lapu.

Kad mēs to darām, mēs varam ievietot onclick notikumu ar funkciju, ko tas izsauc, un LED numura parametru katrā no šīm jomām. Skatiet ekrānuzņēmumu iepriekš.

13. darbība. Izpratne par priekšgala kodeksu un tā funkcionēšana 3. DAĻA

HTML pamatteksta beigās reģionā mēs ievietojām JavaScript, lai definētu funkcijas, kuras mēs izsaucam onclick notikumos. Visā pasaulē mēs definējam XMLHttpRequest, ko izmantojam, lai nosūtītu PUT pieprasījumu

Mums ir divas funkcijas:

funkcija set_color (val)

funkcija send_request (id)

Lai pārbaudītu API pieprasījumu, iesaku plaši lietotu programmatūras rīku ar nosaukumu Pastnieks https://www.postman.com/. Tas ļauj mums vienkārši nosūtīt API pieprasījumu serverim bez programmēšanas prasmēm. Tas ļauj izsmiet serveri un pieņemt pieprasījumus.

14. darbība. Izpratne par priekšgala kodeksu un tā funkcionēšana 4. DAĻA

Jūsu lietojumprogramma darbojas.

Ņemiet vērā, ka skaitļi ir apgriezti, tas ir, 20 ir 1 un 1 ir 20, tas ir tāpēc, ka gaismas diodes uz koka sākas no apakšas, bet, lai nodrošinātu labāku lietotāja pieredzi, mēs ievietojam sākumu, kas ved uz augšu.

Ja vēlaties, jums joprojām ir jāizveido tiešraides straume pakalpojumā YouTube un jāaizstāj YouTube videoklipa iegulšanas kods.

15. solis: Arduino kods

ESP8266 vada pamata HTTP klienta piemēra skici, kas ir nedaudz pārveidota, saņemot datus no manas vietnes, izmantojot API zvanu.

Ja vēlaties izmantot to pašu adresējamo RGB joslu kā es, jums būs jāinstalē arī bibliotēkas, lai kontrolētu LED sloksni.

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

Pievienotajā skicē jums savā vietnē būs jāievieto sava wi-fi nosaukums un parole un url (skatiet komentārus)

Mēs pamatā pārvēršam http atbildi C tipa drukātā virknē, lai mēs varētu izmantot funkciju C strtok, lai virkni sadalītu ar komatiem un aizpildītu LED tabulu ar vērtībām, kas nolasītas no servera. Mēs neizsaucam funkciju, kurā aplūkojam tabulu, un, pamatojoties uz vērtībām, iegūstam pareizo lietotāja gaidīto krāsu.

Tā tas ir!

Apsveicam, jums izdevās!

16. darbība: RGB LED ķēde

Ak, vai. Tagad ir pienācis laiks nedaudz pārtraukt visu kodēšanu:)

Tā kā ESP8266 nav daudz GPIO tapu, lai atsevišķi kontrolētu gaismas diodes, es izmantoju šo adresējamo RGB LED ķēdi:

www.sparkfun.com/products/11020

Tādā veidā visus 20 RGB gaismas diodes (kopā 60 gaismas diodes) var kontrolēt tikai ar divām tapām - "dati" un "pulkstenis" un 5 V jauda tieši no ESP8266.

Sloksnes pievienošana NodeMcu ir vienkārša. 5 V līdz Vin uz NodeMcu (5 V no USB), dzeltens vads līdz 12. tapai, zaļš vads līdz 14. tapai, iezemēts līdz zemei.

Jūs varat iestatīt individuālu RGB krāsu un spilgtumu. Ar nelielu krāsu sajaukšanu jūs varat radīt daudz krāsu katrai gaismas diodei.

Ir arī ļoti forša bibliotēka visu veidu foršiem FX efektiem ar šīm gaismas diodēm. Izmēģiniet to, ja jums patīk:

github.com/r41d/WS2801FX

17. solis: izrotājiet Ziemassvētku eglīti

Padariet to skaistu un pārliecinieties, ka visas gaismas diodes ir redzamas un labi izkliedētas pa koku.

18. solis: pēdējie pieskārieni

Kad esat sagatavojis koku, uzņemiet jauku fotoattēlu un atkārtojiet darbību, lai izveidotu klikšķināmo pozīciju attēlu karti (LED pozīcijas)

Tas ir intuitīvākais veids, kā mijiedarboties ar gaismas diodēm.

Ja nevēlaties lietas pārāk sarežģīt, varat izmantot parastās pogas.

Jums arī jāuzsāk sava koka tiešraides straume pakalpojumā YouTube (ja vēlaties skatīties notiekošo reāllaikā) un iegult straumi savā vietnē.

19. solis: apbrīnojiet savu vietni

Tu esi superīga, ja tik tālu esi:)

n

Tas bija ļoti ilgs instrukcijas diezgan sarežģītam projektam. Bet beigās ir tā vērts: D

Paldies! Ja vēlaties sazināties ar to, pie kā es strādāju:

Jūs varat abonēt manu YouTube kanālu:

www.youtube.com/c/JTMakesIt

Jūs varat sekot man arī Facebook un Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

spoileriem par to, pie kā es šobrīd strādāju, aizkulisēs un citas ekstras! PS:., Ja jums PATIEŠĀM, TIEŠĀM patika, jūs varat arī man šeit nopirkt kafiju, tāpēc man būs vairāk enerģijas turpmākajiem projektiem (šis atņēma man 2 nedēļu miegu, jo šo ideju ieguvu par vēlu):)

www.buymeacoffee.com/JTMakesIt

Un neaizmirstiet nobalsot par šo pamācību konkursā "Viss notiek":)