Hue Magic: 4 pasos (con imágenes)

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

¡Bienvenidos magos!

Hace un par de meses creé una pequeña caja mágica con varita para mi hijo de 3 años. Cuando toque la caja con la varita, una luz de color cambiante comenzará a emitirse desde la caja. Cuando ve un color que le gusta particularmente, puede apuntar la varita hacia la lámpara de mesa (con una bombilla Philips Hue adentro), lanzar un hechizo y el color de la caja saltará mágicamente a la lámpara. La lámpara y la luz de la caja de repente tienen el mismo color …

Después de unos segundos, el color se desvanece y la lámpara de mesa vuelve a su estado anterior al hechizo. Hasta que se lanza un nuevo hechizo …

Paso 1: lo que necesita para crear este proyecto

Para crear este proyecto, necesitará los siguientes materiales:

• 1 (o más) bombilla de color Philips Hue y un puente Hue
• 1 microcontrolador Wemos D1 mini o similar basado en esp8266
• 1 (Arduino) sensor táctil (por ejemplo, TTP223R)
• 1 (Arduino) botón momentáneo
• 1 condensador de 10 uF
• 1 led RGB (tipo ánodo común)
• 5 resistencias (10, 22 y 47 Ohm, 2x 10K Ohm)
• 2 PCB de prototipos pequeños (2x3 pulgadas o aproximadamente 5x7 cm deberían ser lo suficientemente grandes)
• algunos cables (puente)
• un soldador
• una varita mágica (se puede comprar ya preparada en una juguetería, o puede hacerla usted mismo)
• una caja pequeña hecha de cartón o madera (puede ser una caja existente, pero también puede construir una caja desde cero, por supuesto)
• un poco de cinta
• un poco de pegamento y / o tuercas y tornillos para montar los PCB en la caja.
• opcional: papel de regalo para la caja

NB: Un poco de experiencia en la lectura de diagramas de circuitos es útil al pasar por este instructivo. Mi diagrama no es demasiado complejo: si puede diferenciar un condensador de una resistencia, probablemente estará bien.

También es útil algo de experiencia con la programación de Arduino utilizando el IDE de Arduino. Una experiencia bastante básica debería ser suficiente, ya que le proporcionaré el código completo para que lo copie y pegue. Sin embargo, necesitará adaptar algunas cosas para que funcione en su configuración particular (por ejemplo, su configuración de red y algunos detalles de su configuración de Hue). Si esto le parece un poco intimidante, no se preocupe, le ayudaré a recuperar toda la información que necesite.

Paso 2: la caja y la varita

Los primeros pasos son normalmente los más difíciles, ¡pero no en este instructable! Para comenzar fácilmente, puede comprar una varita mágica en una tienda de juguetes y para la caja, simplemente puede reutilizar una caja pequeña existente que ya tiene tirada. Solo asegúrate de que la caja no esté hecha de metal, ya que esto bloqueará las señales wifi y las necesitamos para la magia;-).

Cuando reutiliza una caja existente, lo único que tiene que hacer es hacer dos orificios en la parte superior de la caja: 1 orificio pequeño (tamaño 5 mm = 0,2 ") para el LED RGB y un orificio más grande (alrededor de 12- 14 mm o aproximadamente 0,5 ") para el sensor táctil.

La ubicación exacta de los orificios no es fundamental, solo colóquelos de acuerdo con su sentido de la estética, pero tenga en cuenta algunas cosas:

• Mantenga cierta distancia entre ambos orificios para asegurarse de que los componentes que se montarán debajo de los orificios (el LED RGB y el sensor táctil) puedan ocupar suficiente espacio para el montaje y el cableado.
• El agujero más grande es para el sensor táctil. Este sensor se montará justo debajo del orificio, de manera que la varilla pueda tocarlo (e incluso presionarlo ligeramente). ¡Así que asegúrese de que la varita que compre no sea demasiado gruesa!

Opcionalmente puedes usar pintura (en aerosol) o papel de envolver y cubrir plástico para hacer tu caja un poco más bonita y protegerla de derrames de comida y manos sucias.

Si este primer paso es demasiado poco ambicioso para su agrado, siga adelante y cree una caja y una varita completamente desde cero. Hay varios instructivos que te ayudarán a crear una hermosa varita.

Cualquiera que sea el camino que elija, ahora es el momento de explorar el interior de la caja.

Paso 3: el hardware en el interior

