Juega con Fire a través de Wi-Fi (ESP8266, NeoPixels y aplicación de Android)

Acerca de este proyecto

Puedes leer este y otros tutoriales increíbles en Sitio web oficial de ElectroPeak

Crea un efecto de simulación de fuego genial con el control inalámbrico Wi-Fi. ¡Una aplicación móvil (para teléfonos inteligentes Android) con una interfaz atractiva está lista para instalar para jugar con su creación! También usaremos Arduino y ESP8266 para controlar la llama. Al final de este proyecto, aprenderá:

• Cómo funcionan los NeoPixels.
• Cómo programar ESP8266 y controlar variables a través de Wi-Fi
• Cómo crear un efecto de fuego fresco con NeoPixels

Introducción a NeoPixels

Los LED direccionables individualmente o, a menudo, llamados NeoPixels, han existido desde hace bastante tiempo y probablemente los conozca, pero, si no los conoce, son como LED RGB normales, pero como su nombre sugiere, el color de cada uno de ellos se puede abordar individualmente. , lo que permite crear patrones y animaciones infinitamente geniales. Para WS2812b solo necesita 3 cables, 2 para alimentación y 1 para datos. ¡Eso significa que solo necesita un pin Arduino libre para controlar una tonelada de LED!

En este proyecto, utilizaremos estos LED inteligentes para crear un efecto de fuego. Para controlar los LED, usaremos la increíble biblioteca FastLED. Usaremos el ejemplo de boceto de Fire2012 de la biblioteca escrito por Mark Kriegsman. Usamos 6 tiras de LED cada una con 30 LED (un total de 180 LED), pegamos estos LED en un trozo de tubería de PVC y los colocamos en un cilindro de vidrio (estos cilindros de vidrio se usan generalmente como jarrones). Tenemos que difundir la luz de los LED para que parezcan continuos, para ello utilizamos papel de calco que deja pasar la luz y la difunde.

Construcción

En primer lugar, obtenga un cilindro de vidrio adecuado, nuestro cilindro tiene una longitud de 60 cm y un diámetro de 12 cm.

Si puede encontrar un cilindro de vidrio esmerilado que sea agradable, pero si es un vidrio transparente, puede usar papel de calco para cubrir la superficie del cilindro (ya sea la superficie interna o externa), el papel de calco hace un buen trabajo al difundir la luz y produce buenos resultados.

Después de conseguir un cilindro de vidrio, mida su longitud interna y luego corte el tubo de PVC para que encaje dentro del cilindro. Nuestro cilindro de vidrio tiene una altura de 60 cm (excluyendo la base tiene una longitud interna de 59 cm) por lo que cortamos nuestro tubo de PVC a 59 cm. Pegará tiras de LED en esta tubería, una tubería con un diámetro de 4 cm sería perfecta.

A continuación, tenemos que cortar nuestra tira de LED en 6 partes iguales. Aquí usamos una tira de densidad de 60 LED / m (puede usar densidades más altas para obtener mejores efectos si lo desea) usamos seis longitudes de 50 cm, eso significa que necesitamos 3 metros. Separe los seis tramos equitativamente alrededor de la tubería de PVC y pegue las tiras a la tubería. Así es como debería verse.

A las tiras de LED juntas, puede soldar directamente los cables a la tira de acuerdo con el siguiente dibujo o soldar primero los cabezales de los pines a las tiras y luego usar cables de tablero para conectarlos.

Cuando todas las conexiones de la tira de LED estén listas, debe colocar la tubería dentro del cilindro. Para centrar la tubería dentro del cilindro, puede usar espuma para cortar un círculo que tenga un diámetro exterior igual al diámetro interior del cilindro de vidrio y un diámetro interior igual al diámetro exterior de la tubería de PVC. Prepare dos de estos para cada lado de la tubería. Coloque estas piezas en los extremos y coloque suavemente la tubería dentro del cilindro.

Código

Usamos Arduino IDE para codificar y cargar en ESP8266. Debe usar una placa que tenga un ESP8266 con 3 MB de SPIFFS si desea cargar los archivos de software del controlador en el SPIFFS. SPIFFS es la abreviatura de “Serial Peripheral Interface Flash File System”. Puede cargar los archivos del controlador en esta memoria para servir los archivos desde esa ubicación. Al hacer esto, puede abrir su navegador (ya sea en su teléfono o computadora portátil) e ir a la dirección de su ESP (el valor predeterminado es 192.168.4.1) y obtendrá la interfaz del controlador en su navegador sin tener que instalar la aplicación, si tiene un iPhone o iPad, esta es su única opción.

Sube el siguiente boceto a tu placa ESP. Necesitamos la biblioteca FastLED, así que primero agréguela a su IDE de Arduino si aún no lo ha hecho (puede descargarlo aquí). El código de simulación de incendios es el boceto fire2012 de Mark Kriegsman que puede encontrar en los ejemplos. Ese ejemplo es para una tira de led, pero aquí hemos modificado el código para usar un número variable de tiras. Cuanto mayor sea el número de tiras / leds, mayor será el efecto.

La lógica de la simulación de incendios se describe claramente en el archivo de ejemplo. Si quieres saber cómo funciona lee el código fuente del ejemplo.

  #include  #include  #include "FastLED.h" #include "EEPROM.h" #include "FS.h" // required for SPIFFS # define DATA_PIN 5 #define LED_TYPE WS2811 # define COLOR_ORDER GRB # define NUM_LEDS 30 # define NUM_STRIPS 6 # define CHIPSET WS2812B // direcciones para guardar datos en EEPROM para preservar el estado de simulación de incendios # define cs0Adr 0 # define cs1Adr 3 # define cs2Adr 6 # define cs3Adr 9 # define BriAdr 15 # define FpsAdr 16 # define SparkingAdr 17 # define CoolingAdr 18 # define EEPROMCheckAdr 20 // si este valor es 250 asumimos que hemos guardado previamente en EEPROM y cargamos datos de los leds CRGB [NUM_STRIPS * NUM_LEDS]; String inData; uint8_t FPS =100; // MARCOS_PER_SECONDuint8_t CHISPAS =150; uint8_t ENFRIAMIENTO =90; uint8_t BRILLO =100; uint8_t csRGB [4] [3] ={{0, 0, 0}, {255, 0, 0}, {255, 127, 0}, {255, 255, 255}}; unsigned long previousMillis =0; bool change =false; // si es cierto vamos a guardar en EEprom.unsigned long changeMillis =0; // los cambios se guardarán 1 minuto después de que no se aplique ningún cambio para evitar el desgaste de EEPROM.bool initSetup =true; CRGBPalette16 gPal; ESP8266WebServer server (80); // Objeto de servidor web. Estará escuchando en el puerto 80 (predeterminado para HTTP) void setup () {EEPROM.begin (200); cWiFi (); setupFastLED (); loadConfig (); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2]));} inline void setupFastLED () {delay (1000); // retraso de cordura FastLED.addLeds  (leds, NUM_STRIPS * NUM_LEDS) .setCorrection (TypicalLEDStrip); FastLED.setBrightness (BRILLO);} bucle vacío () {servidor.handleClient (); // Manejo de solicitudes entrantes if (change) {if (millis () - changeMillis> 60000) {change =false; saveToEEPROM (); } } fuego(); FastLED.show (); FastLED.delay (1000 / FPS);} void Fire2012WithPalette (int stripNo) {calor de byte estático [NUM_STRIPS] [NUM_LEDS]; // Paso 1. Enfríe un poco cada celda para (int i =0; i  =2; k--) {heat [stripNo] [k] =(heat [stripNo] [k - 1] + calor [stripNo] [k - 2] + calor [stripNo] [k - 2]) / 3; } // Paso 3. Encienda aleatoriamente nuevas 'chispas' de calor cerca del fondo if (random8 ()  =period * 1000) {// guarda la última vez que parpadeó el LED previousMillis =currentMillis; devuelve verdadero; } else {devolver falso; }} void EEPROMupdate (dirección de byte, valor de byte) {if (EEPROM.read (dirección)! =valor) {EEPROM.write (dirección, valor); EEPROM.commit (); } return;} void saveToEEPROM () {EEPROMupdate (BriAdr, BRIGHTNESS); EEPROMupdate (FpsAdr, FPS); EEPROMupdate (SparkingAdr, SPARKING); EEPROMupdate (CoolingAdr, COOLING); para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {EEPROMupdate ((i * 3 + j), csRGB [i] [j]); }}} vacío handleCS0Change () {csRGB [0] [0] =str2int (server.arg ("R")); csRGB [0] [1] =str2int (servidor.arg ("G")); csRGB [0] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS1Change () {csRGB [1] [0] =str2int (server.arg ("R")); csRGB [1] [1] =str2int (servidor.arg ("G")); csRGB [1] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS2Change () {csRGB [2] [0] =str2int (server.arg ("R")); csRGB [2] [1] =str2int (servidor.arg ("G")); csRGB [2] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS3Change () {csRGB [3] [0] =str2int (server.arg ("R")); csRGB [3] [1] =str2int (servidor.arg ("G")); csRGB [3] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); change =true;} void handleConf () {if (server.arg ("brillo")! ="") {BRILLO =str2int (server.arg ("brillo")); FastLED.setBrightness (BRILLO); changeMillis =millis (); cambio =verdadero; } if (servidor.arg ("fps")! ="") {FPS =str2int (servidor.arg ("fps")); changeMillis =millis (); cambio =verdadero; } if (server.arg ("chispeando")! ="") {SPARKING =str2int (server.arg ("chispeando")); changeMillis =millis (); cambio =verdadero; } if (server.arg ("enfriamiento")! ="") {ENFRIAMIENTO =str2int (server.arg ("enfriamiento")); changeMillis =millis (); cambio =verdadero; } server.sendHeader ("Conexión", "cerrar"); server.sendHeader ("Acceso-Control-Permitir-Origen", "*"); server.send (200, "texto / plano", ""); // Devuelve la respuesta HTTP} void loadConfig () {if (EEPROM.read (EEPROMCheckAdr) ==250) {BRIGHTNESS =EEPROM.read (BriAdr); CHISPAS =EEPROM.read (SparkingAdr); ENFRIAMIENTO =EEPROM.read (CoolingAdr); FPS =EEPROM.read (FpsAdr); si (FPS ==0) FPS =100; para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {csRGB [i] [j] =EEPROM.read (i * 3 + j); }}} else {EEPROMupdate (BriAdr, BRILLO); EEPROMupdate (FpsAdr, FPS); EEPROMupdate (CoolingAdr, COOLING); EEPROMupdate (SparkingAdr, SPARKING); para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {EEPROMupdate ((i * 3 + j), csRGB [i] [j]); }} EEPROMupdate (EEPROMCheckAdr, 250); }} void cWiFi () {WiFi.softAP ("Llama de ElectroPeak", ""); // establezca una contraseña aquí si lo desea, es decir, WiFi.softAP ("Llama de ElectroPeak", "12345678"); Dirección IP myIP =WiFi.softAPIP (); server.on ("/ cs0", handleCS0Change); server.on ("/ cs1", handleCS1Change); server.on ("/ cs2", handleCS2Change); server.on ("/ cs3", handleCS3Change); server.on ("/ conf", handleConf); server.serveStatic ("/", SPIFFS, "/", "edad máxima =86400"); server.begin (); // Inicie el servidor}  

Para controlar la "apariencia" del fuego, hay dos variables con las que jugar:CHISPAS y ENFRIAMIENTO, que puedes controlar dinámicamente en el software del controlador cargado en SPIFFS o en la aplicación de Android que puedes descargar. También puede controlar FPS aquí.

El color del fuego se controla con una paleta de colores que también se puede cambiar a través del software del controlador (a través de 4 paradas de color). Simplemente haga clic / toque en cada círculo de color que representa una parada de color para establecer el color, después de establecer el color, presione cerca para cerrar el cuadro de diálogo y ver el cambio.

¿Cómo subir a SPIFFS?

Para cargar los archivos a la memoria SPIFFS usando Arduino IDE, primero debe crear una carpeta llamada "datos" dentro de la carpeta del boceto y colocar todos los archivos que desea cargar en esa carpeta. El archivo cargado aquí contiene tanto el boceto como esta carpeta.

A continuación, necesita el complemento de carga del sistema de archivos Arduino ESP8266 para Arduino. Siga las instrucciones en su página de Github e instale el complemento. Una vez instalado, encontrará Carga de datos de Sketch de ESP8266 en herramientas menú. Pon tu ESP en modo de programación y haz clic en eso. Sea paciente y deje que los archivos se carguen, eso puede llevar un poco de tiempo. Nota:configure la "velocidad de carga" en 921600 para hacerlo más rápido.

¿Cómo funciona?

El boceto cargado en la placa ESP8266 crea un servidor web en eso, que responde a las solicitudes enviadas desde la aplicación. La aplicación simplemente envía solicitudes GET al servidor (ESP8266). Los datos de color para crear la paleta se envían como argumentos en la solicitud de obtención, lo mismo ocurre con otros parámetros como los parámetros Sparking y Cooling.

Por ejemplo, para configurar el brillo, la aplicación envía la siguiente solicitud

http://192.168.4.1/conf?brightness=224

hay un controlador para esta solicitud en el boceto que, cuando recibe esta solicitud, establece el brillo. Revise el código para obtener más información.

Aplicación de Android

La aplicación de Android se crea usando Phonegap. Es una tecnología que le permite crear aplicaciones móviles multiplataforma utilizando tecnologías web (HTML, CSS, Javascript). Puede obtener el código fuente visitando esta página

Puedes leer este y otros tutoriales increíbles en Sitio web oficial de ElectroPeak

 #include #include #include "FastLED.h" #include "EEPROM.h" #include "FS.h" // requerido para SPIFFS # define DATA_PIN 5 # define LED_TYPE WS2811 # define COLOR_ORDER GRB # define NUM_LEDS 30 # define NUM_STRIPS 6 # define CHIPSET WS2812B // direcciones para guardar datos en EEPROM para preservar el estado de simulación de incendio # define cs0Adr 0 # define cs1Adr 3 # define cs2Adr 6 # define cs3Adr 9 # define BriAdr 15 # define FpsAdr 16 # define SparkingAdr 17 #define CoolingAdr 18 # define EEPROMCheckAdr 20 // si este valor es 250 asumimos que previamente hemos guardado en EEPROM y cargamos datos de los leds CRGB [NUM_STRIPS * NUM_LEDS]; String inData; uint8_t FPS =100; // MARCOS_PER_SECONDuint8_t CHISPAS =150; uint8_t ENFRIAMIENTO =90; uint8_t BRILLO =100; uint8_t csRGB [4] [3] ={{0, 0, 0}, {255, 0, 0}, {255, 127, 0}, {255, 255, 255}}; unsigned long previousMillis =0; bool change =false; // si es cierto vamos a guardar en EEprom.unsigned long changeMillis =0; // los cambios se guardarán 1 minuto después de que no se aplique ningún cambio para evitar el desgaste de EEPROM.bool initSetup =true; CRGBPalette16 gPal; ESP8266WebServer server (80); // Objeto de servidor web. Estará escuchando en el puerto 80 (predeterminado para HTTP) void setup () {EEPROM.begin (200); cWiFi (); setupFastLED (); loadConfig (); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); } inline void setupFastLED () {retraso (1000); // retraso de cordura FastLED.addLeds  (leds, NUM_STRIPS * NUM_LEDS) .setCorrection (TypicalLEDStrip); FastLED.setBrightness (BRILLO);} bucle vacío () {servidor.handleClient (); // Manejo de solicitudes entrantes if (change) {if (millis () - changeMillis> 60000) {change =false; saveToEEPROM (); } } fuego(); FastLED.show (); FastLED.delay (1000 / FPS);} void Fire2012WithPalette (int stripNo) {calor de byte estático [NUM_STRIPS] [NUM_LEDS]; // Paso 1. Enfríe un poco cada celda para (int i =0; i  =2; k--) {heat [stripNo] [k] =(heat [stripNo] [k - 1] + calor [stripNo] [k - 2] + calor [stripNo] [k - 2]) / 3; } // Paso 3. Encienda aleatoriamente nuevas 'chispas' de calor cerca del fondo if (random8 ()  =period * 1000) {// guarda la última vez que parpadeó el LED previousMillis =currentMillis; devuelve verdadero; } else {devolver falso; }} void EEPROMupdate (dirección de byte, valor de byte) {if (EEPROM.read (dirección)! =valor) {EEPROM.write (dirección, valor); EEPROM.commit (); } return;} void saveToEEPROM () {EEPROMupdate (BriAdr, BRIGHTNESS); EEPROMupdate (FpsAdr, FPS); EEPROMupdate (SparkingAdr, SPARKING); EEPROMupdate (CoolingAdr, COOLING); para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {EEPROMupdate ((i * 3 + j), csRGB [i] [j]); }}} vacío handleCS0Change () {csRGB [0] [0] =str2int (server.arg ("R")); csRGB [0] [1] =str2int (servidor.arg ("G")); csRGB [0] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS1Change () {csRGB [1] [0] =str2int (server.arg ("R")); csRGB [1] [1] =str2int (servidor.arg ("G")); csRGB [1] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS2Change () {csRGB [2] [0] =str2int (server.arg ("R")); csRGB [2] [1] =str2int (servidor.arg ("G")); csRGB [2] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); cambio =verdadero;} vacío handleCS3Change () {csRGB [3] [0] =str2int (server.arg ("R")); csRGB [3] [1] =str2int (servidor.arg ("G")); csRGB [3] [2] =str2int (servidor.arg ("B")); gPal =CRGBPalette16 (CRGB (csRGB [0] [0], csRGB [0] [1], csRGB [0] [2]), CRGB (csRGB [1] [0], csRGB [1] [1], csRGB [1] [2]), CRGB (csRGB [2] [0], csRGB [2] [1], csRGB [2] [2]), CRGB (csRGB [3] [0], csRGB [3] [ 1], csRGB [3] [2])); changeMillis =millis (); change =true;} void handleConf () {if (server.arg ("brillo")! ="") {BRILLO =str2int (server.arg ("brillo")); FastLED.setBrightness (BRILLO); changeMillis =millis (); cambio =verdadero; } if (servidor.arg ("fps")! ="") {FPS =str2int (servidor.arg ("fps")); changeMillis =millis (); cambio =verdadero; } if (server.arg ("chispeando")! ="") {SPARKING =str2int (server.arg ("chispeando")); changeMillis =millis (); cambio =verdadero; } if (server.arg ("enfriamiento")! ="") {ENFRIAMIENTO =str2int (server.arg ("enfriamiento")); changeMillis =millis (); cambio =verdadero; } server.sendHeader ("Conexión", "cerrar"); server.sendHeader ("Acceso-Control-Permitir-Origen", "*"); server.send (200, "texto / plano", ""); // Devuelve la respuesta HTTP} void loadConfig () {if (EEPROM.read (EEPROMCheckAdr) ==250) {BRIGHTNESS =EEPROM.read (BriAdr); CHISPAS =EEPROM.read (SparkingAdr); ENFRIAMIENTO =EEPROM.read (CoolingAdr); FPS =EEPROM.read (FpsAdr); si (FPS ==0) FPS =100; para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {csRGB [i] [j] =EEPROM.read (i * 3 + j); }}} else {EEPROMupdate (BriAdr, BRILLO); EEPROMupdate (FpsAdr, FPS); EEPROMupdate (CoolingAdr, COOLING); EEPROMupdate (SparkingAdr, SPARKING); para (uint8_t i =0; i <4; i ++) {para (uint8_t j =0; j <3; j ++) {EEPROMupdate ((i * 3 + j), csRGB [i] [j]); }} EEPROMupdate (EEPROMCheckAdr, 250); }} void cWiFi () {WiFi.softAP ("Llama de ElectroPeak", ""); // establezca una contraseña aquí si lo desea, es decir, WiFi.softAP ("Llama de ElectroPeak", "12345678"); Dirección IP myIP =WiFi.softAPIP (); server.on ("/ cs0", handleCS0Change); server.on ("/ cs1", handleCS1Change); server.on ("/ cs2", handleCS2Change); server.on ("/ cs3", handleCS3Change); server.on ("/ conf", handleConf); server.serveStatic ("/", SPIFFS, "/", "edad máxima =86400"); server.begin (); // Inicie el servidor} 

 Sin vista previa (solo descarga).