Albero di Natale controllato dal sito web (chiunque può controllarlo): 19 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

Vuoi sapere che aspetto ha un albero di Natale controllato da un sito web?

Ecco il video che mostra il mio progetto del mio albero di Natale. Il live streaming è terminato ormai, ma ho realizzato un video, catturando cosa stava succedendo:

Quest'anno, a metà dicembre, ero sdraiato nel mio letto, cercando di dormire nel bel mezzo di una settimana lavorativa. E invece di dormire stavo pensando a quale sarebbe stato un bel progetto natalizio da fare. E poi una bella idea mi ha colpito.

Dato che sono pigro con le decorazioni natalizie, sarebbe bello lasciare che qualcun altro controlli le mie luci natalizie, quindi non dovrò preoccuparmene.

"E se facessi le luci dell'albero di Natale che chiunque potrebbe essere in grado di controllare tramite l'interfaccia di un sito Web?"

(inserire due settimane di notti insonni)

Quindi ce l'ho fatta.

Un albero di Natale con venti LED RGB connesso a internet tramite ESP8266 Arduino.

Un mio amico (grazie JP) mi ha aiutato a creare un sito web (dato che non sono un programmatore fluente per cose relative al sito web).

E abbiamo impostato un live streaming youtube 24/7 del mio albero in modo che tu possa vedere cosa stai accendendo o spegnendo in ogni momento.

Questo progetto è l'ideale per quest'anno, dal momento che molti di noi erano in lockdown, impossibilitati a incontrarsi e socializzare con amici e familiari. Perché non unirsi tramite l'albero di Natale:)

In questo Instructable spiegherò nel dettaglio come è stato realizzato questo progetto.

Passaggio 1: livello di abilità

Questo progetto è più orientato al software. Ma non abbiate paura Un po' di fortuna e l'aiuto di zio Google aiuterà immensamente:)

Dovrai avere un set di 3 abilità (o le imparerai senza preoccuparti): una parte del web server, la parte di Arduino e ovviamente l'albero di Natale!

Conoscenze consigliate:

• Competenze informatiche e di programmazione di base

• Conoscenza di base del terminale Linux

• Conoscenze di base sulle reti di computer

• Conoscenze di elettronica di base

• Abilità per utilizzare Google e altre abilità "speciali"

• Dovrebbe sapere come allestire un albero di Natale:)

Se hai un po' di senso della tecnologia e della programmazione dovresti essere in grado di imparare a impostare questa cosa secondo questo Instructable.

Passaggio 2: strumenti e componenti

Dal lato dell'albero di Natale, avrai bisogno di:• Albero di Natale (d'oh…)

• Una scheda microcontrollore NodeMCU

(puoi anche usare ESP32 o altre schede compatibili con Wi-Fi o Ethernet)

• Striscia LED RGB indirizzabile. la striscia led RGB indirizzabile farà risparmiare molti GPIO Arduino (https://www.sparkfun.com/products/11020)

• Software per NodeMCU (fornito in questa istruzione)

Sul lato server avrai bisogno di:

• Un server privato virtuale con IP pubblico. Qui ricevi $ 100 gratis su DigitalOcean

• Un dominio (opzionale) che puoi registrare presso qualsiasi organizzazione di registrar, ad esempio

• Codice Dedicato (fornito con questo Instructable)

Passaggio 3: configurare la macchina virtuale (computer) PARTE 1

Passiamo direttamente alla codifica:)

Abbiamo bisogno di un server, che comunicherà con il sito Web e NodeMCU.

I server su DigitalOcean ci consentono di avere una macchina virtuale con un indirizzo IP pubblico, il che significa che possiamo eseguire servizi su di essa e accedervi in tutto il mondo.

Una volta pagato un abbonamento mensile a DigitalOcean (puoi utilizzare una prova gratuita di 60 giorni), crea un progetto e chiamalo albero di Natale o come preferisci.

Ora puoi creare la tua macchina virtuale (computer virtuale accessibile da remoto) facendo clic su "Inizia con una goccia" (che è fondamentalmente il nome di DigitalOcean per una macchina virtuale).

