Arduino - Kontrol Bola Lampu melalui Web

Tentang proyek ini

Mengontrol melalui web telah menjadi norma akhir-akhir ini. Dalam proyek sederhana ini, saya akan menunjukkan cara membuat aplikasi yang mengontrol bola lampu melalui web.

Tentunya itu bukan sesuatu yang baru, tetapi apa yang mungkin Anda lihat adalah bahwa pengendalian berbasis web hanya dapat mengambil beberapa langkah untuk melakukannya sendiri. Siapapun yang memiliki pengetahuan tentang pemrograman web dapat membuat aplikasi berbasis web untuk mengontrol/memantau perangkat.

Anda dapat melihat demonya di sini:

Komponen perangkat keras

Pertama adalah menyiapkan perangkat keras. Di sini, saya menggunakan board Arduino Uno, PHPoC WiFi Shield, dan PHPoC Arduino Relay Board.

Cara kerjanya

Selanjutnya, sampai pada bagian "Berbasis Web". Menggabungkan dengan PHPoC Shield, papan Arduino menjadi server Web/server WebSocket. Jadi, pada dasarnya kita membutuhkan:

+ Kode sisi klien :menyediakan Antarmuka Pengguna berbasis Web untuk mengontrol bola lampu. UI harus memungkinkan pengguna untuk mengirim perintah kontrol ke server Web (papan Arduino). UI juga menampilkan status bola lampu yang dikirim sebagai respons dari server. Kode sumber halaman Web ini perlu diunggah ke perisai. Setelah menerima permintaan HTTP dari browser Web (Web client), perisai (Web server) akan mengirimkan file Web yang ditafsirkan ke browser Web.

+ Kode sisi server :mengontrol bola lampu berdasarkan data yang dikirim oleh browser Web. Kode dijalankan di papan Arduino, dan alirannya tidak lebih dari perulangan, periksa apakah ada permintaan dari klien Web untuk mengatur relai untuk menghidupkan / mematikan bola lampu, dan kemudian mengirim status bola lampu ke browser Web .

Dalam proyek ini, saya membuat elemen SVG untuk menampilkan bola lampu dan tombol untuk mengirim perintah kontrol dari Web. Browser Web dan server Web berkomunikasi satu sama lain melalui WebSocket. Koneksi WebSocket sesuai dengan aplikasi waktu nyata.

Semakin banyak upaya yang Anda habiskan untuk membuat UI, semakin baik tampilannya. Tapi jangan khawatir, ada banyak sekali sumber daya berbagi yang tersedia di Internet, jadi Anda mungkin menemukan beberapa kode sumber gratis yang keren untuk UI daripada melakukan semua hal pemrograman sendiri.

Terima kasih telah membaca :D.

Pelajari lebih lanjut tentang relai dalam tutorial ini

    
 
  
 
 Saklar 
 
 
 

#include #include #define ON '1'#define OFF '0'byte expansionId =1;ExpansionRelayOutput relay(expansionId, 0);PhpocServer server(80);void setup() { Serial.begin(9600); while(!Serial); // inisialisasi PHPoC [WiFi] Shield:Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.mulai(); // mulai server server WebSocket.beginWebSocket("remote_led"); // cetak alamat IP PHPoC [WiFi] Shield ke serial monitor:Serial.print("Alamat server WebSocket :"); Serial.println(Phpoc.localIP()); Ekspansi.mulai(); // ambil nama dan print ke serial Serial.println(relay.getName()); }void loop() { // menunggu klien baru:PhpocClient client =server.available(); if (client) { if (client.available()> 0) { // membaca satu byte yang masuk dari client:char thisChar =client.read(); switch(thisChar) { case OFF:Serial.println("Matikan LED"); relai.mati(); server.tulis(MATI); merusak; case ON:Serial.println("Nyalakan LED"); relay.on(); server.tulis(ON); merusak; } } }}