Webový vianočný stromček (ktokoľvek ho môže ovládať): 19 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Chcete vedieť, ako vyzerá vianočný stromček ovládaný webovou stránkou?

Tu je video, ktoré ukazuje môj projekt môjho vianočného stromčeka. Priamy prenos sa už skončil, ale urobil som video, ktoré zachytáva, čo sa deje:

Tento rok v polovici decembra som ležal vo svojej posteli a snažil som sa uprostred pracovného týždňa spať. A namiesto spánku som premýšľal, čo by bolo skvelé urobiť ako vianočný projekt. A potom mi napadla skvelá myšlienka.

Keďže som lenivá s vianočnými ozdobami, bolo by skvelé nechať niekoho iného ovládať moje vianočné osvetlenie, takže si s tým nemusím robiť starosti.

„Čo keby som vyrobil osvetlenie vianočného stromčeka, ktoré by Ktokoľvek mohol ovládať prostredníctvom rozhrania webovej stránky?“

(vložte dva týždne bezsenných nocí)

Tak som to stihol.

Vianočný stromček s dvadsiatimi RGB LED diódami pripojenými na internet prostredníctvom ESP8266 Arduino.

Môj priateľ (ďakujem JP) mi pomohol vytvoriť webovú stránku (pretože nie som plynulý programátor pre záležitosti súvisiace s webovými stránkami).

A nastavili sme nepretržitý priamy prenos z môjho stromu na youtube, aby ste vždy videli, čo zapínate alebo vypínate.

Tento projekt je ideálny pre tento rok, pretože mnohí z nás boli v zablokovaní, nemohli sa stretávať a stýkať sa s priateľmi a rodinou. Prečo sa nezlúčiť cez vianočný stromček:)

V tomto návode podrobne vysvetlím, ako bol tento projekt vytvorený.

Krok 1: Úroveň zručnosti

Tento projekt je zameraný viac na softvér. Ale nebojte sa, nejaké šťastie a pomoc strýka Google ohromne pomôžu:)

Budete potrebovať tri zručnosti (alebo sa ich naučíte bez obáv): časť webového servera, časť Arduino a vianočný stromček, samozrejme!

Odporúčané znalosti:

• Základné počítačové a programovacie schopnosti

• Základné znalosti terminálu Linux

• Základné znalosti počítačových sietí

• Základné znalosti elektroniky

• Schopnosti používať Google a ďalšie „špeciálne“schopnosti

• Mali by ste vedieť, ako postaviť vianočný stromček:)

Ak máte nejaký zmysel pre technológiu a programovanie, mali by ste sa naučiť naučiť to nastaviť podľa tohto návodu.

Krok 2: Nástroje a súčasti

Na strane vianočného stromčeka budete potrebovať: • vianočný stromček (d'oh …)

• Doska mikrořadiča NodeMCU

(Môžete tiež použiť ESP32 alebo iné dosky podporujúce Wi-Fi alebo Ethernet)

• Adresovateľný RGB LED pásik. adresovateľný RGB LED pásik ušetrí veľa Arduino GPIO (https://www.sparkfun.com/products/11020)

• Softvér pre NodeMCU (poskytovaný v tomto návode)

Na strane servera budete potrebovať:

• Virtuálny súkromný server s verejnou IP. Tu získate 100 dolárov zadarmo na DigitalOcean

• Doménu (voliteľné), ktorú si môžete zaregistrovať v akejkoľvek registračnej organizácii, napríklad

• Vyhradený kód (dodáva sa s týmto návodom)

Krok 3: Konfigurácia virtuálneho počítača (počítač) ČASŤ 1

Poďme rovno na kódovanie:)

Potrebujeme server, ktorý bude komunikovať s webom a NodeMCU.

Servery na DigitalOcean nám umožňujú mať virtuálny počítač s verejnou IP adresou, čo znamená, že na ňom môžeme prevádzkovať služby a pristupovať k nim po celom svete.

Akonáhle zaplatíte mesačné predplatné DigitalOcean (môžete využiť 60 -dňovú bezplatnú skúšobnú verziu), vytvorte si projekt a pomenujte ho vianočný stromček alebo čokoľvek chcete.

Teraz môžete vytvoriť svoj virtuálny počítač (vzdialene prístupný virtuálny počítač) kliknutím na „Začíname s kvapôčkou“(čo je v zásade názov programu DigitalOcean pre virtuálny počítač).

Zobrazí sa konfiguračná stránka a môžete zostať pri predvolenom nastavení: obrázok Ubuntu, základný plán a žiadne blokové úložisko (5 $ /mesiac)

Krok 4: Konfigurácia virtuálneho počítača (počítač) ČASŤ 2

Oblasť dátového centra je miesto, kde bude vytvorený váš server.

Vyberte si najbližšie k vám a vašim potenciálnym používateľom. To poskytne najnižšiu dobu odozvy.

Ďalej v sekcii Autentifikácia budete požiadaní o zadanie hesla pre prístup k vášmu virtuálnemu počítaču.

V sekcii Dokončiť a vytvoriť ponechajte predvolenú hodnotu 1 kvapôčky, vyberte názov hostiteľa (opäť vianočný stromček), vyberte projekt, ktorý ste predtým vytvorili, ak nie je predvolene vybratý a kliknite na položku Vytvoriť kvapku. Bude to trvať niekoľko minút. Kliknutím na svoj projekt v navigačnej sekcii vľavo uvidíte svoju kvapku.

Krok 5: Konfigurácia virtuálneho počítača (počítač) ČASŤ 3

Kliknutím na tri bodky napravo od kvapôčky môžete kliknúť na položku Prístupová konzola, ktorá vám umožní prístup k virtuálnemu počítaču.

Otvorí sa nové malé okno prehliadača. Teraz to nie je desktopové prostredie, ako vo vašom počítači so systémom Windows 10 alebo Ubuntu s počítačom s grafickým rozhraním.

Všetko je však možné vykonať prostredníctvom rozhrania konzoly.

Nie je to také strašné, ako to vyzerá:)

