Агуулгын хүснэгт:

Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой): 19 алхам (зурагтай)
Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой): 19 алхам (зурагтай)

Видео: Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой): 19 алхам (зурагтай)

Видео: Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой): 19 алхам (зурагтай)
Видео: ЗАПРЕЩЁННЫЕ ТОВАРЫ с ALIEXPRESS 2023 ШТРАФ и ТЮРЬМА ЛЕГКО! 2024, Оны зургадугаар сарын
Anonim
Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой)
Вэбсайтаар хянагддаг зул сарын гацуур мод (үүнийг хэн ч хянах боломжтой)

Та вэбсайтын хяналттай гацуур мод ямар байдгийг мэдэхийг хүсч байна уу?

Миний зул сарын гацуур модны төслийг харуулсан видео энд байна. Шууд дамжуулалт одоогоор дууссан боловч би юу болж байгааг харуулсан видео хийв.

Энэ жил арванхоёрдугаар сарын дундуур би ажлын долоо хоногийн дундуур унтах гэж орон дээрээ хэвтэж байв. Унтахын оронд Христийн Мэндэлсний Баярын гайхалтай төсөл юу хийх талаар бодож байлаа. Тэгээд нэг гайхалтай санаа надад төрлөө.

Би Христийн Мэндэлсний Баярын чимэглэл хийхдээ залхуу байдаг тул зул сарын гацуурыг минь өөр хүн удирдахыг зөвшөөрөх нь сайхан байх болно, тиймээс би үүнд санаа зовох хэрэггүй болно.

"Хэрэв би хэн ч вэбсайтын интерфейсээр удирдах боломжтой гацуур модны гэрлийг хийвэл яах вэ?"

(хоёр долоо хоног нойргүй шөнө оруулна уу)

Тиймээс би чадсан.

ESP8266 Arduino -ээр интернетэд холбогдсон хорин RGB LED бүхий зул сарын гацуур мод.

Миний найз (JP -д баярлалаа) надад вэбсайт үүсгэхэд тусалсан (учир нь би вэбсайттай холбоотой зүйлийг сайн мэддэг програмист биш).

Мөн бид модныхоо 24/7 youtube шууд дамжуулалтыг хийсэн бөгөөд ингэснээр та юу асааж, унтрааж байгаагаа харах боломжтой болно.

Энэ төсөл нь энэ жилийн хувьд хамгийн тохиромжтой, учир нь бидний ихэнх нь түгжрэлд орсон тул найз нөхөд, гэр бүлийнхэнтэйгээ уулзаж, харилцаж чадахгүй байсан. Зул сарын гацуур модоор нэгдэж яагаад болохгүй гэж:)

Энэхүү гарын авлагад би энэ төслийг хэрхэн хийснийг нарийвчлан тайлбарлах болно.

Алхам 1: Ур чадварын түвшин

Ур чадварын түвшин
Ур чадварын түвшин

Энэ төсөл нь програм хангамжид илүү чиглэсэн болно. Гэхдээ бүү ай, зарим нэг аз, Google авга ахын тусламж асар их тус болно:)

Та 3 ур чадвартай байх ёстой (эс тэгвээс та тэдэнд санаа зовох зүйлгүй болно): вэб серверийн хэсэг, Arduino хэсэг, зул сарын гацуур мод!

Санал болгож буй мэдлэг:

• Компьютер, програмчлалын анхан шатны мэдлэгтэй

• Линукс терминалын үндсэн мэдлэг

• Компьютерийн сүлжээний анхан шатны мэдлэгтэй

• Электроникийн анхан шатны мэдлэгтэй

• Google болон бусад "онцгой" чадварыг ашиглах ур чадвар

• Зул сарын гацуур модыг хэрхэн яаж хийхээ мэддэг байх ёстой:)

Хэрэв танд технологи, програмчлалын талаар ямар нэгэн ойлголт байгаа бол та энэ зааврын дагуу үүнийг тохируулж сурах боломжтой байх ёстой.

Алхам 2: Багаж хэрэгсэл ба бүрэлдэхүүн хэсгүүд

