Коледно дърво, контролирано от уебсайт (всеки може да го контролира): 19 стъпки (със снимки)

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:49

Искате ли да знаете как изглежда елхата, контролирана от уебсайт?

Ето видеото, показващо моя проект на моята елха. Потокът на живо вече е приключил, но направих видео, заснемайки какво се случва:

Тази година, в средата на декември, лежах в леглото си и се опитвах да заспя посред работна седмица. И вместо да спя, мислех какво би бил готин коледен проект. И тогава ми хрумна една готина идея.

Тъй като съм мързелив с коледната украса, би било страхотно да оставя някой друг да контролира коледните ми светлини, така че няма да се притеснявам за това.

„Ами ако направя светлини за коледно дърво, които НЯКОЙ би могъл да контролира чрез интерфейс на уебсайт?“

(поставете две седмици безсънни нощи)

Така че успях.

Коледно дърво с двадесет RGB светодиода, свързани към интернет чрез ESP8266 Arduino.

Един мой приятел (благодаря JP) ми помогна да създам уебсайт (тъй като не съм умел програмист за неща, свързани с уебсайта).

И ние създадохме денонощен YouTube поток на живо на моето дърво, така че да можете да виждате какво включвате или изключвате по всяко време.

Този проект е идеален за тази година, тъй като много от нас бяха в затвора, неспособни да се срещнат и да общуват с приятели и семейство. Защо не се обедините чрез коледно дърво:)

В тази инструкция ще обясня подробно как е направен този проект.

Стъпка 1: Ниво на умения

Този проект е по -софтуерно ориентиран. Но не се страхувайте, че късметът и помощта на чичо Google ще ви помогнат изключително:)

Ще трябва да имате набор от 3 умения (или ще ги научите без притеснение): част от уеб сървър, частта Arduino и коледно дърво, разбира се!

Препоръчителни знания:

• Основни компютърни и програмни умения

• Основни терминални познания за Linux

• Основни познания за компютърни мрежи

• Основни познания по електроника

• Умения за използване на Google и други „специални“способности

• Трябва да знаете как да поставите коледно дърво:)

Ако имате известно усещане за технологии и програмиране, трябва да можете да се научите да настройвате това нещо според тази инструкция.

Стъпка 2: Инструменти и компоненти

От страната на коледното дърво ще ви трябва: • коледно дърво (d'oh …)

• Платка за микроконтролер на NodeMCU

(можете също да използвате ESP32 или други платки, съвместими с Wi-Fi или Ethernet)

• Адресируема RGB LED лента. адресируема RGB LED лента ще спести много Arduino GPIO (https://www.sparkfun.com/products/11020)

• Софтуер за NodeMCU (предоставен в тази инструкция)

От страна на сървъра ще ви трябва:

• Виртуален частен сървър с публичен IP. Тук получавате $ 100 безплатно на DigitalOcean

• Домейн (по избор), който можете да регистрирате във всяка регистрационна организация, например

• Специален код (доставя се с тази инструкция)

Стъпка 3: Конфигуриране на виртуална машина (компютър) ЧАСТ 1

Да преминем направо към кодирането:)

Нуждаем се от сървър, който ще комуникира с уебсайта и NodeMCU.

Сървърите на DigitalOcean ни позволяват да имаме виртуална машина с публичен IP адрес, което означава, че можем да изпълняваме услуги на нея и да имаме достъп до тях по целия свят.

След като платите месечен абонамент за DigitalOcean (можете да използвате 60 -дневен безплатен пробен период), създайте проект и го наречете коледно дърво или каквото искате.

Вече можете да създадете своя виртуална машина (отдалечен виртуален компютър), като щракнете върху „Започнете с капчица“(което е основно името на DigitalOcean за виртуална машина).

Ще се появи страница с конфигурация и можете да останете със стандартно: изображение на Ubuntu, основен план и без съхранение на блокове (5 $ /месец)

Стъпка 4: Конфигуриране на виртуална машина (компютър) ЧАСТ 2

Регионът на център за данни е мястото, където ще бъде създаден вашият сървър.

Изберете най -близкия до вас и вашите потенциални потребители. Това ще осигури най -ниското време за реакция.

Освен това в раздела Удостоверяване ще бъдете помолени да въведете парола за достъп до вашата виртуална машина.

В секцията Завършване и създаване запазете по подразбиране 1 капчица, изберете име на хост (отново коледно дърво), изберете вашия проект, създаден по -рано, ако не е избран по подразбиране, и щракнете върху Създаване на капчица. Това ще отнеме няколко минути. Като щракнете върху вашия проект в раздела за навигация вляво, ще видите капчицата си.

Стъпка 5: Конфигуриране на виртуална машина (компютър) ЧАСТ 3

Като щракнете върху трите точки отдясно на капчицата, можете да щракнете върху Конзола за достъп, което ще ви накара да получите достъп до вашия виртуален компютър.

Ще се отвори нов малък прозорец на браузъра. Сега това не е работна среда, както на вашия Windows 10 или Ubuntu с компютър с графичен интерфейс.

Всичко обаче може да стане чрез конзолен интерфейс.

Не е толкова страшно, колкото изглежда:)

Стъпка 6: Конфигуриране на виртуална машина (компютър) ЧАСТ 4

Успешно създадохте своя собствена виртуална машина в облак DigitalOcean.

В следващите стъпки ще настроите уеб сървър, наречен Apache, и ще настроите своя собствена уеб страница.

Изтеглете Filezilla клиент тук https://filezilla-project.org/download.php?platfo… (или намерете 32-битова версия за 32-битова операционна система) и го инсталирайте. Това е FTP (File Transfer Protocol) клиент.

Ще имате достъп и прехвърляне на файлове от и към вашата виртуална машина.

След като инсталирате, щракнете върху файл → мениджър на сайт → нов сайт и въведете данни като на изображението по -горе.

Протокол: SFTP (Защитен протокол за прехвърляне на файлове)

Водещ: IP на вашия сървър, намерете във вашия проект DigitalOcean.

Потребителят е root и паролата е това, което сте задали при създаването на вашата капчица.

Щракнете върху OK и се свържете с вашата виртуална машина.

Ще бъдете предупредени, ключът на хоста е неизвестен. Следвайте второто изображение.

Създайте локална папка за проекта и извлечете файловете на проекта, които ще изтеглите тук.

Ще редактирате файловете си на компютъра и ще ги прехвърляте на виртуалната си машина всеки път, когато искате да тествате или актуализирате кода.

Стъпка 7: Инсталирайте уеб сървър

Влезте в конзолата за капчици с потребителско име root и парола.

Тъй като нямаме графичен интерфейс, използваме команди за управление на вашата виртуална машина. Ето някои общи команди, които ще използвате в Ubuntu (Linux):

• pwd - отпечатайте текущата ми директория

• ls - списък на файлове и папки в текущата ми директория

• cd / - преместване в / директория (папка, която включва основни директории на linux като etc, bin, boot, dev, root, home, var и т.н.)

Под Run, имам предвид, въведете командата и натиснете enter.

Сега ще стартираме apt -get update -y, за да актуализираме системата.

Изпълнете apt install apache2 -y, за да инсталирате уеб сървър на Apache.

Вашият начален екран на Apache трябва да бъде достъпен на вашия https:// virtual-machine-ip от вашия браузър.

Заменете ip на virtual-machine-ip с ip на вашата виртуална машина, например 165.12.45.123. Можете също да пропуснете https://, тъй като той ще бъде добавен автоматично.

Поздравления!

Забележка:

Ако искате вашият уебсайт да бъде достъпен чрез име, а не чрез IP адрес (както използвах https://blinkmytree.live/), отидете на сайта на доставчика на домейни GoDaddy или подобен (namecheap.com и др.) И следвайте инструкциите тук:

Някои имена на домейни са много евтини. Моят домейн струваше само 2 $ годишно. Определено си заслужава парите:)

Стъпка 8: Инсталирайте рамка за уеб приложения

Обратно към нашата конзола. Не се страхувай:)

Използвайте Filezilla, за да създадете папка с име app вътре /home, така че /home /app ще бъде вашата папка

Стартирайте cd /home /app, за да отидете във вътрешната папка на приложението.

Изпълнете apt install npm -y, за да инсталирате npm мениджър на пакети. Това ще отнеме няколко минути.

Изпълнете npm init -y, за да създадете файл package.json, който ще проследява/запомня основните данни за пакета за приложение.

Изпълнете npm --запишете инсталиращите cors express за инсталиране на модулите cors, express

Cors е модул за конфигуриране на достъп до различни сайтове, а express е рамка за уеб приложения.

Npm е мениджър на пакети, който използвахме и ще използваме node.js JavaScript по време на работа, за да програмираме нашия интерфейс за програмиране на приложения (API), който, комбиниран с http сървър, ще приема HTTP заявки за прилагане на цветове към светодиодите, маркира техните стойности (цветове) в паметта и предава стойностите на NodeMcu, когато го поиска.

Забележка: Node в NodeMcu няма нищо общо с node в node.js. NodeMcu може да бъде заменен с всяка свързана с интернет платка за разработка на arduino, платка за разработка на NXP или персонализирана Microchip/NXP/Renesas/STM/Atmel PCB. Node.js може също да бъде заменен с. Net framework, PHP или друга платформа. Но за простота използваме NodeMCU и Node.js.

Сега нека направим тест, ако можем да стартираме малка програма в node.js

Създайте файл с име index.js с бележник/бележник ++ или друг редактор или интегрирана среда за разработка, която използвате (код на Visual Studio https://code.visualstudio.com/) във вашата локална папка.

Поставете този код в него:

var http = require ('http');

http.createServer (функция (req, 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…

Копирайте кода на коледното дърво от html папка в отдалечена директория/var/www/html/с Filezilla. Ще отнеме известно време. Ако ви попита, заменете index.html с нов.

Поставете отново вашия IP в любимия си уеб браузър.

Току-що сте направили интерфейса на вашето уеб приложение достъпно на https:// virtual-machine-ip.

Стъпка 10: Нестоящ Back-end код и работата му

Забележка: вашият back-end код е at /home /app

Не забравяйте, че след като редактирате кода си локално, не забравяйте да го качите на вашия сървър с помощта на FileZilla и да рестартирате приложението си за възел (конзола: ctrl+c, стрелка нагоре (показва последния команден възел index.js), въведете)

За да работи кодът, първо трябва да въведете няколко данни.

Първо, ще трябва да промените променливата на името на хоста в index.js на свой собствен домейн или 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 заявките просто изпраща led състояния на клиент.

Отговорът на клиента обикновено е в JSON нотация, но за този прост отговор от 30 LED състояния ние просто изпращаме низ от 30 стойности, разделени със запетая.

Стъпка 11: Разбиране на Front-end кода и работата му ЧАСТ 1

Забележка: вашият преден код е/var/www/html

Не забравяйте, че след като редактирате кода си локално, не забравяйте да го качите на вашия сървър с помощта на FileZilla. За разлика от node.js, Apache се рестартира автоматично, но ще трябва да презаредите страницата си в браузъра си. Използвайте ctrl+f5, за да опресните и да изтриете кеша на вашата страница.

За да работи кодът, ще трябва да въведете малко данни. Първо, ще трябва да промените променливата URL в функцията send_request вътре index.html от blinkmytree.live към вашия собствен домейн или IP, например: 165.13.45.123.

Второ, ще ви преведа през кода, за да го разберете. Не пропускайте коментарите, които направих в кода. Страницата е HTML документ. Като оставим настрана всички правила за CSS (стил на страницата и позиция на съдържанието), ще разгледаме важното за функционалността съдържание. За да научите повече за CSS, проверете

Искахме тези основни функции (експерти по гъвкави методи биха казали потребителски истории) на страницата:

• Видео на живо, вградено в страницата

• Светодиоди с възможност за щракване върху коледна елха, които са манипулирани в редактора на изображения Gimp (https://www.gimp.org/).

• Действителна комуникация със сървър, чакаща промяна на състоянията на светодиодите.

Стъпка 12: Разбиране на Front-end кода и неговото функциониране ЧАСТ 2

След като имаме нашата коледна елха с брой светодиоди и цветове, които да изберем, трябва да създадем области и да приложим действия към тях, така че след като щракнем върху цветния светодиод в секция за избор на изображение, ще бъде избран цвят и един щракваме върху светодиод, командата ще бъде изпратена до сървъра, където Arduino ще избере стойността му.

В HTML5, най -новият HTML стандарт, има нещо, наречено карта с изображения. Тя ни позволява да дефинираме области върху изображение, които можем да приложим към него слушатели на действия.

Тъй като имаме много области за дефиниране, използвахме онлайн инструмент https://www.image-map.net/, за да дефинираме тези области и копирахме HTML кода на нашата страница.

След като направим това, можем да поставим onclick събитие с функция, която извиква, и параметър на LED номер към всяка от тези области. Вижте екранната снимка по -горе.

Стъпка 13: Разбиране на Front-end кода и работата му ЧАСТ 3

Вътре в края на HTML тялото, в регион, поставяме малко JavaScript, за да дефинираме функциите, които наричаме в onclick събития. В глобален план дефинираме XMLHttpRequest, който използваме за изпращане на PUT заявка

Имаме две функции:

функция set_color (val)

функция send_request (id)

За тестване на заявка за API препоръчвам често използван софтуерен инструмент, наречен Пощальон https://www.postman.com/. Тя ни позволява просто да изпращаме заявка за API до сървъра, без умения за програмиране. Позволява да се подигравате на сървър и да приемате заявки.

Стъпка 14: Разбиране на Front-end кода и неговото функциониране ЧАСТ 4

Вашето приложение работи.

Имайте предвид, че числата са обърнати, тоест 20 е 1 и 1 е 20, това е така, защото светодиодите на дървото започват отдолу, но за по -добро потребителско изживяване поставяме начало, водещо към върха.

Все пак ще трябва да създадете поток на живо в YouTube, ако го искате, и да замените кода за вграждане на видеоклипа в YouTube със свой собствен.

Стъпка 15: Кодът на Arduino

ESP8266 изпълнява основна примерна скица на HTTP клиент, която е леко променена, като получава данните от моя уебсайт чрез извикване на API.

Също така ще трябва да инсталирате библиотеки за управление на LED лентата, ако искате да използвате същата адресируема RGB лента, както аз.

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

В приложената от вас скица ще трябва да вмъкнете вашето wi-fi име и парола и url към вашия уебсайт (вижте коментарите)

По принцип преобразуваме http отговор в низ от тип C, така че можем да използваме функцията strtok на C, за да разделим низа на запетаи и да запълним таблицата със светодиоди със стойности, прочетени от сървър. След това извикваме функция, при която преминаваме през таблицата и въз основа на стойностите обръщаме правилния цвят, който потребителят очаква.

Това е!

Поздравления, успяхте!

Стъпка 16: RGB LED верига

О, о. Сега е време да си починете малко от цялото кодиране:)

Тъй като ESP8266 няма много GPIO щифтове за индивидуално управление на светодиодите, използвах тази адресируема RGB LED верига:

www.sparkfun.com/products/11020

По този начин всички 20 RGB светодиода (общо 60 светодиода) могат да се контролират само от два пина - „данни“и „часовник“и 5V захранване директно от ESP8266.

Свързването на лентата към NodeMcu е лесно. 5V към Vin на NodeMcu (5V от USB), жълт проводник към щифт 12, зелен проводник към щифт 14, заземен към земя.

Можете да зададете индивидуален RGB цвят и яркост. С известно смесване на цветовете можете да създадете МНОГО цветове за всеки светодиод.

Има и много готина библиотека за всякакви готини FX ефекти с тези светодиоди. Опитайте, ако ви харесва:

github.com/r41d/WS2801FX

Стъпка 17: Украсете коледното дърво

Направете го красив и се уверете, че всички светодиоди са видими и добре разпределени по дървото.

Стъпка 18: Последни щрихи

Когато дървото е готово, направете хубава снимка и повторете стъпката за създаване на картата на изображението на позициите, върху които може да се кликва (LED позиции)

Това е най -интуитивният начин за свързване със светодиодите.

Ако не искате да усложнявате нещата, можете да използвате обикновени бутони.

Трябва също да стартирате поток на живо от вашето дърво в YouTube (ако искате да гледате какво се случва в реално време) и да вградите потока във вашия сайт.

Стъпка 19: Възхищавайте се на уебсайта си

Страхотни сте, ако сте стигнали дотук:) Поканете приятелите си (и аз разбира се: P) и ги накарайте да щракнат възможно най -много върху вашето дърво:)

н

Това беше много дълъг Instructable, за доста сложен проект. Но си заслужава в края: D

Благодаря ти! Ако искате да поддържате връзка с това, върху което работя:

Можете да се абонирате за моя канал в YouTube:

www.youtube.com/c/JTMakesIt

Можете също да ме следвате във Facebook и Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

за спойлери върху това, върху което работя в момента, зад кулисите и други екстри! PS:., Ако НАИСТИНА, НАИСТИНА ви хареса, можете също да ми купите кафе тук, така че ще имам повече енергия за бъдещи проекти (този ми отне 2 седмици сън, тъй като ми хрумна тази идея твърде късно):)

www.buymeacoffee.com/JTMakesIt

И не забравяйте да гласувате за тази инструкция в конкурса "Всичко става":)