Avviso di notifica visiva: 9 passaggi

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

Questo tutorial ti insegna come codificare per informare Phillips Hue di avvisare. Sarebbe molto utile per le persone non udenti e con problemi di udito, ipovedenti o con disabilità sensoriali. Visual Notification Alert serve per informare gli utenti dopo aver ricevuto notifiche da e-mail, Facebook, Trello o simili. La lampadina a LED Hue inizia ad avvisare lampeggiando.

Photon Particle è un piccolo kit di sviluppo Wi-Fi riprogrammabile per la prototipazione e il ridimensionamento del tuo prodotto Internet of Things.

Passaggio 1: un elenco di hardware e software

Hai bisogno di hardware e software per sviluppare i codici per Visual Notification Alert.

Hardware

• Kit creatore di particelle
• Philips Hue - Starter Kit (3 lampadine LED e 1 Hue Bridge)

Software

• Informazioni generali sulla particella Photon
• Particle Web IDE (Build) *Richiesto per l'accesso*
• IFTTT (se questo poi quello)

Passaggio 2: installazione

Dovresti avere il tuo Particle Maker Kit, che include tutto, come sensori, ponticelli, LED, resistori e altro. Puoi leggere ulteriori informazioni su Particle Photon.

Prima di collegare il tuo fotone, devi conoscere lo stato dei LED sul fotone. Ecco le informazioni sullo stato del LED.

Collega il tuo fotone

1. Collega il cavo USB alla tua fonte di alimentazione. (Il tuo computer funziona perfettamente per questo scopo). Il tuo dispositivo particellare non ha bisogno del tuo computer per connettersi al wifi.
2. Quando è collegato, il LED RGB sul dispositivo fotonico dovrebbe iniziare a lampeggiare in blu. Se il tuo dispositivo non lampeggia in blu, tieni premuto il pulsante SETUP per 10 secondi, quindi rilascia il pulsante SETUP.
3. Accedi a Setup Particle se hai già un account. Se non hai un account, crea l'account per Photon.
4. Fare clic su Photon/Serie P.
5. Dopo aver fatto clic su AVANTI, dovrebbe essere presentato un file (photonsetup.html)
6. Fare clic su CONTINUA CON UN FILE LOCALE per scaricare un file.

Dopo aver aperto un file

1. Collega il tuo PC al Photon, collegandoti alla rete denominata PHOTON-…
2. Configura le tue credenziali Wi-Fi. Nota: se si digitano male le credenziali, Photon lampeggerà in blu scuro o verde. Devi ripetere il processo aggiornando la pagina o facendo clic sulla parte del processo di riprova.
3. Rinomina il tuo dispositivo. Vedrai una conferma se il dispositivo è stato rivendicato o meno.

Prima di passare alla parte successiva, se il tuo dispositivo Photon ha un ciano che respira, allora ha successo su Internet e Photon Cloud! Stiamo passando all'IDE di particelle, Build.

Passaggio 3: codifica in Particle Web IDE

Devi creare il tuo account per Particle IDE, Build. Se hai già un account, allora fantastico! Accedi a Particle IDE.

Vogliamo provare per vedere se il LED lampeggia sulla scheda. C'è il piccolo LED blu sulla tua scheda Photon. È vicino a D7. Puoi scaricare il file, Gettingstarted-blinknet.ino, e vedere i codici lì. C'è una spiegazione. Fare clic su questo collegamento per aprire il codice sorgente in Particle Web IDE. Se D7 (piccolo LED blu) lampeggia, congratulazioni, hai appena lampeggiato un LED utilizzando il tuo dispositivo Particle! Se vuoi saperne di più su Photon, come il lampeggio di LED diversi, la lettura del sensore fotografico, ecc., ecco il link.

Ora passeremo a Philips Hue.

Passaggio 4: Philips Hue

Per riferimento: fare clic qui sull'API Phillips Hue.

Prima di poter accedere alla documentazione dell'API Philips Hue, dovrai registrarti come sviluppatore. È gratuito, ma è necessario accettare i termini e le condizioni.

1. Innanzitutto, assicurati che il tuo Philips Hue Bridge (prima immagine) sia collegato alla rete e funzioni correttamente. Test Hue App (Hue App è disponibile su iOS e Android) che controlla la luce sulla stessa rete.

Se lo provi con successo, devi scoprire l'indirizzo IP del bridge sulla tua rete. Utilizza il rilevamento del server broker di Philips visitando www.meethue.com/api/nupnp.

Quando trovi il tuo indirizzo IP, digitalo nella barra degli indirizzi del browser con debug/clip.html aggiunto all'URL: https://indirizzo IP bridge/debug/clip.html. Dovresti vedere un'interfaccia (seconda immagine) come questa. Nota: sostituisci "Indirizzo IP bridge" con il tuo indirizzo IP.

2. Eseguiamo un semplice comando e otteniamo informazioni sul tuo sistema hue. Compila i dettagli di seguito lasciando il corpo vuoto e premi il pulsante OTTIENI. Dovresti vedere un'interfaccia (terza immagine) come questa. Dovresti ricevere un messaggio di errore. Nota: sostituisci "Indirizzo IP bridge" con il tuo indirizzo IP.

Indirizzo: https://indirizzo IP bridge/api/newdeveloperBody:Method: GETCongratulazioni! Devi solo inviare il tuo primo comando!3. Successivamente, inserisci le informazioni di seguito e premi il pulsante POST. Nota: sostituire "Indirizzo IP bridge" con il tuo indirizzo IP e "nome tipo di telefono" con il tuo telefono.

Indirizzo: https://indirizzo IP bridge/apiBody: {"devicetype":"my_hue_app#phonetype name"}Metodo: POST

Il collegamento aiuta a crearlo per te. Quando premi il pulsante POST, dovresti ricevere un messaggio di errore (quarta immagine) che ti informa che devi premere il pulsante di collegamento su Hue Bridge. Questo è il passaggio di sicurezza in modo che solo le app o i server che desideri controllare le luci. Premendo il collegamento sul bridge hue, si dimostra che l'utente ha accesso fisico al bridge hue.

Quando ricevi una risposta positiva (quinta foto), congratulazioni! Hai appena creato un utente autorizzato, che utilizzeremo d'ora in poi.

4. Ultimo esempio prima di integrarlo nella particella fotonica, assicurati che una delle tue luci sia visibile e accesa e devi sapere quale numero è la luce. Cambia l'URL in /api/nome utente/luci/numero luce/stato (cambia il numero della luce [può essere 1, 2, 3 o ?]) e invia un pulsante PUT con i seguenti dati:

Nota: assicurati di modificare l'indirizzo IP del bridge, il nome utente e il numero della luce

Indirizzo: https://indirizzo IP bridge/api/nome utente/luci/numero luci/stato

Corpo: {"on":true, "sat":254, "bri":254, "hue":10000}

Metodo: PUT Dovresti vedere la tua luce cambiare colore:

Passaggio 5: configurazione di Photon con un pulsante e fili

Prima di sviluppare altri codici in Photon Web IDE, vogliamo impostare il nostro Photon con un pulsante e fili. Hai diversi pulsanti e molti fili dal tuo Particle Starter Kit. Ho allegato due immagini, una è un diagramma e una è un immagine reale.

1. Assicurati di posizionare il tuo fotone sulla breadboard.
2. Posiziona un pulsante nella parte inferiore della breadboard come mostrato nell'immagine.
3. Metti un'estremità del filo nero in J4 (GND) e un'altra estremità dello stesso filo nero in J30.
4. Metti un'estremità del filo giallo in J7 (D5) e un'altra estremità dello stesso filo giallo in J28.

Se corrispondono alla mia immagine ti mostro, allora sei bravo!

Passaggio 6: scrittura di codici in Photon Particle

Creeremo la nostra prima applicazione in Photon Particle - Web IDE.

1. Vai su https://build.particle.io/build e accedi (registrati se non hai ancora creato)
2. Digita "Avviso di notifica visiva" in App corrente.
3. Premere il pulsante Invio (vedere la prima immagine).

L'applicazione viene salvata in Photon Particle Cloud. La funzione setup() viene chiamata all'avvio dell'applicazione ed eseguita una volta. La funzione loop() fa esattamente ciò che fa e si ripete consecutivamente, consentendo alla tua applicazione di cambiare e rispondere.

Per aggiungere HttpClient per la particella fotonica:

1. Fare clic su Librerie in basso a sinistra dell'IDE Web.
2. Digita "HttpClient" nella barra di ricerca.
3. Fai clic su "Includi nel progetto" nel pulsante blu.
4. Fare clic su VisualNotificationAlert (rimuove gli spazi dopo aver creato l'app).
5. Fare clic su Conferma.

Ora, ha aggiunto HttpClient all'inizio dell'IDE Web.

/ Questa istruzione #include è stata aggiunta automaticamente da Particle IDE.#include

/*** Configurazione per Philip Hue ***

/ 1. Sostituiscilo con il tuo nome utente API dal passaggio 1 const String API_USERNAME = "Il tuo nome utente API"; // 2. Sostituiscilo con l'indirizzo IP del tuo bridge dal passaggio 1 IPAddress hueIP(x, x, x, x); // 3. Sostituisci con il percorso delle luci che vuoi controllare. Usa la pagina web del passaggio 1 per verificare che funzioni. // Assicurati di riconoscere il numero della luce Philip Hue // /lights/NUMBER/state const String LIGHT_PATH = "/lights/Number/state"; // 4. Sostituiscilo con il corpo della tua richiesta di accendere le luci. const String REQUEST_BODY_ON = "{"on\":true, \"bri\":254}"; // 5. Sostituiscilo con il corpo della tua richiesta di spegnere le luci. const String REQUEST_BODY_OFF = "{"on\":false, \"bri\":254}"; /*** END Configurazione per Philip Hue *** / Button const int BUTTON_PIN = D5; // Oggetto HttpClient utilizzato per effettuare richieste HTTP al bridge Hue HttpClient http; // Intestazione predefinita per le richieste HTTP http_header_t headers = { { "Accept", "*/*"}, { NULL, NULL } // NOTA: le intestazioni terminano sempre con NULL }; // Oggetti di richiesta e risposta http_request_t request; http_response_t risposta; void setup() { Serial.begin(9600); request.ip = hueIP; richiesta.porta = 80; // LED integrato come indicatore luminoso per il tocco rilevato pinMode(D7, OUTPUT); // Per l'input, definiamo BUTTON_UP come input-pullup. Questo utilizza un resistore di pullup interno // per gestire letture coerenti dal dispositivo. pinMode(BUTTON_PIN, INPUT_PULLUP); // imposta il pin come input // "Sottoscriviamo" al nostro evento IFTTT chiamato Button in modo da ottenere eventi per esso Particle.subscribe("RIT_Gmail", myHandler); Particle.subscribe("Trello", myHandler); } // setup() function void loop() { /* * Questa è la sezione del test per verificare se la luce avverte */ // scoprire se il pulsante è premuto o meno leggendolo. int buttonState = digitalRead(BUTTON_PIN); // Quando il pulsante viene PREMUTO, otterremo un segnale LOW. // Quando il pulsante NON viene PREMUTO, otterremo un ALTO. if(buttonState == LOW) gmailAlert(); } // loop() function void printInfo() { Serial.print("Application>\tStato risposta: "); Serial.println(response.status); Serial.print("Applicazione>\tCorpo risposta HTTP: "); Serial.println(response.body); } // printInfo() funzione int i = 0; //La funzione che gestisce l'evento da IFTTT void myHandler(const char *event, const char *data) { // Test per la stampa in seriale Serial.print(event); Serial.print(", dati: "); if (dati) Serial.println (dati); else Serial.println("NULL"); if(strcmp(event, "Trello") == 0) { trelloAlert(); } else if(strcmp(event, "Gmail") == 0) { gmailAlert(); } } // myHandler() function /** Il valore della tonalità su cui impostare la luce. * Il valore della tonalità è un valore di wrapping compreso tra 0 e 65535. * Sia 0 che 65535 sono rossi, * 25500 è verde e 46920 è blu. */ /** * Avviserà utilizzando la lampadina Philips Hue Smart utilizzando il colore blu. Avviserà per 15 secondi. */ void trelloAlert() { String trello_body_alert = "{"on\": true, \"bri\": 255, \"sat\": 255, \"hue\": 46920, \"alert\": \"lseleziona\"}"; sendHttpPut(trello_body_alert); } /** * Avviserà utilizzando la lampadina Philips Hue Smart utilizzando il colore rosso. Avviserà per 15 secondi. */ void gmailAlert() { String gmail_body_alert = "{"on\":true, \"sat\":254, \"bri\":254, \"hue\":65535, \"alert\": \"lseleziona\"}"; sendHttpPut(gmail_body_alert); } /** * Invieremo il PUT a Philips Hue * @param httpPutBody il corpo della stringa */ void sendHttpPut(String httpPutBody) { request.path = "/api/" + API_USERNAME + LIGHT_PATH; request.body = httpPutBody; http.put(richiesta, risposta, intestazioni); }

Quando finisci di digitare o copiare il codice sul tuo Photon Particle Web IDE, fai clic sull'icona di controllo (Verifica) in alto a sinistra della barra. Se è conforme con successo, andremo al passaggio successivo!

Passaggio 7: caricamento del codice su Photon

Questo passaggio è molto semplice. Prima di caricare i codici su Photon:

1. Collega il cavo USB alla tua fonte di alimentazione (consiglio il laptop).
2. Assicurati che il tuo fotone abbia il LED ciano che respira. Se non respira ciano o ha un colore diverso, vai al Passaggio 2: Installazione
3. Fare clic sull'icona Illuminazione dall'IDE Web Photon Particle.
4. Quando carica i codici su Photon, dovresti vedere magenta. Significa che il codice inizia a essere caricato nel codice. Quindi, lampeggerà velocemente in verde, quindi tornerà a respirare ciano.
5. Premi il pulsante per vedere se la tua Philips Smart Bulb lampeggia (o avvisa).

Se Philips Smart Bulb ti avvisa, congratulazioni! Abbiamo quasi finito!

Passiamo alla parte software.

Passaggio 8: creazione di applet da IFTTT (se questo, allora quello)

Creeremo le applet dal sito Web IFTTT (If This, Then That). Le applet pubblicheranno un evento su Photon, quindi Photon invierà un comando al Philips Hue Bridge per avvisare le lampadine intelligenti.

Per questo progetto, utilizzeremo Trello e Gmail per pubblicare eventi su Photon.

Vai su https://ifttt.com/ e registrati.

Trello

1. Fai clic su Le mie applet in alto.
2. Fare clic su Nuova applet.
3. Fare clic su + questo in testo blu.
4. Digita Trello nella barra di ricerca e fai clic.
5. Fare clic su Carta assegnata a me.
6. Seleziona la tua tavola da Trello.
7. Fare clic su +quello in testo blu.
8. Digita Particella nella barra di ricerca e fai clic.
9. Fai clic su Pubblica un evento.
10. Digita "Trello" in Quindi pubblica (nome evento).
11. Seleziona pubblico.

Gmail (Nota: utilizzeranno il tuo indirizzo email quando ti iscrivi)

1. Fai clic su Le mie applet in alto.
2. Fare clic su Nuova applet.
3. Fare clic su + questo in testo blu.
4. Digita Gmail nella barra di ricerca e fai clic su
5. Seleziona Qualsiasi nuova email nella posta in arrivo
6. Fare clic su +quello in testo blu.
7. Digita Particella nella barra di ricerca e fai clic su
8. Fai clic su Pubblica un evento.
9. Digita "Gmail" in Quindi pubblica (nome evento).
10. Seleziona pubblico.

Una volta che hai due applet, Trello e Gmail funzionanti, passiamo all'ultimo passaggio.

Passaggio 9: infine, test

Proveremo a pubblicare gli eventi dalle applet al fotone. Assicurati che le tue applet siano attive.

Trello

Quando qualcuno crea una nuova carta in Trello, ti assegnerà (tag) nella carta. IFTTT lo ascolta e inizia a pubblicare un evento su Photon. Quindi il Photon invia un comando al Philip Hue Bridge per allertare le lampadine intelligenti.

Gmail

Quando ricevi una nuova email nella tua casella di posta, IFTTT la ascolta e inizia a pubblicare un evento su Photon. Quindi il Photon invia un comando al Philip Hue Bridge per allertare le lampadine intelligenti.

Sfide

• Ogni volta che riceviamo una nuova notifica da Trello e Gmail, c'è un enorme ritardo nell'invio di un evento da IFTTT e nell'invio di un comando da Photon. Dovrebbero essere necessari meno di 5 minuti per avvisare le lampadine intelligenti.
• L'applet Gmail a volte si spegne da sola perché l'applet deve essere ricollegata o aggiornata.