Hue Magic : 4 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Bienvenue aux sorciers !

Il y a quelques mois, j'ai créé une petite boîte magique avec baguette pour mon fils de 3 ans. Lorsqu'il touche la boîte avec la baguette, une lumière de couleur changeante commencera à émettre de la boîte. Lorsqu'il voit une couleur qu'il aime particulièrement, il peut pointer la baguette vers la lampe de table (avec une ampoule Philips Hue à l'intérieur), lancer un sort et la couleur de la boîte sautera comme par magie sur la lampe ! La lampe et la lumière de la boîte ont soudainement la même couleur…

Après quelques secondes, la couleur s'estompe et la lampe de table revient à son état d'avant le sort. Jusqu'à ce qu'un nouveau sort soit lancé…

Étape 1: Ce dont vous avez besoin pour créer ce projet

Pour créer ce projet, vous aurez besoin du matériel suivant:

• 1 (ou plus) ampoule de couleur Philips Hue et un pont Hue
• 1 microcontrôleur Wemos D1 mini ou similaire basé sur esp8266
• 1 capteur tactile (Arduino) (par exemple TTP223R)
• 1 bouton momentané (Arduino)
• 1 condensateur 10uF
• 1 led RVB (type anode commune)
• 5 résistances (10, 22 et 47 Ohm, 2x 10K Ohm)
• 2 petits PCB de prototypage (2x3 pouces ou environ 5x7 cm devraient être assez grands)
• quelques fils (cavaliers)
• un fer à souder
• une baguette magique (peut être achetée prête à l'emploi dans un magasin de jouets, ou vous pouvez la fabriquer vous-même)
• une petite boîte en carton ou en bois (peut être une boîte existante, mais vous pouvez aussi construire une boîte à partir de zéro bien sûr)
• du ruban adhésif
• de la colle et/ou des écrous et boulons pour monter les PCB dans la boîte.
• facultatif: papier d'emballage pour la boîte

NB: un peu d'expérience dans la lecture de schémas de circuits est utile lors de l'examen de cette instructable. Mon schéma n'est pas trop complexe: si vous pouvez différencier un condensateur d'une résistance, tout ira probablement bien.

Une certaine expérience de la programmation Arduino à l'aide de l'IDE Arduino est également utile. Une expérience plutôt basique devrait suffire, car je vous fournirai le code complet à copier/coller. Vous devrez cependant adapter quelques éléments pour que cela fonctionne dans votre configuration particulière (par exemple, vos paramètres réseau et certains détails de votre configuration Hue). Si cela vous semble un peu intimidant, ne vous inquiétez pas, je vous aiderai à récupérer toutes les informations dont vous avez besoin.

Étape 2: La boîte et la baguette

Les premières étapes sont normalement les plus difficiles, mais pas dans cette instructable ! Pour un démarrage facile, vous pouvez simplement acheter une baguette magique dans un magasin de jouets et pour la boîte, vous pouvez simplement réutiliser une petite boîte existante que vous avez déjà traînée. Assurez-vous simplement que la boîte n'est pas en métal, car cela bloquera les signaux wifi et nous en avons besoin pour la magie;-).

Lorsque vous réutilisez une boîte existante, la seule chose que vous avez à faire est de faire deux trous dans le haut de la boîte: 1 petit trou (taille 5 mm = 0,2") pour la led RVB et un trou plus grand (environ 12- 14 mm ou environ 0,5") pour le capteur tactile.

L'emplacement exact des trous n'est pas critique, placez-les simplement selon votre sens de l'esthétique mais gardez quelques points à l'esprit:

• Gardez une certaine distance entre les deux trous pour vous assurer que les composants qui seront montés sous les trous (la led RVB et le capteur tactile) peuvent tous deux occuper suffisamment d'espace pour le montage et le câblage.
• Le plus grand trou est pour le capteur tactile. Ce capteur sera monté juste en dessous du trou, de telle sorte qu'il puisse être touché (et même légèrement pressé) par la baguette. Assurez-vous donc que la baguette que vous achetez n'est pas trop épaisse !

En option, vous pouvez utiliser de la peinture (en aérosol) ou du papier d'emballage et recouvrir du plastique pour rendre votre boîte un peu plus jolie et la protéger des déversements de nourriture et des mains sales.

Si cette première étape est un peu trop peu ambitieuse à votre goût, n'hésitez pas à créer une boîte et une baguette entièrement à partir de zéro ! Il existe plusieurs instructables qui vous aideront à créer une belle baguette

Quel que soit le chemin que vous choisissez, il est maintenant temps d'explorer l'intérieur de la boîte.

Étape 3: Le matériel à l'intérieur

Utilisez un fer à souder pour connecter les composants électroniques selon le schéma de circuit ci-dessus. Il y a quelques points auxquels prêter une attention particulière:

• Les fils entre le Wemos D1 Mini et la led RVB doivent être suffisamment longs pour que la led RVB puisse être montée dans le trou que vous avez fait dans le couvercle de la boîte.
• Il en va de même pour les fils attachés à l'interrupteur momentané et au capteur tactile, car ceux-ci doivent être accessibles via l'autre trou du couvercle.
• Le bouton de l'interrupteur momentané doit être collé sur la face inférieure (côté non sensible) du capteur tactile, de manière à pouvoir remettre le bouton sur l'interrupteur momentané avec le capteur tactile collé sur le dessus (voir photo). Le capteur tactile est monté sur le dessus de l'interrupteur momentané pour détecter les pressions de bouton effectuées par un doigt, auquel cas la pression de bouton sera ignorée. Ce n'est que lorsque le bouton est enfoncé par la baguette magique (qui devrait être non conductrice, donc les plastiques et le bois sont parfaits), le cycle magique commencera.
• Montez le bouton momentané avec capteur tactile sur le dessus pas trop profondément en dessous du trou dans le couvercle, car il doit être accessible par la baguette magique pour mettre la magie en mouvement.
• Veillez à respecter la polarité du condensateur lors de la soudure. Si vous inversez les fils positifs et négatifs, le condensateur émettra probablement de la fumée magique et mettra votre circuit dans un sommeil éternel.
• Collez, collez et/ou vissez le support de batterie et le(s) PCB(s) en place. Il n'a pas besoin d'être soigné, car il ne sera pas en vue. Il devrait juste être à l'épreuve des chutes.

Place au logiciel !

Étape 4: Le logiciel

Assurez-vous d'avoir le dernier éditeur de logiciel Arduino (gratuit), qui peut être téléchargé à l'adresse https://www.arduino.cc/en/Main/Software. Pour ajouter la prise en charge du Wemos D1 mini et d'autres cartes basées sur ESP8266, procédez comme suit:

• Après l'installation, démarrez le logiciel Arduino et ouvrez la fenêtre Préférences.
• Entrez https://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ "URL de gestionnaire de carte supplémentaire". Vous pouvez ajouter plusieurs URL en les séparant par des virgules.
• Ouvrez Boards Manager à partir du menu Outils > Carte et installez la plate-forme esp8266 (et n'oubliez pas de sélectionner votre carte ESP8266 dans Outils > Menu Carte après l'installation. "LOLIN (WEMOS) D1 R2 & mini" fonctionne mieux pour Wemos D1 mini v2 et v3 planches.

Si vous avez besoin de plus d'aide pour installer Arduino et configurer les pilotes, vous pouvez consulter

Dans l'éditeur Arduino, ouvrez un nouveau fichier (Fichier> Nouveau) et copiez/collez le code ci-dessous dans la fenêtre qui vient de s'ouvrir. Il suffit d'écraser les lignes déjà présentes dans la nouvelle fenêtre (void setup et void loop).

Vous êtes maintenant presque prêt, mais vous devrez adapter quelques morceaux de code à votre configuration particulière.

La première chose à faire est de changer l'adresse IP de la ligne 34 (dans l'éditeur Arduino, les lignes de code sont numérotées) en l'adresse IP de votre pont Hue. Si vous ne connaissez pas votre adresse IP Hue Bridge, visitez https://discovery.meethue.com/ et la bonne adresse IP apparaîtra immédiatement dans votre navigateur. L'adresse IP est le numéro en pointillé qui est précédé de "internalipaddress".

Pour communiquer avec les lumières Hue, vous devrez créer un utilisateur API Hue pour le Wemos D1 mini, afin que le Wemos puisse communiquer avec la lumière Hue via l'API Hue. Pour ce faire, suivez les instructions sur https://developers.meethue.com/develop/get-started-2/ et copiez/collez le nom d'utilisateur généré (assez long) dans la fenêtre de code Arduino. Remplacez simplement chaque « VOTRE NOM D'UTILISATEUR DE L'API HUE » par le nom d'utilisateur de l'API généré.

Ensuite, vous devez sélectionner la bonne lumière Hue pour changer de couleur. Dans l'API Hue, chaque lumière a un numéro, vous devez donc trouver le numéro qui correspond à la lumière que vous souhaitez utiliser pour ce projet. L'un des moyens les plus simples de connaître le numéro d'une lumière particulière est de télécharger l'application Hue Viewer pour Android ou iOS. Remplacez le texte "VOTRE NUMÉRO DE LUMIÈRE" par le bon numéro partout dans la fenêtre de code Arduino.

La dernière chose à faire est de configurer le Wemos pour se connecter à votre réseau wifi. Cela se fait en téléchargeant le code sur le Wemos et sur votre ordinateur portable, basculez vers un autre réseau wifi: vers « AutoConnectAP ». Votre navigateur affichera alors une page où vous pourrez ajouter le SSID (nom) et le mot de passe de votre réseau wifi que le contrôleur Wemos utilisera pour se connecter à votre réseau wifi (et au pont Hue).

NB: Si le téléchargement du code sur notre Wemos D1 mini via USB ne fonctionne pas, vous devrez peut-être télécharger un pilote pour la puce USB sur le Wemos. Un pilote pour votre plate-forme (Windows, Mac) peut être téléchargé à l'adresse

Vous êtes maintenant prêt à tester votre création !

// ESP8266 Hue Magic Wand// Richard van Kampen - 2018 // Ce code est testé sur un Wemos D1 mini, mais fonctionnera probablement aussi sur d'autres cartes de développement basées sur ESP8266 // Pour ajouter la prise en charge de Wemos D1 mini et d'autres cartes ESP8266 à l'éditeur Arduino, procédez comme suit: // - Démarrez Arduino et ouvrez la fenêtre Préférences. // - Saisissez https://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ URL du gestionnaire de carte supplémentaire. Vous pouvez ajouter plusieurs URL en les séparant par des virgules. // - Ouvrez Boards Manager à partir du menu Outils > Carte et installez la plate-forme esp8266 (et n'oubliez pas de sélectionner votre carte ESP8266 dans le menu Outils > Carte après l'installation). // bibliothèques utilisées: #include "ESP8266WiFi.h" // ESP8266 Core WiFi Library #include "DNSServer.h" // Serveur DNS local utilisé pour rediriger toutes les requêtes vers le portail de configuration WiFiManager si aucun paramètre WIFI (SSID, mot de passe) n'a pas encore été défini. #include "ESP8266WebServer.h" //Serveur Web local utilisé pour servir le portail de configuration WiFiManager #include "WiFiManager.h" // Bibliothèque magique de configuration WiFi, si elle n'est pas encore installée, veuillez vous référer à https://github.com/tzapu/WiFiManager #install-through-library-manager #include "RestClient.h" // https://github.com/fabianofranca/ESP8266RestClient, nécessaire pour utiliser l'API Philips Hue (voir https://developers.meethue.com/develop/ hue-api/). #include "ArduinoJson.h" // https://github.com/bblanchon/ArduinoJson, nécessaire pour analyser la réponse de l'API Hue, veuillez installer la version 5.x via le gestionnaire de bibliothèque dans Arduino (Menu "Sketch" > Inclure la bibliothèque > Gérer Bibliothèques > recherchez ArduinoJson et remplacez la version par la dernière version 5.x). La version 6 (actuellement en version bêta) renvoie une erreur. // variables et init: réponse de chaîne; const int redPin = 13;//sur Wemos c'est d7 const int greenPin = 12;//sur Wemos c'est d6 const int bluePin = 14;//sur Wemos c'est d5 const int touchSensor = 5;//sur Wemos ceci is d1 const int activationPin = 4;//on Wemos c'est d2 bool activation = HIGH; bool touch = FAIBLE; const char* aan_restore; int bri_restore; double x_restore; double y_restore; double x_magie; double y_magic; bool d'abord = vrai; début long non signé Millis; courant long non signé Millis; longue duréeMillis non signé; Client RestClient = RestClient("192.168.178.23"); // "votre adresse IP Hue Bridge" // Si vous ne connaissez pas votre adresse IP Hue Bridge, visitez https://discovery.meethue.com et elle apparaîtra immédiatement dans votre navigateur. L'adresse IP est le nombre en pointillé précédé de "internalipaddress" void setup() { analogWriteRange(255); Serial.begin(9600); // Commence avec la LED éteinte. pinMode(activationPin, INPUT_PULLUP); pinMode(touchSensor, INPUT); startMillis = millis(); checkWand(); } void loop() { // rien à faire ici, laissez vide… } void checkWand() { int rgbColour[3]; // Code couleur RVB de James Harton, https://gist.github.com/jamesotron/766994 // Commencez par le rouge. rgbCouleur[0] = 255; rgbCouleur[1] = 0; rgbCouleur[2] = 0; activation = digitalRead (activationPin); // LOW signifie que la baguette est utilisée. touch = digitalRead (touchSensor); // HIGH signifie que le doigt est utilisé à la place de la baguette, ce qui ne devrait pas être le cas. while (activation == LOW && touch == LOW) { // Choisissez les couleurs à incrémenter et décrémenter. for (int decColour = 0; decColour < 3; decColour += 1) { int incColour = decColour == 2 ? 0: décCouleur + 1; //= opérateur ternaire, signifie: int incColour;if (decColour == 2) {incColour = 0;} else {incColour = decColour +1;} // fondu enchaîné les deux couleurs. for (int i = 0; i <255; i += 1) { rgbColour[decColour] -= 1; rgbCouleur[incCouleur] += 1; // comme notre led RGB a une anode commune au lieu d'une cathode (nous devons donc nous connecter à +3,3V au lieu de la masse), nous avons besoin de valeurs inverses pour RGB: int red = 255 - rgbColour[0]; int vert = 255 - rgbColour[1]; bleu int = 255 - rgbColour[2]; analogWrite(redPin, rouge); analogWrite(vertPin, vert); analogWrite(bluePin, bleu); délai(8); activation = digitalRead(activationPin); if (activation == HIGH) { // HIGH signifie que la baguette est levée. aller à stopColorCycling; } } } } stopColorCycling: currentMillis = millis(); duréeMillis = (currentMillis - startMillis); if (durationMillis> 1000) { RGBtoxy(rgbColour[0], rgbColour[1], rgbColour[2]); } else { // mettre Wemos en mode veille: ESP.deepSleep(0); } } void RGBtoxy(int red, int green, int blue) { //voir https://developers.meethue.com/documentation/color-conversions-rgb-xy double R = map(red, 0, 255, 0, 1000); R /= 1000; double G = carte(vert, 0, 255, 0, 1000); G /= 1000; double B = carte (bleu, 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); double X = R * 0,649926f + G * 0,103455f + B * 0,197109f; double Y = R * 0,234327f + G * 0,743075f + B * 0,022598f; double Z = R * 0,00000000f + G * 0,053077f + B * 1,035763f; x double = X / (X + Y + Z); double y = Y / (X + Y + Z); // la conversion n'est pas complètement terminée, mais probablement assez bonne pour ce que nous voulons réaliser, alors laissez-le sur ceci et envoyez les valeurs XY à la lampe: sendtoHue(x, y); } void sendtoHue(double a, double b) {// changement de couleur réel de la baguette magique if (first) { // first passe: obtient l'état actuel de la lampe getCurrentValues(); }// puis envoie les couleurs de la baguette magique: // attend le sort: longue attente; x_magie = a; y_magie = b; // lampe allumée dans la couleur de la baguette magique: response = ""; int temp = aléatoire (2, 9); const char* état = "true"; for (int i = 1; i <= temp; i++) { // crée un tableau de caractères à envoyer au pont: String temp_body1 = "{"on\": " + String(state) + ", \"bri\": 220, \"xy\": [" + String(x_magic) + ", " + String(y_magic) + "], \"transitiontime\": 1}"; int str_len1 = temp_body1.length() + 1; char post_body1[str_len1]; temp_body1.toCharArray(post_body1, str_len1); // maintenant nous avons post_body1 comme tableau de caractères; // faire un appel au repos: int statusCodePut1 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body1, &response); attendre = aléatoire (100, 600); retarder (attendre); if (état == "vrai") { état = "faux"; } else { état = "true"; } } // réduire la luminosité…: response = ""; temp = aléatoire (4, 17); // crée un tableau de caractères à envoyer au pont: String temp_body2 = "{"on\": true, \"bri\": 154, \"transitiontime\": " + String(temp) + "}"; int str_len2 = temp_body2.length() + 1; char post_body2[str_len2]; temp_body2.toCharArray(post_body2, str_len2); // maintenant nous avons post_body2 comme tableau de caractères; // faire un appel au repos: int statusCodePut2 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body2, &response); attendre = aléatoire (1000, 2500); retarder (attendre); //..et rend encore plus lumineux: response = ""; temp = aléatoire (4, 17); // crée un tableau de caractères à envoyer au pont: String temp_body3 = "{"bri_inc\": 100, \"transitiontime\": }"; int str_len3 = temp_body3.length() + 1; char post_body3[str_len3]; temp_body3.toCharArray(post_body3, str_len3); // maintenant nous avons post_body3 comme tableau de caractères; // faire l'appel au repos: int statusCodePut3 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body3, &response); attendre = aléatoire (2500, 5000); // attendre 2-5 secondes de délai (attendre); // et revenir à l'ancienne valeur: réponse = ""; // crée un tableau de caractères à envoyer au pont: String temp_body4 = "{"on\": " + String(aan_restore) + ", \"bri\": " + String(bri_restore) + ", \"xy\": [" + String(x_restore) + ", " + String(y_restore) + "], \"transitiontime\": " + String(20) + "}"; int str_len4 = temp_body4.length() + 1; char post_body4[str_len4]; temp_body4.toCharArray(post_body4, str_len4); // maintenant nous avons post_body4 comme tableau de caractères; // faire un appel au repos: int statusCodePut4 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body4, &response); ESP.deepSleep(0); // je vais me coucher à nouveau…. } unsigned int getCurrentValues() { connectWifi();// première connexion au Wifi réponse = ""; // faire un appel au repos: int statusCodeGet = client.get("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER", &response); Serial.print("Code d'état du serveur après GET: "); Serial.println(statusCodeGet); Serial.print("Corps de la réponse du serveur: "); Serial.println(réponse); StaticJsonBuffer jsonBuffer; // Analyse de la réponse Json // Racine de l'arborescence des objets. // // C'est une référence au JsonObject, les octets réels sont à l'intérieur du // jsonBuffer avec tous les autres nœuds de l'arborescence des objets. // La mémoire est libérée lorsque jsonBuffer sort de la portée. JsonObject& root = jsonBuffer.parseObject(response); JsonObject& state = root["state"];// Teste si l'analyse réussit. if (!root.success()) { Serial.println("parseObject() a échoué"); } // Récupère les valeurs. aan_restore = état["on"]; Serial.println(aan_restore); bri_restore = état["bri"]; x_restore = état["xy"][0]; y_restore = état["xy"][1]; first = false;} void connectWifi() { //Intialisation locale. Une fois son travail terminé, il n'est pas nécessaire de le garder autour de WiFiManager wifiManager; //réinitialiser les paramètres - pour tester: //wifiManager.resetSettings(); //définir le rappel qui est appelé lors de l'échec de la connexion au WiFi précédent et passe en mode point d'accès wifiManager.setAPCallback(configModeCallback); // récupère le ssid et passe et essaie de se connecter // s'il ne se connecte pas, il démarre un point d'accès avec le nom spécifié //ici "AutoConnectAP" //et entre dans une boucle de blocage en attente de configuration if (!wifiManager.autoConnect()) { Serial.println("échec de connexion et expiration du délai"); // réinitialiser et réessayer, ou peut-être le mettre en veille prolongée ESP.reset(); retard(1000); } //si vous arrivez ici, vous êtes connecté au WiFi Serial.println("connected…yeey:)"); Serial.print("Connecté à: "); Serial.println(WiFi. SSID()); Serial.print("Adresse IP: "); Serial.println(WiFi.localIP()); //Adresse IP attribuée à votre ESP (Wemos) // affiche la force du signal reçu: long rssi = WiFi. RSSI(); Serial.print("force du signal (RSSI):"); Serial.println(rssi); } void configModeCallback (WiFiManager * myWiFiManager) { Serial.println ("Entré en mode de configuration"); Serial.println(WiFi.softAPIP()); //si vous avez utilisé un SSID généré automatiquement, imprimez-le Serial.println(myWiFiManager->getConfigPortalSSID()); }