Hue Magic: 4 stappen (met afbeeldingen)

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Welkom tovenaars!

Een paar maanden geleden heb ik een kleine magische doos met toverstaf gemaakt voor mijn 3-jarige zoon. Wanneer hij de doos met de toverstok aanraakt, begint er een veranderend gekleurd licht uit de doos te stralen. Als hij een kleur ziet die hij bijzonder mooi vindt, kan hij de toverstok op de tafellamp richten (met een Philips Hue-lamp erin), een spreuk uitspreken en de kleur uit de doos springt op magische wijze naar de lamp! Lamp en licht uit de doos hebben ineens dezelfde kleur…

Na een paar seconden vervaagt de kleur en keert de tafellamp terug naar de staat van voor de betovering. Tot er een nieuwe spreuk wordt uitgesproken…

Stap 1: Wat je nodig hebt om dit project te maken

Om dit project te maken, heb je de volgende materialen nodig:

• 1 (of meer) Philips Hue-kleurenlamp en een Hue Bridge
• 1 Wemos D1 mini of soortgelijke op esp8266 gebaseerde microcontroller
• 1 (Arduino) aanraaksensor (bijv. TTP223R)
• 1 (Arduino) kortstondige knop
• 1 10uF condensator
• 1 RGB led (gemeenschappelijk anodetype)
• 5 weerstanden (10, 22 en 47 Ohm, 2x 10K Ohm)
• 2 kleine prototype-printjes (2x3 inch of ongeveer 5x7 cm moet groot genoeg zijn)
• sommige (jumper)draden
• een soldeerbout
• een toverstaf (kan kant-en-klaar worden gekocht in een speelgoedwinkel, of je kunt hem zelf maken)
• een kleine doos van karton of hout (kan een bestaande doos zijn, maar je kunt natuurlijk ook een doos helemaal zelf bouwen)
• wat tape
• wat lijm en/of bouten en moeren om de printjes in de doos te monteren.
• optioneel: inpakpapier voor de doos

NB: Een beetje ervaring met het lezen van schakelschema's is handig bij het doornemen van deze instructable. Mijn diagram is niet al te ingewikkeld: als je een condensator van een weerstand kunt onderscheiden, komt het waarschijnlijk goed.

Enige ervaring met Arduino-programmering met behulp van de Arduino IDE is ook nuttig. Een basiservaring zou voldoende moeten zijn, aangezien ik u de volledige code zal bezorgen die u kunt kopiëren/plakken. Je moet echter een paar dingen aanpassen om het te laten werken in je specifieke set-up (bijvoorbeeld je netwerkinstellingen en enkele details van je Hue-configuratie). Als dit een beetje intimiderend klinkt, maak je geen zorgen, ik zal je helpen om alle informatie te vinden die je nodig hebt.

Stap 2: De doos en toverstaf

De eerste stappen zijn normaal gesproken het moeilijkst, maar niet in deze instructable! Voor een gemakkelijke start kun je gewoon een toverstaf kopen in een speelgoedwinkel en voor de doos kun je gewoon een bestaand klein doosje hergebruiken dat je al hebt liggen. Zorg ervoor dat de doos niet van metaal is, want dit blokkeert de wifi-signalen en die hebben we nodig voor de magie;-).

Wanneer u een bestaande doos opnieuw gebruikt, hoeft u alleen maar twee gaten in de bovenkant van de doos te maken: 1 klein gaatje (maat 5 mm = 0,2") voor de RGB-led en een groter gat (ongeveer 12- 14 mm of ongeveer 0,5") voor de aanraaksensor.

De exacte plaatsing van de gaten is niet kritisch, plaats ze gewoon volgens uw gevoel voor esthetiek, maar houd een paar dingen in gedachten:

• Houd enige afstand tussen beide gaten om ervoor te zorgen dat de componenten die onder de gaten worden gemonteerd (de RGB-led en de aanraaksensor) voldoende ruimte innemen voor montage en bedrading.
• Het grootste gat is voor de aanraaksensor. Deze sensor wordt net onder het gat gemonteerd, zodanig dat deze door de staaf kan worden aangeraakt (en zelfs licht ingedrukt). Zorg er dus voor dat de toverstaf die je koopt niet te dik is!

Optioneel kun je (spuit)verf of inpakpapier gebruiken en plastic afdekken om je doos wat mooier te maken en te beschermen tegen etensresten en vuile handen.

Als deze eerste stap je iets te weinig ambitieus is, ga je gang en maak je een doos en een toverstaf helemaal opnieuw! Er zijn verschillende instructies die je zullen helpen om een mooie toverstok te maken

Welk pad je ook kiest, het is nu tijd om de binnenkant van de doos te verkennen.

Stap 3: De hardware binnenin

Gebruik een soldeerbout om de elektronische componenten aan te sluiten volgens het bovenstaande schakelschema. Er zijn een paar dingen waar je speciaal op moet letten:

• De draden tussen de Wemos D1 Mini en de RGB-led moeten lang genoeg zijn zodat de RGB-led kan worden gemonteerd in het gat dat u in het deksel van de doos hebt gemaakt.
• Hetzelfde geldt voor de draden die aan de momentschakelaar en aanraaksensor zijn bevestigd, aangezien deze toegankelijk moeten zijn via het andere gat in het deksel.
• De knop van de momentschakelaar moet aan de onderkant (de niet-gevoelige kant) van de aanraaksensor worden gelijmd, zodanig dat je de knop terug op de momentschakelaar kunt plaatsen met de aanraaksensor erop gelijmd (zie afbeelding). De aanraaksensor is bovenop de momentschakelaar gemonteerd om het indrukken van een knop met een vinger te detecteren, in welk geval het indrukken van de knop wordt genegeerd. Pas als de knop wordt ingedrukt door de toverstaf (die niet-geleidend zou moeten zijn, dus plastic en hout zijn prima), begint de magische cyclus.
• Monteer de momentknop met aanraaksensor bovenop niet te diep onder het gat in het deksel, want het moet bereikbaar zijn met de toverstaf om de magie in beweging te zetten.
• Let bij het solderen op de polariteit van de condensator. Als je de positieve en negatieve draden omdraait, zal de condensator waarschijnlijk wat magische rook afgeven en je circuit in een eeuwige slaap brengen.
• Lijm, plak en/of schroef de batterijhouder en PCB('s) op hun plaats. Het hoeft niet netjes te zijn, want het zal niet in het zicht zijn. Het moet gewoon valbestendig zijn.

Op naar de software!

Stap 4: De software

Zorg ervoor dat je de nieuwste (gratis) Arduino-software-editor hebt, die je kunt downloaden op https://www.arduino.cc/en/Main/Software. Voer de volgende stappen uit om ondersteuning toe te voegen voor de Wemos D1 mini en andere op ESP8266 gebaseerde boards:

• Start na de installatie de Arduino-software en open het venster Voorkeuren.
• Voer https://arduino.esp8266.com/stable/package_esp8266com_index.json in het veld "Extra Board Manager-URL's" in. U kunt meerdere URL's toevoegen, gescheiden door komma's.
• Open Boards Manager vanuit Tools > Board menu en installeer esp8266 platform (en vergeet niet om uw ESP8266 board te selecteren via Tools > Board menu na installatie. "LOLIN(WEMOS) D1 R2 & mini" werkt het beste voor Wemos D1 mini v2 en v3 planken.

Als je meer hulp nodig hebt bij het installeren van Arduino en het instellen van de stuurprogramma's, kun je een kijkje nemen op

Open in de Arduino-editor een nieuw bestand (Bestand>Nieuw) en kopieer/plak de onderstaande code in het zojuist geopende venster. Overschrijf gewoon de regels die al aanwezig zijn in het nieuwe venster (void setup en void loop).

Nu ben je bijna klaar, maar je zult een paar stukjes van de code moeten aanpassen aan je specifieke opstelling.

Het eerste dat u moet doen, is het ip-adres op regel 34 (in de Arduino-editor zijn de coderegels genummerd) wijzigen in het ip-adres van uw Hue-bridge. Als je je Hue Bridge IP-adres niet weet, ga dan naar https://discovery.meethue.com/ en het juiste IP-adres verschijnt meteen in je browser. Het ip-adres is het gestippelde nummer dat wordt voorafgegaan door "internalipaddress".

Om met de Hue-lampen te communiceren, moet je een Hue API-gebruiker maken voor de Wemos D1 mini, zodat de Wemos via de Hue API met de Hue-lamp kan communiceren. Volg hiervoor de instructies op https://developers.meethue.com/develop/get-started-2/ en kopieer/plak de gegenereerde (vrij lange) gebruikersnaam in het Arduino-codevenster. Vervang gewoon elke "UW HUE API GEBRUIKERSNAAM" door de gegenereerde API-gebruikersnaam.

Vervolgens moet je het juiste Hue-licht selecteren om van kleur te veranderen. In de Hue API heeft elke lamp een nummer, dus je moet het nummer vinden dat overeenkomt met de lamp die je voor dit project wilt gebruiken. Een van de gemakkelijkste manieren om erachter te komen welk nummer een bepaalde lamp heeft, is door de Hue Viewer-app voor Android of iOS te downloaden. Vervang overal in het Arduino-codevenster de tekst "YOUR LIGHT NUMBER" door het juiste nummer.

Het laatste wat u moet doen, is de Wemos instellen om verbinding te maken met uw wifi-netwerk. Dit doe je door de code te uploaden naar de Wemos en op je laptop over te schakelen naar een ander wifi netwerk: naar "AutoConnectAP". Uw browser geeft dan een pagina weer waar u de SSID (naam) en het wachtwoord van uw wifi-netwerk kunt toevoegen dat de Wemos-controller zal gebruiken om verbinding te maken met uw wifi-netwerk (en met de Hue-bridge).

NB: Als het uploaden van de code naar onze Wemos D1 mini via USB niet werkt, moet u mogelijk een stuurprogramma voor de USB-chip op de Wemos downloaden. Een stuurprogramma voor uw platform (Windows, Mac) kan worden gedownload op

Nu ben je helemaal klaar om je creatie te testen!

// ESP8266 Hue Magic Wand// Richard van Kampen - 2018 // Deze code is getest op een Wemos D1 mini, maar zal waarschijnlijk ook werken op andere ESP8266-gebaseerde ontwikkelborden // Om ondersteuning toe te voegen voor Wemos D1 mini en andere ESP8266-borden naar Arduino-editor, voer de volgende stappen uit: // - Start Arduino en open het voorkeurenvenster. // - Voer https://arduino.esp8266.com/stable/package_esp8266com_index.json in het veld Extra Board Manager-URL's in. U kunt meerdere URL's toevoegen, gescheiden door komma's. // - Open Boards Manager vanuit Tools > Board menu en installeer esp8266 platform (en vergeet niet om je ESP8266 board te selecteren via Tools > Board menu na installatie). // gebruikte bibliotheken: #include "ESP8266WiFi.h" // ESP8266 Core WiFi Library #include "DNSServer.h" // Lokale DNS-server die wordt gebruikt voor het omleiden van alle verzoeken naar de WiFiManager-configuratieportal als er geen WIFI-instellingen (SSID, wachtwoord) zijn nog niet ingesteld. #include "ESP8266WebServer.h" //Local WebServer gebruikt om de WiFiManager-configuratieportal te bedienen #include "WiFiManager.h" // WiFi Configuration Magic-bibliotheek, raadpleeg https://github.com/tzapu/WiFiManager als deze nog niet is geïnstalleerd #install-through-library-manager #include "RestClient.h" // https://github.com/fabianofranca/ESP8266RestClient, nodig voor het gebruik van de Philips Hue API (zie https://developers.meethue.com/develop/ hue-api/). #include "ArduinoJson.h" // https://github.com/bblanchon/ArduinoJson, nodig om de Hue API-respons te analyseren, installeer versie 5.x via de bibliotheekmanager in Arduino (Menu "Sketch" > Include Library > Manage Bibliotheken > zoek naar ArduinoJson en wijzig de versie naar de nieuwste 5.x). Versie 6 (momenteel in bèta) geeft een fout. // variabelen en init: String respons; const int redPin = 13;//op Wemos is dit d7 const int greenPin = 12;//op Wemos is dit d6 const int bluePin = 14;//op Wemos is dit d5 const int touchSensor = 5;//op Wemos dit is d1 const int activatiePin = 4;//op Wemos is dit d2 bool activatie = HOOG; bool touch = LAAG; const char* aan_restore; int bri_restore; dubbele x_restore; dubbele y_restore; dubbele x_magie; dubbele y_magie; bool eerst = waar; ongetekende lange startMillis; niet-ondertekende lange stroom Millis; niet-ondertekende lange looptijdMillis; RestClient-client = RestClient ("192.168.178.23"); // "uw Hue Bridge IP-adres" // Als u uw Hue Bridge IP-adres niet weet, ga dan naar https://discovery.meethue.com en het zal meteen in uw browser verschijnen. Het ip-adres is het gestippelde nummer dat wordt voorafgegaan door "internalipaddress" void setup() {analogeWriteRange(255); Serieel.begin(9600); // Begin met de LED uit. pinMode (activatiePin, INPUT_PULLUP); pinMode (aanraaksensor, INGANG); startMillis = millis(); checkWand(); } void loop() {// niets te doen hier, laat leeg… } void checkWand() { int rgbColour[3]; // RGB-kleurcode door James Harton, https://gist.github.com/jamesotron/766994 // Begin met rood. rgbKleur[0] = 255; rgbKleur[1] = 0; rgbKleur [2] = 0; activatie = digitalRead (activationPin);// LAAG betekent dat de pen wordt gebruikt. touch = digitalRead (touchSensor);// HOOG betekent dat de vinger wordt gebruikt in plaats van de pen, wat niet het geval zou moeten zijn. while (activering == LAAG && touch == LAAG) { // Kies de kleuren die u wilt verhogen en verlagen. for (int decColour = 0; decColour < 3; decColour += 1) { int incColour = decColour == 2 ? 0: decKleur + 1; //= ternaire operator, betekent: int incColour;if (decColour == 2) {incColour = 0;} else {incColour = decColour +1;} // cross-fade de twee kleuren. for (int i = 0; i <255; i += 1) { rgbColour[decColour] -= 1; rgbKleur[incKleur] += 1; // aangezien onze RGB-led een gemeenschappelijke anode heeft in plaats van een kathode (we moeten dus verbinding maken met +3,3V in plaats van aarde), hebben we inverse waarden voor RGB nodig: int red = 255 - rgbColour[0]; int groen = 255 - rgbColour [1]; int blauw = 255 - rgbColour [2]; analogWrite(redPin, rood); analogWrite(greenPin, groen); analogWrite(bluePin, blauw); vertraging(8); activering = digitalRead (activationPin); if (activering == HOOG) { // HOOG betekent dat de toverstok wordt opgetild. stop met ColorCycling; } } } } stopColorCycling: currentMillis = millis(); durationMillis = (currentMillis - startMillis); if (durationMillis> 1000) { RGBtoxy(rgbColour[0], rgbColour[1], rgbColour[2]); } else { // zet Wemos in de slaapstand: ESP.deepSleep(0); } } void RGBtoxy (int rood, int groen, int blauw) { //zie https://developers.meethue.com/documentation/color-conversions-rgb-xy dubbele R = map (red, 0, 255, 0, 1000); R/= 1000; dubbele G = kaart (groen, 0, 255, 0, 1000); G/= 1000; dubbele B = kaart (blauw, 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); dubbele X = R * 0,649926f + G * 0,103455f + B * 0,197109f; dubbele Y = R * 0.234327f + G * 0.743075f + B * 0.022598f; dubbele Z = R * 0.0000000f + G * 0.053077f + B * 1.035763f; dubbele x = X / (X + Y + Z); dubbele y = Y / (X + Y + Z); // conversie niet volledig voltooid, maar waarschijnlijk goed genoeg voor wat we willen bereiken, dus laat het hierbij en stuur XY-waarden naar lamp: sendtoHue(x, y); } void sendtoHue (double a, double b) {// werkelijke kleurverandering van toverstaf magic if (first) { // first pass: haal huidige lampstatus getCurrentValues (); }// stuur dan toverstafkleuren: // wacht op spreuk: lang wachten; x_magisch = een; y_magie = b; // lamp aan in toverstaf kleur: response = ""; int temp = willekeurig (2, 9); const char* state = "true"; for (int i = 1; i <= temp; i++) { // create char array om naar bridge te sturen: String temp_body1 = "{"on\": " + String(state) +", \"bri\": 220, \"xy\": [" + String(x_magic) + ", " + String(y_magic) + "], \"overgangstijd\": 1}"; int str_len1 = temp_body1.length() + 1; char post_body1[str_len1]; temp_body1.toCharArray(post_body1, str_len1);// nu hebben we post_body1 als char array; // make rest call: int statusCodePut1 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body1, &response); wacht = willekeurig (100, 600); vertraging (wacht); if (state == "true") { state = "false"; } else { state = "true"; } } // helderheid verminderen…: response = ""; temp = willekeurig (4, 17); // maak een char-array om naar de bridge te sturen: 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);// nu hebben we post_body2 als char array; // make rest call: int statusCodePut2 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body2, &response); wacht = willekeurig (1000, 2500); vertraging (wacht); //..en maak weer helderder: response = ""; temp = willekeurig (4, 17); // maak een char-array om naar de bridge te verzenden: 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);// nu hebben we post_body3 als char array; // make rest call: int statusCodePut3 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body3, &response); wacht = willekeurig (2500, 5000); // wacht 2-5 seconden vertraging (wacht);//en fade terug naar oude waarde: respons = ""; // maak een char-array om naar de bridge te verzenden: String temp_body4 = "{"on\": " + String(aan_restore) + ", \"bri\": " + String(bri_restore) +", \"xy\": [" + String(x_restore) + ", " + String(y_restore) + "], \"overgangstijd\": " + String(20) + "}"; int str_len4 = temp_body4.length() + 1; char post_body4[str_len4]; temp_body4.toCharArray(post_body4, str_len4);// nu hebben we post_body4 als char array; // make rest call: int statusCodePut4 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body4, &response); ESP.deepSleep(0); //ga weer slapen…. } unsigned int getCurrentValues() { connectWifi();// eerst verbinding maken met Wifi response = ""; // make rest call: int statusCodeGet = client.get("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER", &respons); Serial.print("Statuscode van server na GET: "); Serial.println(statusCodeGet); Serial.print("Reactietekst van server: "); Serial.println(antwoord); StatischeJsonBuffer jsonBuffer; // Json-antwoord ontleden // Wortel van de objectboom. // // Het is een verwijzing naar het JsonObject, de werkelijke bytes bevinden zich in de // jsonBuffer met alle andere knooppunten van de objectboom. // Geheugen wordt vrijgemaakt wanneer jsonBuffer buiten bereik raakt. JsonObject& root = jsonBuffer.parseObject(reactie); JsonObject& state = root["state"];// Test of het parseren is gelukt. if (!root.success()) { Serial.println("parseObject() mislukt"); } // Waarden ophalen. aan_restore = staat ["aan"]; Serial.println(aan_restore); bri_restore = staat["bri"]; x_restore = staat["xy"][0]; y_restore = staat["xy"][1]; first = false;} void connectWifi() {//Lokale initialisatie. Als het eenmaal klaar is, is het niet nodig om het bij WiFiManager wifiManager te houden; // reset instellingen - voor testen: //wifiManager.resetSettings(); //set callback die wordt gebeld wanneer verbinding maken met eerdere WiFi mislukt, en naar Access Point-modus gaat wifiManager.setAPCallback (configModeCallback); //haalt ssid en pass op en probeert verbinding te maken // als het geen verbinding maakt, start het een toegangspunt met de opgegeven naam //hier "AutoConnectAP" // en gaat in een blokkeerlus in afwachting van configuratie als (!wifiManager.autoConnect()) { Serial.println("kan geen verbinding maken en druk op time-out"); // reset en probeer het opnieuw, of zet het misschien in diepe slaap ESP.reset(); vertraging (1000); } //als je hier bent, heb je verbinding gemaakt met de WiFi Serial.println("connected…yeey:)"); Serial.print("Verbonden met: "); Seriële.println(WiFi. SSID()); Serial.print("IP-adres: "); Serial.println(WiFi.localIP()); // IP-adres toegewezen aan uw ESP (Wemos) // print de ontvangen signaalsterkte: long rssi = WiFi. RSSI(); Serial.print("signaalsterkte (RSSI):"); Serieel.println(rssi); } void configModeCallback (WiFiManager * myWiFiManager) { Serial.println ("Ingevoerde configuratiemodus"); Seriële.println(WiFi.softAPIP()); // als je een automatisch gegenereerde SSID hebt gebruikt, print deze dan Serial.println(myWiFiManager->getConfigPortalSSID()); }