Visuele meldingswaarschuwing: 9 stappen

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

Deze tutorial leert je hoe je moet coderen om Phillips Hue te waarschuwen. Het zou erg handig zijn voor mensen die doof en slechthorend zijn, slechtziend of zintuiglijk gehandicapt zijn. Visual Notification Alert is om de gebruikers te informeren na het ontvangen van meldingen van e-mail, Facebook, Trello of iets dergelijks. De Hue LED-lamp begint te waarschuwen door het licht te laten knipperen.

Het Photon Particle is een kleine, herprogrammeerbare Wi-Fi-ontwikkelkit voor het maken van prototypes en het schalen van uw Internet of Things-product.

Stap 1: Een lijst met hardware en software

U heeft hardware en software nodig om de codes voor Visual Notification Alert te ontwikkelen.

Hardware

• Deeltjesmaker Kit
• Philips Hue - Starter Kit (3 LED-lampen en 1 Hue Bridge)

Software

• Algemene informatie over het deeltjesfoton
• Particle Web IDE (Build) *Vereist om in te loggen*
• IFTTT (als dit dan dat)

Stap 2: Installatie

Je zou je Particle Maker Kit moeten hebben, die alles bevat, zoals sensoren, jumperdraden, LED's, weerstanden en meer. U kunt meer informatie over Particle Photon lezen.

Voordat u uw foton aansluit, moet u de status van de LED's op de foton weten. Hier is de informatie over de LED-status.

Verbind uw foton

1. Steek de USB-kabel in uw stroombron. (Uw computer werkt perfect voor dit doel). Uw deeltjesapparaat heeft uw computer niet nodig om verbinding te maken met wifi.
2. Wanneer het is aangesloten, moet de RGB-LED op uw fotonapparaat blauw beginnen te knipperen. Als uw apparaat niet blauw knippert, houdt u de SETUP-knop 10 seconden ingedrukt en laat u de SETUP-knop los.
3. Log in op Setup Particle als je al een account hebt. Als je geen account hebt, maak dan het account voor Photon aan.
4. Klik op Photon/P-serie.
5. Nadat u op VOLGENDE hebt geklikt, krijgt u een bestand te zien (photonsetup.html)
6. Klik op DOORGAAN MET EEN LOKAAL BESTAND om een bestand te downloaden.

Na het openen van een bestand

1. Verbind uw pc met de Photon door verbinding te maken met het netwerk genaamd PHOTON-…
2. Configureer uw wifi-inloggegevens. Opmerking: als u uw inloggegevens verkeerd typt, knippert de Photon donkerblauw of groen. U moet het proces opnieuw doorlopen door de pagina te vernieuwen of op het proces opnieuw proberen te klikken.
3. Hernoem uw apparaat. U ziet een bevestiging of het apparaat is geclaimd of niet.

Voordat u naar het volgende deel gaat, als uw Photon-apparaat een ademende cyaan heeft, is het succesvol op internet en Photon Cloud! We gaan verder met de Particle IDE, Build.

Stap 3: Coderen in Particle Web IDE

U moet uw account aanmaken voor Particle IDE, Build. Als je al een account hebt, prima! Log in Particle IDE.

We willen testen of de LED op het bord knippert. Er is de kleine blauwe LED op je Photon board. Het ligt naast D7. Je kunt het bestand downloaden, getstarted-blinknet.ino, en de codes daar bekijken. Er is een verklaring. Klik op deze link om de broncode in de Particle Web IDE te openen. Als D7 (kleine blauwe LED) knippert, gefeliciteerd, je hebt zojuist een LED geknipperd met je Particle-apparaat! Als je meer wilt weten over Photon, zoals het knipperen van verschillende LED's, het uitlezen van de fotosensor, etc, dan is hier de link.

Nu gaan we over naar de Philips Hue.

Stap 4: Philips Hue

Ter referentie: Klik hier over Phillips Hue API.

Voordat u toegang krijgt tot de Philips Hue API-documentatie, moet u zich registreren als ontwikkelaar. Het is gratis, maar je moet wel de algemene voorwaarden accepteren.

1. Zorg er eerst voor dat je Philips Hue Bridge (eerste afbeelding) goed is aangesloten op je netwerk. Test Hue App (Hue App is beschikbaar op iOS en Android) die het licht op hetzelfde netwerk bestuurt.

Als u het met succes test, moet u het IP-adres van de bridge op uw netwerk vinden. Gebruik de broker-serverdetectie van Philips door naar www.meethue.com/api/nupnp te gaan.