Krok 6: Konfigurácia virtuálneho počítača (počítač) ČASŤ 4

Úspešne ste vytvorili svoj vlastný virtuálny počítač v cloude DigitalOcean.

V ďalších krokoch nastavíte webový server s názvom Apache a nastavíte si vlastnú webovú stránku.

Stiahnite si klienta Filezilla tu https://filezilla-project.org/download.php?platfo… (alebo nájdite 32-bitovú verziu pre 32-bitový operačný systém) a nainštalujte ho. Je to klient FTP (File Transfer Protocol).

Budete mať prístup k súborom a ich prenos z vášho virtuálneho počítača.

Po inštalácii kliknite na súbor → správca stránok → nový web a zadajte údaje ako na obrázku vyššie.

Protokol: SFTP (Secure File Transfer Protocol)

Hostiteľ: IP vášho servera, ktorú nájdete v projekte DigitalOcean.

Používateľ je root a heslo je to, čo ste nastavili pri vytváraní kvapky.

Kliknite na tlačidlo OK a pripojte sa k svojmu virtuálnemu počítaču.

Budete upozornení, kľúč hostiteľa je neznámy. Postupujte podľa druhého obrázku.

Vytvorte lokálny priečinok projektu a rozbaľte súbory projektu, ktoré si stiahnete tu.

Súbory budete upravovať vo svojom počítači a prenášať do virtuálneho počítača vždy, keď budete chcieť testovať alebo aktualizovať kód.

Krok 7: Nainštalujte si webový server

Prihláste sa do svojej kvapkovej konzoly pomocou používateľského mena root a hesla.

Pretože nemáme grafické rozhranie, používame na ovládanie vášho virtuálneho počítača príkazy. Tu je niekoľko bežných príkazov, ktoré budete používať v Ubuntu (Linux):

• pwd - vytlačí môj aktuálny adresár

• ls - zobrazí zoznam súborov a priečinkov v mojom aktuálnom adresári

• cd / - presun do adresára / (priečinok, ktorý obsahuje hlavné adresáre Linuxu ako atď., Bin, boot, dev, root, home, var atď.)

Behom, myslím, zadajte príkaz a stlačte kláves Enter.

Teraz spustíme apt -get update -y na aktualizáciu systému.

Spustite apt install apache2 -y a nainštalujte webový server Apache.

Vaša uvítacia obrazovka Apache by mala byť prístupná na vašom https:// virtual-machine-ip z vášho prehliadača.

Nahraďte virtual-machine-ip vašim ip virtuálneho počítača, napríklad 165.12.45.123. Môžete tiež preskočiť https://, pretože sa automaticky pridá.

Gratulujem!

Poznámka:

Ak chcete, aby bol váš web prístupný prostredníctvom názvu, nie pomocou adresy IP (ako som použil https://blinkmytree.live/), navštívte webovú stránku poskytovateľa domény GoDaddy alebo podobnú stránku (namecheap.com atď.) A postupujte podľa pokynov. tu:

Niektoré názvy domén sú veľmi lacné. Moja doména stála iba 2 $ za rok. Za tie peniaze to určite stojí:)

Krok 8: Nainštalujte si rámec webových aplikácií

Späť na našu konzolu. Neboj sa:)

Pomocou programu Filezilla vytvorte priečinok s názvom aplikácia vo vnútri /home, takže /home /app bude vašim priečinkom

Spustením cd /home /app sa dostanete do priečinka s aplikáciami.

Spustite apt install npm -y, aby ste nainštalovali správcu balíkov npm. Bude to trvať niekoľko minút.

Spustite npm init -y a vytvorte súbor package.json, ktorý bude sledovať/pamätať si hlavné údaje balíka o aplikácii.

Spustite npm --save install cors express na inštaláciu modulov cors, express

Cors je modul na konfiguráciu prístupu medzi webmi a server Express je rámec webových aplikácií.

NPM je správca balíkov, ktorý sme použili, a na programovanie nášho rozhrania programovania aplikácií (API) použijeme JavaScript runtime node.js, ktorý v kombinácii s http serverom bude prijímať požiadavky HTTP na aplikáciu farieb na diódy LED, označovať ich hodnoty (farby) v pamäti a odovzdajte hodnoty NodeMcu, keď o to požiada.

Poznámka: Uzol v NodeMcu nemá nič spoločné s uzlom v node.js. NodeMcu bolo možné nahradiť akoukoľvek vývojovou doskou Arduino pripojenou k internetu, vývojovou doskou NXP alebo vlastnou doskou Microchip/NXP/Renesas/STM/Atmel. Node.js je tiež možné nahradiť rámcom. Net, PHP alebo inou platformou. Ale pre jednoduchosť používame NodeMCU a Node.js.

Teraz urobme test, či môžeme v programe node.js spustiť malý program

