Árbol de Navidad controlado por sitio web (cualquiera puede controlarlo): 19 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

¿Quieres saber cómo es un árbol de Navidad controlado por un sitio web?

Aquí está el video que muestra mi proyecto de mi árbol de Navidad. La transmisión en vivo ya terminó, pero hice un video, capturando lo que estaba sucediendo:

Este año, a mediados de diciembre, estaba acostado en mi cama, tratando de dormir en medio de una semana laboral. Y en lugar de dormir, estaba pensando en lo que sería un proyecto navideño genial para hacer. Y entonces se me ocurrió una idea genial.

Como soy vago con las decoraciones navideñas, sería genial dejar que otra persona controle mis luces navideñas, así no tendré que preocuparme por eso.

"¿Qué pasa si hago un árbol de Navidad que CUALQUIERA pueda controlar a través de la interfaz de un sitio web?"

(inserte dos semanas de noches de insomnio)

Así que lo hice.

Un árbol de Navidad con veinte LED RGB conectados a Internet a través de ESP8266 Arduino.

Un amigo mío (gracias JP) me ayudó a crear un sitio web (ya que no soy un programador fluido para cosas relacionadas con sitios web).

Y configuramos una transmisión en vivo de YouTube 24/7 de mi árbol para que pueda ver lo que está activando o desactivando en todo momento.

Este proyecto es ideal para este año, ya que muchos de nosotros estábamos encerrados, sin poder reunirnos y socializar con amigos y familiares. ¿Por qué no unirse a través del árbol de Navidad:)

En este Instructable explicaré en detalle cómo se hizo este proyecto.

Paso 1: nivel de habilidad

Este proyecto está más orientado al software. Pero no tengas miedo. Un poco de suerte y la ayuda del tío Google te ayudarán enormemente:)

Necesitará tener un conjunto de 3 habilidades (o las aprenderá, no se preocupe): una parte del servidor web, la parte Arduino y el árbol de Navidad, ¡por supuesto!

Conocimientos recomendados:

• Conocimientos básicos de informática y programación.

• Conocimientos básicos sobre terminales de Linux

• Conocimientos básicos de redes informáticas

• Conocimientos básicos de electrónica

• Habilidades para usar Google y otras habilidades "especiales"

• Debería saber cómo montar un árbol de Navidad:)

Si tiene algún sentido de la tecnología y la programación, debería poder aprender a configurar esto de acuerdo con este Instructable.

Paso 2: herramientas y componentes

En el lado del árbol de Navidad, necesitará: • Árbol de Navidad (d'oh…)

• Una placa de microcontrolador NodeMCU

(también puede usar ESP32 u otras placas con capacidad Wi-Fi o Ethernet)

• Tira de LED RGB direccionable. La tira de led RGB direccionable ahorrará muchos GPIO de Arduino (https://www.sparkfun.com/products/11020)

• Software para NodeMCU (proporcionado en este instructivo)

En el lado del servidor, necesitará:

• Un servidor privado virtual con IP pública. Aquí obtienes $ 100 gratis en DigitalOcean

• Un dominio (opcional) que puede registrar en cualquier organización de registro, por ejemplo

• Código dedicado (suministrado con este Instructable)

Paso 3: Configurar la máquina virtual (computadora) PARTE 1

Vayamos directamente a la codificación:)

Necesitamos un servidor, que se comunicará con el sitio web y NodeMCU.

Los servidores de DigitalOcean nos permiten tener una máquina virtual con una dirección IP pública, lo que significa que podemos ejecutar servicios en ella y acceder a ellos en todo el mundo.

Una vez que pague una suscripción mensual a DigitalOcean (puede usar una prueba gratuita de 60 días), cree un proyecto y asígnele el nombre de árbol de Navidad o lo que quiera.

Ahora puede crear su máquina virtual (computadora virtual de acceso remoto) haciendo clic en "Comenzar con una gota" (que es básicamente el nombre de DigitalOcean para una máquina virtual).

Aparecerá una página de configuración y puede quedarse con una imagen predeterminada de Ubuntu, plan básico y sin almacenamiento en bloque (5 $ / mes)

Paso 4: Configurar la máquina virtual (computadora) PARTE 2

Una región de centro de datos es el lugar donde se creará su servidor.

Elija el más cercano a usted y a sus usuarios potenciales. Esto proporcionará el menor tiempo de respuesta.

Además, en la sección Autenticación, se le pedirá que ingrese una contraseña para acceder a su máquina virtual.

En la sección Finalizar y crear, mantenga el valor predeterminado de 1 gota, elija un nombre de host (árbol de Navidad nuevamente), seleccione su proyecto creado previamente si no está seleccionado por defecto y haga clic en Crear gota. Esto tomará unos pocos minutos. Al hacer clic en su proyecto en la sección de navegación de la izquierda, verá su gota.

Paso 5: Configurar la máquina virtual (computadora) PARTE 3

Al hacer clic en los tres puntos a la derecha de la gota, puede hacer clic en la consola de acceso, lo que le permitirá acceder a su computadora virtual.

Se abrirá una nueva ventana pequeña del navegador. Ahora, este no es un entorno de escritorio, como en su computadora con Windows 10 o Ubuntu con interfaz gráfica.

Sin embargo, todo se puede hacer a través de una interfaz de consola.

No es tan aterrador como parece:)

Paso 6: Configurar la máquina virtual (computadora) PARTE 4

Ha creado con éxito su propia máquina virtual en una nube de DigitalOcean.

En los siguientes pasos, configurará un servidor web, llamado Apache y configurará su propia página web.

Descargue el cliente Filezilla aquí https://filezilla-project.org/download.php?platfo… (o busque la versión de 32 bits para el sistema operativo de 32 bits) e instálelo. Es un cliente FTP (Protocolo de transferencia de archivos).

Podrá acceder y transferir archivos desde y hacia su máquina virtual.

Una vez instalado, haga clic en archivo → administrador del sitio → nuevo sitio e ingrese datos como en la imagen de arriba.

Protocolo: SFTP (Protocolo seguro de transferencia de archivos)

Host: IP de su servidor, busque en su proyecto DigitalOcean.

El usuario es root y la contraseña es lo que estableció en la creación de su gota.

Haga clic en Aceptar y conéctese a su máquina virtual.

Se le advertirá que la clave de host es desconocida. Sigue la segunda imagen.

Cree una carpeta local para el proyecto y extraiga los archivos de su proyecto que descargará aquí.

Editará sus archivos en su computadora y los transferirá a su máquina virtual cada vez que desee probar o actualizar el código.

Paso 7: instalar un servidor web

Inicie sesión en su consola de droplet con el nombre de usuario root y su contraseña.

Como no tenemos una interfaz gráfica, usamos comandos para controlar su máquina virtual. Aquí hay algunos comandos comunes que usará en Ubuntu (Linux):

• pwd - imprime mi directorio actual

• ls: lista de archivos y carpetas en mi directorio actual

• cd / - mover al directorio / (carpeta, que incluye directorios principales de Linux como etc, bin, boot, dev, root, home, var, etc.)

Por ejecutar, quiero decir, ingrese el comando y presione enter.

Ahora, ejecutaremos apt-get update -y para actualizar el sistema.

Ejecute apt install apache2 -y para instalar el servidor web Apache.

Su pantalla de bienvenida de Apache debe estar accesible en su https:// virtual-machine-ip desde su navegador.

Reemplace virtual-machine-ip con la ip de su máquina virtual, por ejemplo 165.12.45.123. También puede omitir https:// ya que se agregará automáticamente.

¡Felicitaciones!

Nota:

Si desea que se pueda acceder a su sitio web a través de un nombre, en lugar de una dirección IP (como usé https://blinkmytree.live/), vaya al sitio del proveedor de dominio GoDaddy o similar (namecheap.com, etc.) y siga las instrucciones aquí:

Algunos nombres de dominio son muy económicos. Mi dominio costaba solo 2 $ al año. Definitivamente vale la pena el dinero:)

Paso 8: instalar un marco de aplicación web

De vuelta a nuestra consola. No tengas miedo:)

Use Filezilla para crear una carpeta llamada aplicación dentro de / home, por lo que / home / app será su carpeta

Ejecute cd / home / app para ir a la carpeta interna de la aplicación.

Ejecute apt install npm -y, para instalar el administrador de paquetes npm. Esto tomará unos pocos minutos.

Ejecute npm init -y para crear un archivo package.json, que rastreará / recordará los principales datos del paquete sobre una aplicación.

Ejecute npm --save install cors express para instalar módulos cors, express

Cors es un módulo para configurar el acceso entre sitios y express es un marco de aplicación web.

Npm es un administrador de paquetes que usamos y usaremos el tiempo de ejecución de JavaScript de node.js para programar nuestra interfaz de programación de aplicaciones (API), que, combinada con un servidor http, aceptará solicitudes HTTP para aplicar colores a los LED, marcará sus valores (colores) en la memoria y pasar los valores a NodeMcu, cuando lo solicite.

Nota: El nodo en NodeMcu no tiene nada que ver con el nodo en node.js. NodeMcu podría reemplazarse con cualquier placa de desarrollo arduino conectada a Internet, placa de desarrollo NXP o una PCB personalizada Microchip / NXP / Renesas / STM / Atmel. Node.js también podría reemplazarse con. Net framework, PHP o cualquier otra plataforma. Pero para simplificar, estamos usando NodeMCU y Node.js.

Ahora, hagamos una prueba, si podemos ejecutar un pequeño programa en node.js