Apparirà una pagina di configurazione e potrai rimanere con un'impostazione predefinita: immagine Ubuntu, piano di base e nessuna memoria a blocchi (5 $ / mese)

Passaggio 4: configurare la macchina virtuale (computer) PARTE 2

Una regione del datacenter è il luogo in cui verrà creato il tuo server.

Scegli quello più vicino a te e ai tuoi potenziali utenti. Ciò fornirà il tempo di risposta più basso.

Inoltre, nella sezione Autenticazione, ti verrà chiesto di inserire una password per accedere alla tua macchina virtuale.

Nella sezione Finalizza e crea, mantieni il valore predefinito di 1 droplet, scegli un nome host (di nuovo albero di Natale), seleziona il tuo progetto creato in precedenza se non selezionato per impostazione predefinita e fai clic su Crea droplet. Questo richiederà alcuni minuti. Cliccando sul tuo progetto nella sezione di navigazione a sinistra vedrai il tuo droplet.

Passaggio 5: configurare la macchina virtuale (computer) PARTE 3

Cliccando sui tre puntini a destra del droplet potrai cliccare su Console di accesso, che ti farà accedere al tuo computer virtuale.

Si aprirà una nuova piccola finestra del browser. Ora, questo non è un ambiente desktop, come sul tuo computer Windows 10 o Ubuntu con interfaccia grafica.

Tuttavia, tutto può essere fatto tramite un'interfaccia console.

Non è così spaventoso come sembra:)

Passaggio 6: configurare la macchina virtuale (computer) PARTE 4

Hai creato con successo la tua macchina virtuale in un cloud DigitalOcean.

Nei passaggi successivi, configurerai un server web, chiamato Apache e creerai la tua pagina web.

Scarica il client Filezilla qui https://filezilla-project.org/download.php?platfo… (o trova la versione a 32 bit per il sistema operativo a 32 bit) e installalo. È un client FTP (File Transfer Protocol).

Sarai in grado di accedere e trasferire file da e verso la tua macchina virtuale.

Una volta installato, fai clic su file → gestore sito → nuovo sito e inserisci i dati come nell'immagine sopra.

Protocollo: SFTP (protocollo di trasferimento file sicuro)

Host: IP del tuo server, trova nel tuo progetto DigitalOcean.

L'utente è root e la password è quella che hai impostato durante la creazione del tuo droplet.

Fare clic su OK e connettersi alla macchina virtuale.

Sarai avvisato, la chiave dell'host è sconosciuta. Segui la seconda immagine.

Crea una cartella locale per il progetto ed estrai i file del tuo progetto che scaricherai qui.

Modificherai i tuoi file sul tuo computer e li trasferirai sulla tua macchina virtuale ogni volta che vorrai testare o aggiornare il codice.

Passaggio 7: installare un server Web

Accedi alla tua console droplet con il nome utente root e la tua password.

Poiché non abbiamo un'interfaccia grafica, utilizziamo i comandi per controllare la tua macchina virtuale. Ecco alcuni comandi comuni che utilizzerai su Ubuntu (Linux):

• pwd – stampa la mia directory corrente

• ls – elenca file e cartelle nella mia directory corrente

• cd / – sposta nella directory / (cartella, che include le directory principali di Linux come etc, bin, boot, dev, root, home, var e così via)

Per eseguire, intendo, inserisci il comando e premi invio.

Ora eseguiremo apt-get update -y per aggiornare il sistema.

Esegui apt install apache2 -y per installare il server web Apache.

La tua schermata di benvenuto di Apache dovrebbe essere accessibile sul tuo https://virtual-machine-ip dal tuo browser.

Sostituisci virtual-machine-ip con l'ip della tua macchina virtuale, ad esempio 165.12.45.123. Puoi anche saltare l'https:// poiché verrà aggiunto automaticamente.

Congratulazioni!

Nota:

