การแจ้งเตือนด้วยภาพ: 9 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:06

บทแนะนำนี้จะสอนวิธีเขียนโค้ดเพื่อแจ้งให้ Phillips Hue แจ้งเตือน มันจะมีประโยชน์มากสำหรับผู้ที่หูหนวกและมีปัญหาทางการได้ยิน มีสายตาเลือนรางหรือมีความบกพร่องทางประสาทสัมผัส Visual Notification Alert คือการแจ้งเตือนผู้ใช้หลังจากได้รับการแจ้งเตือนจากอีเมล, Facebook, Trello หรืออื่นๆ ที่คล้ายกัน หลอดไฟ Hue LED เริ่มเตือนด้วยการกะพริบไฟ

Photon Particle เป็นชุดพัฒนา Wi-Fi ขนาดเล็กที่สามารถตั้งโปรแกรมซ้ำได้สำหรับการสร้างต้นแบบและปรับขนาดผลิตภัณฑ์ Internet of Things ของคุณ

ขั้นตอนที่ 1: รายการฮาร์ดแวร์และซอฟต์แวร์

คุณต้องใช้ฮาร์ดแวร์และซอฟต์แวร์เพื่อพัฒนารหัสสำหรับ Visual Notification Alert

ฮาร์ดแวร์

• ชุดเครื่องทำอนุภาค
• Philips Hue - ชุดเริ่มต้น (หลอดไฟ LED 3 ดวงและสะพาน Hue 1 ดวง)

ซอฟต์แวร์

• ข้อมูลทั่วไปของอนุภาคโฟตอน
• Particle Web IDE (บิวด์) *จำเป็นสำหรับการเข้าสู่ระบบ*
• IFTTT (ถ้าเป็นอย่างนั้น)

ขั้นตอนที่ 2: การติดตั้ง

คุณควรมี Particle Maker Kit ซึ่งมีทุกอย่าง เช่น เซ็นเซอร์ สายจัมเปอร์ ไฟ LED ตัวต้านทาน และอื่นๆ คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับอนุภาคโฟตอน

ก่อนที่คุณจะเชื่อมต่อโฟตอน คุณจำเป็นต้องทราบสถานะของไฟ LED บนโฟตอน นี่คือข้อมูลเกี่ยวกับสถานะ LED

เชื่อมต่อโฟตอนของคุณ

1. เสียบสาย USB เข้ากับแหล่งพลังงานของคุณ (คอมพิวเตอร์ของคุณทำงานได้อย่างสมบูรณ์เพื่อการนี้) อุปกรณ์อนุภาคของคุณไม่ต้องการคอมพิวเตอร์ของคุณเพื่อเชื่อมต่อกับ wifi
2. เมื่อเสียบปลั๊กแล้ว ไฟ LED RGB บนอุปกรณ์โฟตอนของคุณควรเริ่มกะพริบเป็นสีน้ำเงิน หากอุปกรณ์ของคุณไม่กะพริบเป็นสีน้ำเงิน ให้กดปุ่ม SETUP ค้างไว้ 10 วินาที จากนั้นปล่อยปุ่ม SETUP
3. เข้าสู่ระบบ Setup Particle หากคุณมีบัญชีอยู่แล้ว หากคุณไม่มีบัญชี ให้สร้างบัญชีสำหรับโฟตอน
4. คลิกที่ Photon/P Series
5. หลังจากคลิกที่ NEXT คุณควรได้รับไฟล์ (photonsetup.html)
6. คลิก ดำเนินการต่อด้วยไฟล์ในเครื่อง เพื่อดาวน์โหลดไฟล์

หลังจากเปิดไฟล์

1. เชื่อมต่อพีซีของคุณกับ Photon โดยเชื่อมต่อกับเครือข่ายชื่อ PHOTON-…
2. กำหนดค่าข้อมูลรับรอง Wi-Fi ของคุณ หมายเหตุ: หากคุณพิมพ์ข้อมูลประจำตัวของคุณผิด Photon จะกะพริบเป็นสีน้ำเงินเข้มหรือสีเขียว คุณต้องทำตามขั้นตอนอีกครั้งโดยรีเฟรชหน้าหรือคลิกที่ส่วนกระบวนการลองใหม่
3. เปลี่ยนชื่ออุปกรณ์ของคุณ คุณจะเห็นการยืนยันว่าอุปกรณ์ถูกอ้างสิทธิ์หรือไม่

