Hue Magic: 4 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:03

Benvenuti maghi!

Un paio di mesi fa ho creato una piccola scatola magica con bacchetta magica per mio figlio di 3 anni. Quando tocca la scatola con la bacchetta, una luce colorata che cambia inizierà a emettere dalla scatola. Quando vede un colore che gli piace particolarmente, può puntare la bacchetta verso la lampada da tavolo (con una lampadina Philips Hue all'interno), lanciare un incantesimo e il colore dalla scatola salterà magicamente alla lampada! La lampada e la luce della scatola hanno improvvisamente lo stesso colore…

Dopo pochi secondi, il colore svanisce e la lampada da tavolo torna allo stato precedente all'incantesimo. Fino a quando non viene lanciato un nuovo incantesimo…

Passaggio 1: cosa ti serve per creare questo progetto

Per creare questo progetto, avrai bisogno dei seguenti materiali:

• 1 (o più) lampadine a colori Philips Hue e un bridge Hue
• 1 microcontrollore Wemos D1 mini o simile basato su esp8266
• 1 (Arduino) sensore tattile (es. TTP223R)
• 1 (Arduino) pulsante momentaneo
• 1 condensatore da 10uF
• 1 led RGB (tipo ad anodo comune)
• 5 resistenze (10, 22 e 47 Ohm, 2x 10K Ohm)
• 2 piccoli PCB di prototipazione (2x3 pollici o circa 5x7 cm dovrebbero essere abbastanza grandi)
• alcuni (ponticelli) fili
• un saldatore
• una bacchetta magica (può essere acquistata già pronta in un negozio di giocattoli, oppure puoi realizzarla tu stesso)
• una piccola scatola di cartone o legno (può essere una scatola esistente, ma puoi anche costruire una scatola da zero ovviamente)
• un po' di nastro
• un po' di colla e/o dadi e bulloni per montare i PCB nella scatola.
• opzionale: carta da imballaggio per la scatola

NB: Una piccola esperienza nella lettura degli schemi circuitali è utile quando si passa attraverso questo istruibile. Il mio diagramma non è eccessivamente complesso: se riesci a differenziare un condensatore da un resistore, probabilmente starai bene.

È utile anche una certa esperienza con la programmazione Arduino utilizzando l'IDE Arduino. Un'esperienza piuttosto di base dovrebbe essere sufficiente, poiché fornirò il codice completo da copiare/incollare. Tuttavia, dovrai adattare alcune cose per farlo funzionare nella tua particolare configurazione (ad esempio le impostazioni di rete e alcuni dettagli dalla configurazione di Hue). Se ti sembra un po' intimidatorio, non preoccuparti, ti aiuterò a recuperare tutte le informazioni di cui hai bisogno.

Passaggio 2: la scatola e la bacchetta

I primi passi sono normalmente i più difficili, ma non in questo istruibile! Per un inizio facile, puoi semplicemente acquistare una bacchetta magica da un negozio di giocattoli e per la scatola potresti semplicemente riutilizzare una piccola scatola esistente che hai già in giro. Assicurati solo che la scatola non sia di metallo, poiché questo bloccherà i segnali wifi e abbiamo bisogno di quelli per la magia;-).

Quando riutilizzi una scatola esistente, l'unica cosa che devi fare è fare due fori nella parte superiore della scatola: 1 foro piccolo (dimensioni 5 mm = 0,2") per il led RGB e un foro più grande (circa 12- 14 mm o circa 0,5") per il sensore tattile.

L'esatto posizionamento dei fori non è fondamentale, posizionali semplicemente secondo il tuo senso estetico ma tieni a mente alcune cose:

• Mantieni una certa distanza tra entrambi i fori per assicurarti che i componenti che verranno montati sotto i fori (il led RGB e il sensore tattile) possano occupare spazio sufficiente per il montaggio e il cablaggio.
• Il buco più grande è per il sensore tattile. Questo sensore andrà montato appena sotto il foro, in modo tale da poter essere toccato (e anche leggermente premuto) dalla bacchetta. Quindi assicurati che la bacchetta che acquisti non sia troppo spessa!

Opzionalmente puoi usare vernice (spray) o carta da regalo e coprire la plastica per rendere la tua scatola un po' più carina e per proteggerla da fuoriuscite di cibo e mani sporche.

Se questo primo passo è un po' troppo poco ambizioso per i tuoi gusti, per favore vai avanti e crea una scatola e una bacchetta interamente da zero! Ci sono diverse istruzioni là fuori che ti aiuteranno a creare una bellissima bacchetta

Qualunque sia il percorso che scegli, ora è il momento di esplorare l'interno della scatola.

Passaggio 3: l'hardware all'interno

Utilizzare un saldatore per collegare i componenti elettronici secondo lo schema elettrico sopra. Ci sono un paio di cose a cui prestare particolare attenzione:

• I fili tra il Wemos D1 Mini e il led RGB dovrebbero essere abbastanza lunghi da poter montare il led RGB nel foro che hai praticato nel coperchio della scatola.
• Lo stesso vale per i cavi collegati all'interruttore momentaneo e al sensore tattile poiché dovrebbero essere accessibili tramite l'altro foro nel coperchio.
• Il pulsante dell'interruttore momentaneo deve essere incollato alla parte inferiore (il lato non sensibile) del sensore tattile, in modo tale da poter rimettere il pulsante sull'interruttore momentaneo con il sensore tattile incollato sopra (vedi foto). Il sensore tattile è montato sulla parte superiore dell'interruttore momentaneo per rilevare la pressione dei pulsanti eseguita da un dito, nel qual caso la pressione del pulsante verrà ignorata. Solo quando il pulsante viene premuto dalla bacchetta magica (che dovrebbe essere non conduttiva, quindi plastica e legno vanno bene) inizierà il ciclo magico.
• Monta il pulsante momentaneo con sensore tattile sulla parte superiore non troppo in profondità sotto il foro nel coperchio, perché deve essere raggiungibile dalla bacchetta magica per mettere in moto la magia.
• Assicurati di osservare la polarità del condensatore durante la saldatura. Se inverti i cavi positivo e negativo, il condensatore probabilmente emetterà del fumo magico e metterà il tuo circuito in un sonno eterno.
• Colla, nastro e/o avvitare il supporto della batteria e PCB in posizione. Non deve essere pulito, in quanto non sarà in vista. Dovrebbe essere solo a prova di caduta.

Al software!

Passaggio 4: il software

Assicurati di avere l'editor software Arduino più recente (gratuito), che può essere scaricato all'indirizzo https://www.arduino.cc/en/Main/Software. Per aggiungere il supporto per Wemos D1 mini e altre schede basate su ESP8266, procedi come segue:

• Dopo l'installazione, avvia il software Arduino e apri la finestra Preferenze.
• Immettere https://arduino.esp8266.com/stable/package_esp8266com_index.json nel campo "Ulteriori URL di Board Manager". Puoi aggiungere più URL, separandoli con virgole.
• Apri Boards Manager dal menu Strumenti> Scheda e installa la piattaforma esp8266 (e non dimenticare di selezionare la tua scheda ESP8266 dal menu Strumenti> Scheda dopo l'installazione. "LOLIN (WEMOS) D1 R2 & mini" funziona meglio per Wemos D1 mini v2 e v3 tavole.

Se hai bisogno di ulteriore aiuto per installare Arduino e configurare i driver, puoi dare un'occhiata a

Nell'editor di Arduino, apri un nuovo file (File>Nuovo) e copia/incolla il codice sottostante nella finestra appena aperta. Basta sovrascrivere le righe già presenti nella nuova finestra (void setup e void loop).

Ora sei quasi pronto, ma dovrai adattare alcune parti del codice per la tua particolare configurazione.

La prima cosa da fare è cambiare l'indirizzo IP sulla riga 34 (nell'editor Arduino le righe di codice sono numerate) nell'indirizzo IP del tuo bridge Hue. Se non conosci il tuo indirizzo IP di Hue Bridge, visita https://discovery.meethue.com/ e l'indirizzo IP corretto apparirà subito nel tuo browser. L'indirizzo IP è il numero puntato preceduto da "internalpaddress".

Per comunicare con le luci Hue, dovrai creare un utente API Hue per Wemos D1 mini, in modo che Wemos possa comunicare con la luce Hue tramite l'API Hue. Per farlo, segui le istruzioni su https://developers.meethue.com/develop/get-started-2/ e copia/incolla il nome utente generato (piuttosto lungo) nella finestra del codice Arduino. Sostituisci semplicemente ogni "TUO UTENTE API HUE" con il nome utente API generato.

Quindi è necessario selezionare la luce Hue giusta per cambiare colore. Nell'API Hue ogni luce ha un numero, quindi devi trovare il numero che corrisponde alla luce che vuoi usare per questo progetto. Uno dei modi più semplici per scoprire quale numero ha una particolare luce è scaricare l'app Hue Viewer per Android o iOS. Sostituisci il testo "YOUR LIGHT NUMBER" con il numero corretto ovunque nella finestra del codice Arduino.

L'ultima cosa da fare è configurare Wemos per connettersi alla tua rete wifi. Questo viene fatto caricando il codice su Wemos e sul tuo laptop passa a un'altra rete wifi: su "AutoConnectAP". Il tuo browser visualizzerà quindi una pagina in cui puoi aggiungere l'SSID (nome) e la password della tua rete wifi che il controller Wemos utilizzerà per connettersi alla tua rete wifi (e al bridge Hue).

NB: se il caricamento del codice sul nostro Wemos D1 mini tramite USB non funziona, potrebbe essere necessario scaricare un driver per il chip USB sul Wemos. Un driver per la tua piattaforma (Windows, Mac) può essere scaricato da

Ora sei pronto per testare la tua creazione!

// ESP8266 Hue Magic Wand// Richard van Kampen - 2018 // Questo codice è stato testato su un Wemos D1 mini, ma probabilmente funzionerà anche su altre schede di sviluppo basate su ESP8266 // Per aggiungere il supporto per Wemos D1 mini e altre schede ESP8266 nell'editor di Arduino, segui i seguenti passaggi: // - Avvia Arduino e apri la finestra delle preferenze. // - Immettere https://arduino.esp8266.com/stable/package_esp8266com_index.json nel campo URL di Gestione schede aggiuntive. Puoi aggiungere più URL, separandoli con virgole. // - Apri Boards Manager dal menu Strumenti> Scheda e installa la piattaforma esp8266 (e non dimenticare di selezionare la tua scheda ESP8266 dal menu Strumenti> Scheda dopo l'installazione). // librerie utilizzate: #include "ESP8266WiFi.h" // ESP8266 Core WiFi Library #include "DNSServer.h" // Server DNS locale utilizzato per reindirizzare tutte le richieste al portale di configurazione WiFiManager se non sono presenti impostazioni WIFI (SSID, password) non è stato ancora impostato. #include "ESP8266WebServer.h" //Local WebServer utilizzato per servire il portale di configurazione WiFiManager #include "WiFiManager.h" // Libreria WiFi Configuration Magic, se non ancora installata, fare riferimento a https://github.com/tzapu/WiFiManager #install-through-library-manager #include "RestClient.h" // https://github.com/fabianofranca/ESP8266RestClient, necessario per utilizzare l'API Philips Hue (vedi https://developers.meethue.com/develop/ hue-api/). #include "ArduinoJson.h" // https://github.com/bblanchon/ArduinoJson, necessario per analizzare la risposta dell'API Hue, installare la versione 5.x tramite il gestore della libreria in Arduino (Menu "Schizzo" > Includi libreria > Gestisci Librerie > cerca ArduinoJson e cambia la versione con l'ultima 5.x). La versione 6 (attualmente in beta) genera un errore. // variabili e init: risposta stringa; const int redPin = 13;//on Wemos questo è d7 const int greenPin = 12;//on Wemos questo è d6 const int bluePin = 14;//on Wemos questo è d5 const int touchSensor = 5;//on Wemos questo è d1 const int attivazionePin = 4;//su Wemos questo è d2 bool attivazione = HIGH; tocco bool = BASSO; const char* aan_restore; int bri_restore; doppio x_restore; doppio y_restore; doppia x_magic; doppia y_magic; bool prima = vero; unsigned long startMillis; unsigned long currentMillis; unsigned long durationMillis; RestClient client = RestClient("192.168.178.23"); // "il tuo indirizzo IP Hue Bridge" // Se non conosci il tuo indirizzo IP Hue Bridge, visita https://discovery.meethue.com e apparirà subito nel tuo browser. L'indirizzo IP è il numero puntato preceduto da "internalipaddress" void setup() { analogWriteRange(255); Serial.begin(9600); // Inizia con il LED spento. pinMode(activationPin, INPUT_PULLUP); pinMode(Sensore tattile, INGRESSO); startMillis = millis(); checkWand(); } void loop() { // niente da fare qui, lascia vuoto… } void checkWand() { int rgbColour[3]; // Codice colore RGB di James Harton, https://gist.github.com/jamesotron/766994 // Inizia con il rosso. rgbColour[0] = 255; rgbColour[1] = 0; rgbColour[2] = 0; attivazione = digitalRead(activationPin); // LOW significa che la bacchetta è in uso. touch = digitalRead(touchSensor);// HIGH significa che viene utilizzato il dito al posto della bacchetta, il che non dovrebbe essere il caso. while (activation == LOW && touch == LOW) { // Scegli i colori da incrementare e decrementare. for (int decColour = 0; decColour < 3; decColour += 1) { int incColour = decColour == 2 ? 0: decColore + 1; //= operatore ternario, significa: int incColour;if (decColour == 2) {incColour = 0;} else {incColour = decColour +1;} // dissolvenza incrociata dei due colori. for (int i = 0; i <255; i += 1) { rgbColour[decColour] -= 1; rgbColour[incColour] += 1; // poiché il nostro led RGB ha un anodo comune al posto del catodo (quindi dobbiamo connetterci a +3.3V invece che a massa), abbiamo bisogno di valori inversi per RGB: int red = 255 - rgbColour[0]; int verde = 255 - rgbColour[1]; int blu = 255 - rgbColour[2]; analogWrite(redPin, rosso); analogWrite(greenPin, verde); analogWrite(bluePin, blu); ritardo(8); attivazione = digitalRead(activationPin); if (attivazione == HIGH) { // HIGH significa che la bacchetta è sollevata. vai a stopColorCycling; } } } } stopColorCycling: currentMillis = millis(); durationMillis = (currentMillis - startMillis); if (durationMillis> 1000) { RGBtoxy(rgbColour[0], rgbColour[1], rgbColour[2]); } else { //metti Wemos in modalità di sospensione: ESP.deepSleep(0); } } void RGBtoxy(int red, int green, int blue) { //vedi https://developers.meethue.com/documentation/color-conversions-rgb-xy double R = map(red, 0, 255, 0, 1000); R /= 1000; doppia G = map(verde, 0, 255, 0, 1000); G /= 1000; doppia B = mappa(blu, 0, 255, 0, 1000); B /= 1000; R = (R > 0,04045f) ? pow((R + 0,055 f) / (1,0 f + 0,055 f), 2,4 f): (R / 12,92 f); G = (G > 0,04045f) ? pow((sol + 0,055 f) / (1,0 f + 0,055 f), 2,4 f): (sol / 12,92 f); B = (B > 0,04045f) ? pow((B + 0,055 f) / (1,0 f + 0,055 f), 2,4 f): (B / 12,92 f); doppia X = R * 0,649926f + G * 0,103455f + B * 0,197109f; doppia Y = R * 0,234327f + G * 0,743075f + B * 0,022598f; doppia Z = R * 0.0000000f + G * 0.053077f + B * 1.035763f; doppia x = X / (X + Y + Z); doppia y = Y / (X + Y + Z); // conversione non completamente completata, ma probabilmente abbastanza buona per quello che vogliamo ottenere, quindi lasciamo così e invia i valori XY a lamp: sendtoHue(x, y); } void sendtoHue(double a, double b) {// cambio di colore effettivo dalla bacchetta magica if (first) { //first pass: ottiene lo stato attuale della lampada getCurrentValues(); }// quindi invia i colori della bacchetta magica: // wait for spell: long wait; x_magic = a; y_magic = b; // lampada accesa nel colore della bacchetta magica: response = ""; int temp = casuale (2, 9); const char* stato = "vero"; for (int i = 1; i <= temp; i++) { // crea un array di caratteri da inviare al bridge: 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); // ora abbiamo post_body1 come array di caratteri; // effettua la chiamata di riposo: int statusCodePut1 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body1, &response); aspetta = casuale (100, 600); ritardo (attesa); if (stato == "vero") { stato = "falso"; } else { stato = "vero"; } } // riduce la luminosità…: response = ""; temperatura = casuale (4, 17); // crea un array di caratteri da inviare al bridge: 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); // ora abbiamo post_body2 come array di caratteri; // effettua la chiamata di riposo: int statusCodePut2 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body2, &response); aspetta = casuale (1000, 2500); ritardo (attesa); //..e rendi di nuovo più luminoso: response = ""; temperatura = casuale (4, 17); // crea un array di caratteri da inviare al bridge: 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);// ora abbiamo post_body3 come array di caratteri; // make rest call: int statusCodePut3 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body3, &response); aspetta = casuale (2500, 5000); // aspetta 2-5 secondi delay(wait); //e torna al vecchio valore: response = ""; // crea un array di caratteri da inviare al bridge: 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);// ora abbiamo post_body4 come array di caratteri; // make rest call: int statusCodePut4 = client.put("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER/state", post_body4, &response); ESP.deepSleep(0); //torno a dormire…. } unsigned int getCurrentValues() { connectWifi(); // prima connessione alla risposta Wifi = ""; // effettua una chiamata di riposo: int statusCodeGet = client.get("/api/YOUR HUE API USERNAME/lights/YOUR LIGHT NUMBER", &response); Serial.print("Codice di stato dal server dopo GET: "); Serial.println(statusCodeGet); Serial.print("Corpo risposta dal server: "); Serial.println(risposta); StaticJsonBuffer jsonBuffer; // Analisi della risposta Json // Radice dell'albero degli oggetti. // // È un riferimento al JsonObject, i byte effettivi sono all'interno del // jsonBuffer con tutti gli altri nodi dell'albero degli oggetti. // La memoria viene liberata quando jsonBuffer esce dall'ambito. JsonObject& root = jsonBuffer.parseObject(risposta); JsonObject& state = root["state"];// Verifica se l'analisi ha esito positivo. if (!root.success()) { Serial.println("parseObject() failed"); } // Recupera i valori. aan_restore = stato["on"]; Serial.println(aan_restore); bri_restore = stato["bri"]; x_restore = stato["xy"][0]; y_restore = stato["xy"][1]; first = false;} void connectWifi() { //Inizializzazione locale. Una volta terminata la sua attività, non è necessario tenerla intorno a WiFiManager wifiManager; //reimposta le impostazioni - per il test: //wifiManager.resetSettings(); //set callback che viene chiamato quando la connessione al WiFi precedente fallisce e entra in modalità Access Point wifiManager.setAPCallback(configModeCallback); //preleva ssid e passa e prova a connettersi //se non si connette avvia un punto di accesso con il nome specificato //qui "AutoConnectAP" //e entra in un ciclo di blocco in attesa di configurazione if (!wifiManager.autoConnect()) { Serial.println("Impossibile connettersi e raggiungere il timeout"); //reset e riprovare, o magari metterlo in deep sleep ESP.reset(); ritardo(1000); } //se arrivi qui ti sei connesso al WiFi Serial.println("connected…yeey:)"); Serial.print("Connesso a: "); Serial.println(WiFi. SSID()); Serial.print("Indirizzo IP: "); Serial.println(WiFi.localIP()); //indirizzo IP assegnato al tuo ESP (Wemos) // stampa la potenza del segnale ricevuto: long rssi = WiFi. RSSI(); Serial.print("intensità del segnale (RSSI):"); Serial.println(rssi); } void configModeCallback (WiFiManager * myWiFiManager) { Serial.println("Entrata in modalità di configurazione"); Serial.println(WiFi.softAPIP()); //se hai usato l'SSID generato automaticamente, stampalo Serial.println(myWiFiManager->getConfigPortalSSID()); }