- Komponen yang Diperlukan:
- Mempersiapkan Raspberry Pi:
- Uji Penginstalan WebIOPi:
- Membangun Aplikasi Web untuk Otomatisasi Rumah Raspberry Pi:
- Pengeditan Server WebIOPi untuk Otomatisasi Rumah:
- Diagram Sirkuit dan Penjelasan:
Hai teman-teman, selamat datang di tutorial hari ini, salah satu hal baik tentang Raspberry Pi adalah kemampuannya yang hebat dan kemudahan yang memberikan Anda kesempatan untuk menghubungkan perangkat ke internet terutama untuk Proyek Terkait Otomasi Rumah. Hari ini kita akan menjajaki kemungkinan mengendalikan peralatan AC dengan mengklik tombol di halaman web menggunakan internet. Dengan menggunakan sistem otomatisasi rumah berbasis IoT ini, Anda dapat mengontrol peralatan Rumah tangga Anda dari mana saja di dunia. Server web ini dapat dijalankan dari perangkat apa pun yang dapat menjalankan aplikasi HTML, seperti Ponsel Cerdas, tablet, komputer, dll.
Komponen yang Diperlukan:
Untuk proyek ini, persyaratan akan dibagi dalam dua kategori, Perangkat Keras dan Perangkat Lunak:
I. Persyaratan Perangkat Keras:
- Raspberry Pi 3 (Versi lain akan menyenangkan)
- Kartu memori 8 atau 16GB menjalankan Raspbian Jessie
- Relai 5v
- 2n222 transistor
- Dioda
- Kabel Jumper
- Blok Koneksi
- LED untuk diuji.
- Lampu AC untuk Menguji
- Kabel papan tempat memotong roti dan jumper
- 220 atau 100 ohm resistor
II. Persyaratan Software:
Selain sistem operasi Raspbian Jessie yang berjalan pada raspberry pi, kami juga akan menggunakan kerangka kerja WebIOPi, notepad ++ yang berjalan di PC dan filezila untuk menyalin file dari PC ke raspberry pi, terutama file aplikasi web.
Anda juga tidak perlu membuat kode dengan Python untuk Proyek Otomasi Rumah ini, WebIOPi akan melakukan semua pekerjaan.
Mempersiapkan Raspberry Pi:
Ini adalah kebiasaan bagi saya dan menurut saya itu bagus, hal pertama yang saya lakukan setiap kali saya ingin menggunakan Raspberry Pi adalah memperbarui PI. Untuk proyek ini, bagian ini akan terdiri dari prosedur pembaruan Pi dan menginstal kerangka WebIOPi yang akan membantu kami menangani komunikasi dari halaman web ke raspberry pi. Saya mungkin harus menyatakan bahwa ini juga dapat dilakukan dengan cara yang bisa dibilang lebih mudah menggunakan kerangka kerja Flask python tetapi salah satu hal yang menarik tentang DIY adalah ketika Anda melihat di bawah tenda dan membuat pekerjaan yang sulit. Di situlah semua kegembiraan DIY datang.
Untuk memperbarui raspberry Pi di bawah perintah dan kemudian reboot RPi;
sudo apt-get update sudo apt-get upgrade sudo reboot
Setelah ini selesai, hal berikutnya adalah kita menginstal kerangka webIOPi.
Pastikan Anda berada di direktori home menggunakan;
cd ~
Gunakan wget untuk mendapatkan file dari halaman sourceforge mereka;
wget
Saat unduhan selesai, ekstrak file dan masuk ke direktori;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Pada titik ini sebelum menjalankan pengaturan, kita perlu menginstal tambalan karena versi WebIOPi ini tidak berfungsi dengan raspberry pi 3 yang saya gunakan dan saya tidak dapat menemukan versi WebIOPi yang bekerja secara tegas dengan Pi 3.
Perintah di bawah ini digunakan untuk menginstal patch saat masih dalam direktori WebIOPi, run;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Kemudian kita dapat menjalankan instalasi setup untuk WebIOPi menggunakan;
sudo./setup.sh
Tetap katakan ya jika diminta untuk menginstal dependensi apa pun selama instalasi penyiapan. Setelah selesai, reboot pi Anda;
sudo reboot
Uji Penginstalan WebIOPi:
Sebelum beralih ke skema dan kode, Dengan Raspberry Pi kembali aktif, kita perlu menguji instalasi WebIOPi kita untuk memastikan semuanya berfungsi dengan baik seperti yang diinginkan.
Jalankan perintah;
sudo webiopi -d -c / etc / webiopi / config
Setelah mengeluarkan perintah di atas pada pi, arahkan browser web komputer Anda yang terhubung ke raspberry pi ke http: // raspberrypi. mshome.net:8000 atau http; // thepiIPaddress: 8000. Sistem akan meminta Anda untuk memasukkan nama pengguna dan kata sandi.
Nama pengguna adalah webiopi Kata sandi adalah raspberry
Login ini dapat dihapus nanti jika diinginkan, tetapi bahkan sistem otomasi rumah Anda berhak mendapatkan tingkat keamanan tambahan untuk mencegah sembarang orang dengan peralatan pengontrol IP dan perangkat IOT di rumah Anda.
Setelah login, lihat sekeliling, lalu klik link header GPIO.
Untuk pengujian ini, kami akan menghubungkan LED ke GPIO 17, jadi lanjutkan dan atur GPIO 17 sebagai output.
Setelah ini selesai, hubungkan led ke raspberry pi Anda seperti yang ditunjukkan pada skema di bawah ini.
Setelah koneksi, kembali ke halaman web dan klik tombol pin 11 untuk menyalakan atau mematikan LED. Dengan cara ini kita dapat mengontrol Raspberry Pi GPIO menggunakan WebIOPi.
Setelah pengujian, jika semuanya bekerja seperti yang dijelaskan, maka kita dapat kembali ke terminal dan menghentikan program dengan CTRL + C. Jika Anda memiliki masalah dengan pengaturan ini, hubungi saya melalui bagian komentar.
Info lebih lanjut tentang Webiopi dapat ditemukan di halaman Wiki-nya (http://webiopi.trouch.com/INSTALL.html)
Setelah tes selesai, kami siap untuk memulai proyek utama.
Membangun Aplikasi Web untuk Otomatisasi Rumah Raspberry Pi:
Di sini kita akan mengedit konfigurasi default dari layanan WebIOPi dan menambahkan kode kita sendiri untuk dijalankan saat dipanggil. Hal pertama yang akan kita lakukan adalah menginstal filezilla atau perangkat lunak penyalinan FTP / SCP lainnya di PC kita. Anda akan setuju dengan saya bahwa pengkodean pada pi melalui terminal cukup membuat stres, jadi filezilla atau perangkat lunak SCP lainnya akan berguna pada tahap ini. Sebelum kita mulai menulis kode html, css dan java script untuk aplikasi Web otomatisasi Rumah IoT ini dan memindahkannya ke Raspberry Pi, mari buat folder proyek tempat semua file web kita berada.
Pastikan Anda berada di direktori home menggunakan, lalu buat folder, masuk ke folder yang dibuat dan buat folder html di direktori:
cd ~ mkdir webapp cd webapp mkdir html
Buat folder untuk skrip, CSS, dan gambar di dalam folder html
mkdir html / css mkdir html / img mkdir html / skrip
Dengan file yang kita buat, mari pindah ke penulisan kode pada PC kita dan dari kemudian pindah ke Pi melalui filezilla.
Kode JavaScript:
Bagian pertama dari kode yang akan kita tulis adalah kode javascript. Ini adalah skrip sederhana untuk berkomunikasi dengan layanan WebIOPi.
Penting untuk diperhatikan bahwa untuk proyek ini, aplikasi web kami akan terdiri dari empat tombol, yang berarti kami berencana untuk mengontrol hanya empat pin GPIO, meskipun kami hanya akan mengontrol dua relai dalam demonstrasi kami. Periksa Video lengkap di akhir.
webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "Relay 1"); content.append (button); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (button);});
Kode di atas berjalan ketika WebIOPi sudah siap.
Di bawah ini kami telah menjelaskan kode JavaScript:
webiopi (). ready (function (): Ini hanya menginstruksikan sistem kami untuk membuat fungsi ini dan menjalankannya ketika webiopi sudah siap.
webiopi (). setFunction (23, "out"); Ini membantu kami memberi tahu layanan WebIOPi untuk menyetel GPIO23 sebagai keluaran. Kami Memiliki empat tombol di sini, Anda dapat memiliki lebih banyak jika Anda menerapkan lebih banyak tombol.
konten var, tombol; Baris ini memberi tahu sistem kita untuk membuat variabel bernama konten dan menjadikan variabel sebagai tombol.
konten = $ ("# konten"); Variabel konten masih akan digunakan di html dan css kami. Jadi saat kita merujuk ke #content, kerangka kerja WebIOPi membuat semua yang terkait dengannya.
button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi dapat membuat berbagai jenis tombol. Potongan kode di atas membantu kita memberi tahu layanan WebIOPi untuk membuat tombol GPIO yang mengontrol pin GPIO dalam hal ini 17 berlabel "Relay 1". Hal yang sama berlaku untuk yang lainnya.
content.append (tombol); Tambahkan kode ini ke kode lain untuk tombol yang dibuat baik di file html atau di tempat lain. Lebih banyak tombol dapat dibuat dan semuanya akan memiliki properti yang sama dari tombol ini. Ini sangat berguna saat menulis CSS atau Script.
Setelah membuat file JS, kami menyimpannya dan kemudian menyalinnya menggunakan filezilla ke webapp / html / scripts jika Anda membuat file dengan cara yang sama seperti saya.
Setelah ini selesai, kita pindah ke pembuatan CSS. Anda dapat mengunduh seluruh kode dari tautan yang diberikan di bagian Kode pada akhirnya.
Kode CSS:
CSS membantu kami membuat halaman web otomatisasi beranda IoT Raspberry Pi kami terlihat cantik.
Saya ingin halaman web terlihat seperti gambar di bawah dan karenanya harus menulis style sheet smarthome.css untuk mencapainya.
Di bawah ini kami telah menjelaskan kode CSS:
Skrip CSS terasa terlalu besar untuk dimasukkan di sini jadi saya hanya akan memilih sebagian dan menggunakannya untuk perincian. Anda dapat mengunduh file CSS lengkap dari sini. CSS itu mudah dan Anda bisa memahaminya hanya dengan membaca kode CSS. Anda dapat dengan mudah melewati bagian ini dan langsung menggunakan kode CSS kami.
Bagian pertama dari skrip mewakili lembar gaya untuk badan aplikasi web dan ditunjukkan di bawah ini;
tubuh {background-color: #ffffff; background-image: url ('/ img / smart.png'); background-repeat: no-repeat; background-position: center; ukuran latar belakang: penutup; font: tebal 18px / 25px Arial, sans-serif; warna: LightGray; }
Saya ingin percaya bahwa kode di atas cukup jelas, kami mengatur warna latar belakang sebagai #ffffff yang putih, lalu kami menambahkan gambar latar belakang yang terletak di lokasi folder itu (Ingat pengaturan folder kami sebelumnya?), Kami memastikan gambar tidak ' t ulangi dengan menyetel properti background-repeat ke no-repeat, lalu perintahkan CSS untuk memusatkan latar belakang. Kami kemudian pindah untuk mengatur ukuran latar belakang, font dan warna.
Setelah body selesai, kami menulis css agar tombol terlihat cantik.
tombol {display: block; posisi: relatif; margin: 10px; bantalan: 0 10px; text-align: center; dekorasi-teks: tidak ada; lebar: 130px; tinggi: 40px; font: tebal 18px / 25px Arial, sans-serif; warna hitam; text-shadow: 1px 1px 1px rgba (255.255.255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; radius batas: 30 piksel;
Untuk menjaga agar singkat ini, setiap hal lain dalam kode juga dilakukan agar terlihat bagus. Anda dapat mengubahnya melihat apa yang terjadi, saya pikir ini disebut belajar melalui trial and error tetapi satu hal yang baik tentang CSS adalah hal-hal yang diekspresikan dalam bahasa Inggris yang berarti mereka cukup mudah untuk dipahami. Bagian lain dari blok tombol memiliki sedikit tambahan untuk bayangan teks pada bayangan tombol dan tombol. Ini juga memiliki sedikit efek transisi yang membantunya terlihat bagus dan realistis saat tombol ditekan. Ini didefinisikan secara terpisah untuk webkit, firefox, opera dll hanya untuk memastikan halaman web bekerja secara optimal di semua platform.
Blok kode berikutnya adalah untuk layanan WebIOPi yang memberitahukan bahwa ini adalah masukan ke layanan WebIOPi.
i nput {display: block; lebar: 160px; tinggi: 45px; }
Hal terakhir yang ingin kami lakukan adalah memberikan semacam indikasi ketika tombol telah ditekan. Jadi, Anda dapat melihat layar dan warna tombol memberi tahu Anda keadaan saat ini. Untuk melakukan ini, baris kode di bawah ini diterapkan untuk setiap tombol.
# gpio17.LOW {background-color: Gray; warna hitam; } # gpio17.HIGH {background-color: Merah; warna: LightGray; }
Baris kode di atas hanya mengubah warna tombol berdasarkan statusnya saat ini. Saat tombol mati (LOW) warna latar belakang tombol menjadi abu-abu untuk menunjukkan tidak aktifnya dan ketika tombol hidup (HIGH) warna latar belakang tombol menjadi MERAH.
CSS di dalam tas, simpan sebagai smarthome.css, lalu pindahkan melalui filezilla (atau perangkat lunak SCP lain yang ingin Anda gunakan) ke folder gaya pada raspberry pi kami dan perbaiki bagian terakhir, kode html. Ingatlah untuk mengunduh CSS lengkap dari sini.
Kode HTML:
Kode html menarik semuanya, javascript dan style sheet.
Tekan tombol; menerima bacon
Di dalam tag kepala terdapat beberapa fitur yang sangat penting.
Baris kode diatas memungkinkan web app yang akan disimpan ke mobile desktop menggunakan chrome atau mobile safari. Ini bisa dilakukan melalui menu chrome. Ini memberi aplikasi nuansa peluncuran yang mudah dari desktop seluler atau rumah.
Baris kode berikutnya di bawah ini memberikan semacam respons terhadap aplikasi web. Ini memungkinkannya menempati layar perangkat apa pun tempat diluncurkan.
Baris kode berikutnya menyatakan judul yang ditampilkan di bilah judul halaman web.
Empat baris kode berikutnya masing-masing menjalankan fungsi untuk menautkan kode html ke beberapa sumber daya yang diperlukan agar berfungsi sesuai keinginan.
Baris pertama di atas memanggil JavaScript framework WebIOPi utama yang di-hardcode di root server. Ini perlu dipanggil setiap kali WebIOPi akan digunakan.
Baris kedua mengarahkan halaman html ke skrip jQuery kita, baris ketiga mengarahkannya ke style sheet kita. Terakhir, baris terakhir membantu menyiapkan ikon untuk digunakan di desktop seluler jika kami memutuskan untuk menggunakannya sebagai aplikasi web atau sebagai favicon untuk halaman web.
Bagian badan kode html hanya berisi tag break untuk memastikan tombol disejajarkan dengan benar dengan baris di bawah yang memberi tahu kode html kita untuk menampilkan apa yang tertulis dalam file JavaScript. The id =”content” harus mengingatkan Anda tentang deklarasi konten untuk tombol kami sebelumnya di bawah kode JavaScript.
Tahu bornya, kode html-nya seperti index.html dan pindah ke folder html di Pi melalui filezilla. Anda dapat mengunduh semua file CSS, JS dan HTML dari sini.
Pengeditan Server WebIOPi untuk Otomatisasi Rumah:
Pada tahap ini, kami siap untuk mulai membuat skema kami dan menguji aplikasi web kami tetapi sebelum itu kami perlu mengedit file konfigurasi layanan webiopi sehingga diarahkan untuk menggunakan data dari folder html kami daripada file konfigurasi yang menyertainya.
Untuk mengedit konfigurasi, jalankan perintah berikut dengan izin root;
sudo nano / etc / webiopi / config
Cari bagian http dari file konfigurasi, periksa di bawah bagian di mana Anda memiliki sesuatu seperti, #Gunakan doc-root untuk mengubah HTML default dan lokasi file sumber daya
Beri komentar apa pun di bawahnya menggunakan # lalu jika folder Anda diatur seperti milik saya, arahkan doc-root Anda ke jalur file proyek Anda
doc-root = / home / pi / webapp / html
Simpan dan keluar. Anda juga dapat mengubah port dari 8000, jika Anda memiliki server lain yang berjalan di pi menggunakan port itu. Jika tidak simpan dan keluar, saat kita melanjutkan.
Penting untuk dicatat bahwa Anda dapat mengubah kata sandi layanan WebIOPi menggunakan perintah;
sudo webiopi-passwd
Ini akan meminta Anda untuk nama pengguna dan kata sandi baru. Ini juga bisa dihilangkan total tapi keamanan itu penting kan?
Terakhir jalankan layanan WebIOPi dengan mengeluarkan perintah di bawah ini:
sudo /etc/init.d/webiopi mulai
Status server dapat diperiksa dengan menggunakan;
sudo /etc/init.d/webiopi status
Itu dapat dihentikan dari menjalankan menggunakan;
sudo /etc/init.d/webiopi berhenti
Untuk mengatur WebIOPi agar berjalan saat boot, gunakan;
sudo update-rc.d webiopi default
Jika Anda ingin membalik dan menghentikannya berjalan saat boot, gunakan;
sudo update-rc.d webiopi hapus
Diagram Sirkuit dan Penjelasan:
Setelah perangkat lunak kami disiapkan selesai, kami siap untuk mulai membuat skema untuk proyek Peralatan Rumah yang dikontrol Web ini.
Meskipun saya tidak bisa menggunakan modul estafet, yang menurut saya lebih mudah digunakan untuk para penghobi. Jadi saya menggambar di sini skema untuk relai 5v tunggal mandiri biasa.
Hubungkan sirkuit Anda seperti yang ditunjukkan pada sirkuit fritzing di atas. Anda harus mencatat bahwa COM, NO (biasanya terbuka) dan NC (biasanya Tutup) dari relai Anda sendiri mungkin terletak di sisi / titik yang berbeda. Gunakan milimeter untuk mengujinya. Pelajari lebih lanjut tentang relay di sini.
Dengan komponen kami terhubung, jalankan server Anda, dari halaman web, buka IP Raspberry Pi Anda dan tunjukkan port seperti yang dijelaskan sebelumnya, login dengan nama pengguna dan kata sandi Anda, dan Anda akan melihat halaman web yang terlihat persis seperti gambar di bawah ini.
Sekarang Anda dapat dengan mudah mengontrol empat aplikasi AC Home dari mana saja secara nirkabel, hanya dengan mengklik tombol. Ini akan bekerja dari Ponsel, tablet, dll. Dan Anda dapat menambahkan lebih banyak tombol dan relai untuk mengontrol lebih banyak perangkat. Lihat video lengkapnya di bawah ini.
Itu dia teman-teman, terima kasih tetap tinggal untuk yang satu ini. Jika Anda memiliki pertanyaan, jatuhkan di kotak komentar.