Peringatan Pemberitahuan Visual: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Tutorial ini mengajarkan Anda cara membuat kode untuk memberi tahu Phillips Hue agar waspada. Ini akan sangat berguna bagi orang-orang yang Tunarungu dan Tunarungu, memiliki keterbatasan penglihatan atau sensorik. Visual Notification Alert adalah untuk menginformasikan kepada pengguna setelah mendapatkan notifikasi dari email, Facebook, Trello, atau sejenisnya. Bohlam LED Hue mulai menyala dengan berkedip.

Photon Particle adalah kit pengembangan Wi-Fi kecil yang dapat diprogram ulang untuk membuat prototipe dan menskalakan produk Internet of Things Anda.

Langkah 1: Daftar Perangkat Keras dan Perangkat Lunak

Anda memerlukan perangkat keras dan perangkat lunak untuk mengembangkan kode untuk Pemberitahuan Pemberitahuan Visual.

Perangkat keras

• Kit Pembuat Partikel
• Philips Hue - Starter Kit (3 bola lampu LED dan 1 Hue Bridge)

Perangkat lunak

• Informasi umum dari Partikel Foton
• IDE Web Partikel (Build) *Diperlukan untuk login*
• IFTTT (Jika Ini Maka Itu)

Langkah 2: Instalasi

Anda harus memiliki Kit Pembuat Partikel, yang mencakup semuanya, seperti sensor, kabel jumper, LED, resistor, dan banyak lagi. Anda dapat membaca informasi lebih lanjut tentang Partikel Foton.

Sebelum Anda menghubungkan foton Anda, Anda perlu mengetahui status LED pada Foton. Berikut adalah informasi tentang status LED.

Hubungkan Foton Anda

1. Colokkan kabel USB ke sumber listrik Anda. (Komputer Anda bekerja dengan sempurna untuk tujuan ini). Perangkat partikel Anda tidak memerlukan komputer Anda untuk terhubung ke wifi.
2. Saat dicolokkan, LED RGB pada perangkat foton Anda akan mulai berkedip biru. Jika perangkat Anda tidak berkedip biru, tahan tombol SETUP selama 10 detik, lalu lepaskan tombol SETUP.
3. Masuk ke Setup Partikel jika Anda sudah memiliki akun. Jika Anda tidak memiliki akun, buat akun untuk Foton.
4. Klik pada Foton/P Series.
5. Setelah mengklik NEXT, Anda akan disajikan dengan file (photonsetup.html)
6. Klik LANJUTKAN DENGAN FILE LOKAL untuk mengunduh file.

Setelah membuka file

1. Hubungkan PC Anda ke Photon, dengan menghubungkan ke jaringan bernama PHOTON-…
2. Konfigurasikan kredensial Wi-FI Anda. Catatan: jika Anda salah mengetik kredensial, Foton akan berkedip biru tua atau hijau. Anda harus melalui proses lagi dengan menyegarkan halaman atau mengklik bagian proses coba lagi.
3. Ganti nama perangkat Anda. Anda akan melihat konfirmasi apakah perangkat tersebut diklaim atau tidak.

Sebelum pindah ke bagian selanjutnya, jika perangkat Photon Anda memiliki cyan bernapas, maka berhasil ke Internet dan Photon Cloud! Kami pindah ke Particle IDE, Build.

Langkah 3: Coding dalam Particle Web IDE

Anda perlu membuat akun untuk Particle IDE, Build. Jika Anda sudah memiliki akun, maka bagus! Masuk Partikel IDE.

Kami ingin menguji untuk melihat apakah LED berkedip di papan tulis. Ada LED biru kecil di papan Foton Anda. Itu di sebelah D7. Anda dapat mengunduh file, getstarted-blinknet.ino, dan lihat kodenya di sana. Ada penjelasan. Klik tautan ini untuk membuka kode sumber di IDE Web Partikel. Jika D7 (LED biru kecil) berkedip, selamat, Anda baru saja mengedipkan LED menggunakan perangkat Partikel Anda! Jika Anda ingin mempelajari lebih lanjut tentang Foton, seperti mengedipkan LED yang berbeda, membaca sensor foto, dll, inilah tautannya.

Sekarang, kita akan pindah ke Philips Hue.

Langkah 4: Philips Hue

Untuk referensi: Klik di sini tentang Phillips Hue API.

Sebelum Anda dapat mengakses dokumentasi Philips Hue API, Anda harus mendaftar sebagai pengembang. Ini gratis, tetapi Anda harus menerima syarat dan ketentuan.

1. Pertama, pastikan Philips Hue Bridge Anda (gambar pertama) terhubung ke jaringan Anda berfungsi dengan baik. Uji Hue App (Aplikasi Hue tersedia di iOS dan Android) yang mengontrol cahaya di jaringan yang sama.

Jika Anda berhasil mengujinya, maka Anda perlu menemukan alamat IP jembatan di jaringan Anda. Gunakan penemuan server broker Philips dengan mengunjungi www.meethue.com/api/nupnp.

Ketika Anda menemukan alamat IP Anda, ketikkan ke bilah alamat browser Anda dengan debug/clip.html ditambahkan ke URL: https://bridge Alamat IP/debug/clip.html. Anda akan melihat antarmuka (gambar kedua) seperti ini. Catatan: Ganti "bridge IP Address" ke alamat IP Anda.

2. Mari lakukan perintah sederhana dan dapatkan informasi tentang sistem rona Anda. Isi rincian di bawah ini dengan membiarkan badan kosong dan tekan tombol GET. Anda akan melihat antarmuka (gambar ketiga) seperti ini. Anda harus mendapatkan pesan kesalahan. Catatan: Ganti "bridge IP Address" ke alamat IP Anda.

Alamat: https://bridge Alamat IP/api/newdeveloperBody:Metode: GETSelamat! Anda hanya mengirim perintah pertama Anda!3. Selanjutnya, isi informasi di bawah ini dan tekan tombol POST. Catatan: Ganti "bridge IP Address" ke alamat IP Anda dan "phonetype name" ke telepon Anda sendiri.

Alamat: https://bridge IP address/apiBody: {"devicetype":"my_hue_app#phonetype name"}Metode: POST

Tautan membantu membuatnya untuk Anda. Saat Anda menekan tombol POST, Anda akan mendapatkan kembali pesan kesalahan (gambar keempat) yang memberi tahu Anda bahwa Anda harus menekan tombol tautan di Jembatan Hue. Ini adalah langkah keamanan agar hanya aplikasi atau server yang Anda inginkan untuk mengontrol lampu Anda. Dengan menekan link di Hue Bridge, ini membuktikan bahwa pengguna memiliki akses fisik ke hue bridge.

Ketika Anda mendapatkan respon yang sukses (gambar kelima), selamat! Anda baru saja membuat pengguna resmi, yang akan kami gunakan mulai sekarang.

4. Contoh terakhir sebelum kita mengintegrasikannya ke dalam Partikel Foton, pastikan salah satu lampu Anda terlihat dan menyala, dan Anda perlu mengetahui lampu nomor mana. Ubah URL menjadi /api/username/lights/light number/state (ubah nomor lampu [bisa 1, 2, 3, atau ?]), dan kirim tombol PUT dengan data berikut:

Catatan: Pastikan Anda mengubah alamat IP jembatan, nama pengguna, dan nomor lampu

Alamat: https://bridge IP address/api/username/lights/light number/state

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

Metode: PUTAnda akan melihat cahaya Anda berubah warna:

Langkah 5: Mengatur Foton Dengan Tombol dan Kabel

Sebelum kami mengembangkan lebih banyak kode ke dalam IDE Web Foton, kami ingin menyiapkan Foton kami dengan tombol dan kabel. Anda memiliki beberapa tombol dan banyak kabel dari Kit Pemula Partikel Anda. Saya telah melampirkan dua gambar, satu adalah diagram dan satu lagi gambar yang sebenarnya.

1. Pastikan Anda menempatkan foton Anda di papan tempat memotong roti.
2. Tempatkan tombol di bagian bawah papan tempat memotong roti seperti yang ditunjukkan pada gambar.
3. Letakkan ujung kabel hitam di J4 (GND) dan letakkan ujung lain dari kabel hitam yang sama di J30.
4. Letakkan ujung kabel kuning di J7 (D5) dan letakkan ujung lain dari kabel kuning yang sama di J28.

Jika mereka cocok dengan gambar saya, saya tunjukkan, maka Anda bagus!

Langkah 6: Menulis Kode dalam Partikel Foton

Kami akan membuat aplikasi pertama kami di Partikel Foton - IDE Web.

1. Buka https://build.particle.io/build dan masuk (daftar jika Anda belum membuatnya)
2. Ketik "Peringatan Pemberitahuan Visual" di bawah Aplikasi Saat Ini.
3. Tekan tombol Enter (lihat gambar pertama).

Aplikasi disimpan di Photon Particle Cloud. Fungsi setup() dipanggil saat aplikasi dimulai dan dijalankan sekali. Fungsi loop() melakukan persis apa yang dilakukannya dan berulang secara berurutan, memungkinkan aplikasi Anda untuk berubah dan merespons.