Зул сарын гацуур модны талд танд дараахь зүйлс хэрэгтэй болно: • зул сарын гацуур мод (d'oh …)

• NodeMCU микро хянагчийн самбар

(та ESP32 эсвэл бусад Wi-Fi эсвэл Ethernet ашиглах боломжтой хавтанг ашиглаж болно)

• хаяглах RGB LED зурвас. хаягтай RGB LED зурвас нь маш олон Arduino GPIO -г хэмнэх болно (https://www.sparkfun.com/products/11020)

• NodeMCU програм хангамж (энэ зааварт заасан болно)

Серверийн талд танд дараахь зүйлс хэрэгтэй болно.

• Нийтийн IP бүхий виртуал хувийн сервер. Эндээс та DigitalOcean дээр 100 доллар үнэгүй авах боломжтой

• Та дурын бүртгэгч байгууллагад бүртгүүлэх боломжтой домэйн (заавал биш), жишээ нь

• Зориулалтын код (энэхүү зааварчилгааны хамт дагалдана)

Алхам 3: Виртуал машиныг (компьютер) тохируулах 1 -р хэсэг

Виртуал машиныг (компьютер) тохируулах 1 -р хэсэг
Виртуал машиныг (компьютер) тохируулах 1 -р хэсэг

Шууд кодчилол руу орцгооё:)

Бидэнд вэбсайт болон NodeMCU -тай харилцах сервер хэрэгтэй байна.

DigitalOcean дээрх серверүүд нь олон нийтийн IP хаягтай виртуал машинтай болох боломжийг олгодог бөгөөд энэ нь бид үүн дээр үйлчилгээ явуулж, дэлхий даяар хандах боломжтой гэсэн үг юм.

Та DigitalOcean -ийн сарын захиалгыг төлсний дараа (та 60 хоногийн үнэгүй туршилтыг ашиглаж болно), төсөл зохиож зул сарын гацуур мод эсвэл хүссэн зүйлээ нэрлээрэй.

Та одоо виртуал машинаа (алсын зайнаас нэвтрэх боломжтой виртуал компьютер) "дусал дуслаар эхлүүлэх" (үндсэндээ DigitalOcean -ийн виртуал машины нэр) дээр дарж үүсгэж болно.

Тохиргооны хуудас гарч ирэх бөгөөд та өгөгдмөл хэвээр үлдэх боломжтой: Ubuntu -ийн зураг, үндсэн төлөвлөгөө, блок хадгалалтгүй (5 $ /сар)

Алхам 4: Виртуал машиныг (компьютер) тохируулах 2 -р хэсэг

Виртуал машин (компьютер) -ийг тохируулах 2 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 2 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 2 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 2 -р хэсэг

Мэдээллийн төвийн бүс бол таны серверийг үүсгэх газар юм.

Танд болон таны боломжит хэрэглэгчдэд хамгийн ойр байгаа нэгийг сонгоорой. Энэ нь хамгийн бага хариу өгөх хугацааг өгөх болно.

Цаашилбал, Баталгаажуулах хэсэгт виртуал машиндаа нэвтрэх нууц үгээ оруулахыг танаас хүсэх болно.

Finalize and create хэсэгт 1 дусал өгөгдмөлийг хадгалж, хостын нэрийг (зул сарын гацуур мод) дахин сонгож, анхдагчаар сонгоогүй бол өмнө нь үүсгэсэн төслөө сонгоод дусал үүсгэх дээр дарна уу. Энэ нь хэдэн минут болно. Зүүн талд байгаа навигацийн хэсэгт төсөл дээрээ дарснаар та өөрийн дуслыг харах болно.

Алхам 5: Виртуал машиныг (компьютер) тохируулах 3 -р хэсэг

Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 3 -р хэсэг

Дуслын баруун талд байгаа гурван цэг дээр дарснаар Access консол дээр дарж виртуал компьютерт нэвтрэх боломжтой болно.

Шинэ жижиг хөтөчийн цонх нээгдэнэ. Одоо энэ бол Windows 10 эсвэл Ubuntu график интерфэйстэй компьютер шиг ширээний орчин биш юм.

Гэсэн хэдий ч бүгдийг консолын интерфейсээр хийх боломжтой.

Энэ нь харагдаж байгаа шиг аймшигтай биш юм:)

Алхам 6: Виртуал машиныг (компьютер) тохируулах 4 -р хэсэг