ก่อนที่จะย้ายไปยังส่วนถัดไป ถ้าอุปกรณ์โฟตอนของคุณมีสีฟ้าหายใจ แสดงว่าประสบความสำเร็จในอินเทอร์เน็ตและโฟตอนคลาวด์! เรากำลังย้ายไปที่ Particle IDE, Build

ขั้นตอนที่ 3: การเข้ารหัสใน Particle Web IDE

คุณต้องสร้างบัญชีของคุณสำหรับ Particle IDE, Build หากคุณมีบัญชีอยู่แล้ว ก็เยี่ยมไปเลย! ลงชื่อเข้าใช้ Particle IDE

เราต้องการทดสอบเพื่อดูว่าไฟ LED กะพริบบนบอร์ดหรือไม่ มีไฟ LED สีฟ้าเล็กๆ บนบอร์ดโฟตอนของคุณ อยู่ติดกับ D7 คุณสามารถดาวน์โหลดไฟล์ Gettingstarted-blinknet.ino และดูรหัสได้ที่นั่น มีคำอธิบาย คลิกลิงก์นี้เพื่อเปิดซอร์สโค้ดใน Particle Web IDE หาก D7 (ไฟ LED สีน้ำเงินเล็กน้อย) กะพริบ ยินดีด้วย คุณเพิ่งกะพริบ LED โดยใช้อุปกรณ์อนุภาคของคุณ! หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโฟตอน เช่น ไฟ LED ต่างๆ กะพริบ การอ่านเซ็นเซอร์ภาพถ่าย ฯลฯ ให้ไปที่ลิงก์นี้

ตอนนี้เราจะย้ายไปที่ Philips Hue

ขั้นตอนที่ 4: Philips Hue

สำหรับการอ้างอิง: คลิกที่นี่เกี่ยวกับ Phillips Hue API

ก่อนที่คุณจะสามารถเข้าถึงเอกสาร Philips Hue API คุณจะต้องลงทะเบียนเป็นนักพัฒนา ฟรี แต่คุณต้องยอมรับข้อกำหนดและเงื่อนไข

1. ก่อนอื่น ตรวจสอบให้แน่ใจว่า Philips Hue Bridge (ภาพแรก) ของคุณเชื่อมต่อกับเครือข่ายของคุณทำงานอย่างถูกต้อง แอปทดสอบ Hue (แอป Hue พร้อมใช้งานบน iOS และ Android) ที่ควบคุมแสงบนเครือข่ายเดียวกัน

หากคุณทดสอบสำเร็จ คุณจะต้องค้นหาที่อยู่ IP ของบริดจ์บนเครือข่ายของคุณ ใช้การค้นพบเซิร์ฟเวอร์นายหน้าของ Philips โดยไปที่ www.meethue.com/api/nupnp

เมื่อคุณพบที่อยู่ IP ของคุณ ให้พิมพ์ลงในแถบที่อยู่ของเบราว์เซอร์ด้วย debug/clip.html ต่อท้าย URL: https://bridge IP Address/debug/clip.html คุณควรเห็นอินเทอร์เฟซ (ภาพที่สอง) แบบนี้. หมายเหตุ: แทนที่ "ที่อยู่ IP ของบริดจ์" เป็นที่อยู่ IP ของคุณ

2. มาทำคำสั่งง่ายๆ และรับข้อมูลเกี่ยวกับระบบสีของคุณ กรอกรายละเอียดด้านล่างโดยปล่อยให้เนื้อหาว่างแล้วกดปุ่ม GET คุณควรเห็นอินเทอร์เฟซ (รูปที่สาม) แบบนี้ คุณควรได้รับข้อความแสดงข้อผิดพลาด หมายเหตุ: แทนที่ "ที่อยู่ IP ของบริดจ์" เป็นที่อยู่ IP ของคุณ