Untuk menambahkan HttpClient untuk Partikel Foton:

1. Klik Perpustakaan dari kiri bawah IDE Web.
2. Ketik "HttpClient" di bilah pencarian.
3. Klik "Sertakan Dalam proyek" di tombol biru.
4. Klik VisualNotificationAlert (itu menghilangkan spasi setelah Anda membuat aplikasi).
5. Klik Konfirmasi.

Sekarang, Ini menambahkan HttpClient di awal IDE Web.

/ Pernyataan #include ini secara otomatis ditambahkan oleh Particle IDE.#include

/*** Konfigurasi untuk Philip Hue ***

/ 1. Ganti ini dengan nama pengguna API Anda dari Langkah 1 const String API_USERNAME = "Nama pengguna API Anda"; // 2. Ganti ini dengan alamat IP bridge Anda dari Langkah 1 IPAddress hueIP(x, x, x, x); // 3. Ganti dengan jalur ke lampu yang ingin Anda kendalikan. Gunakan halaman web dari Langkah 1 untuk memverifikasi itu berfungsi. // Pastikan Anda mengenali nomor lampu Philip Hue // /lights/NUMBER/state const String LIGHT_PATH = "/lights/Number/state"; // 4. Ganti ini dengan badan permintaan Anda untuk menyalakan lampu. const String REQUEST_BODY_ON = "{"on\":true, \"bri\":254}"; // 5. Ganti ini dengan isi permintaan Anda untuk mematikan lampu. const String REQUEST_BODY_OFF = "{"on\":false, \"bri\":254}"; /*** END Konfigurasi untuk Philip Hue *** / Button const int BUTTON_PIN = D5; // Objek HttpClient digunakan untuk membuat permintaan HTTP ke jembatan Hue HttpClient http; // Header default untuk permintaan HTTP http_header_t headers = { { "Terima", "*/*"}, { NULL, NULL } // CATATAN: Selalu mengakhiri header akan NULL }; // Permintaan dan respons objek http_request_t request; http_response_t tanggapan; void setup() { Serial.begin(9600); request.ip = hueIP; permintaan.port = 80; // Onboard LED sebagai lampu indikator untuk tap pinMode(D7, OUTPUT); // Untuk input, kami mendefinisikan BUTTON_UP sebagai input-pullup. Ini menggunakan resistor pullup internal // untuk mengelola pembacaan yang konsisten dari perangkat. pinMode(BUTTON_PIN, INPUT_PULLUP); // menetapkan pin sebagai input //Kami "Berlangganan" ke acara IFTTT kami yang disebut Tombol sehingga kami mendapatkan acara untuknya Particle.subscribe("RIT_Gmail", myHandler); Particle.subscribe("Trello", myHandler); } // setup() function void loop() { /* * Ini adalah bagian pengujian apakah lampu menyala */ // mengetahui apakah tombol ditekan atau tidak dengan membacanya. int buttonState = digitalRead(BUTTON_PIN); // Saat tombol DITEKAN, kita akan mendapatkan sinyal LOW. // Ketika tombol TIDAK DITEKAN, kita akan mendapatkan TINGGI. if(buttonState == RENDAH) gmailAlert(); } // loop() function void printInfo() { Serial.print("Application>\tResponse status: "); Serial.println(respons.status); Serial.print("Aplikasi>\tBadan Respons HTTP: "); Serial.println(respons.body); } // printInfo() fungsi int i = 0; //Fungsi yang menangani event dari IFTTT void myHandler(const char *event, const char *data) { // Test untuk pencetakan serial Serial.print(event); Serial.print(", data: "); if (data) Serial.println(data); else Serial.println("NULL"); if(strcmp(acara, "Trello") == 0) { trelloAlert(); } else if(strcmp(event, "Gmail") == 0) { gmailAlert(); } } // myHandler() function /** Nilai rona untuk mengatur cahaya. * Nilai rona adalah nilai pembungkus antara 0 dan 65535. * Baik 0 dan 65535 berwarna merah, * 25500 berwarna hijau dan 46920 berwarna biru. */ /** * Ini akan mengingatkan menggunakan Philips Hue Smart Bulb menggunakan warna biru. Ini akan mengingatkan selama 15 detik. */ void trelloAlert() { String trello_body_alert = "{"on\": true, \"bri\": 255, \"sat\": 255, \"hue\": 46920, \"alert\": \"lpilih\"}"; sendHttpPut(trello_body_alert); } /** * Ini akan mengingatkan menggunakan Philips Hue Smart Bulb menggunakan warna merah. Ini akan mengingatkan selama 15 detik. */ void gmailAlert() { String gmail_body_alert = "{"on\":true, \"sat\":254, \"bri\":254, \"hue\":65535, \"alert\": \"lpilih\"}"; sendHttpPut(gmail_body_alert); } /** * Kami akan mengirimkan PUT ke Philips Hue * @param httpPutBody badan string */ void sendHttpPut(String httpPutBody) { request.path = "/api/" + API_USERNAME + LIGHT_PATH; request.body = httpPutBody; http.put(permintaan, tanggapan, header); }

Ketika Anda selesai mengetik atau menyalin kode ke IDE Web Partikel Foton Anda, klik ikon centang (Verifikasi) di kiri atas bilah. Jika sangat berhasil, maka kita akan melanjutkan ke langkah berikutnya!

Langkah 7: Mengunggah Kode ke Foton

Langkah ini sangat sederhana. Sebelum kami mengunggah kode ke Foton:

1. Colokkan kabel USB ke sumber listrik Anda (saya sarankan laptop).
2. Pastikan foton Anda memiliki LED cyan bernapas. Jika tidak bernafas cyan atau memiliki warna yang berbeda, lanjutkan ke Langkah 2: Instalasi
3. Klik ikon Pencahayaan dari IDE Web Partikel Foton.
4. Saat mengunggah kode ke Foton, Anda akan melihat magenta. Itu berarti kode mulai diunggah ke kode. Kemudian, ia akan berkedip hijau dengan cepat, lalu kembali bernapas cyan.
5. Tekan tombol untuk melihat apakah Philips Smart Bulb Anda berkedip (atau memberi peringatan).

Jika Philips Smart Bulb memperingatkan, maka selamat! Kami hampir selesai!

Kami akan beralih ke bagian perangkat lunak.

Langkah 8: Membuat Applet Dari IFTTT (Jika Ini, Maka Itu)

Kami akan membuat applet dari situs web IFTTT (If This, Then That). Applet akan memublikasikan acara ke Foton, dan kemudian Foton mengirimkan perintah ke Philips Hue Bridge untuk memberi tahu bohlam pintar.

Untuk proyek ini, kami akan menggunakan Trello dan Gmail untuk mempublikasikan acara ke Photon.

Buka https://ifttt.com/ dan daftar.

Trello

1. Klik Applet Saya di bagian atas.
2. Klik Applet Baru.
3. Klik + ini dalam teks biru.
4. Ketik Trello di bilah pencarian dan klik.
5. Klik Kartu yang Ditugaskan kepada saya.
6. Pilih papan Anda dari Trello.
7. Klik + itu dalam teks biru.
8. Ketik Partikel di bilah pencarian dan klik.
9. Klik Publikasikan acara.
10. Ketik "Trello" di Kemudian terbitkan (Nama Acara).
11. Pilih publik.

Gmail (Catatan: mereka akan menggunakan alamat email Anda saat Anda mendaftar)

1. Klik Applet Saya di bagian atas.
2. Klik Applet Baru.
3. Klik + ini dalam teks biru.
4. Ketik Gmail di bilah pencarian dan klik
5. Pilih Setiap email baru di kotak masuk
6. Klik + itu dalam teks biru.
7. Ketik Partikel di bilah pencarian dan klik
8. Klik Publikasikan acara.
9. Ketik "Gmail" di Kemudian terbitkan (Nama Acara).
10. Pilih publik.

Setelah Anda memiliki dua applet, Trello dan Gmail berfungsi, kita beralih ke langkah terakhir.

Langkah 9: Akhirnya, Pengujian

Kami akan menguji untuk mempublikasikan acara dari Applet ke Foton. Pastikan applet Anda aktif.

Trello

Ketika seseorang membuat kartu baru di Trello, mereka akan menetapkan (menandai) Anda di kartu tersebut. IFTTT mendengarkan itu dan mulai memublikasikan acara ke Foton. Kemudian Photon mengirimkan perintah ke Philip Hue Bridge untuk memperingatkan bohlam pintar.

Gmail

Saat Anda mendapatkan email baru di kotak masuk Anda, IFTTT mendengarkannya dan mulai menerbitkan acara ke Foton. Kemudian Photon mengirimkan perintah ke Philip Hue Bridge untuk memperingatkan bohlam pintar.

Tantangan

• Setiap kali kami mendapatkan pemberitahuan baru dari Trello dan Gmail, ada penundaan besar untuk mengirim acara dari IFTTT dan mengirim perintah dari Foton. Diperlukan waktu kurang dari 5 menit untuk memberi tahu bohlam pintar.
• Applet Gmail terkadang mati dengan sendirinya karena applet perlu disambungkan kembali atau diperbarui.