Виртуал машин (компьютер) -ийг тохируулах 4 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 4 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 4 -р хэсэг
Виртуал машин (компьютер) -ийг тохируулах 4 -р хэсэг

Та DigitalOcean үүл дээр өөрийн виртуал машинаа амжилттай бүтээжээ.

Дараагийн алхамуудад та Apache нэртэй вэб серверийг тохируулж, өөрийн вэб хуудсыг тохируулах болно.

Filezilla клиентийг эндээс татаж авна уу https://filezilla-project.org/download.php?platfo… (эсвэл 32 бит үйлдлийн системийн 32 битийн хувилбарыг олоод) суулгаарай. Энэ бол FTP (File Transfer Protocol) клиент юм.

Та виртуал машинаас файл руу нэвтрэх, шилжүүлэх боломжтой болно.

Суулгасны дараа файл → сайтын менежер → шинэ сайт дээр дарж дээрх зураг дээрх шиг өгөгдлийг оруулна уу.

Протокол: SFTP (Аюулгүй файл дамжуулах протокол)

Хөтлөгч: Таны серверийн IP, DigitalOcean төслөөс хайж олоорой.

Хэрэглэгч бол root бөгөөд нууц үгээ дусал үүсгэхдээ үүнийг тохируулдаг.

OK дарж виртуал машиндаа холбогдоно уу.

Танд анхааруулах болно, хост түлхүүр нь тодорхойгүй байна. Хоёр дахь зургийг дагана уу.

Төсөлд зориулж локал хавтас үүсгээд эндээс татаж авах төслийн файлуудаа гаргаж аваарай.

Та кодыг турших эсвэл шинэчлэх болгондоо компьютер дээрээ байгаа файлуудаа засварлаж виртуал машин руугаа шилжүүлэх болно.

Алхам 7: Вэб сервер суулгах

Вэб сервер суулгах
Вэб сервер суулгах

Хэрэглэгчийн нэр болон нууц үгээ ашиглан дусал консол руу нэвтэрнэ үү.

График интерфэйс байхгүй тул бид таны виртуал машиныг удирдах командыг ашигладаг. Ubuntu (Linux) дээр ашиглах зарим түгээмэл командуудыг энд оруулав.

• pwd - миний одоогийн лавлахыг хэвлэх

• ls - миний одоогийн лавлах дахь файл, фолдерыг жагсаах

• cd / - / директор руу шилжих (гэх мэт линкийн үндсэн лавлахуудыг агуулсан хавтас, бин, ачаалах, dev, root, home, var гэх мэт)

Гүйлт гэж хэлэхэд командыг оруулаад enter дарна уу.

Одоо бид системийг шинэчлэхийн тулд apt -get update -y ажиллуулах болно.

Apache вэб серверийг суулгахын тулд apt install apache2 -y ажиллуулна уу.

Таны Apache тавтай морилно уу гэсэн дэлгэцийг хөтөчөөсөө https:// virtual-machine-ip дээр үзэх боломжтой байх ёстой.

Virtual-machine-ip-ийг виртуал машины ip-ээр солих, жишээлбэл 165.12.45.123. Та мөн https:// алгасаж болно, учир нь энэ нь автоматаар нэмэгдэх болно.

Баяр хүргэе!

Тэмдэглэл:

Хэрэв та вэбсайтаа IP хаягаар бус нэрээр нэвтрэхийг хүсч байвал (https://blinkmytree.live/ ашигласан шиг) домэйн үйлчилгээ үзүүлэгч GoDaddy эсвэл үүнтэй төстэй (namecheap.com гэх мэт) сайт руу орж зааврыг дагана уу. энд:

Зарим домэйн нэр маш хямд байдаг. Миний домэйн жилд ердөө 2 долларын үнэтэй байсан. Мэдээжийн хэрэг мөнгөний үнэ цэнэтэй:)

Алхам 8: Вэб програмын хүрээ суулгах

Манай консол руу буцах. Битгий айгаарай:)

Filezilla ашиглан /home дотор апп нэртэй фолдер үүсгэ, тэгвэл /home /app нь таны хавтас болно

Апп доторх хавтас руу очихын тулд cd /home /app -ийг ажиллуулна уу.