Wanneer u uw IP-adres vindt, typt u het in de adresbalk van uw browser met debug/clip.html toegevoegd aan de URL: https://bridge IP-adres/debug/clip.html. U zou een interface (tweede afbeelding) zoals deze moeten zien. Opmerking: Vervang "bridge IP Address" door uw IP-adres.

2. Laten we een eenvoudige opdracht uitvoeren en informatie krijgen over uw hue-systeem. Vul de onderstaande gegevens in, laat de body leeg en druk op de GET-knop. Je zou een interface (derde afbeelding) zoals deze moeten zien. U zou een foutmelding moeten krijgen. Opmerking: Vervang "bridge IP Address" door uw IP-adres.

Adres: https://bridge IP-adres/api/newdeveloperBody:Methode: GETCongratulations! Je stuurt gewoon je eerste commando!3. Vul vervolgens onderstaande gegevens in en druk op de POST-knop. Opmerking: Vervang "bridge IP Address" door uw IP-adres en "phonetype name" door uw eigen telefoon.

Adres: https://bridge IP-adres/apiBody: {"devicetype":"my_hue_app#phonetype name"}Methode: POST

De link helpt om het voor u te maken. Als je op de POST-knop drukt, zou je een foutmelding moeten krijgen (vierde afbeelding) om je te laten weten dat je op de link-knop op de Hue Bridge moet drukken. Dit is de beveiligingsstap, zodat alleen apps of servers die u wilt uw lampen kunnen bedienen. Door op de link op de Hue Bridge te drukken, bewijst het dat de gebruiker fysieke toegang heeft tot de Hue Bridge.

Als je een succesvolle reactie krijgt (vijfde foto), gefeliciteerd! U heeft zojuist een geautoriseerde gebruiker aangemaakt, die wij vanaf nu zullen gebruiken.

4. Laatste voorbeeld voordat we het in het fotondeeltje integreren, zorg ervoor dat een van je lichten zichtbaar en aan is, en je moet weten welk nummerlicht is. Wijzig de URL in /api/gebruikersnaam/lights/light number/state (wijzig het light-nummer [het kan 1, 2, 3 of ?] zijn), en stuur een PUT-knop met de volgende gegevens:

Opmerking: zorg ervoor dat u het IP-adres, de gebruikersnaam en het lichtnummer van de bridge wijzigt

Adres: https://bridge IP-adres/api/gebruikersnaam/lights/light number/state

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

Methode: PUTJe zou je licht van kleur moeten zien veranderen:

Stap 5: Photon instellen met een knop en draden

Voordat we meer codes in Photon Web IDE ontwikkelen, willen we onze Photon instellen met een knop en draden. Je hebt verschillende knoppen en veel draden uit je Particle Starter Kit. Ik heb twee afbeeldingen bijgevoegd, één is een diagram en één is een werkelijke foto.

1. Zorg ervoor dat je je foton op het breadboard plaatst.
2. Plaats een knop aan de onderkant van het breadboard zoals weergegeven in de afbeelding.
3. Steek een uiteinde van de zwarte draad in J4 (GND) en steek een ander uiteinde van dezelfde zwarte draad in J30.
4. Steek een uiteinde van de gele draad in J7 (D5) en steek een ander uiteinde van dezelfde gele draad in J28.

Als ze overeenkomen met mijn afbeelding die ik je laat zien, dan zit je goed!

Stap 6: Codes schrijven in fotondeeltjes

We zullen onze eerste applicatie maken in de Photon Particle - Web IDE.

1. Ga naar https://build.particle.io/build en log in (registreer als je nog niet hebt aangemaakt)
2. Typ "Visuele meldingswaarschuwing" onder Huidige app.
3. Druk op de Enter-knop (zie de eerste afbeelding).

De applicatie wordt opgeslagen in Photon Particle Cloud. De functie setup() wordt aangeroepen wanneer de toepassing eenmaal wordt gestart en uitgevoerd. De functie loop() doet precies wat hij doet en loopt achter elkaar door, zodat uw toepassing kan veranderen en reageren.

HttpClient voor het fotondeeltje toevoegen:

1. Klik op Bibliotheken linksonder in de Web IDE.
2. Typ "HttpClient" in de zoekbalk.
3. Klik op "Opnemen in project" in de blauwe knop.
4. Klik op de VisualNotificationAlert (het verwijdert de spaties nadat u de app hebt gemaakt).
5. Klik op Bevestigen.