Se vuoi che il tuo sito web sia accessibile tramite un nome, piuttosto che un indirizzo IP (come ho usato https://blinkmytree.live/), vai al sito del provider di dominio GoDaddy o simile (namecheap.com ecc.) e segui le istruzioni qui:

Alcuni nomi di dominio sono molto economici. Il mio dominio costava solo 2$ all'anno. Sicuramente vale i soldi:)

Passaggio 8: installare un framework di applicazioni Web

Torna alla nostra console. Non aver paura:)

Usa Filezilla per creare una cartella denominata app all'interno di /home, quindi /home/app sarà la tua cartella

Esegui cd /home/app per andare nella cartella dell'app.

Esegui apt install npm -y, per installl npm gestore di pacchetti. Questo richiederà alcuni minuti.

Esegui npm init -y per creare un file package.json, che terrà traccia/ricorderà i dati principali del pacchetto su un'app.

Esegui npm --save install cors express per installare i moduli cors, express

Cors è un modulo per la configurazione dell'accesso cross-site ed express è un framework per applicazioni web.

Npm è un gestore di pacchetti che abbiamo utilizzato e utilizzeremo il runtime JavaScript node.js per programmare la nostra interfaccia di programmazione dell'applicazione (API), che, combinata con un server http, accetterà le richieste HTTP per l'applicazione dei colori ai LED, ne contrassegnerà i valori (colori) in memoria e passa i valori a NodeMcu, quando lo richiede.

Nota: il nodo in NodeMcu non ha nulla a che fare con il nodo in node.js. NodeMcu può essere sostituito con qualsiasi scheda di sviluppo Arduino connessa a Internet, scheda di sviluppo NXP o PCB Microchip/NXP/Renesas/STM/Atmel personalizzato. Node.js potrebbe anche essere sostituito con framework. Net, PHP o qualsiasi altra piattaforma. Ma per semplicità, stiamo usando NodeMCU e Node.js.

Ora, facciamo un test, se possiamo eseguire un piccolo programma in node.js

Crea un file denominato index.js con notepad/notepad++ o altro editor o ambiente di sviluppo integrato che utilizzi (Visual Studio Code https://code.visualstudio.com/) nella tua cartella locale.

Mettici questo codice:

var http = require('http');

http.createServer(function (req, res) {

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

res.end('Ciao mondo!');

}).ascolta(8080);

Salvalo e trasferiscilo nella cartella /home/app come index.js con doppio clic/trascina e rilascia sul file in FileZilla.

Esegui il nodo index.js e lascialo in esecuzione.

Ora possiamo accedere alla nostra pagina all'indirizzo https://virtual-machine-ip:8080 dal nostro browser. Apparirà una pagina bianca con il testo Hello World.

Congratulazioni, hai appena creato un server web in node.js!

Passaggio 9: preparare il software

Vai alla console e interrompi il programma premendo ctrl+C.

Sostituisci il tuo file index.js in /home/app/ e sostituiscilo con il nostro index.js in.

Puoi scaricare tutti i file per il sito web qui:

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

Copia il codice dell'albero di Natale dalla cartella html alla directory remota /var/www/html/ con Filezilla. Ci vorrà un po 'di tempo. Se ti chiede, sostituisci index.html con uno nuovo.

Inserisci di nuovo il tuo IP nel tuo browser web preferito.

Hai appena reso disponibile il front-end della tua applicazione web su

Passaggio 10: comprendere il codice back-end e farlo funzionare

Nota: il tuo codice di back-end è in /home/app

Ricorda, dopo aver modificato il tuo codice localmente, non dimenticare di caricarlo sul tuo server utilizzando FileZilla e riavvia l'applicazione del nodo (console: ctrl+c, freccia su (mostra l'ultimo nodo di comando index.js), invio)

Affinché il codice funzioni, dovrai prima inserire alcuni dati.

In primo luogo, dovrai modificare la variabile hostname in index.js nel tuo dominio o IP, (qualcosa che assomigli a: 165.13.45.123).

In secondo luogo, ti guiderò attraverso il codice per capirlo. Assicurati di non saltare i commenti che ho fatto nel codice.