Npm багцын менежерийг суулгахын тулд apt install npm -y ажиллуулна уу. Энэ нь хэдэн минут болно.

Npm init -y -г ажиллуулснаар програмын талаархи үндсэн багцын өгөгдлийг хянах/санах болно.

Npm ажиллуулах -cors express модулийг суулгахын тулд cors express -ийг хадгална уу

Cors бол сайтын хөндлөн нэвтрэлтийг тохируулах модуль бөгөөд экспресс нь вэб програмын хүрээ юм.

Npm бол бидний ашиглаж байсан багцын менежер бөгөөд бид node.js JavaScript ажиллах хугацааг ашиглан програмын програмчлалын интерфейсээ (API) програмчлах бөгөөд энэ нь http сервертэй хослуулан LED -д өнгө оруулах HTTP хүсэлтийг хүлээн авч, тэдгээрийн утгыг (өнгө) тэмдэглэх болно. санах ойд хадгалж, утгыг NodeMcu -д хүсэлт гаргах үед дамжуулна уу.

Тэмдэглэл: NodeMcu дахь зангилаа нь node.js. дахь зангилаатай ямар ч холбоогүй юм. NodeMcu -ийг интернетэд холбогдсон ардуино хөгжүүлэх самбар, NXP хөгжүүлэх самбар эсвэл өөрчлөн тохируулсан Microchip/NXP/Renesas/STM/Atmel ПХБ -ээр сольж болно. Node.js -ийг мөн. Net framework, PHP эсвэл өөр платформоор сольж болно. Гэхдээ хялбар болгохын тулд бид NodeMCU болон Node.js.

Хэрэв бид node.js дээр жижиг програм ажиллуулж чадвал тест хийцгээе