Cree un archivo llamado index.js con notepad / notepad ++ u otro editor o entorno de desarrollo integrado que utilice (código de Visual Studio https://code.visualstudio.com/) en su carpeta local.

Pon este código en él:

var http = require ('http');

http.createServer (función (req, res) {

res.writeHead (200, {'Tipo de contenido': 'texto / sin formato'});

res.end ('¡Hola mundo!');

}). escuchar (8080);

Guárdelo y transfiéralo a la carpeta / inicio / aplicación como index.js con doble clic / arrastrar y soltar en el archivo en FileZilla.

Ejecute el nodo index.js y déjelo funcionando.

Ahora, podemos acceder a nuestra página en https:// virtual-machine-ip: 8080 desde nuestro navegador. Aparecerá una página en blanco con el texto Hello World.

¡Felicidades, acaba de crear un servidor web en node.js!

Paso 9: preparar el software

Vaya a la consola y detenga el programa presionando ctrl + C.

Reemplace su archivo index.js en / home / app / y reemplácelo con nuestro index.js en.

Puede descargar todos los archivos del sitio web aquí:

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

Copie nuestro código de árbol de Navidad de la carpeta html al directorio remoto / var / www / html / con Filezilla. Tomará un poco de tiempo. Si se lo pide, reemplace index.html por uno nuevo.

Vuelva a poner su IP en su navegador web favorito.

Acaba de hacer que el front-end de su aplicación web esté disponible en https:// virtual-machine-ip.

Paso 10: Comprender el código de back-end y hacer que funcione

Nota: su código de back-end está en / home / app

Recuerde, después de editar su código localmente, no olvide subirlo a su servidor usando FileZilla y reinicie su aplicación de nodo (consola: ctrl + c, flecha hacia arriba (muestra el último nodo de comando index.js), ingrese)

Para que el código funcione, primero deberá ingresar algunos datos.

En primer lugar, deberá cambiar la variable de nombre de host en index.js a su propio dominio o IP (algo que se parece a: 165.13.45.123).

En segundo lugar, te guiaré a través del código para que lo entiendas. Asegúrese de no omitir los comentarios que hice en el código.

Puede ver en el archivo index.js, que creamos una aplicación usando el módulo express. Luego, le aplicamos las reglas CORS, agregamos las API e iniciamos un servidor http. Este servidor no servirá una página web a través de solicitudes GET http, pero servirá a los estados dirigidos a través de la solicitud GET http y actualizará los estados led en las solicitudes PUT http recibidas.

Las API son una práctica común para intercambiar información entre aplicaciones. Las más comunes que usamos son las API REST que usamos nosotros mismos. Son apátridas y no tienen una conexión persistente (shorturl.at/aoBC3, Las solicitudes PUT simplemente actualizan los estados de led en la variable de matriz de aplicaciones (memoria), las solicitudes GET simplemente envían estados de led a un cliente.

La respuesta al cliente suele estar en notación JSON, pero para esta respuesta simple de 30 estados de LED, simplemente enviamos una cadena de 30 valores separados por comas.

Paso 11: Comprender el código de front-end y hacer que funcione PARTE 1

Nota: su código de front-end está en / var / www / html

Recuerde, después de editar su código localmente, no olvide subirlo a su servidor usando FileZilla. A diferencia de node.js, Apache se reinicia automáticamente, pero tendrá que volver a cargar su página en su navegador. Utilice ctrl + f5 para actualizar y eliminar el caché de su página también.

Para que el código funcione, deberá ingresar algunos datos. Primero, deberá cambiar la variable url en la función send_request dentro de index.html de blinkmytree.live a su propio dominio o IP, por ejemplo: 165.13.45.123.

En segundo lugar, lo guiaré a través del código para comprenderlo. Asegúrese de no omitir los comentarios que hice en el código. La página es un documento HTML. Dejando a un lado todas las reglas de CSS (estilo de página y posición del contenido), veremos la funcionalidad del contenido importante. Para obtener más información sobre CSS, consulte

Queríamos estas características principales (los expertos en métodos ágiles dirían historias de usuarios) en la página:

• Video en vivo incrustado en la página

• Un LED en el que se puede hacer clic en un árbol de Navidad, que se manipuló en el editor de imágenes de Gimp (https://www.gimp.org/).

• Comunicación real con un servidor, a la espera de cambiar estados de led.

Paso 12: Comprender el código front-end y hacer que funcione PARTE 2

Una vez que tenemos nuestro árbol de Navidad con números de LED y colores para elegir, necesitamos crear áreas y aplicar acciones a ellos, por lo que una vez que hagamos clic en el LED de color en una sección de selección de una imagen, se seleccionará un color y uno hacemos clic en un LED, el comando se enviará al servidor, donde el Arduino elegirá su valor.

En HTML5, el estándar HTML más nuevo, hay algo llamado mapa de imágenes. Nos permite definir áreas en una imagen, a las que podemos aplicar oyentes de acción en ella.

Como tenemos muchas áreas por definir, usamos una herramienta en línea https://www.image-map.net/ para definir estas áreas y copiamos el código HTML en nuestra página.

Una vez que hacemos eso, podemos poner el evento onclick con una función que llama y el parámetro de un número de LED a cada una de estas áreas. Vea la captura de pantalla de arriba.

Paso 13: Comprender el código front-end y hacer que funcione PARTE 3

Dentro del final del cuerpo HTML, en una región, colocamos algo de JavaScript, para definir las funciones que llamamos en eventos onclick. Globalmente, definimos un XMLHttpRequest, que usamos para enviar una solicitud PUT

Tenemos dos funciones:

función set_color (val)

función send_request (id)

Para probar la solicitud de API, recomiendo una herramienta de software de uso común llamada Postman https://www.postman.com/. Nos permite simplemente enviar una solicitud de API al servidor, sin conocimientos de programación. Permite simular un servidor y aceptar solicitudes también.

Paso 14: Comprender el código front-end y hacer que funcione PARTE 4

Tu aplicación funciona.

Tenga en cuenta que los números están invertidos, es decir, 20 es 1 y 1 es 20, esto se debe a que los LED en el árbol comienzan en la parte inferior, pero para una mejor experiencia del usuario, colocamos un inicio dirigido hacia la parte superior.

Aún necesitará crear una transmisión en vivo en YouTube si lo desea y reemplazar el código de inserción del video de YouTube con el suyo.

Paso 15: el código Arduino

El ESP8266 ejecuta un boceto de ejemplo de cliente HTTP básico que está ligeramente modificado y recibe los datos de mi sitio web a través de una llamada a la API.

También necesitará instalar bibliotecas para controlar la tira de LED si desea utilizar la misma tira RGB direccionable que yo.

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

En el boceto que adjunto, deberá insertar su nombre y contraseña de wi-fi y una URL en su sitio web (ver los comentarios)

Básicamente, convertimos una respuesta http en una cadena de tipo C, por lo que podemos usar la función C strtok para dividir la cadena por comas y llenar la tabla de leds con valores leídos desde un servidor. Luego llamamos a una función en la que recorremos la tabla y, en función de los valores, cambiamos el color correcto que espera el usuario.

¡Eso es todo!

¡Felicidades, lo lograste!

Paso 16: Cadena LED RGB

UH oh. Ahora es el momento de tomarse un pequeño descanso de toda la codificación:)

Dado que el ESP8266 no tiene muchos pines GPIO para controlar los LED individualmente, utilicé esta cadena de LED RGB direccionable:

www.sparkfun.com/products/11020

De esta manera, los 20 leds RGB (60 leds en total) se pueden controlar con solo dos pines: "datos" y "reloj" y alimentación de 5 V directamente desde el ESP8266.

Conectar la tira al NodeMcu es fácil. 5V a Vin en NodeMcu (5V desde USB), cable amarillo al pin 12, cable verde al pin 14, tierra a tierra.

Puede configurar el brillo y el color RGB individuales. Con un poco de mezcla de colores, puede producir MUCHOS colores para cada LED.

También hay una biblioteca genial para todo tipo de efectos FX geniales con estos LED. Pruébelo si lo desea:

github.com/r41d/WS2801FX

Paso 17: ¡Decora el árbol de Navidad

Hágalo bonito y asegúrese de que todos los LED estén visibles y bien distribuidos por el árbol.

Paso 18: Toques finales

Cuando tenga el árbol listo, tome una buena foto y repita el paso para crear el mapa de imagen de las posiciones en las que se puede hacer clic (posiciones de LED)

Esta es la forma más intuitiva de interactuar con los LED.

Si no desea complicar demasiado las cosas, puede usar botones normales.

También debe iniciar una transmisión en vivo de su árbol en YouTube (si desea ver lo que sucede en tiempo real) e incrustar la transmisión en su sitio.

Paso 19: admire su sitio web

Eres increíble si llegaste tan lejos:) Invita a tus amigos (y a mí, por supuesto: P) y haz que hagan clic en tu árbol tanto como sea posible:)

norte

Este fue un Instructable muy largo, para un proyecto bastante complicado. Pero vale la pena al final: D

¡Gracias! Si quieres estar en contacto con lo que estoy trabajando:

Puedes suscribirte a mi canal de YouTube:

www.youtube.com/c/JTMakesIt

También puedes seguirme en Facebook e Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

¡para spoilers sobre lo que estoy trabajando actualmente, detrás de escena y otros extras! PD:., Si REALMENTE, REALMENTE te gustó, también puedes comprarme un café aquí, así tendré más energía para proyectos futuros (este me quitó 2 semanas de sueño, ya que se me ocurrió esta idea demasiado tarde):)

www.buymeacoffee.com/JTMakesIt

Y no olvides votar por este Instructable en el concurso "Anything Goes":)