Utilice un soldador para conectar los componentes electrónicos de acuerdo con el diagrama de circuito anterior. Hay un par de cosas a las que se debe prestar especial atención:

• Los cables entre el Wemos D1 Mini y el led RGB deben ser lo suficientemente largos para que el led RGB se pueda montar en el orificio que has hecho en la tapa de la caja.
• Lo mismo se aplica a los cables conectados al interruptor momentáneo y al sensor táctil, ya que deben ser accesibles a través del otro orificio de la tapa.
• El botón del interruptor momentáneo debe estar pegado a la parte inferior (el lado no sensible) del sensor táctil, de tal manera que pueda volver a colocar el botón en el interruptor momentáneo con el sensor táctil pegado en la parte superior (ver imagen). El sensor táctil está montado en la parte superior del interruptor momentáneo para detectar las pulsaciones de botón realizadas con un dedo, en cuyo caso se ignorará la pulsación de botón. Solo cuando se presiona el botón con la varita mágica (que no debe ser conductora, por lo que los plásticos y la madera están bien), comenzará el ciclo mágico.
• Monte el botón momentáneo con el sensor táctil en la parte superior, no demasiado profundo debajo del orificio de la tapa, ya que debe ser accesible por la varita mágica para poner la magia en movimiento.
• Asegúrese de observar la polaridad del condensador cuando lo suelde. Si invierte los cables positivo y negativo, es probable que el condensador emita un poco de humo mágico y ponga su circuito en un sueño eterno.
• Pegue, pegue con cinta o atornille el soporte de la batería y los PCB en su lugar. No tiene que estar ordenado, ya que no estará a la vista. Debería ser a prueba de caídas.

¡Vamos al software!

Paso 4: el software

Asegúrese de tener el editor de software Arduino más reciente (gratuito), que se puede descargar en https://www.arduino.cc/en/Main/Software. Para agregar soporte para Wemos D1 mini y otras placas basadas en ESP8266, siga los siguientes pasos:

• Después de la instalación, inicie el software Arduino y abra la ventana Preferencias.
• Ingresa https://arduino.esp8266.com/stable/package_esp8266com_index.json en el campo "URL adicionales del administrador del tablero". Puede agregar varias URL, separándolas con comas.
• Abra Boards Manager desde Tools> Board menu e instale la plataforma esp8266 (y no olvide seleccionar su placa ESP8266 desde Tools> Board menu después de la instalación. "LOLIN (WEMOS) D1 R2 & mini" funciona mejor para Wemos D1 mini v2 y v3 tableros.

Si necesita más ayuda para instalar Arduino y configurar los controladores, puede echar un vistazo a

En el editor de Arduino, abra un nuevo archivo (Archivo> Nuevo) y copie / pegue el código a continuación en la ventana que acaba de abrir. Simplemente sobrescriba las líneas que ya están presentes en la nueva ventana (configuración vacía y bucle vacío).

Ahora está casi listo, pero tendrá que adaptar algunas partes del código para su configuración particular.

Lo primero que debe hacer es cambiar la dirección IP en la línea 34 (en el editor Arduino, las líneas de código están numeradas) a la dirección IP de su puente Hue. Si no conoce su dirección IP de Hue Bridge, visite https://discovery.meethue.com/ y la dirección IP correcta aparecerá de inmediato en su navegador. La dirección IP es el número punteado que está precedido por "internalipaddress".

Para comunicarse con las luces Hue, tendrá que crear un usuario de la API Hue para el Wemos D1 mini, de modo que Wemos pueda comunicarse con la luz Hue a través de la API Hue. Para hacer eso, siga las instrucciones en https://developers.meethue.com/develop/get-started-2/ y copie / pegue el nombre de usuario generado (bastante largo) en la ventana del código Arduino. Simplemente reemplace cada "NOMBRE DE USUARIO DE LA API DE HUE" por el nombre de usuario de la API generado.

Luego, debe seleccionar la luz de tono correcta para cambiar de color. En la API de Hue, cada luz tiene un número, por lo que debe averiguar el número que se corresponde con la luz que desea usar para este proyecto. Una de las formas más fáciles de averiguar qué número tiene una luz en particular es descargar la aplicación Hue Viewer para Android o iOS. Reemplace el texto "SU NÚMERO DE LUZ" con el número correcto en todas partes de la ventana del código Arduino.

Lo último que debe hacer es configurar Wemos para conectarse a su red wifi. Esto se hace cargando el código en Wemos y en su computadora portátil, cambie a otra red wifi: a "AutoConnectAP". Su navegador mostrará una página donde puede agregar el SSID (nombre) y la contraseña de su red wifi que el controlador Wemos usará para conectarse a su red wifi (y al puente Hue).

NB: Si cargar el código a nuestro Wemos D1 mini a través de USB no funciona, es posible que deba descargar un controlador para el chip USB en el Wemos. Puede descargar un controlador para su plataforma (Windows, Mac) en

¡Ahora estás listo para probar tu creación!

// ESP8266 Hue Magic Wand // Richard van Kampen - 2018 // Este código se probó en un Wemos D1 mini, pero probablemente también funcionará en otras placas de desarrollo basadas en ESP8266 // Para agregar soporte para Wemos D1 mini y otras placas ESP8266 al editor de Arduino, siga los siguientes pasos: // - Inicie Arduino y abra la ventana de Preferencias. // - Ingrese https://arduino.esp8266.com/stable/package_esp8266com_index.json en el campo URL adicionales del administrador del tablero. Puede agregar varias URL, separándolas con comas. // - Abra Boards Manager desde Tools> Board menu e instale la plataforma esp8266 (y no olvide seleccionar su placa ESP8266 desde Tools> Board menu después de la instalación). // bibliotecas utilizadas: #include "ESP8266WiFi.h" // ESP8266 Core WiFi Library #include "DNSServer.h" // Servidor DNS local utilizado para redirigir todas las solicitudes al portal de configuración de WiFiManager si no se ha configurado ninguna configuración de WIFI (SSID, contraseña) aún no se ha configurado. #include "ESP8266WebServer.h" // Servidor web local utilizado para servir al portal de configuración de WiFiManager #include "WiFiManager.h" // Biblioteca mágica de configuración de WiFi, si aún no está instalada, consulte https://github.com/tzapu/WiFiManager # install-through-library-manager #include "RestClient.h" // https://github.com/fabianofranca/ESP8266RestClient, necesario para usar la API de Philips Hue (consulte https://developers.meethue.com/develop/ hue-api /). #include "ArduinoJson.h" // https://github.com/bblanchon/ArduinoJson, necesario para analizar la respuesta de la API de Hue, instale la versión 5.x a través del administrador de la biblioteca en Arduino (Menú "Sketch"> Incluir biblioteca> Administrar Bibliotecas> busque ArduinoJson y cambie la versión a la última 5.x). La versión 6 (actualmente en beta) arroja un error. // variables e init: String respuesta; const int redPin = 13; // en Wemos esto es d7 const int greenPin = 12; // en Wemos esto es d6 const int bluePin = 14; // en Wemos esto es d5 const int touchSensor = 5; // en Wemos esto es d1 const int activaciónPin = 4; // en Wemos esto es d2 bool activación = HIGH; toque bool = BAJO; const char * aan_restore; int bri_restore; double x_restore; double y_restore; doble x_magic; double y_magic; bool primero = verdadero; unsigned long startMillis; unsigned long currentMillis; unsigned long durationMillis; Cliente RestClient = RestClient ("192.168.178.23"); // "su dirección IP de Hue Bridge" // Si no conoce su dirección IP de Hue Bridge, visite https://discovery.meethue.com y aparecerá de inmediato en su navegador. La dirección IP es el número punteado que está precedido por "internalipaddress" void setup () {analogWriteRange (255); Serial.begin (9600); // Empiece con el LED apagado. pinMode (activaciónPin, INPUT_PULLUP); pinMode (sensor táctil, ENTRADA); startMillis = millis (); checkWand (); } void loop () {// no hay nada que hacer aquí, déjelo vacío…} void checkWand () {int rgbColour [3]; // Código de color RGB de James Harton, https://gist.github.com/jamesotron/766994 // Empiece con rojo. rgbColour [0] = 255; rgbColour [1] = 0; rgbColour [2] = 0; Activación = digitalRead (ActivaciónPin); // BAJA significa que se está utilizando la varita. touch = digitalRead (touchSensor); // HIGH significa que se usa el dedo en lugar de la varita, lo que no debería ser el caso. while (activación == LOW && touch == LOW) {// Elija los colores para incrementar y disminuir. para (int decColour = 0; decColour <3; decColour + = 1) {int incColour = decColour == 2? 0: decColour + 1; // = operador ternario, significa: int incColour; if (decColour == 2) {incColour = 0;} else {incColour = decColour +1;} // difumina los dos colores. para (int i = 0; i <255; i + = 1) {rgbColour [decColour] - = 1; rgbColour [incColour] + = 1; // como nuestro LED RGB tiene un ánodo común en lugar de un cátodo (por lo que necesitamos conectarnos a + 3.3V en lugar de tierra), necesitamos valores inversos para RGB: int red = 255 - rgbColour [0]; int verde = 255 - rgbColour [1]; int azul = 255 - rgbColour [2]; analogWrite (redPin, rojo); analogWrite (greenPin, verde); analogWrite (bluePin, azul); retraso (8); activación = digitalRead (activaciónPin); if (activación == HIGH) {// HIGH significa que la varita está levantada. goto stopColorCycling; }}}} stopColorCycling: currentMillis = millis (); durationMillis = (currentMillis - startMillis); if (durationMillis> 1000) {RGBtoxy (rgbColour [0], rgbColour [1], rgbColour [2]); } else {// pone Wemos en modo de suspensión: ESP.deepSleep (0); }} void RGBtoxy (int rojo, int verde, int azul) {// ver https://developers.meethue.com/documentation/color-conversions-rgb-xy double R = map (rojo, 0, 255, 0, 1000); R / = 1000; doble G = mapa (verde, 0, 255, 0, 1000); G / = 1000; doble B = mapa (azul, 0, 255, 0, 1000); B / = 1000; R = (R> 0.04045f)? pow ((R + 0.055f) / (1.0f + 0.055f), 2.4f): (R / 12.92f); G = (G> 0.04045f)? pow ((G + 0.055f) / (1.0f + 0.055f), 2.4f): (G / 12.92f); B = (B> 0.04045f)? pow ((B + 0.055f) / (1.0f + 0.055f), 2.4f): (B / 12.92f); doble X = R * 0,649926f + G * 0,103455f + B * 0,197109f; doble Y = R * 0.234327f + G * 0.743075f + B * 0.022598f; doble Z = R * 0.0000000f + G * 0.053077f + B * 1.035763f; doble x = X / (X + Y + Z); doble y = Y / (X + Y + Z); // conversión no completada por completo, pero probablemente lo suficientemente buena para lo que queremos lograr, así que déjelo así y envíe los valores XY a lamp: sendtoHue (x, y); } void sendtoHue (doble a, doble b) {// cambio de color real de la varita mágica if (primero) {// primer paso: obtener el estado actual de la lámpara getCurrentValues (); } // luego envía los colores de la varita mágica: // espera el hechizo: espera larga; x_magic = a; y_magic = b; // lámpara encendida en color de varita mágica: respuesta = ""; int temp = aleatorio (2, 9); const char * estado = "verdadero"; for (int i = 1; i <= temp; i ++) {// crear una matriz de caracteres para enviar al puente: String temp_body1 = "{" en / ":" + String (estado) + ", \" bri / ": 220, / "xy \": ["+ String (x_magic) +", "+ String (y_magic) +"], / "tiempo de transición \": 1} "; int str_len1 = temp_body1.length () + 1; char post_body1 [str_len1]; temp_body1.toCharArray (post_body1, str_len1); // ahora tenemos post_body1 como matriz de caracteres; // realiza una llamada de descanso: int statusCodePut1 = client.put ("/ api / TU NOMBRE DE USUARIO DE LA API DE HUE / luces / TU NÚMERO DE LUZ / estado", post_body1, & response); esperar = aleatorio (100, 600); retrasar (esperar); if (estado == "verdadero") {estado = "falso"; } else {estado = "verdadero"; }} // reducir el brillo…: response = ""; temp = aleatorio (4, 17); // crea una matriz de caracteres para enviar al puente: String temp_body2 = "{" en / ": verdadero, \" bri / ": 154, \" transición / ":" + String (temp) + "}"; int str_len2 = temp_body2.length () + 1; char post_body2 [str_len2]; temp_body2.toCharArray (post_body2, str_len2); // ahora tenemos post_body2 como matriz de caracteres; // realiza una llamada de descanso: int statusCodePut2 = client.put ("/ api / TU NOMBRE DE USUARIO DE LA API DE HUE / luces / TU NÚMERO DE LUZ / estado", post_body2, & response); esperar = aleatorio (1000, 2500); retrasar (esperar); //..y volver a hacer más brillante: respuesta = ""; temp = aleatorio (4, 17); // crea una matriz de caracteres para enviar al puente: String temp_body3 = "{" bri_inc / ": 100, \" transición / ":}"; int str_len3 = temp_body3.length () + 1; char post_body3 [str_len3]; temp_body3.toCharArray (post_body3, str_len3); // ahora tenemos post_body3 como matriz de caracteres; // realiza una llamada de descanso: int statusCodePut3 = client.put ("/ api / TU NOMBRE DE USUARIO DE LA API DE HUE / luces / TU NÚMERO DE LUZ / estado", post_body3, & response); esperar = aleatorio (2500, 5000); // esperar 2-5 segundos de retraso (esperar); // y volver al valor anterior: respuesta = ""; // crear una matriz de caracteres para enviar al puente: String temp_body4 = "{" en / ":" + String (aan_restore) + ", \" bri / ":" + String (bri_restore) + ", \" xy / ": ["+ String (x_restore) +", "+ String (y_restore) +"], / "tiempo de transición \": "+ String (20) +"} "; int str_len4 = temp_body4.length () + 1; char post_body4 [str_len4]; temp_body4.toCharArray (post_body4, str_len4); // ahora tenemos post_body4 como matriz de caracteres; // realiza una llamada de descanso: int statusCodePut4 = client.put ("/ api / TU NOMBRE DE USUARIO DE LA API DE HUE / luces / TU NÚMERO DE LUZ / estado", post_body4, & response); ESP.deepSleep (0); // ir a dormir de nuevo…. } unsigned int getCurrentValues () {connectWifi (); // primero conectarse a Wifi response = ""; // realiza una llamada de descanso: int statusCodeGet = client.get ("/ api / TU NOMBRE DE USUARIO DE LA API DE HUE / luces / TU NÚMERO DE LUZ", & respuesta); Serial.print ("Código de estado del servidor después de GET:"); Serial.println (statusCodeGet); Serial.print ("Cuerpo de respuesta del servidor:"); Serial.println (respuesta); StaticJsonBuffer jsonBuffer; // Analizando la respuesta Json // Raíz del árbol de objetos. // // Es una referencia al JsonObject, los bytes reales están dentro del // jsonBuffer con todos los demás nodos del árbol de objetos. // La memoria se libera cuando jsonBuffer sale del alcance. JsonObject & root = jsonBuffer.parseObject (respuesta); JsonObject & state = root ["state"]; // Prueba si el análisis se realiza correctamente. if (! root.success ()) {Serial.println ("parseObject () falló"); } // Obtener valores. aan_restore = estado ["activado"]; Serial.println (aan_restore); bri_restore = estado ["bri"]; x_restore = estado ["xy"] [0]; y_restore = estado ["xy"] [1]; first = false;} void connectWifi () {// inicialización local. Una vez que su negocio está hecho, no hay necesidad de mantenerlo cerca de WiFiManager wifiManager; // restablecer la configuración - para probar: //wifiManager.resetSettings (); // establece la devolución de llamada que se llama cuando falla la conexión a WiFi anterior y entra en el modo de punto de acceso wifiManager.setAPCallback (configModeCallback); // obtiene ssid y pass e intenta conectarse // si no se conecta, inicia un punto de acceso con el nombre especificado // aquí "AutoConnectAP" // y entra en un bucle de bloqueo en espera de configuración if (! wifiManager.autoConnect ()) {Serial.println ("no se pudo conectar y se agotó el tiempo de espera"); // reiniciar y volver a intentarlo, o quizás ponerlo en reposo ESP.reset (); retraso (1000); } // si llegas aquí te has conectado al WiFi Serial.println ("conectado… yeey:)"); Serial.print ("Conectado a:"); Serial.println (WiFi. SSID ()); Serial.print ("dirección IP:"); Serial.println (WiFi.localIP ()); // dirección IP asignada a su ESP (Wemos) // imprime la intensidad de la señal recibida: long rssi = WiFi. RSSI (); Serial.print ("intensidad de la señal (RSSI):"); Serial.println (rssi); } void configModeCallback (WiFiManager * myWiFiManager) {Serial.println ("Ingresó al modo de configuración"); Serial.println (WiFi.softAPIP ()); // si usó SSID generado automáticamente, imprímalo Serial.println (myWiFiManager-> getConfigPortalSSID ()); }