Notepad/notepad ++ эсвэл өөр засварлагч эсвэл өөрийн ашигладаг хөгжүүлэлтийн орчинтой index.js нэртэй файлыг өөрийн дотоод фолдерт үүсгээрэй (Visual Studio Code

Энэ кодыг оруулна уу:

var http = шаарддаг ('http');

http.createServer (функц (req, res) {

res.writeHead (200, {'Агуулга-Төрөл': 'текст/энгийн'});

res.end ('Сайн уу Дэлхий!');

}). сонсох (8080);

Үүнийг хадгалаад FileZilla дээр давхар товшиж/чирж унагаж index.js хэлбэрээр хавтас/home/app руу шилжүүлэх.

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 фолдероос Filezilla ашиглан алсын лавлах/var/www/html/руу хуулж ав. Үүнд хэсэг хугацаа шаардагдах болно. Хэрэв энэ нь танаас асуух юм бол index.html -ийг шинээр солино уу.

IP хаягаа дуртай вэб хөтөчдөө дахин оруулна уу.

Та дөнгөж сая вэб програмынхаа урд хэсгийг https:// virtual-machine-ip дээр ашиглах боломжтой болголоо.

Алхам 10: Арын кодын үл ойлгогдох байдал, түүнийг ажиллуулах

Үл ойлгогдох арын код ба үүнийг ажиллуулах
Үл ойлгогдох арын код ба үүнийг ажиллуулах

Тэмдэглэл: Таны арын код нь /home /app дээр байна

Та кодоо орон нутгийн хэмжээнд засварласны дараа үүнийг FileZilla ашиглан сервер дээрээ байршуулж, зангилааны програмаа дахин эхлүүлэхээ бүү мартаарай (консол: ctrl+c, сум хүртэл (сүүлчийн тушаалын зангилааны индекс.js), оруулна уу)

Код ажиллахын тулд эхлээд цөөн хэдэн өгөгдлийг оруулах шаардлагатай болно.

Нэгдүгээрт, index.js дахь хостын нэрний хувьсагчийг өөрийн домэйн эсвэл IP болгон өөрчлөх шаардлагатай болно (165.13.45.123 шиг харагдаж байна).

Хоёрдугаарт, би үүнийг ойлгохын тулд кодыг удирдан чиглүүлэх болно. Миний оруулсан кодын тайлбарыг алгасахгүй байхыг анхаарна уу.

Бид экспресс модулийг ашиглан програм үүсгэж байгааг index.js файлаас харж болно. Дараа нь бид CORS дүрмийг хэрэгжүүлж, API нэмж, http сервер ажиллуулна. Энэ сервер нь GET http хүсэлтээр дамжуулан вэб хуудсанд үйлчилдэггүй, гэхдээ энэ нь GET http хүсэлтээр дамжуулж, хүлээн авсан 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 товчийг ашиглана уу.

Код ажиллахын тулд цөөн тооны өгөгдөл оруулах шаардлагатай болно. Нэгдүгээрт, index.html доторх send_request функц дахь url хувьсагчийг blinkmytree.live -аас өөрийн домэйн эсвэл IP болгон өөрчлөх шаардлагатай болно, жишээлбэл: 165.13.45.123.

Хоёрдугаарт, би үүнийг ойлгохын тулд кодыг удирдан чиглүүлэх болно. Миний оруулсан кодын тайлбарыг алгасахгүй байхыг анхаарна уу. Хуудас бол HTML баримт бичиг юм. CSS -ийн бүх дүрмийг (хуудасны хэв маяг, агуулгын байрлал) орхиж, бид чухал агуулгын функциональ байдлыг авч үзэх болно. CSS -ийн талаар илүү ихийг мэдэхийг хүсвэл https://www.w3schools.com/css/ хаягаар орж үзнэ үү.

Бид энэ үндсэн шинж чанаруудыг (уян хатан аргуудын мэргэжилтнүүд хэрэглэгчийн түүхийг хэлэх болно) энэ хуудсанд оруулахыг хүсч байна.

• Хуудсан дээр суулгагдсан шууд видео

• Христийн Мэндэлсний Баярын сүлд модыг Gimp зургийн редактороор (https://www.gimp.org/) ашиглан дарж болох LED гэрэл.

• Сервертэй бодит харилцаа холбоо, удирдсан төлөвийг өөрчлөхийг хүлээж байна.

Алхам 12: Front-end кодыг ойлгож, түүнийг ажиллуулах нь 2-р хэсэг

Front-end кодыг ойлгох, түүнийг ажиллуулах ХЭСЭГ 2
Front-end кодыг ойлгох, түүнийг ажиллуулах ХЭСЭГ 2

Олон тооны LED болон өнгө сонгох зул сарын гацуур модыг авсны дараа бид талбайг бий болгож, тэдгээрт үйлдэл хийх хэрэгтэй тул зургийн сонгогч хэсэгт байрлах өнгөт LED дээр дарахад өнгө сонгогдох болно. бид LED дээр дарахад командыг сервер рүү илгээх бөгөөд Arduino түүний утгыг сонгох болно.

HTML5 -ийн хамгийн сүүлийн стандарт бол дүрсний зураг гэж нэрлэгддэг зүйл байдаг. Энэ нь зурган дээрх талбаруудыг тодорхойлох боломжийг олгодог бөгөөд үүний дээр үйлдлийн сонсогчдыг ашиглаж болно.

Бидэнд тодорхойлох олон талбар байгаа тул бид эдгээр хэсгүүдийг тодорхойлохын тулд онлайн https://www.image-map.net/ хэрэгслийг ашиглан HTML кодыг манай хуудсанд хуулж авлаа.

Үүнийг хийсний дараа бид onclick үйл явдлыг дууддаг функц болон LED дугаарын параметрүүдийг эдгээр талбар бүрт байрлуулж болно. Дээрх дэлгэцийн агшинг үзнэ үү.

Алхам 13: Front-end кодыг ойлгож, түүнийг ажиллуулах 3-р хэсэг

Front-end кодыг ойлгох, түүнийг ажиллуулах 3-р хэсэг
Front-end кодыг ойлгох, түүнийг ажиллуулах 3-р хэсэг

HTML биеийн төгсгөл хэсэгт, бүс нутагт бид onclick үйл явдалд дууддаг функцуудаа тодорхойлохын тулд зарим JavaScript -ийг тавьдаг. Дэлхий даяар бид XMLHttpRequest -ийг тодорхойлдог бөгөөд үүнийг PUT хүсэлт илгээхэд ашигладаг

Бид хоёр функцтэй:

set_color функц (val)

send_request функц (id)

API хүсэлтийг шалгахын тулд би Postman нэртэй түгээмэл хэрэглэгддэг програм хангамжийн хэрэгслийг санал болгож байна https://www.postman.com/. Энэ нь програмчлалын ур чадваргүйгээр API хүсэлтийг сервер рүү илгээх боломжийг бидэнд олгодог. Энэ нь серверийг дооглох, хүсэлтийг хүлээн авах боломжийг олгодог.

Алхам 14: Front-end кодыг ойлгож, түүнийг ажиллуулах нь 4-р хэсэг

Front-end кодыг ойлгох, түүнийг ажиллуулах Хэсэг 4
Front-end кодыг ойлгох, түүнийг ажиллуулах Хэсэг 4

Таны програм ажиллаж байна.

Тоонууд урвуу байна, өөрөөр хэлбэл 20 нь 1, 1 нь 20 байна, учир нь мод дээрх LED нь доод талаас эхэлдэг, гэхдээ хэрэглэгчийн илүү сайн туршлагатай байхын тулд бид эхлэлийг дээд хэсэгт тавьдаг.

Хэрэв та хүсвэл YouTube дээр шууд дамжуулалт үүсгэж, YouTube видеоны оруулах кодыг өөрийн кодоор солих шаардлагатай хэвээр байх болно.

Алхам 15: Arduino код

Arduino код
Arduino код

ESP8266 нь бага зэрэг өөрчлөгдсөн HTTP клиентийн үндсэн схемийг ажиллуулдаг бөгөөд өгөгдлийг вэбсайтаас API дуудлагаар хүлээн авдаг.

Хэрэв та надтай ижил хаягтай RGB зурвас ашиглахыг хүсвэл LED зурвасыг хянах номын санг суулгах шаардлагатай болно.

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

Миний хавсаргасан тоймд та wi-fi нэр, нууц үгээ вэбсайт руу url оруулах шаардлагатай болно (тайлбарыг үзнэ үү)

Бид үндсэндээ http хариултыг C хэлбэрийн тэмдэгт мөр болгон хөрвүүлдэг тул strtok функцийг ашиглан мөрийг таслалаар хувааж, leds хүснэгтийг серверээс уншсан утгуудаар дүүргэж болно. Хүснэгтээр дамжуулж, утгыг үндэслэн хэрэглэгчийн хүлээж буй зөв өнгийг хувиргадаг функцийг бид дууддаг.

Ингээд л боллоо!

Баяр хүргэе, та чадсан!

Алхам 16: RGB LED гинж

RGB LED гинж
RGB LED гинж

Өө, өө. Одоо бүх кодчиллоос бага зэрэг завсарлага авах цаг боллоо:)

ESP8266 нь LED -ийг тус тусад нь хянах олон GPIO зүүгүй тул би энэ хаяглагдах RGB LED гинжийг ашигласан.

www.sparkfun.com/products/11020

Ийм байдлаар бүх 20 RGB гэрлийг (нийт 60 лед) зөвхөн "өгөгдөл", "цаг", ESP8266 -аас 5V хүчээр удирдах боломжтой.

NodeMcu -тай туузыг холбоход хялбар байдаг. NodeMcu дээр 5V -аас 5V (USB -ээс 5V), шар утас 12 -р зүү, ногоон утас 14 -р зүү, газардуулга.

Та RGB өнгө, гэрэлтүүлгийг тус тусад нь тохируулж болно. Өнгө холих замаар та LED тус бүрт маш олон өнгө гаргаж авах боломжтой.

Мөн эдгээр LED бүхий бүх төрлийн сэрүүн FX эффектэд зориулсан маш гайхалтай номын сан байдаг. Хэрэв танд таалагдаж байвал үүнийг туршаад үзээрэй.

github.com/r41d/WS2801FX

Алхам 17: Зул сарын гацуур модыг чимэглээрэй

Зул сарын гацуур модыг чимэглээрэй!
Зул сарын гацуур модыг чимэглээрэй!

Үүнийг гоёмсог болгож, бүх 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

Миний одоо ажиллаж байгаа зүйл, тайзны ард болон бусад нэмэлт зүйлүүдийг сүйтгэгчдэд зориулав! PS.:)

www.buymeacoffee.com/JTMakesIt

Мөн "Anything Goes" уралдаанд энэхүү Instructable -д саналаа өгөхөө бүү мартаарай:)

Зөвлөмж болгож буй: