- Komponen yang diperlukan:
- Menyiapkan Raspberry Pi:
- Uji Pemasangan WebIOPi:
- Membina Aplikasi Web untuk Automasi Rumah Raspberry Pi:
- Pengeditan Pelayan WebIOPi untuk Automasi Rumah:
- Rajah dan Penjelasan Litar:
Hai kawan-kawan, selamat datang ke tutorial hari ini, salah satu perkara baik tentang Raspberry Pi adalah kemampuan dan kemudahan yang hebat yang memberi anda peluang untuk menyambungkan peranti ke internet terutamanya untuk Projek Berkaitan Automasi Rumah. Hari ini kita akan meneroka kemungkinan mengendalikan peralatan AC dengan klik butang di laman web menggunakan internet. Dengan menggunakan sistem automasi rumah berasaskan IoT ini, anda dapat mengawal perkakas rumah anda dari mana sahaja di dunia. Pelayan web ini dapat dijalankan dari mana-mana peranti yang dapat menjalankan aplikasi HTML, seperti Smart Phone, tablet, komputer dll.
Komponen yang diperlukan:
Untuk projek ini, keperluan akan berada di bawah dua kategori, Perkakasan dan Perisian:
I. Keperluan Perkakasan:
- Raspberry Pi 3 (Sebarang Versi lain akan bagus)
- Kad memori 8 atau 16GB yang menjalankan Raspbian Jessie
- Relay 5v
- Transistor 2n222
- Diod
- Wayar Pelompat
- Blok Sambungan
- LED untuk diuji.
- Lampu AC untuk Diuji
- Kabel papan roti dan pelompat
- Perintang 220 atau 100 ohm
II. Keperluan Perisian:
Selain sistem operasi Raspbian Jessie yang berjalan pada raspberry pi, kami juga akan menggunakan kerangka kerja WebIOPi, notepad ++ yang berjalan di PC dan filezila anda untuk menyalin fail dari PC ke raspberry pi, terutamanya fail aplikasi web.
Anda juga tidak perlu membuat kod dalam Python untuk Projek Automasi Rumah ini, WebIOPi akan melakukan semua kerja.
Menyiapkan Raspberry Pi:
Ini adalah kebiasaan bagi saya dan saya fikir ia adalah perkara yang baik, perkara pertama yang saya lakukan setiap kali saya ingin menggunakan Raspberry Pi adalah mengemas kini PI. Untuk projek ini, bahagian ini akan merangkumi prosedur pengemaskinian Pi dan memasang rangka WebIOPi yang akan membantu kami menangani komunikasi dari laman web ke pi raspberry. Mungkin saya harus nyatakan bahawa ini juga dapat dilakukan dengan cara yang lebih mudah dengan menggunakan kerangka python Flask tetapi salah satu perkara menarik mengenai DIY adalah apabila anda melihat di bawah tudung dan membuat kerja yang sukar. Di situlah semua kegembiraan DIY datang.
Untuk mengemas kini arahan raspberry Pi di bawah dan kemudian reboot RPi;
sudo apt-get update sudo apt-get upgrade sudo reboot
Dengan ini, perkara seterusnya adalah untuk kita memasang kerangka webIOPi.
Pastikan anda berada di direktori home menggunakan;
cd ~
Gunakan wget untuk mendapatkan fail dari halaman sourceforge mereka;
wget
Apabila muat turun selesai, ekstrak fail dan masuk ke direktori;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Pada ketika ini sebelum menjalankan persediaan, kita perlu memasang tampalan kerana versi WebIOPi ini tidak berfungsi dengan raspberry pi 3 yang saya gunakan dan saya tidak dapat menemui versi WebIOPi yang berfungsi dengan jelas dengan Pi 3.
Perintah di bawah digunakan untuk memasang tampalan ketika masih dalam direktori WebIOPi, jalankan;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Kemudian kita boleh menjalankan pemasangan pemasangan untuk WebIOPi menggunakan;
sudo./setup.sh
Terus katakan ya jika diminta untuk memasang pergantungan semasa pemasangan persediaan. Setelah selesai, but semula pi anda;
rebo sudo
Uji Pemasangan WebIOPi:
Sebelum masuk ke skema dan kod, Dengan Raspberry Pi dihidupkan kembali, kita perlu menguji pemasangan WebIOPi kami untuk memastikan semuanya berfungsi dengan baik seperti yang dikehendaki.
Jalankan arahan;
sudo webiopi -d -c / etc / webiopi / config
Setelah mengeluarkan arahan di atas pada pi, arahkan penyemak imbas web komputer anda yang disambungkan ke raspberry pi ke http: // raspberrypi. mshome.net:8000 atau http; // thepi's IPaddress: 8000. Sistem akan meminta nama pengguna dan kata laluan anda.
Nama pengguna adalah webiopi Kata laluan adalah raspberry
Log masuk ini boleh dikeluarkan kemudian jika dikehendaki tetapi sistem automasi rumah anda juga memerlukan tahap keselamatan tambahan untuk mengelakkan sesiapa sahaja yang mempunyai alat kawalan IP dan peranti IOT di rumah anda.
Selepas log masuk, lihat sekeliling, dan kemudian klik pada pautan header GPIO.
Untuk ujian ini, kami akan menyambungkan LED ke GPIO 17, jadi teruskan dan tetapkan GPIO 17 sebagai output.
Dengan ini, sambungkan plak ke pi raspberry anda seperti yang ditunjukkan dalam skema di bawah.
Selepas sambungan, kembali ke laman web dan klik butang pin 11 untuk menghidupkan atau mematikan LED. Dengan cara ini kita dapat mengawal Raspberry Pi GPIO menggunakan WebIOPi.
Selepas ujian, jika semuanya berfungsi seperti yang dijelaskan, maka kita dapat kembali ke terminal dan menghentikan program dengan CTRL + C. Sekiranya anda mempunyai masalah dengan persediaan ini, maka hubungi saya melalui bahagian komen.
Maklumat lanjut mengenai Webiopi boleh didapati di halaman Wiki (http://webiopi.trouch.com/INSTALL.html)
Dengan ujian selesai, kami kemudian bersedia untuk memulakan projek utama.
Membina Aplikasi Web untuk Automasi Rumah Raspberry Pi:
Di sini kita akan mengedit konfigurasi lalai perkhidmatan WebIOPi dan menambahkan kod kita sendiri untuk dijalankan ketika dipanggil. Perkara pertama yang akan kita lakukan adalah mendapatkan failzilla atau perisian salinan FTP / SCP yang lain yang dipasang di PC kita. Anda akan bersetuju dengan saya bahawa pengekodan pada pi melalui terminal agak tertekan, jadi filezilla atau perisian SCP lain akan sangat berguna pada tahap ini. Sebelum kita mula menulis kod skrip html, css dan java untuk aplikasi Web automasi Rumah IoT ini dan memindahkannya ke Raspberry Pi, mari kita buat folder projek di mana semua fail web kita akan berada.
Pastikan anda berada di direktori home menggunakan, kemudian 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 fail kami dibuat mari kita beralih ke menulis kod pada PC kita dan dari itu berpindah ke Pi melalui filezilla.
Kod JavaScript:
Bahagian pertama kod yang akan kita tulis adalah tulisan javascript. Ini adalah skrip ringkas untuk berkomunikasi dengan perkhidmatan WebIOPi.
Penting untuk diperhatikan bahawa untuk projek ini, aplikasi web kami akan terdiri daripada empat butang, yang bermaksud kami merancang untuk mengawal hanya empat pin GPIO, walaupun kami akan mengendalikan hanya dua geganti dalam demonstrasi kami. Lihat Video penuh di akhir.
webiopi (). siap (fungsi () {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 (butang); butang = webiopi (). createGPIOButton (18, "Relay 2"); content.append (butang); butang = webiopi (). createGPIOButton (22, "Relay 3"); content.append (butang); butang = webiopi ().createGPIOButton (23, "Relay 4"); content.append (butang);});
Kod di atas berjalan apabila WebIOPi siap.
Di bawah ini kami telah menerangkan kod JavaScript:
webiopi (). siap (fungsi (): Ini hanya memerintahkan sistem kami untuk membuat fungsi ini dan menjalankannya ketika webiopi sudah siap.
webiopi (). setFunction (23, "keluar"); Ini membantu kami memberitahu perkhidmatan WebIOPi untuk menetapkan GPIO23 sebagai output. Kami mempunyai empat butang di sini, anda mungkin mempunyai lebih banyak butang jika anda menggunakan lebih banyak butang.
kandungan var, butang; Garis ini memberitahu sistem kami untuk membuat pemboleh ubah bernama kandungan dan menjadikan pemboleh ubah sebagai butang.
kandungan = $ ("# kandungan"); Pemboleh ubah kandungan masih akan digunakan di html dan css kami. Oleh itu, apabila kita merujuk kepada #content, kerangka WebIOPi membuat semua yang berkaitan dengannya.
butang = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi boleh membuat pelbagai jenis butang. Bahagian kod di atas membantu kita memberitahu perkhidmatan WebIOPi untuk membuat butang GPIO yang mengawal pin GPIO dalam kes ini 17 yang berlabel "Relay 1". Begitu juga dengan yang lain.
content.append (butang); Tambahkan kod ini ke kod lain untuk butang yang dibuat sama ada dalam fail html atau di tempat lain. Lebih banyak butang boleh dibuat dan semuanya akan mempunyai sifat yang sama pada butang ini. Ini amat berguna semasa menulis CSS atau Skrip.
Setelah membuat fail JS, kami menyimpannya dan kemudian menyalinnya menggunakan filezilla ke webapp / html / script jika anda membuat fail anda dengan cara yang sama seperti yang saya buat.
Dengan ini, kami bergerak untuk membuat CSS. Anda keseluruhannya boleh memuat turun kod dari pautan yang diberikan di bahagian Kod pada akhirnya.
Kod CSS:
CSS membantu kami menjadikan laman web automasi rumah IoT Raspberry Pi kami kelihatan cantik.
Saya mahu laman web kelihatan seperti gambar di bawah dan dengan itu saya harus menulis helaian gaya smarthome.css untuk mencapainya.
Di bawah ini kami telah menerangkan kod CSS:
Skrip CSS terasa terlalu besar untuk disertakan di sini jadi saya hanya akan memilih sebahagiannya dan menggunakannya untuk perinciannya. Anda boleh memuat turun fail CSS penuh dari sini. CSS senang dan anda boleh memahaminya hanya dengan melalui kod CSS. Anda boleh melangkau bahagian ini dengan mudah dan menggunakan kod CSS kami dengan segera.
Bahagian pertama skrip mewakili lembaran gaya untuk badan aplikasi web dan yang ditunjukkan di bawah;
badan {background-color: #ffffff; latar belakang-gambar: url ('/ img / smart.png'); latar belakang-ulangan: tidak berulang-ulang; latar belakang-kedudukan: tengah; latar belakang: penutup; fon: berani 18px / 25px Arial, sans-serif; warna: LightGray; }
Saya ingin mempercayai kod di atas cukup jelas, kami menetapkan warna latar sebagai #ffffff yang berwarna putih, kemudian kami menambahkan gambar latar yang terletak di lokasi folder itu (Ingat penyediaan folder kami sebelumnya?), Kami memastikan gambar tidak ' t ulang dengan menetapkan sifat latar belakang-ulangi menjadi tidak berulang, kemudian arahkan CSS untuk memusatkan latar belakang. Kami kemudian bergerak untuk mengatur ukuran latar belakang, fon dan warna.
Dengan badan selesai, kami menulis css agar butang kelihatan cantik.
butang {display: block; kedudukan: saudara; margin: 10 piksel; pembalut: 0 10 piksel; text-align: tengah; hiasan teks: tiada; lebar: 130px; tinggi: 40px; fon: berani 18px / 25px Arial, sans-serif; warna: hitam; bayangan teks: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; sempadan-jejari: 30 piksel;
Untuk memastikan ini ringkas, setiap perkara lain dalam kod juga dilakukan agar kelihatan baik. Anda boleh mengubahnya melihat apa yang berlaku, saya rasa ia dipanggil belajar melalui percubaan dan kesilapan tetapi satu perkara baik tentang CSS adalah perkara yang dinyatakan dalam bahasa Inggeris biasa yang bermaksud mereka cukup mudah difahami. Bahagian lain dari blok butang mempunyai sedikit tambahan untuk bayangan teks pada butang dan bayangan butang. Ia juga mempunyai sedikit kesan peralihan yang membantunya kelihatan bagus dan realistik ketika butang ditekan. Ini ditentukan secara berasingan untuk webkit, firefox, opera dan lain-lain hanya untuk memastikan laman web berfungsi dengan optimum di semua platform.
Blok kod seterusnya adalah untuk perkhidmatan WebIOPi untuk memberitahu bahawa ini adalah input untuk perkhidmatan WebIOPi.
saya nput {display: block; lebar: 160px; tinggi: 45 piksel; }
Perkara terakhir yang ingin kita lakukan adalah memberikan beberapa petunjuk apabila butang telah ditekan. Oleh itu, anda boleh melihat pada skrin dan warna butang yang memberitahu anda mengenai keadaan semasa. Untuk melakukan ini, garis kod di bawah dilaksanakan untuk setiap butang.
# gpio17. RENDAH {latar-warna: Kelabu; warna: Hitam; } # gpio17.HIGH {latar belakang-warna: Merah; warna: LightGray; }
Garis kod di atas hanya mengubah warna butang berdasarkan keadaannya sekarang. Apabila butang dimatikan (RENDAH) warna latar butang menjadi kelabu untuk menunjukkan tidak aktif dan apabila dihidupkan (TINGGI) warna latar butang menjadi MERAH.
CSS dalam beg, mari simpan sebagai smarthome.css, kemudian pindahkan melalui filezilla (atau perisian SCP lain yang ingin anda gunakan) ke folder gaya pada raspberry pi kami dan perbaiki bahagian terakhir, kod html. Ingatlah untuk memuat turun CSS penuh dari sini.
Kod HTML:
Kod html menyatukan semuanya, javascript dan helaian gaya.
Tekan butang; terima daging
Di dalam label kepala terdapat beberapa ciri yang sangat penting.
Garis kod di atas membolehkan aplikasi web disimpan ke desktop mudah alih menggunakan krom atau safari mudah alih. Ini boleh dilakukan melalui menu krom. Ini memberikan aplikasi pelancaran mudah dari desktop mudah alih atau rumah.
Baris kod seterusnya di bawah memberikan semacam respons terhadap aplikasi web. Ia membolehkannya menempati layar mana-mana peranti yang dilancarkan.
Baris kod seterusnya menyatakan tajuk yang ditunjukkan pada bar tajuk halaman web.
Empat baris kod seterusnya masing-masing menjalankan fungsi menghubungkan kod html ke beberapa sumber yang diperlukan untuk berfungsi seperti yang dikehendaki.
The baris pertama di atas panggilan rangka WebIOPi utama JavaScript yang berkod keras dalam akar pelayan. Ini perlu dipanggil setiap kali WebIOPi digunakan.
The baris kedua menunjukkan halaman html untuk skrip jQuery kita, ketiga mata ia ke arah lembaran gaya kami. Terakhir, baris terakhir membantu mengatur ikon untuk digunakan di desktop mudah alih sekiranya kita memutuskan untuk menggunakannya sebagai aplikasi web atau sebagai favicon untuk laman web.
Bahagian badan kod html hanya mengandungi tanda putus untuk memastikan butang diselaraskan dengan betul dengan garis di bawah memberitahu kod html kami untuk memaparkan apa yang ditulis dalam fail JavaScript. The id = "kandungan" perlu mengingatkan anda perisytiharan kandungan untuk butang kami sebelum ini di bawah kod JavaScript.
Anda tahu latihan, kod html sebagai index.html dan pindah ke folder html pada Pi melalui filezilla. Anda boleh memuat turun semua fail CSS, JS dan HTML dari sini.
Pengeditan Pelayan WebIOPi untuk Automasi Rumah:
Pada tahap ini, kami sudah siap untuk mulai membuat skema dan menguji aplikasi web kami tetapi sebelum itu kami perlu mengedit file konfigurasi perkhidmatan webiopi sehingga menunjukkan penggunaan data dari folder html kami dan bukannya fail konfigurasi yang disertakan dengannya.
Untuk mengedit konfigurasi jalankan yang berikut dengan izin root;
sudo nano / etc / webiopi / config
Cari bahagian http dari file konfigurasi, periksa di bawah bahagian di mana anda mempunyai sesuatu seperti, #Gunakan doc-root untuk menukar lokasi fail HTML dan sumber lalai
Komen apa sahaja di bawahnya menggunakan # maka jika folder anda disiapkan seperti milik saya, arahkan doc-root anda ke jalan fail projek anda
doc-root = / rumah / pi / webapp / html
Simpan dan keluar. Anda juga boleh menukar port dari 8000, sekiranya anda mempunyai pelayan lain yang berjalan di pi menggunakan port tersebut. Sekiranya tidak menyimpan dan berhenti, ketika kita teruskan.
Penting untuk diperhatikan bahawa anda boleh menukar kata laluan perkhidmatan WebIOPi menggunakan arahan;
sudo webiopi-passwd
Ia akan meminta nama pengguna dan kata laluan baru. Ini juga dapat dihapuskan sepenuhnya tetapi keselamatan penting?
Terakhir jalankan perkhidmatan WebIOPi dengan mengeluarkan arahan di bawah:
sudo /etc/init.d/webiopi bermula
Status pelayan boleh diperiksa dengan menggunakan;
status sudo /etc/init.d/webiopi
Ia boleh dihentikan daripada berjalan menggunakan;
sudo /etc/init.d/webiopi berhenti
Untuk menyediakan WebIOPi untuk berjalan semasa boot, gunakan;
lalai sudo update-rc.d webiopi
Sekiranya anda ingin membalikkan dan menghentikannya daripada berjalan semasa but, gunakan;
sudo update-rc.d webiopi hapus
Rajah dan Penjelasan Litar:
Dengan penyiapan perisian kami selesai, kami siap untuk mula membuat skema untuk projek Peralatan Rumah Tangga yang dikendalikan oleh Web ini.
Walaupun saya tidak dapat menggunakan modul geganti, yang saya rasa lebih senang digunakan untuk para penggemar. Oleh itu, saya melukis di sini skema untuk relay 5v tunggal biasa.
Sambungkan litar anda seperti yang ditunjukkan dalam litar fritzing di atas. Anda harus perhatikan bahawa COM, NO (biasanya terbuka) dan NC (biasanya Tutup) geganti anda sendiri mungkin terletak di sisi / titik yang berbeza. Gunakan milimeter untuk mengujinya. Ketahui lebih lanjut mengenai geganti di sini.
Dengan komponen kami disambungkan, aktifkan pelayan anda, dari halaman web, pergi ke IP Raspberry Pi anda dan tunjukkan port seperti yang dijelaskan sebelumnya, log masuk dengan nama pengguna dan kata laluan anda, dan anda akan melihat halaman web yang kelihatan seperti gambar di bawah.
Kini anda dapat mengawal empat alat AC Rumah dari mana sahaja dengan mudah, hanya dengan mengklik butang. Ini akan berfungsi dari Mobilephone, tablet dll dan anda boleh menambahkan lebih banyak butang dan relay untuk mengawal lebih banyak peranti. Lihat video penuh di bawah.
Sekian, terima kasih untuk yang ini. Sekiranya anda mempunyai sebarang pertanyaan, letakkan di kotak komen.