ที่อยู่: https://bridge IP Address/api/newdeveloperBody:Method: GETCongratulations! คุณเพียงแค่ส่งคำสั่งแรกของคุณ!3. จากนั้น กรอกข้อมูลด้านล่างแล้วกดปุ่ม POST หมายเหตุ: แทนที่ "ที่อยู่ IP บริดจ์" เป็นที่อยู่ IP ของคุณและ "ชื่อประเภทโทรศัพท์" เป็นโทรศัพท์ของคุณ

ที่อยู่: https://bridge IP address/apiBody: {"devicetype":"my_hue_app#phonetype name"}วิธีการ: POST

ลิงค์ช่วยสร้างมันให้กับคุณ เมื่อคุณกดปุ่ม POST คุณควรได้รับข้อความแสดงข้อผิดพลาดกลับมา (ภาพที่สี่) เพื่อแจ้งให้คุณทราบว่าคุณต้องกดปุ่มลิงก์บน Hue Bridge นี่คือขั้นตอนการรักษาความปลอดภัยเพื่อให้เฉพาะแอปหรือเซิร์ฟเวอร์ที่คุณต้องการควบคุมไฟของคุณ การกดลิงก์บน Hue Bridge เป็นการพิสูจน์ว่าผู้ใช้มีสิทธิ์เข้าถึง Hue Bridge ทางกายภาพ

เมื่อคุณได้รับการตอบรับที่ประสบความสำเร็จ (ภาพที่ห้า) ยินดีด้วย! คุณเพิ่งสร้างผู้ใช้ที่ได้รับอนุญาต ซึ่งเราจะใช้ตั้งแต่บัดนี้เป็นต้นไป

4. ตัวอย่างสุดท้ายก่อนที่เราจะรวมเข้ากับอนุภาคโฟตอน ตรวจสอบให้แน่ใจว่าไฟดวงใดดวงหนึ่งของคุณมองเห็นได้และเปิดอยู่ และคุณจำเป็นต้องรู้ว่าแสงตัวเลขใดคือ เปลี่ยน URL เป็น /api/username/lights/light number/state (เปลี่ยนหมายเลขไฟ [อาจเป็น 1, 2, 3 หรือ ?]) และส่งปุ่ม PUT พร้อมข้อมูลต่อไปนี้:

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนที่อยู่ IP ของบริดจ์ ชื่อผู้ใช้ และหมายเลขไลท์

ที่อยู่: https://bridge IP address/api/username/lights/light number/state

เนื้อหา: {"on":true, "sat":254, "bri":254, "hue":10000}

วิธีการ: PUTคุณควรเห็นแสงของคุณเปลี่ยนสี:

ขั้นตอนที่ 5: การตั้งค่าโฟตอนด้วยปุ่มและสายไฟ

ก่อนที่เราจะพัฒนาโค้ดเพิ่มเติมใน Photon Web IDE เราต้องการตั้งค่าโฟตอนด้วยปุ่มและสายไฟ คุณมีปุ่มหลายปุ่มและสายไฟหลายเส้นจาก Particle Starter Kit ของคุณ ฉันได้แนบรูปภาพสองรูป หนึ่งรูปคือไดอะแกรม และอีกอันคือ ภาพจริง.

1. ตรวจสอบให้แน่ใจว่าคุณวางโฟตอนของคุณบนเขียงหั่นขนม
2. วางปุ่มที่ด้านล่างของเขียงหั่นขนมตามที่แสดงในภาพ
3. วางปลายสายสีดำใน J4 (GND) และใส่ปลายสายสีดำอีกด้านใน J30
4. วางปลายสายสีเหลืองใน J7 (D5) และใส่ปลายสายสีเหลืองอีกด้านใน J28

ถ้าตรงกับรูปที่ฉันแสดง แสดงว่าคุณเก่ง!

ขั้นตอนที่ 6: การเขียนรหัสในอนุภาคโฟตอน

เราจะสร้างแอปพลิเคชั่นแรกของเราใน Photon Particle - Web IDE

1. ไปที่ https://build.particle.io/build และเข้าสู่ระบบ (ลงทะเบียนหากยังไม่ได้สร้าง)
2. พิมพ์ "Visual Notification Alert" ใต้แอปปัจจุบัน
3. กดปุ่ม Enter (ดูภาพแรก)