Puoi vedere nel file index.js, che creiamo un'app usando il modulo express. Quindi, applichiamo le regole CORS, aggiungiamo le API e avviamo un server http. Questo server non servirà una pagina web tramite richieste GET http, ma servirà gli stati dei led tramite la richiesta GET http e aggiornerà gli stati dei led sulle richieste PUT HTTP ricevute.

Le API sono una pratica comune per lo scambio di informazioni tra le applicazioni. Le più comuni che usiamo sono le API REST che usiamo noi stessi. Sono senza stato e non hanno una connessione permanente (shorturl.at/aoBC3, Le richieste PUT aggiornano semplicemente gli stati dei led nella variabile dell'array dell'app (memoria), le richieste GET inviano semplicemente gli stati dei led a un client.

La risposta al client è solitamente in notazione JSON, ma per questa semplice risposta di 30 stati LED, inviamo semplicemente una stringa di 30 valori separati da virgole.

Passaggio 11: comprendere il codice front-end e farlo funzionare PARTE 1

Nota: il tuo codice front-end è su /var/www/html

Ricorda, dopo aver modificato il tuo codice localmente, non dimenticare di caricarlo sul tuo server utilizzando FileZilla. A differenza di node.js, Apache si riavvia automaticamente, ma dovrai ricaricare la pagina nel tuo browser. Usa ctrl+f5 per aggiornare ed eliminare anche la cache della tua pagina.

Perché il codice funzioni, dovrai inserire pochi dati. Innanzitutto, dovrai modificare la variabile url nella funzione send_request all'interno di index.html da blinkmytree.live al tuo dominio o IP, ad esempio: 165.13.45.123.

In secondo luogo, ti guiderò attraverso il codice per capirlo. Assicurati di non saltare i commenti che ho fatto nel codice. La pagina è un documento HTML. Lasciando da parte tutte le regole CSS (stile della pagina e posizione del contenuto), esamineremo il contenuto importante della funzionalità. Per saperne di più sui CSS, controlla

Volevamo queste caratteristiche principali (gli esperti di metodi agili direbbero le storie degli utenti) nella pagina:

• Video live incorporato nella pagina

• Un LED cliccabile su un albero di Natale, che è stato manipolato nell'editor di immagini Gimp (https://www.gimp.org/).

• Comunicazione effettiva con un server, in attesa di cambiare stato dei led.

Passaggio 12: comprendere il codice front-end e farlo funzionare PARTE 2

Una volta che abbiamo il nostro albero di Natale con il numero di LED e i colori da scegliere, dobbiamo creare aree e applicare azioni su di esse, quindi una volta che clicchiamo sul LED colorato in una sezione di selezione di un'immagine, verrà selezionato un colore e uno clicchiamo su un LED, il comando verrà inviato al server, dove Arduino ne sceglierà il valore.

In HTML5, il più recente standard HTML, c'è qualcosa chiamato mappa immagine. Ci consente di definire aree su un'immagine, che possiamo applicare su di essa agli ascoltatori di azioni.

Poiché abbiamo molte aree da definire, abbiamo utilizzato uno strumento online https://www.image-map.net/ per definire queste aree e abbiamo copiato il codice HTML sulla nostra pagina.

Una volta fatto ciò, possiamo inserire l'evento onclick con una funzione che chiama e il parametro di un numero LED per ciascuna di queste aree. Guarda lo screenshot qui sopra.

Passaggio 13: comprendere il codice front-end e farlo funzionare PARTE 3

All'interno della fine del corpo HTML, in una regione, mettiamo del JavaScript, per definire le funzioni che chiamiamo negli eventi onclick. Globalmente, definiamo un XMLHttpRequest, che usiamo per inviare una richiesta PUT

Abbiamo due funzioni:

funzione set_color(val)

funzione send_request(id)

Per testare la richiesta API, consiglio uno strumento software comunemente usato chiamato Postman https://www.postman.com/. Ci consente di inviare semplicemente una richiesta API al server, senza competenze di programmazione. Permette di prendere in giro un server e anche di accettare richieste.

Passaggio 14: comprendere il codice front-end e farlo funzionare PARTE 4

La tua applicazione funziona.

Tieni presente che i numeri sono invertiti, ovvero 20 è 1 e 1 è 20, questo perché i LED sull'albero iniziano in basso, ma per una migliore esperienza utente, mettiamo un inizio in alto.

Se lo desideri, dovrai comunque creare un live streaming su YouTube e sostituire il codice di incorporamento del video di YouTube con il tuo.

Passaggio 15: il codice Arduino

L'ESP8266 esegue uno schizzo di esempio di client HTTP di base leggermente modificato, ricevendo i dati dal mio sito Web tramite una chiamata API.

Dovrai anche installare le librerie per il controllo della striscia LED se desideri utilizzare la stessa striscia RGB indirizzabile come ho fatto io.

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

Nello schizzo che ho allegato, dovrai inserire il tuo nome e password wi-fi e un url al tuo sito web (vedi i commenti)

Fondamentalmente convertiamo una risposta http in una stringa di tipo C, quindi possiamo usare la funzione C strtok per dividere la stringa con virgole e riempire la tabella dei led con i valori letti da un server. Quindi chiamiamo una funzione in cui passiamo attraverso la tabella e, in base ai valori, trasformiamo il colore corretto che l'utente si aspetta.

Questo è tutto!

Complimenti, ce l'hai fatta!

Passaggio 16: catena LED RGB

Uh Oh. Ora è il momento di prendersi una piccola pausa da tutta la programmazione:)

