Lampu Pintar Kendali Web Arduino – Panduan Langkah demi Langkah
Komponen dan Perlengkapan
Arduino UNO – 1 unit
PHPoC Shield 2 for Arduino – 1 unit
PHPoC 4-port Relay Board – 1 unit
Lampu – 1 unit
Tentang Proyek Ini
Kontrol melalui web telah menjadi norma saat ini. Dalam proyek sederhana ini, saya akan menunjukkan cara membuat aplikasi yang mengontrol lampu melalui web.
Tentu saja ini bukan hal yang baru, tetapi yang Anda lihat adalah kontrol berbasis web hanya membutuhkan beberapa langkah untuk dilakukan sendiri. Siapa pun yang memiliki pengetahuan tentang pemrograman web dapat membuat aplikasi berbasis web untuk mengontrol/memantau perangkat.
Anda dapat melihat demo di sini:
Komponen Hardware
Pertama adalah menyiapkan hardware. Di sini, saya menggunakan papan Arduino Uno, PHPoC WiFi Shield, dan PHPoC Arduino Relay Board.
Cara Kerja
Selanjutnya, bagian "berbasis Web". Digabungkan dengan PHPoC Shield, papan Arduino menjadi server Web/server WebSocket. Jadi, pada dasarnya kita perlu:
+ Kode sisi klien: menyediakan Antarmuka Pengguna berbasis Web untuk mengontrol lampu. UI harus memungkinkan pengguna untuk mengirim perintah kontrol ke server Web (papan Arduino). UI juga menampilkan status lampu yang dikirim dalam respons dari server. Kode sumber halaman web ini perlu diunggah ke shield. Setelah menerima permintaan HTTP dari browser web (klien web), shield (server web) akan mengirim file web yang ditafsirkan ke browser.
+ Kode sisi server: mengontrol lampu berdasarkan data yang dikirim oleh browser web. Kode dijalankan pada papan Arduino, dan alurnya tidak lebih dari perulangan, memeriksa apakah ada permintaan dari klien web untuk mengatur relay menyala/mematikan lampu, dan kemudian mengirim status lampu ke browser web.
Dalam proyek ini, saya membuat elemen SVG untuk menampilkan lampu dan tombol untuk mengirim perintah kontrol dari Web. Browser web dan server web berkomunikasi satu sama lain melalui WebSocket. Koneksi WebSocket cocok untuk aplikasi real-time.
Semakin banyak usaha yang Anda luangkan untuk membuat UI, semakin baik tampilannya. Namun, jangan khawatir, ada banyak sumber daya sharing yang tersedia di Internet, jadi Anda mungkin menemukan beberapa kode sumber UI gratis keren daripada melakukan semua pemrograman sendiri.
Terima kasih telah membaca :D.
Pelajari lebih lanjut tentang relay dalam tutorial ini
Kode sisi server yang menangani kontrol I/O berdasarkan data WebSocket yang dikirim dari browser web
#include <Phpoc.h> #include <PhpocExpansion.h> #define ON '1' #define OFF '0' byte expansionId = 1; ExpansionRelayOutput relay(expansionId, 0); PhpocServer server(80); void setup() { Serial.begin(9600); while(!Serial) ; // initialize PHPoC [WiFi] Shield: Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); // start WebSocket server server.beginWebSocket("remote_led"); // print IP address of PHPoC [WiFi] Shield to serial monitor: Serial.print("WebSocket server address : "); Serial.println(Phpoc.localIP()); Expansion.begin(); // get name and print it to serial Serial.println(relay.getName()); } void loop() { // wait for a new client: PhpocClient client = server.available(); if (client) { if (client.available() > 0) { // read a byte incoming from the client: char thisChar = client.read(); switch(thisChar) { case OFF: Serial.println("Turn LED OFF"); relay.off(); server.write(OFF); break; case ON: Serial.println("Turn LED ON"); relay.on(); server.write(ON); break; } } } }