Vytvorte súbor s názvom index.js pomocou programu Poznámkový blok/Poznámkový blok ++ alebo iného editora alebo integrovaného vývojového prostredia, ktoré používate (Visual Studio Code https://code.visualstudio.com/) vo svojom lokálnom priečinku.

Vložte doň tento kód:

var http = require ('http');

http.createServer (funkcia (požiadavka, res) {

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

res.end ('Hello World!');

}). počúvať (8080);

Uložte ho a preneste do priečinka/domov/aplikácie ako index.js dvojitým kliknutím/presunutím myšou na súbor v programe FileZilla.

Spustite node index.js a nechajte ho bežať.

Teraz sa na našu stránku na adrese https:// virtual-machine-ip: 8080 dostaneme z nášho prehliadača. Zobrazí sa biela stránka s textom Hello World.

Blahoželáme, práve ste vytvorili webový server v node.js!

Krok 9: Príprava softvéru

Prejdite na konzolu a zastavte program stlačením klávesov ctrl+C.

Nahraďte svoj súbor index.js v/home/app/a nahraďte ho našim index.js v.

Všetky súbory pre webové stránky si môžete stiahnuť tu:

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

Skopírujte náš stromový kód Vianoc z priečinka html do vzdialeného adresára/var/www/html/pomocou programu Filezilla. Bude to nejaký čas trvať. Ak sa vás to opýta, nahraďte index.html novým.

Vložte svoju IP znova do svojho obľúbeného webového prehliadača.

Práve ste sprístupnili klientske rozhranie svojej webovej aplikácie na https:// virtual-machine-ip.

Krok 10: Nepochopenie kódu back-end a jeho fungovanie

Poznámka: váš kód typu back-end je /home /app

Nezabudnite, že po lokálnom úprave kódu ho nezabudnite nahrať na server pomocou programu FileZilla a reštartujte aplikáciu uzla (konzola: ctrl+c, šípka hore (zobrazuje posledný príkaz uzla index.js), zadajte)

Aby kód fungoval, budete musieť najskôr zadať niekoľko údajov.

Najprv budete musieť zmeniť premennú hostname v index.js na svoju vlastnú doménu alebo IP (niečo, čo vyzerá takto: 165.13.45.123).

Za druhé, prevediem vás kódom, aby ste mu rozumeli. Nevynechávajte komentáre, ktoré som uviedol v kóde.

V súbore index.js vidíte, že aplikáciu vytvárame pomocou expresného modulu. Potom naň použijeme pravidlá CORS, pridáme rozhrania API a spustíme server http. Tento server nebude obsluhovať webovú stránku prostredníctvom požiadaviek GET http, ale bude slúžiť vedeným stavom prostredníctvom požiadavky GET http a aktualizovať stavy ledov pri prijatých požiadavkách PUT

API sú bežnou praxou na výmenu informácií medzi aplikáciami. Najbežnejšie používame rozhrania REST API, ktoré používame sami. Sú bez štátnej príslušnosti a nemajú trvalé pripojenie (shorturl.at/aoBC3, Požiadavky PUT jednoducho aktualizujú stavy LED v premennej poľa aplikácie (pamäť), požiadavky GET jednoducho odosielajú stavy LED klientovi.

Odpoveď klientovi je zvyčajne v zápise JSON, ale pre túto jednoduchú odpoveď 30 stavov LED jednoducho pošleme reťazec 30 hodnôt oddelených čiarkou.

Krok 11: Pochopenie frontendového kódu a jeho fungovanie ČASŤ 1

Poznámka: váš front-endový kód je na/var/www/html

Nezabudnite, že po miestnej úprave kódu ho nezabudnite nahrať na server pomocou programu FileZilla. Na rozdiel od node.js sa Apache automaticky reštartuje, ale budete musieť stránku znova načítať vo svojom prehliadači. Na obnovenie a vymazanie vyrovnávacej pamäte vašej stránky použite aj ctrl+f5.

Aby kód fungoval, budete musieť zadať niekoľko údajov. Najprv budete musieť zmeniť premennú URL vo funkcii send_request vo vnútri index.html z blinkmytree.live na svoju vlastnú doménu alebo IP, napríklad: 165.13.45.123.

Za druhé, prevediem vás kódom, aby ste mu rozumeli. Nevynechávajte komentáre, ktoré som uviedol v kóde. Stránka je dokument HTML. Ak ponecháme bokom všetky pravidlá CSS (štýl stránky a pozíciu obsahu), pozrieme sa na obsah dôležitý z hľadiska funkčnosti. Ak sa chcete dozvedieť viac o CSS, navštívte stránku

Na stránke sme chceli tieto hlavné funkcie (odborníci na agilné metódy by povedali príbehy používateľov):

• Živé video vložené do stránky

• Klikacie LED diódy na vianočnom stromčeku, s ktorými sa manipulovalo v editore obrázkov Gimp (https://www.gimp.org/).

• Aktuálna komunikácia so serverom, čakanie na zmenu stavov LED.

Krok 12: Pochopenie frontendového kódu a jeho fungovanie ČASŤ 2

Akonáhle budeme mať náš vianočný stromček s počtom diód LED a farieb na výber, musíme vytvoriť oblasti a použiť na ne akcie, takže akonáhle klikneme na farebnú diódu LED v sekcii výberu obrázka, vyberie sa farba a jedna klikneme na LED, príkaz bude odoslaný na server, kde Arduino vyberie svoju hodnotu.

V HTML5, najnovšom štandarde HTML, existuje niečo, čo sa nazýva obrázková mapa. Umožňuje nám definovať oblasti na obrázku, na ktoré môžeme aplikovať akčných poslucháčov.

Pretože máme veľa oblastí na definovanie, použili sme online nástroj https://www.image-map.net/ na definovanie týchto oblastí a skopírovali sme HTML kód na našu stránku.

Akonáhle to urobíme, môžeme do každej z týchto oblastí vložiť udalosť onclick s funkciou, ktorú volá, a parametrom čísla LED. Pozrite si snímku obrazovky vyššie.

Krok 13: Pochopenie frontendového kódu a jeho fungovanie ČASŤ 3

Na koniec tela HTML, v oblasti, vložíme JavaScript, aby sme definovali funkcie, ktoré voláme v udalostiach onclick. Globálne definujeme XMLHttpRequest, ktorý používame na odoslanie požiadavky PUT

Máme dve funkcie:

funkcia set_color (val)

funkcia send_request (id)

Na testovanie požiadaviek API odporúčam bežne používaný softvérový nástroj s názvom Postman https://www.postman.com/. Umožňuje nám to jednoducho odoslať požiadavku API na server bez znalosti programovania. Umožňuje zosmiešňovať server a prijímať žiadosti.

Krok 14: Pochopenie frontendového kódu a jeho fungovanie ČASŤ 4

Vaša aplikácia funguje.

Uvedomte si, že čísla sú obrátené, to znamená, že 20 je 1 a 1 je 20, pretože LED diódy na strome začínajú v spodnej časti, ale kvôli lepšej používateľskej skúsenosti sme na začiatok umiestnili štartovaciu diódu.

Stále budete musieť vytvoriť priamy prenos na YouTube, ak chcete, a nahradiť kód na vloženie videa na YouTube svojim vlastným.

Krok 15: Kód Arduino

ESP8266 prevádzkuje základný náčrt príkladu klienta HTTP, ktorý je mierne upravený a prijíma údaje z môjho webu prostredníctvom volania API.

Budete tiež musieť nainštalovať knižnice na ovládanie pásu LED, ak chcete používať rovnaký adresovateľný pás RGB ako ja.

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

V náčrte, ktorý som pripojil, budete musieť vložiť svoje wi-fi meno a heslo a webovú adresu na svoj web (pozri komentáre)

V zásade konvertujeme odpoveď http na reťazec typu C, takže môžeme použiť funkciu C strtok na rozdelenie reťazca čiarkami a naplnenie tabuľky LED hodnotami načítanými zo servera. Potom nazveme funkciu, kde prejdeme tabuľkou a na základe hodnôt zmeníme správnu farbu, ktorú používateľ očakáva.

To je všetko!

Gratulujem, zvládli ste to!

Krok 16: RGB LED reťazec

Uh Oh. Teraz je načase si trochu oddýchnuť od všetkého kódovania:)

Pretože ESP8266 nemá veľa GPIO pinov na individuálne ovládanie LED diód, použil som tento adresovateľný RGB LED reťazec:

www.sparkfun.com/products/11020

Týmto spôsobom je možné všetkých 20 RGB LED (celkom 60 LED) ovládať iba dvoma pinmi - „dátovými“a „hodinovými“a 5V napájaním priamo z ESP8266.

Pripojenie pásu k NodeMcu je jednoduché. 5V na Vin na NodeMcu (5V z USB), žltý vodič na pin 12, zelený vodič na pin 14, uzemnenie na zem.

Môžete nastaviť jednotlivé farby RGB a jas. S určitým miešaním farieb môžete vytvoriť VEĽA farieb pre každú LED diódu.

S týmito diódami LED je tiež veľmi skvelá knižnica pre všetky druhy skvelých efektov FX. Vyskúšajte, ak sa vám páči:

github.com/r41d/WS2801FX

Krok 17: Ozdobte vianočný stromček

Urobte to pekné a uistite sa, že všetky LED diódy sú viditeľné a pekne rozmiestnené po strome.

Krok 18: Konečné dotyky

Keď máte strom pripravený, urobte peknú fotografiu a zopakujte krok pre vytvorenie obrazovej mapy polôh, na ktoré je možné kliknúť (polohy LED)

Toto je najintuitívnejší spôsob prepojenia s diódami LED.

Ak nechcete veci príliš komplikovať, môžete použiť bežné tlačidlá.

Mali by ste tiež začať priamy prenos svojho stromu na YouTube (ak chcete sledovať, čo sa deje v reálnom čase) a stream vložiť na svoje stránky.

Krok 19: Obdivujte svoju webovú stránku

Ste úžasní, ak ste sa dostali až sem:) Pozvite svojich priateľov (a mňa samozrejme: P) a prinútite ich kliknúť na váš strom čo najviac:)

n

Bol to veľmi dlhý návod, na dosť komplikovaný projekt. Ale stojí to za to na konci: D

Ďakujem! Ak chcete zostať v kontakte s tým, na čom pracujem:

Môžete sa prihlásiť na odber môjho kanála YouTube:

www.youtube.com/c/JTMakesIt

Môžete ma sledovať aj na Facebooku a Instagrame

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

za spoilery na tom, na čom práve pracujem, zákulisí a ďalšie doplnky! PS:., Ak sa vám OPRAVDU, NAOZAJ páčilo, môžete mi tu kúpiť aj kávu, takže budem mať viac energie do budúcich projektov (tento mi zobral 2 týždne spánku, keďže tento nápad som dostal príliš neskoro):)

www.buymeacoffee.com/JTMakesIt

A nezabudnite hlasovať za túto inštrukciu v súťaži „Všetko sa deje“:)