Nu heeft het HttpClient toegevoegd aan het begin van de Web IDE.

/ Dit #include-statement is automatisch toegevoegd door de Particle IDE.#include

/*** Configuratie voor Philip Hue ***

/ 1. Vervang dit door uw API-gebruikersnaam uit Stap 1 const String API_USERNAME = "Uw API-gebruikersnaam"; // 2. Vervang dit door het IP-adres van uw bridge uit stap 1 IPAddress hueIP(x, x, x, x); // 3. Vervang door het pad naar de lichten die u wilt bedienen. Gebruik de webpagina uit stap 1 om te controleren of deze werkt. // Zorg ervoor dat je het nummer van de Philip Hue-lamp herkent // /lights/NUMBER/state const String LIGHT_PATH = "/lights/Number/state"; // 4. Vervang dit door de tekst van uw verzoek om de lichten aan te doen. const String REQUEST_BODY_ON = "{"on\":true, \"bri\":254}"; // 5. Vervang dit door de tekst van uw verzoek om de lichten uit te doen. const String REQUEST_BODY_OFF = "{"aan\":false, \"bri\":254}"; /*** END Configuratie voor Philip Hue *** / Knop const int BUTTON_PIN = D5; // HttpClient-object dat wordt gebruikt om HTTP-verzoeken te doen aan de Hue bridge HttpClient http; // Standaardheader voor HTTP-verzoeken http_header_t headers = { { "Accepteren", "*/*"}, { NULL, NULL } // OPMERKING: Beëindig headers altijd met NULL }; // Verzoek- en antwoordobjecten http_request_t request; http_respons_t antwoord; void setup() { Serial.begin(9600); verzoek.ip = hueIP; verzoek.poort = 80; // Ingebouwde LED als indicatielampje voor gedetecteerde tap pinMode (D7, OUTPUT); // Voor invoer definiëren we de BUTTON_UP als een invoer-pullup. Dit maakt gebruik van een interne pullup-weerstand // om consistente uitlezingen van het apparaat te beheren. pinMode (BUTTON_PIN, INPUT_PULLUP); // stelt pin in als invoer // We "abonneren" ons op onze IFTTT-gebeurtenis genaamd Button, zodat we er evenementen voor krijgen Particle.subscribe ("RIT_Gmail", myHandler); Particle.subscribe("Trello", mijnHandler); } // setup() function void loop() { /* * Dit is een deel van het testen of het lampje waarschuwt */ // ontdek of de knop is ingedrukt of niet door ervan te lezen. int buttonState = digitalRead (BUTTON_PIN); // Wanneer de knop wordt INGEDRUKT, krijgen we een LAAG signaal. // Wanneer de knop NIET wordt INGEDRUKT, krijgen we een HIGH. if(buttonState == LAAG) gmailAlert(); } // loop() function void printInfo() { Serial.print("Applicatie>\tResponse status: "); Serial.println(respons.status); Serial.print("Toepassing>\tHTTP-antwoordtekst: "); Serial.println(respons.body); } // printInfo() functie int i = 0; // De functie die de gebeurtenis van IFTTT void myHandler (const char * event, const char * data) afhandelt { // Test voor afdrukken in seriële Serial.print (event); Serial.print(", gegevens: "); if (gegevens) Serial.println (gegevens); else Serial.println ("NULL"); if(strcmp(gebeurtenis, "Trello") == 0) { trelloAlert(); } else if(strcmp(event, "Gmail") == 0) { gmailAlert(); } } // myHandler() functie /** De tintwaarde om licht op in te stellen. * De tintwaarde is een omhullende waarde tussen 0 en 65535. * Zowel 0 als 65535 zijn rood, * 25500 is groen en 46920 is blauw. */ /** * Het waarschuwt met behulp van de Philips Hue Smart Bulb met de blauwe kleur. Het zal 15 seconden waarschuwen. */ void trelloAlert() { String trello_body_alert = "{"on\": true, \"bri\": 255, \"sat\": 255, \"hue\": 46920, \"alert\": \"lselect\"}"; sendHttpPut(trello_body_alert); } /** * Het waarschuwt met behulp van de Philips Hue Smart Bulb met de rode kleur. Het zal 15 seconden waarschuwen. */ void gmailAlert() { String gmail_body_alert = "{"on\":true, \"sat\":254, \"bri\":254, \"hue\":65535, \"alert\": \"lselect\"}"; sendHttpPut(gmail_body_alert); } /** * We sturen de PUT naar de Philips Hue * @param httpPutBody de body van de string */ void sendHttpPut(String httpPutBody) { request.path = "/api/" + API_USERNAME + LIGHT_PATH; request.body = httpPutBody; http.put(verzoek, antwoord, headers); }