Poiché ESP8266 non ha molti pin GPIO per controllare i LED individualmente, ho usato questa catena di LED RGB indirizzabile:

www.sparkfun.com/products/11020

In questo modo, tutti i 20 led RGB (60 led in totale) possono essere controllati da soli due pin: "dati" e "orologio" e alimentazione a 5V direttamente da ESP8266.

Collegare la striscia al NodeMcu è facile. 5V a Vin su NodeMcu (5V da USB), filo giallo al pin 12, filo verde al pin 14, terra a terra.

È possibile impostare il colore RGB e la luminosità individuali. Con un po' di miscelazione dei colori, puoi produrre MOLTI colori per ogni LED.

C'è anche una libreria molto interessante per tutti i tipi di fantastici effetti FX con questi LED. Provalo se ti piace:

github.com/r41d/WS2801FX

Passaggio 17: decorare l'albero di Natale

Rendilo carino e assicurati che tutti i LED siano visibili e ben distribuiti sull'albero.

Passaggio 18: ritocchi finali

Quando hai l'albero pronto, scatta una bella foto e ripeti il passaggio per creare la mappa immagine delle posizioni cliccabili (posizioni LED)

Questo è il modo più intuitivo di interfacciarsi con i LED.

Se non vuoi complicare eccessivamente le cose, puoi usare i pulsanti normali.

Dovresti anche avviare uno streaming live del tuo albero su YouTube (se vuoi vedere cosa succede in tempo reale) e incorporare lo streaming nel tuo sito.

Passaggio 19: ammira il tuo sito web

Sei fantastico se sei arrivato così lontano:) Invita i tuoi amici (e ovviamente me:P) e fai in modo che facciano clic sul tuo albero il più possibile:)

n

Questo è stato un Instructable molto lungo, per un progetto abbastanza complicato. Ma ne vale la pena alla fine:D

Grazie! Se vuoi rimanere in contatto su ciò a cui sto lavorando:

Puoi iscriverti al mio canale YouTube:

www.youtube.com/c/JTMakesIt

Puoi seguirmi anche su Facebook e Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

per spoiler su ciò a cui sto attualmente lavorando, dietro le quinte e altri extra! PS:., se VERA, VERAMENTE ti è piaciuto, puoi anche offrirmi un caffè qui, così avrò più energia per progetti futuri (questo mi ha tolto 2 settimane di sonno, dato che ho avuto questa idea troppo tardi):)

www.buymeacoffee.com/JTMakesIt

E non dimenticare di votare per questo Instructable nel concorso "Anything Goes":)