แอปพลิเคชันถูกบันทึกไว้ใน Photon Particle Cloud ฟังก์ชัน setup() ถูกเรียกเมื่อแอปพลิเคชันเริ่มทำงานและเรียกใช้ครั้งเดียว ฟังก์ชัน loop() ทำหน้าที่อย่างแม่นยำและวนซ้ำอย่างต่อเนื่อง ทำให้แอปพลิเคชันของคุณสามารถเปลี่ยนแปลงและตอบสนองได้

ในการเพิ่ม HttpClient สำหรับอนุภาคโฟตอน:

1. คลิก Libraries จากด้านล่างซ้ายของ Web IDE
2. พิมพ์ "HttpClient" ในแถบค้นหา
3. คลิก "รวมในโครงการ" ในปุ่มสีน้ำเงิน
4. คลิก VisualNotificationAlert (จะลบช่องว่างหลังจากที่คุณสร้างแอป)
5. คลิกยืนยัน

ตอนนี้ได้เพิ่ม HttpClient ที่จุดเริ่มต้นของ Web IDE

/ คำสั่ง #include นี้ถูกเพิ่มโดยอัตโนมัติโดย Particle IDE#include

/*** การกำหนดค่าสำหรับ Philip Hue ***

/ 1. แทนที่ด้วยชื่อผู้ใช้ API ของคุณจากขั้นตอนที่ 1 const String API_USERNAME = "ชื่อผู้ใช้ API ของคุณ"; // 2. แทนที่ด้วยที่อยู่ IP ของบริดจ์จากขั้นตอนที่ 1 IPAddress hueIP(x, x, x, x); // 3. แทนที่ด้วยเส้นทางไปยังไฟที่คุณต้องการควบคุม ใช้หน้าเว็บจากขั้นตอนที่ 1 เพื่อตรวจสอบการทำงาน // ตรวจสอบให้แน่ใจว่าคุณจำหมายเลขของ Philip Hue light // /lights/NUMBER/state const String LIGHT_PATH = "/lights/Number/state"; // 4. แทนที่สิ่งนี้ด้วยตัวคำขอของคุณในการเปิดไฟ const String REQUEST_BODY_ON = "{"on\":true, \"bri\":254}"; // 5. แทนที่สิ่งนี้ด้วยตัวคำขอของคุณสำหรับการปิดไฟ const String REQUEST_BODY_OFF = "{"on\":false, \"bri\":254}"; /*** END การกำหนดค่าสำหรับ Philip Hue *** / ปุ่ม const int BUTTON_PIN = D5; // ออบเจ็กต์ HttpClient ใช้สำหรับส่งคำขอ HTTP ไปยัง Hue bridge HttpClient http; // ส่วนหัวเริ่มต้นสำหรับคำขอ HTTP http_header_t ส่วนหัว = { { { "ยอมรับ", "*/*"}, { NULL, NULL } // หมายเหตุ: สิ้นสุดส่วนหัวเสมอจะเป็น NULL }; // คำขอและการตอบสนองวัตถุ http_request_t คำขอ; http_response_t ตอบกลับ; การตั้งค่าเป็นโมฆะ () { Serial.begin (9600); request.ip = hueIP; request.port = 80; // LED ออนบอร์ดเป็นไฟแสดงสถานะสำหรับ pinMode แตะสัมผัส (D7, OUTPUT); // สำหรับอินพุต เรากำหนด BUTTON_UP เป็น input-pullup สิ่งนี้ใช้ตัวต้านทานแบบดึงขึ้นภายใน // เพื่อจัดการการอ่านที่สอดคล้องกันจากอุปกรณ์ โหมดพิน (BUTTON_PIN, INPUT_PULLUP); // ตั้งค่าพินเป็นอินพุต // เรา "สมัคร" กับเหตุการณ์ IFTTT ของเราที่เรียกว่า Button เพื่อให้เราได้รับเหตุการณ์สำหรับมัน Particle.subscribe("RIT_Gmail", myHandler); Particle.subscribe("Trello", myHandler); } // setup() function void loop() { /* * เป็นการทดสอบว่าไฟแจ้งเตือนหรือไม่ */ // ค้นหาว่ากดปุ่มหรือไม่โดยการอ่านจากปุ่มนั้น int buttonState = digitalRead (BUTTON_PIN); // เมื่อกดปุ่มเราจะได้รับสัญญาณ LOW // เมื่อปุ่มไม่ถูกผลัก, เราจะได้ค่า HIGH. ถ้า(buttonState == ต่ำ) gmailAlert(); } // loop() ฟังก์ชั่น void printInfo() { Serial.print("Application>\tResponse status: "); Serial.println (response.status); Serial.print("Application>\tHTTP เนื้อหาการตอบกลับ: "); Serial.println(response.body); } // printInfo() ฟังก์ชัน int i = 0; // ฟังก์ชันที่จัดการเหตุการณ์จาก IFTTT void myHandler (const char *event, const char *data) { // ทดสอบการพิมพ์ใน serial Serial.print (เหตุการณ์); Serial.print(", ข้อมูล: "); ถ้า (ข้อมูล) Serial.println (ข้อมูล); อื่น Serial.println("NULL"); if(strcmp(เหตุการณ์, "Trello") == 0) { trelloAlert(); } อื่น if(strcmp(เหตุการณ์, "Gmail") == 0) { gmailAlert(); } } // myHandler() ฟังก์ชัน /** ค่าฮิวที่ต้องการตั้งค่าให้สว่าง * ค่าฮิวคือค่าการตัดคำระหว่าง 0 ถึง 65535 * ทั้ง 0 และ 65535 เป็นสีแดง * 25500 เป็นสีเขียว และ 46920 เป็นสีน้ำเงิน */ /** * มันจะแจ้งเตือนโดยใช้ Philips Hue Smart Bulb โดยใช้สีน้ำเงิน มันจะแจ้งเตือนเป็นเวลา 15 วินาที */ void trelloAlert() { String trello_body_alert = "{"on\": true, \"bri\": 255, \"sat\": 255, \"hue\": 46920, \"alert\": \"lเลือก\"}"; sendHttpPut(trello_body_alert); } /** * มันจะแจ้งเตือนโดยใช้ Philips Hue Smart Bulb โดยใช้สีแดง มันจะแจ้งเตือนเป็นเวลา 15 วินาที */ void gmailAlert() { String gmail_body_alert = "{"on\":true, \"sat\":254, \"bri\":254, \"hue\":65535, \"alert\": \"lเลือก\"}"; sendHttpPut(gmail_body_alert); } /** * เราจะส่ง PUT ไปยัง Philips Hue * @param httpPutBody เนื้อหาของสตริง */ void sendHttpPut(String httpPutBody) { request.path = "/api/" + API_USERNAME + LIGHT_PATH; request.body = httpPutBody; http.put(คำขอ, ตอบกลับ, ส่วนหัว); }

เมื่อคุณพิมพ์หรือคัดลอกโค้ดไปยัง Photon Particle Web IDE ของคุณเสร็จแล้ว ให้คลิกไอคอนตรวจสอบ (ยืนยัน) ที่ด้านบนซ้ายของแถบ หากเป็นไปตามข้อกำหนด เราจะไปยังขั้นตอนถัดไป!

ขั้นตอนที่ 7: อัปโหลดรหัสไปยังโฟตอน

ขั้นตอนนี้ง่ายมาก ก่อนที่เราจะอัปโหลดรหัสไปยังโฟตอน:

1. เสียบสาย USB เข้ากับแหล่งพลังงานของคุณ (ฉันแนะนำแล็ปท็อป)
2. ตรวจสอบให้แน่ใจว่าโฟตอนของคุณมีไฟ LED สีฟ้าสำหรับหายใจ ถ้าไม่ใช่สีฟ้าหายใจหรือมีสีต่างกัน ไปที่ขั้นตอนที่ 2: การติดตั้ง
3. คลิกไอคอนแสงสว่างจาก Photon Particle Web IDE
4. เมื่ออัปโหลดรหัสไปยังโฟตอน คุณจะเห็นสีม่วงแดง หมายความว่ารหัสเริ่มถูกอัปโหลดไปยังรหัส จากนั้นจะกะพริบเป็นสีเขียวอย่างรวดเร็ว จากนั้นกลับสู่การหายใจเป็นสีฟ้า
5. กดปุ่มเพื่อดูว่า Philips Smart Bulb กะพริบ (หรือแจ้งเตือน) หรือไม่

หาก Philips Smart Bulb แจ้งเตือน ยินดีด้วย! เราใกล้เสร็จแล้ว!

เราจะไปยังส่วนซอฟต์แวร์

ขั้นตอนที่ 8: การสร้างแอปเพล็ตจาก IFTTT (ถ้าเป็นอย่างนั้น)

เราจะสร้างแอปเพล็ตจากเว็บไซต์ IFTTT (ถ้าเป็นอย่างนั้น) แอพเพล็ตจะเผยแพร่กิจกรรมไปยัง Photon จากนั้น Photon จะส่งคำสั่งไปยัง Philips Hue Bridge เพื่อเตือนหลอดไฟอัจฉริยะ

สำหรับโครงการนี้ เราจะใช้ Trello และ Gmail เพื่อเผยแพร่กิจกรรมไปยังโฟตอน

ไปที่ https://ifttt.com/ และลงทะเบียน

Trello

1. คลิก My Applets ที่ด้านบน
2. คลิกแอปเพล็ตใหม่
3. คลิก + นี่ในข้อความสีน้ำเงิน
4. พิมพ์ Trello ในแถบค้นหาแล้วคลิก
5. คลิกบัตรที่มอบหมายให้ฉัน
6. เลือกบอร์ดของคุณจาก Trello
7. คลิก +นั่น ในข้อความสีน้ำเงิน
8. พิมพ์อนุภาคในแถบค้นหาแล้วคลิก
9. คลิกเผยแพร่กิจกรรม
10. พิมพ์ "Trello" ใน จากนั้นเผยแพร่ (ชื่อกิจกรรม)
11. เลือกสาธารณะ

Gmail (หมายเหตุ: พวกเขาจะใช้ที่อยู่อีเมลของคุณเมื่อคุณสมัครใช้งาน)

1. คลิก My Applets ที่ด้านบน
2. คลิกแอปเพล็ตใหม่
3. คลิก + นี่ในข้อความสีน้ำเงิน
4. พิมพ์ Gmail ในแถบค้นหาแล้วคลิก
5. เลือกอีเมลใหม่ในกล่องจดหมาย
6. คลิก +นั่น ในข้อความสีน้ำเงิน
7. พิมพ์ Particle ในแถบค้นหาแล้วคลิก
8. คลิกเผยแพร่กิจกรรม
9. พิมพ์ "Gmail" ใน แล้วเผยแพร่ (ชื่อกิจกรรม)
10. เลือกสาธารณะ

เมื่อคุณมีแอปเพล็ตสองตัว Trello และ Gmail ใช้งานได้ เรากำลังดำเนินการไปยังขั้นตอนสุดท้าย

ขั้นตอนที่ 9: ในที่สุด การทดสอบ

เราจะทดสอบเพื่อเผยแพร่กิจกรรมจากแอปเพล็ตไปยังโฟตอน ตรวจสอบให้แน่ใจว่าแอปเพล็ตของคุณเปิดอยู่

Trello

เมื่อมีคนสร้างการ์ดใหม่ใน Trello พวกเขาจะกำหนด (แท็ก) คุณในการ์ด IFTTT รับฟังและเริ่มเผยแพร่กิจกรรมไปยังโฟตอน จากนั้นโฟตอนจะส่งคำสั่งไปยัง Philip Hue Bridge เพื่อเตือนหลอดไฟอัจฉริยะ

Gmail

เมื่อคุณได้รับอีเมลใหม่ในกล่องจดหมายของคุณ IFTTT จะรับฟังและเริ่มเผยแพร่กิจกรรมไปยังโฟตอน จากนั้นโฟตอนจะส่งคำสั่งไปยัง Philip Hue Bridge เพื่อเตือนหลอดไฟอัจฉริยะ

ความท้าทาย

• เมื่อใดก็ตามที่เราได้รับการแจ้งเตือนใหม่จาก Trello และ Gmail มีความล่าช้าอย่างมากในการส่งกิจกรรมจาก IFTTT และส่งคำสั่งจาก Photon ควรใช้เวลาน้อยกว่า 5 นาทีในการแจ้งเตือนหลอดไฟอัจฉริยะ
• Gmail Applet บางครั้งปิดเองเพราะต้องเชื่อมต่อหรืออัปเดตแอปเพล็ตใหม่