Wanneer u klaar bent met het typen of kopiëren van de code naar uw Photon Particle Web IDE, klikt u op het vinkje (Verifiëren) in de linkerbovenhoek van de balk. Als het zeer succesvol voldoet, gaan we naar de volgende stap!

Stap 7: Code uploaden naar de Photon

Deze stap is heel eenvoudig. Voordat we de codes uploaden naar de Photon:

1. Sluit de USB-kabel aan op uw stroombron (ik raad laptop aan).
2. Zorg ervoor dat uw foton de ademende cyaan LED heeft. Als het geen cyaan ademt of een andere kleur heeft, ga dan naar Stap 2: Installatie
3. Klik op het pictogram Verlichting in de Photon Particle Web IDE.
4. Wanneer het de codes naar de Photon uploadt, zou je magenta moeten zien. Dit betekent dat de code wordt geüpload naar de code. Daarna knippert het snel groen en keert terug naar het ademen van cyaan.
5. Druk op de knop om te zien of uw Philips Smart Bulb knippert (of waarschuwt).

Als Philips Smart Bulb waarschuwt, gefeliciteerd! We zijn bijna klaar!

We gaan verder met het softwaregedeelte.

Stap 8: Applets maken van IFTTT (als dit, dan dat)

We zullen de applets maken van de IFTTT-website (If This, Then That). De applets publiceren een gebeurtenis naar de Photon en vervolgens stuurt de Photon een commando naar de Philips Hue Bridge om de slimme lampen te waarschuwen.

Voor dit project zullen we Trello en Gmail gebruiken om evenementen naar de Photon te publiceren.

Ga naar https://ifttt.com/ en meld je aan.

Trello

1. Klik bovenaan op Mijn applets.
2. Klik op Nieuwe applet.
3. Klik + dit in blauwe tekst.
4. Typ Trello in de zoekbalk en klik.
5. Klik op Aan mij toegewezen kaart.
6. Selecteer je bord van Trello.
7. Klik +dat in blauwe tekst.
8. Typ Particle in de zoekbalk en klik.
9. Klik op Een evenement publiceren.
10. Typ "Trello" in Dan publiceren (naam evenement).
11. Selecteer openbaar.

Gmail (Opmerking: ze gebruiken je e-mailadres wanneer je je aanmeldt)

1. Klik bovenaan op Mijn applets.
2. Klik op Nieuwe applet.
3. Klik + dit in blauwe tekst.
4. Typ Gmail in de zoekbalk en klik op
5. Selecteer Elke nieuwe e-mail in inbox
6. Klik +dat in blauwe tekst.
7. Typ Particle in de zoekbalk en klik op
8. Klik op Een evenement publiceren.
9. Typ "Gmail" in Dan publiceren (Naam gebeurtenis).
10. Selecteer openbaar.

Zodra je twee applets hebt, Trello en Gmail werken, gaan we verder met de laatste stap.

Stap 9: Eindelijk, testen

We zullen testen om gebeurtenissen van Applets naar de Photon te publiceren. Zorg ervoor dat uw applets zijn ingeschakeld.

Trello

Wanneer iemand een nieuwe kaart in Trello maakt, zullen ze je in de kaart toewijzen (taggen). IFTTT luistert dat en begint een evenement naar de Photon te publiceren. Vervolgens stuurt de Photon een commando naar de Philip Hue Bridge om slimme lampen te waarschuwen.

Gmail

Wanneer u een nieuwe e-mail in uw inbox ontvangt, luistert IFTTT ernaar en begint een evenement naar de Photon te publiceren. Vervolgens stuurt de Photon een commando naar de Philip Hue Bridge om slimme lampen te waarschuwen.

Uitdagingen

• Telkens wanneer we een nieuwe melding krijgen van Trello en Gmail, is er een enorme vertraging voor het verzenden van een evenement vanuit IFTTT en het verzenden van een opdracht van de Photon. Het duurt minder dan 5 minuten om de slimme lampen te waarschuwen.
• De Gmail-applet wordt soms vanzelf uitgeschakeld omdat de applet opnieuw moet worden aangesloten of bijgewerkt.