Taula de continguts:

Alerta de notificació visual: 9 passos
Alerta de notificació visual: 9 passos

Vídeo: Alerta de notificació visual: 9 passos

Vídeo: Alerta de notificació visual: 9 passos
Vídeo: Crear alertas personalizadas con MUI (Alert, Snackbars y Notistack) 2024, Juliol
Anonim

Aquest tutorial us ensenya a codificar per informar a Phillips Hue de l'alerta. Seria molt útil per a persones sordes i amb discapacitat auditiva, amb discapacitat visual baixa o sensorial. L’avís de notificació visual és informar els usuaris després de rebre notificacions per correu electrònic, Facebook, Trello o similars. La bombeta LED Hue comença a alertar fent parpellejar la llum.

Photon Particle és un petit kit de desenvolupament Wi-Fi reprogramable per prototipar i escalar el vostre producte Internet de les coses.

Pas 1: una llista de maquinari i programari

Necessiteu maquinari i programari per desenvolupar els codis de l'alerta de notificació visual.

Maquinari

  • Kit de fabricació de partícules
  • Philips Hue - Starter Kit (3 bombetes LED i 1 pont Hue)

Programari

  • Informació general del fotó de partícules
  • Particle Web IDE (Build) * Necessari per iniciar la sessió *
  • IFTTT (Si això és així)

Pas 2: Instal·lació

Haureu de tenir el vostre kit de fabricació de partícules, que inclou tot, com ara sensors, cables de pont, LEDs, resistències, etc. Podeu llegir més informació sobre el fotó de partícules.

Abans de connectar el fotó, heu de conèixer l’estat dels LED del fotó. Aquí teniu la informació sobre l’estat del LED.

Connecteu el fotó

  1. Connecteu el cable USB a la font d'alimentació. (El vostre equip funciona perfectament amb aquest propòsit). El vostre dispositiu de partícules no necessita que l’ordinador es connecti al wifi.
  2. Quan estigui endollat, el LED RGB del dispositiu de fotons hauria de començar a parpellejar de color blau. Si el dispositiu no parpelleja en blau, manteniu premut el botó SETUP durant 10 segons i deixeu anar el botó SETUP.
  3. Inicieu la sessió Particle de configuració si ja teniu un compte. Si no teniu cap compte, creeu-lo per Photon.
  4. Feu clic a Photon / P Series.
  5. Després de fer clic a SEGÜENT, se us presentarà un fitxer (photonsetup.html)
  6. Feu clic a CONTINUA AMB UN FITXER LOCAL per descarregar un fitxer.

Després d'obrir un fitxer

  1. Connecteu el vostre PC al Photon mitjançant la connexió a la xarxa anomenada PHOTON- …
  2. Configureu les vostres credencials Wi-Fi. Nota: si escriviu malament les vostres credencials, el fotó parpellejarà de color blau fosc o verd. Heu de tornar a fer el procés actualitzant la pàgina o fent clic a la part del procés de reintent.
  3. Canvieu el nom del dispositiu. Veureu una confirmació si el dispositiu ha estat reclamat o no.

Abans de passar a la part següent, si el dispositiu Photon té un color cian que respira, aleshores tindrà èxit a Internet i Photon Cloud. Passem a l’ID de partícules, Build.

Pas 3: Codificació en IDE de Particle Web

Heu de crear el vostre compte per a Particle IDE, Build. Si ja teniu un compte, és genial. Inicieu la sessió Particle IDE.

Volem provar si el LED parpelleja al tauler. Hi ha el petit LED blau a la vostra placa Photon. És al costat de D7. Podeu descarregar el fitxer gettingstarted-blinknet.ino i veure-hi els codis. Hi ha una explicació. Feu clic en aquest enllaç per obrir el codi font del Particle Web IDE. Si el D7 (petit LED blau) parpelleja, enhorabona, acabeu de parpellejar un LED amb el vostre dispositiu Particle. Si voleu obtenir més informació sobre Photon, com ara parpellejar diferents LEDs, llegir el sensor de fotos, etc., aquí teniu l’enllaç.

Ara passarem al Philips Hue.

Pas 4: Philips Hue

Image
Image
Philips Hue
Philips Hue
Philips Hue
Philips Hue

Com a referència: feu clic aquí sobre l'API Phillips Hue.

Abans d’accedir a la documentació de l’API Philips Hue, haureu de registrar-vos com a desenvolupador. És gratuït, però heu d’acceptar els termes i condicions.

1. En primer lloc, assegureu-vos que el vostre Philips Hue Bridge (primera imatge) connectat a la vostra xarxa funcioni correctament. Aplicació Test Hue (l'aplicació Hue està disponible a iOS i Android) que controla la llum de la mateixa xarxa.

Si el proveu amb èxit, haureu de descobrir l'adreça IP del pont a la vostra xarxa. Utilitzeu el descobriment del servidor de corredors de Philips visitant www.meethue.com/api/nupnp.

Quan trobeu la vostra adreça IP, escriviu-la a la barra d’adreces del navegador amb debug / clip.html afegit a l’URL: https:// bridge IP Address / debug / clip.html. Hauríeu de veure una interfície (segona imatge) com aquesta. Nota: substituïu "Adreça IP pont" per la vostra adreça IP.

2. Fem una ordre senzilla i obtenim informació sobre el vostre sistema de tonalitats. Empleneu els detalls següents deixant el cos buit i premeu el botó GET. Hauríeu de veure una interfície (tercera imatge) com aquesta. Hauríeu de rebre un missatge d'error. Nota: substituïu "Adreça IP pont" per la vostra adreça IP.

Adreça: https:// bridge Adreça IP / api / newdeveloper Codi: Mètode: GETCongratulations! Només heu d’enviar el vostre primer comandament. A continuació, empleneu la informació següent i premeu el botó POST. Nota: substituïu "Adreça IP pont" a la vostra adreça IP i "nom del tipus de telèfon" al vostre propi telèfon.

Adreça: https:// bridge IP address / apiBody: {"devicetype": "my_hue_app # phonetype name"} Mètode: POST

L’enllaç us ajuda a crear-lo. Quan premeu el botó POST, haureu de tornar a rebre un missatge d'error (quarta imatge) que us indiqui que heu de prémer el botó d'enllaç del pont Hue. Aquest és el pas de seguretat perquè només les aplicacions o servidors que vulgueu controlin els llums. Prement l’enllaç al pont Hue, demostra que l’usuari té accés físic al pont Hue.

Quan tingueu una resposta satisfactòria (cinquena imatge), felicitats! Acabeu de crear un usuari autoritzat, que farem servir a partir d’ara.

4. Últim exemple abans d’integrar-lo a la partícula de fotons, assegureu-vos que una de les vostres llums sigui visible i encesa i que hàgiu de saber quin és el número de llum. Canvieu l'URL a / api / nom d'usuari / lights / light number / state (canvieu el número de llum [pot ser 1, 2, 3 o?]) I envieu un botó PUT amb les dades següents:

Nota: assegureu-vos de canviar l'adreça IP del pont, el nom d'usuari i el número de llum

Adreça: https:// bridge IP address / api / username / lights / light number / state

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

Mètode: PUT Heu de veure la llum canviant de color:

Pas 5: Configuració del fotó amb un botó i cables

Configuració del fotó amb un botó i cables
Configuració del fotó amb un botó i cables
Configuració del fotó amb un botó i cables
Configuració del fotó amb un botó i cables

Abans de desenvolupar més codis en Photon Web IDE, volem configurar el nostre fotó amb un botó i cables. Teniu diversos botons i molts cables del vostre kit d’inici de partícules. He adjuntat dues imatges, una és un diagrama i una és imatge real.

  1. Assegureu-vos de col·locar el fotó a la pissarra.
  2. Col·loqueu un botó a la part inferior del tauler d’expressió tal com es mostra a la imatge.
  3. Poseu un extrem del fil negre a J4 (GND) i poseu un altre extrem del mateix fil negre a J30.
  4. Poseu un extrem del fil groc a J7 (D5) i poseu un altre extrem del mateix fil groc a J28.

Si coincideixo amb la meva imatge, et mostro, llavors ets bo.

Pas 6: escriure codis a partícules de fotons

Escriptura de codis a partícules de fotons
Escriptura de codis a partícules de fotons

Crearem la nostra primera aplicació a Photon Particle - Web IDE.

  1. Aneu a https://build.particle.io/build i inicieu la sessió (registreu-vos si encara no ho heu creat)
  2. Escriviu "Alerta de notificació visual" a l'aplicació actual.
  3. Premeu el botó Retorn (vegeu la primera imatge).

L'aplicació es desa al núvol de partícules de fotons. La funció setup () es diu quan l’aplicació s’inicia i s’executa una vegada. La funció loop () fa exactament el que fa i fa un bucle de manera consecutiva, permetent que la vostra aplicació canviï i respongui.

Per afegir HttpClient per a la partícula de fotons:

  1. Feu clic a Biblioteques a la part inferior esquerra de l'IDE web.
  2. Escriviu "HttpClient" a la barra de cerca.
  3. Feu clic a "Inclou al projecte" al botó blau.
  4. Feu clic a VisualNotificationAlert (elimina els espais després de crear l'aplicació).
  5. Feu clic a Confirma.

Ara, ha afegit HttpClient al començament del IDE web.

/ Aquesta declaració #include ha estat afegida automàticament per Particle IDE. # Include

/ *** Configuració de Philip Hue ***

/ 1. Substituïu-ho pel vostre nom d'usuari API del pas 1 const String API_USERNAME = "El vostre nom d'usuari API"; // 2. Substituïu-ho per l'adreça IP del vostre pont des del pas 1 IPAddress hueIP (x, x, x, x); // 3. Substituïu-lo pel camí cap als llums que voleu controlar. Utilitzeu la pàgina web del pas 1 per verificar que funcioni. // Assegureu-vos de reconèixer el número de la llum Philip Hue // / lights / NUMBER / state const String LIGHT_PATH = "/ lights / Number / state"; // 4. Substituïu això pel cos de la vostra sol·licitud per encendre els llums. const String REQUEST_BODY_ON = "{" on / ": true, \" bri / ": 254}"; // 5. Substituïu això pel cos de la vostra sol·licitud per apagar els llums. const String REQUEST_BODY_OFF = "{" on / ": false, \" bri / ": 254}"; / *** FI Configuració de Philip Hue *** / Botó const int BUTTON_PIN = D5; // Objecte HttpClient utilitzat per fer sol·licituds HTTP al pont Hue HttpClient http; // Capçalera predeterminada per a les sol·licituds HTTP. // Sol·licitud i resposta d'objectes http_request_t request; http_response_t resposta; configuració nul·la () {Serial.begin (9600); request.ip = tonalitat IP; request.port = 80; // LED incorporat com a llum indicadora del pin pinçat detectat (D7, OUTPUT); // Per a l'entrada, definim BUTTON_UP com una extracció d'entrada. S’utilitza una resistència de captació interna // per gestionar lectures constants des del dispositiu. pinMode (BUTTON_PIN, INPUT_PULLUP); // estableix el pin com a entrada // Ens "subscrivim" al nostre esdeveniment IFTTT anomenat Button per obtenir esdeveniments per a això Particle.subscribe ("RIT_Gmail", myHandler); Particle.subscribe ("Trello", myHandler); } // setup () function void loop () {/ * * Aquesta és una secció per comprovar si la llum avisa * / // per saber si es prem el botó o no llegint-ne. int buttonState = digitalRead (BUTTON_PIN); // Quan es prem el botó, obtindrem un senyal BAIX. // Quan el botó NO ESTIGUI EMPESSAT, obtindrem un ALT. if (buttonState == BAIX) gmailAlert (); } // loop () function void printInfo () {Serial.print ("Aplicació> / tEstat de resposta:"); Serial.println (response.status); Serial.print ("Aplicació> / tHTTP cos de resposta:"); Serial.println (response.body); } // printInfo () funció int i = 0; // La funció que gestiona l'esdeveniment des d'IFTTT anul·la myHandler (const char * event, const char * data) {// Prova per imprimir en sèrie Serial.print (esdeveniment); Serial.print (", dades:"); if (dades) Serial.println (dades); else Serial.println ("NULL"); if (strcmp (event, "Trello") == 0) {trelloAlert (); } else if (strcmp (esdeveniment, "Gmail") == 0) {gmailAlert (); }} // myHandler () function / ** El valor de la tonalitat per establir la llum. * El valor de tonalitat és un valor ajustat entre 0 i 65535. * Tant 0 com 65535 són vermells, * 25500 és verd i 46920 és blau. * / / ** * Alertarà mitjançant la bombeta intel·ligent Philips Hue amb el color blau. Alertarà durant 15 segons. * / void trelloAlert () {String trello_body_alert = "{" on / ": true, \" bri / ": 255, \" sat / ": 255, \" hue / ": 46920, \" alert / ": / "lselect \"} "; sendHttpPut (trello_body_alert); } / ** * Alertarà mitjançant la bombeta intel·ligent Philips Hue amb el color vermell. Alertarà durant 15 segons. * / void gmailAlert () {String gmail_body_alert = "{" on / ": true, \" sat / ": 254, \" bri / ": 254, \" hue / ": 65535, \" alert / ": / "lselect \"} "; sendHttpPut (gmail_body_alert); } / ** * Enviarem el PUT al Philips Hue * @param httpPutBody el cos de la cadena * / void sendHttpPut (String httpPutBody) {request.path = "/ api /" + API_USERNAME + LIGHT_PATH; request.body = httpPutBody; http.put (sol·licitud, resposta, capçaleres); }

Quan hàgiu acabat d’escriure o copiar el codi al vostre IDE de Photon Particle Web, feu clic a la icona de verificació (Verifica) a la part superior esquerra de la barra. Si es compleix amb èxit, passarem al següent pas.

Pas 7: càrrega de codi al fotó

Aquest pas és molt senzill. Abans de penjar els codis al fotó:

  1. Connecteu el cable USB a la font d'alimentació (us recomano un ordinador portàtil).
  2. Assegureu-vos que el fotó tingui el LED cian que respira. Si no respira cian o té un color diferent, aneu al pas 2: instal·lació
  3. Feu clic a la icona d'il·luminació de l'identificador web de partícules de fotons.
  4. Quan pengi els codis al fotó, hauríeu de veure magenta. Significa que el codi comença a penjar-se al codi. Llavors, parpellejarà ràpidament de verd i tornarà a respirar cian.
  5. Premeu el botó per veure si la vostra bombeta intel·ligent Philips parpelleja (o avisa).

Si Philips Smart Bulb alerta, aleshores felicitats! Quasi hem acabat!

Passarem a la part del programari.

Pas 8: Creació d’applets a partir d’IFTTT (si és això, llavors allò)

Crearem els applets des del lloc web IFTTT (If This, Then That). Els applets publicaran un esdeveniment al fotó i, a continuació, el fotó enviarà una ordre al pont Philips Hue Bridge per alertar les bombetes intel·ligents.

Per a aquest projecte, utilitzarem Trello i Gmail per publicar esdeveniments al Photon.

Aneu a https://ifttt.com/ i inscriviu-vos.

Trello

  1. Feu clic a Els meus applets a la part superior.
  2. Feu clic a Applet nou.
  3. Feu clic a + això en text blau.
  4. Escriviu Trello a la barra de cerca i feu clic a.
  5. Feu clic a Targeta assignada a mi.
  6. Selecciona el tauler de Trello.
  7. Feu clic a + que en text blau.
  8. Escriviu Particle a la barra de cerca i feu clic a.
  9. Feu clic a Publica un esdeveniment.
  10. Escriviu "Trello" a A continuació, publiqueu (Nom de l'esdeveniment).
  11. Selecciona públic.

Gmail (Nota: utilitzaran la vostra adreça de correu electrònic quan us registreu)

  1. Feu clic a Els meus applets a la part superior.
  2. Feu clic a Applet nou.
  3. Feu clic a + això en text blau.
  4. Escriviu Gmail a la barra de cerca i feu clic a
  5. Seleccioneu Qualsevol correu electrònic nou a la safata d'entrada
  6. Feu clic a + que en text blau.
  7. Escriviu Particle a la barra de cerca i feu clic a
  8. Feu clic a Publica un esdeveniment.
  9. Escriviu "Gmail" a A continuació, publiqueu (Nom de l'esdeveniment).
  10. Selecciona públic.

Un cop tingueu dos applets, Trello i Gmail funcionant, passem a l'últim pas.

Pas 9: Finalment, proves

Farem proves per publicar esdeveniments des d’applets fins al fotó. Assegureu-vos que les miniaplicacions estiguin activades.

Trello

Quan algú crea una targeta nova a Trello, us assignarà (etiquetarà) a la targeta. IFTTT ho escolta i comença a publicar un esdeveniment al Photon. Després, el fotó envia una ordre al pont Philip Hue per alertar les bombetes intel·ligents.

Gmail

Quan rebeu un correu electrònic nou a la safata d'entrada, IFTTT ho escolta i comença a publicar un esdeveniment al Photon. Després, el fotó envia una ordre al pont Philip Hue per alertar les bombetes intel·ligents.

Desafiaments

  • Sempre que rebem una nova notificació de Trello i Gmail, es produeix un retard enorme per enviar un esdeveniment des d’IFTTT i enviar una ordre des del fotó. Haurien de trigar menys de 5 minuts a avisar les bombetes intel·ligents.
  • De vegades, l’applet de Gmail s’apaga per si mateix perquè cal tornar a connectar-lo o actualitzar-lo.

Recomanat: