Đ có th đi u khi n để ể ề ể ược RPi 3 th ng qua trang web trố ước h tế
Cài đ t gói d ch v Apache b ng cách ch y l nh sau: ặ ị ụ ă ạ ệ sudo apt-get install apache2 –y
M c đ nh, Apache sẽ ch y m t file ki m tra HTML sau khi cài đ tặ ị ạ ộ ể ặ
xong, m trình duy t và gõ đ a ch IP c a RPi 3. N u cài đ t apacheở ệ ị ỉ ủ ế ặ
thành công sẽ th y nh hình 3.18 .ấ ư
Hình 3.18: Giao di n webserver RPI 3 khi cài thành công Apache2ệ
Sau khi cài đ t Apache xong, m c đ nh d li u c a web sẽ n mặ ặ ị ữ ệ ủ ă ở /var/www/. Trong này có file index.html chính là file mà đã nhìn th yấ
n i dung bộ ở ước trên. Đ ch nh s a giao di n trang web, chúng ta chể ỉ ử ệ ỉ
Hình 3.19: Th m c ch a d li u webserverư ụ ứ ữ ệ
Đ xây d ng trang web v i nhi u tính năng h n, chúng ta c nể ự ớ ề ơ ầ
ph i s d ng PHP. Đ cài đ t PHP trên RPi 3 chúng ta s d ng dòngả ử ụ ể ặ ử ụ
l nh ệ sudo apt-get install php5 libapache2-mod-php5 –y
3.3.4. Truy n hình nh t camera lên trang webề ả ừ
Cài đ t các gói c n thi t đ có th s d ng đặ ầ ế ể ể ử ụ ược ch c năngứ
stream camera b ng dòng l nhă ệ
sudo apt-get install libjpeg8-dev imagemagick libv4l-dev -y
M c đ nh RPi đ u không có th vi nặ ị ề ư ệ videodev.h n a màữ
là videodev2.h. Thư vi nệ videodev2.h có thể được dùng như videodev.h vì v y ch y l nh sau đ đ biên d ch MJPG Streamer:ậ ạ ệ ể ể ị
sudo ln -s /usr/include/linux/videodev2.h /usr/include/linux/videodev.h
Sau đó ch y dòng l nh sau đ t i v mã ngu n c a MJPGạ ệ ể ả ề ồ ủ
http://sourceforge.net/code-snapshots/svn/m/mj/mjpg- streamer/code/mjpg-streamer-code-182.zip
Gi i nén MJPG Streamer và cài đ t qua các dòng l nh:ả ặ ệ
unzip mjpg-streamer-code-182.zip
cd mjpg-streamer-code-182/mjpg-streamer make mjpg_streamer input_uvc.so output_http.so
Ch y dòng l nh sau đ ki m tra ho t đ ng c a camera: ạ ệ ể ể ạ ộ ủ
LD_LIBRARY_PATH=/usr/local/lib mjpg_streamer -i "/usr/local/lib/input_uvc.so -d /dev/video0 -quality 100 -f 30 -r 640x480" -o "/usr/local/lib/output_http.so -w /usr/local/www -p 9000"
Các thông s :ố
-d < device name - chu i - m c đ nh /dev/video0 >ỗ ặ ị
-quality < ch t lấ ượng - s nguyên t 1 - 100 - m c đ nh 75 >ố ừ ặ ị
-f < frame per second - s nguyên t 1 - 60 - m c đ nh 10 >ố ừ ặ ị
-r < kích thước khung hình - chu i (xem hỗ ướng d n dẫ ở ưới) > -p < port - s nguyên - t 1 => 2ố ừ 16 – 1 > (adsbygoogle = window.adsbygoogle || []).push({});
Cu i cùng truy c p vào đ a ch ố ậ ị ỉ http://< đ a ch IP c a Raspi>:9000 trênị ỉ ủ
máy tính k t n i chung m ng v i RPi 3 đ ki m tra xem có th th y hình nhế ố ạ ớ ể ể ể ấ ả
Hình 3.20: Giao di n khi truy n hình nh camera thành côngệ ề ả
3.3.5. Cài đ t VPN trên RPi 3.ặ
Bước đ u hãy vào trang web c a Hamachi đầ ủ ể đăng kí và sau đó đăng nh p sẽ đậ ược giao di n nh hình 3.21.ệ ư
Ch n Add Netwwork và đi n thông tin vàoọ ề
Hình 3.22: Đi n thông tin m ng n i bề ạ ộ ộ
Bước 3: Thêm nh ng thiêt b c a mình vàoữ ị ủ
T i ph n m mả ầ ề logmein-hamachi v máy tínhề
Hình 3.23: Giao di n Hamachi trên máy tínhệ
Hình 3.24: Đăng nh p vào hamachiậ
Hình 3.25: Thông tin máy tính cài đ t hamachiặ
Sau đó, vào l i trang ch ch n Add/Remove members đ thêm vào máyạ ủ ọ ể
tính đang s d ng vào m ng chung.ử ụ ạ
3.3.6. Thi t l p cho RPi 3ế ậ
Ti p theo là cách chúng ta thi t l p cho RPi 3:ế ế ậ Trước tiên t i ph n m m này v :ả ầ ề ề
wget https://www.vpn.net/installers/logmein-hamachi-2.1.0.174- armel.tgz Gi i nén raả tar -zxvf logmein-hamachi-2.1.0.174-armel.tgz Vào th m c v a gi i nénư ụ ừ ả cd logmein-hamachi-2.1.0.174-armel.tgz Ch y file Installạ sudo ./install.sh
Cài đ t xong chúng ta kh i đ ng hamachiặ ở ộ
sudo /etc/init.d/logmein-hamachi start
Đăng nh p:ậ
hamachi login
Yêu c u k t ầ ế n i v i máy ch , nh p email v a đăng kí :ố ớ ủ ậ ừ
hamachi attach quocthong2106@gmail.com
Đ t m t cái tên cho client Raspi:ặ ộ
hamachi set-nick raspberry
Hình 3.27: Thông báo khi có thi t b yêu c u thêm vàoế ị ầ
Nh n vào Acceptấ
Hình 3.28: L u l i các thi t b thêm vàoư ạ ế ị
Sau khi b m save chúng ta quay tr l i ng d ng hamachi trên máy tínhấ ở ạ ứ ụ
đ ki m tra các thi t b đã để ể ế ị ược k t. Các thi t b ch m xanh lá là đang ho tế ế ị ấ ạ (adsbygoogle = window.adsbygoogle || []).push({});
đ ngộ
3.3.7. Thi t l p cho Smart phoneế ậ
Đ đi n tho i có th k t n i v i m ng chung, c n ph i thêm vào trangể ệ ạ ể ế ố ớ ạ ầ ả
ch c a hamachi. Xong ch n Add Mobile client, đ t tên và thêm vào m ngủ ủ ọ ặ ạ
chung. Sau đó chúng ta làm theo hướng d n c a trang web đ thi t l p m ngẫ ủ ể ế ậ ạ
Hình 3.29: Thêm đi n tho i vào m ng chungệ ạ ạ
Hình 3.30: Hướng d n cài đ t trên đi n tho iẫ ặ ệ ạ
3.4. K t n i các thi t b và lên mô hình hoàn ch nhế ố ế ị ỉ
3.4.1. K t n i RPi v i module relayế ố ớ
Dùng RPi 3 g i tín hi u s đ n các module relay đ đóng /m relayử ệ ố ế ể ở
B ng 3.1:ả Cách k t n i chân RPi3 v i module relay 4 kênhế ố ớ
RPi 3 Module relay 4
kênh GND 32 36 37 38 5V GND IN1 IN2 IN4 IN3 VCC
B ng 3.2:ả Cách k t n i RPi3 v i module relay 1 kênh đi u khi n hế ố ớ ề ể ệ
th ngố
RPi 3
Module relay 1 kênh đi u khi nề ể
h th ngệ ố GND 11 5V DC- IN DC+
B ng 3.3:ả Cách k t n i RPi 3 v i module relay 1 kênh đi u khi n đènế ố ớ ề ể
RPi 3
Module relay 1 kênh đi u khi nề ể
đèn GND
12
DC- IN
3.4.2. K t n i RPi 3 v i m ch đ c tín hi uế ố ớ ạ ọ ệ
M ch đ c tín hi u s d ng c u phân áp đ bi n đ i 12V thành 4V n m ạ ọ ệ ử ụ ầ ể ế ổ ă
trong ngưỡng RPi có th đ c để ọ ược
B ng 3.4:ả Cách k t n i RPi 3 v i m ch đ c tín hi uế ố ớ ạ ọ ệ RPi 3 M ch đ cạ ọ tín hi uệ GND 29 31 33 5V GND B1 B2 B3 VCC 3.4.3. K t n i các module v i các thi t bế ố ớ ế ị
Do s d ng module relay cách ly nên có th s d ng ngu n 12V đ đi uử ụ ể ử ụ ồ ể ề
khi n thi t b không nh hể ế ị ả ưởng t i tín hi u đi u khi n 5V c a RPi 3.ớ ệ ề ể ủ (adsbygoogle = window.adsbygoogle || []).push({});
B ng 3.5:ả Cách k t n i module relay 4 kênh v i thi t bế ố ớ ế ị
Module relay
4 kênh Accu Motor nâng kính Motor khóa c aử
Relay 1 1 2 3 + - 1 chân c a motorủ Relay 2 1 2 3 + - Chân còn l i c aạ ủ motor
Relay 3 1 2 3 + - 1 chân c a motorủ Relay 4 1 2 3 + - Chân còn l i c aạ ủ motor
B ng 3.6:ả Cách k t n i module đi u khi n h th ng v i thi t bế ố ề ể ệ ố ớ ế ị
Module relay 1 kênh
đi u khi n h th ngề ể ệ ố Accu H th ngệ ố
1 2 3 - + Dây âm Dây đương
B ng 3.7: ả Cách n i dây module đi u khi n đèn v i thi t bố ề ể ớ ế ị
Module relay 1 kênh
đi u khi n đènề ể Accu Đèn
1 2 3 - + Dây âm Dây dương B ng 3.8:ả Cách n i dây m ch đ c tín hi u v i thi t bố ạ ọ ệ ớ ế ị M ch đ c tínạ ọ hi uệ H th ngệ ố Đèn Công t c hànhắ trình khóa c aử A1 A2 A3 Dây dương Dây dương 2
3.5. Mô hình th c tự ế
V i các bớ ước làm trên chúng em đã xây d ng thành công mô hình th cự ư
t . Có th đi u khi n qua đi n tho i và truy n hình nh tr c ti p t cameraế ể ề ể ệ ạ ề ả ự ế ừ
lên giao di n web đi u khi n. ệ ề ể
Hình 3.31: Mô hình th c tự ế
3.6. Xây đ ng giao di n web serverự ệ
Giao di n web server đệ ượ ậc l p trình trên n n t ng html. ề ả Chúng ta thay đ i file index.html trong RPi đ t o giao di n mong mu n. Tuy nhiên html chổ ể ạ ệ ố ỉ
có th t o ra trang web c b n, đ có th làm trang web có giao di n đ p h nể ạ ơ ả ể ể ệ ẹ ơ
l p trình file index.html d dàng, chúng em s d ng ph n m m Dreamweaverậ ễ ử ụ ầ ề
đ l p trình đ n gi n và d s d ng.ể ậ ơ ả ễ ử ụ
Hình 3.32: Giao di n Dreamweaver khi l p trình htmlệ ậ
M t chộ ương trình html g m 3 ph n c b n:ồ ầ ơ ả
<!Doctype>: Ph n khai báo chu n c a html hay xhtml. đây chúng taầ ẩ ủ Ở
s d ng html nên ph n này sẽ khai báo là html:ử ụ ầ
<!DOCTYPE html>
<head></head>: Ph n khai báo ban đ u, khai báo v meta, title, css,ầ ầ ề
javascript…Trong ph n này ta s d ng th script đ có th liên k t v i các thầ ử ụ ẻ ể ể ế ớ ư (adsbygoogle = window.adsbygoogle || []).push({});
Hình 3.33: L p trình ph n <head> c a htmlậ ầ ủ
Ngôn ng l p trình c a RPi là python, đ trang web có th kh i đ ngữ ậ ủ ể ể ở ộ
file python đ đi u khi n chân GPIO trên RPi, chúng ta không th ch y tr cể ề ể ể ạ ự
ti p trên html mà ph i m t file php trung gian m i có th giao ti p v i fileế ả ộ ớ ể ế ớ
python đó được. Đ có th g i để ể ọ ược file php trong html, ta s d ng l nh Get.ử ụ ệ
Ví d $.Get("<file php c n g i>").ụ ầ ọ
Chúng ta mu n l p trình tr ng thái nút nh n trên trang web là nh n hayố ậ ạ ấ ấ
nh n và gi , chúng ta ph i s d ng th vi n jQuery đ có th th c hi n đi uấ ữ ả ử ụ ư ệ ể ể ự ệ ề
này. Chúng ta s d ng l nh $.click đ l p trình tr ng thái khi chúng ta nh n,ử ụ ệ ể ậ ạ ấ
l nh $.mousedown đ l p trình tr ng thái nh n và gi , và $.mouseup đ l pệ ể ậ ạ ấ ữ ể ậ
trình tr ng thái th nút nh n.ạ ả ấ
Hình 3.34: L p trình tr ng thái nút nh nậ ạ ấ
<body></body>: Ph n ch a n i dung c a trang web, n i hi n th n iầ ứ ộ ủ ơ ể ị ộ
dung.
Trong ph n n i dung c a trang web, chúng em chia b c c làm 3 ph n:ầ ộ ủ ố ụ ầ <header></header>: ch a hình nh và tên h th ng đi u khi nứ ả ệ ố ề ể
<section></section>: ch a tên và v trí c a các nút nh n trên trang webứ ị ủ ấ <footer></footer>: ch a hình nh truy n v t cameraứ ả ề ề ừ
Đ ph n n i dung để ầ ộ ược tr c quan h n, chúng em s d ng thêmự ơ ử ụ
vào th vi n CSS. Chúng ta gán cho các dòng m t id sau m i th c aư ệ ộ ỗ ẻ ủ
dòng đó, sau đó thêm th <style></style> ph n <head> c a html đẻ ở ầ ủ ể
qui đ nh v trí và hình d ng cho nó. Ví d : <div id="ten"></div>.ị ị ạ ụ
Hình 3.35: Đ t id cho t ng dòng trên trang webặ ừ
Nút nh n chúng ta cũng l p trình tấ ậ ương t , trự ước m i th c aỗ ẻ ủ
nút nh n chúng ta thêm vào m t id đ xác đ nh và l p trình đi u khi nấ ộ ể ị ậ ề ể
nó ph n <head>. Và đ quy đ nh ki u dáng và hình d ng c a nút nh nở ầ ể ị ể ạ ủ ấ
ta s d ng th class.ử ụ ẻ
Hình 3.36 : L p trình hình dáng và gán id cho nút nh nậ ấ
Chúng ta xem hình đ nh n th y rõ s khác bi t gi a các ch vàể ậ ấ ự ệ ữ ữ
nút nh n khi có và không có CSS:ấ
Chương 4
TH C NGHI M VÀ ĐÁNH GIÁ Đ N Đ NHỰ Ệ Ộ Ổ Ị 4.1. Dùng file python đ th đi u khi n b t t t ledể ử ề ể ậ ắ (adsbygoogle = window.adsbygoogle || []).push({});
4.1.1. B t t t led không qua module relayậ ắ
RPi s d ng tín hi u s đ đi u khi n module nên chúng em s d ngử ụ ệ ố ể ề ể ử ụ
led đ mô ph ng vi c đó. T o 2 file python v i chân 12 là đ u ra, 1 file chân 12ể ỏ ệ ạ ớ ầ
m c cao và file còn l i đ t m c th p. Sau đó ch y l n l t 2 file liên t c đ
ở ứ ạ ặ ở ứ ấ ạ ầ ượ ụ ể
ki m tra tính n đ nh c a RPi.ể ổ ị ủ
K t qu :ế ả
Khi ch y liên t c l n lạ ụ ầ ượt sẽ xu t hi n l i chân đang s d ng, có khấ ệ ỗ ử ụ ả
năng gây tràn ram. Tuy nhiên có th kh c ph c b ng cách thêm dòng l nhể ắ ụ ă ệ
GPIO.cleanup() đ gi i phóng chân đang s d ng. ể ả ử ụ
Hình 4.2: L i khi b m ch y liên t c file pythonỗ ấ ạ ụ
4.1.2. B t t t led thông qua module relayậ ắ
Th c hi n:ự ệ
Motor nâng kính và khóa c a đử ược đi u khi n d a trên nguyên lí m ch c u H,ề ể ự ạ ầ
đ tránh vi c h h ng motor nên chúng em thay th motor b ng 2 led n iể ệ ư ỏ ế ă ố
ngược đ u v i nhau. M c m ch nh b ng 3.1, thay 2 chân motor b ng 1 chânầ ớ ắ ạ ư ả ă
c a 2 led.ủ
K t qu :ế ả
Hai led sáng t t l n lắ ầ ượt khi ta kích t ng relay, vì v y có th đ o chi uừ ậ ể ả ề
dòng đi n dùng đ đi u khi n motor.ệ ể ề ể
N u b m kích relay liên t c sẽ d n đ n hi n tế ấ ụ ẫ ế ệ ượng nhi u, 6 chân c aễ ủ
relay thông m ch v i nhau. Đi u này r t nguy hi m, có th gây h h ng thi tạ ớ ề ấ ể ể ư ỏ ế
Hình 4.3 : K t n i module relay v i 2 đèn led mô ph ng m ch c u Hế ố ớ ỏ ạ ầ
4.2. Th nghi m đi u khi n h th ng qua m ng wifi và qua m ng ử ệ ề ể ệ ố ạ ạ
VPN
Th c hi n:ự ệ
L p toàn b h th ng lên mô hìnhắ ộ ệ ố
S d ng máy tính k t n i cùng m ng wifi v i RPi đ có th đi u khi nử ụ ế ố ạ ớ ể ể ề ể
qua m ng wifi n i bạ ộ ộ
S d ng đi n tho i k t n i 3G đ có th đi u khi n thông qua VPNử ụ ệ ạ ế ố ể ể ề ể (adsbygoogle = window.adsbygoogle || []).push({});
K t qu :ế ả
Sau khi th nghi m nhi u l n, chúng em l p ra b ng so sánh s khácử ệ ề ầ ậ ả ự
bi t v ệ ề đ tr khi s d ng m ng n i b và m ng VPN.ộ ễ ử ụ ạ ộ ộ ạ
B ng 4.1:ả So sánh khi đi u khi n b ng m ng n i b và m ng VPNề ể ă ạ ộ ộ ạ
M ng n i bạ ộ ộ M ng VPNạ
Đèn Ph n h i ngay l p t cả ồ ậ ứ Ph n h i ngay l p t cả ồ ậ ứ
Nâng kính Ph n h i ngay l p t cả ồ ậ ứ Ph n h i ngay l p t cả ồ ậ ứ
Khóa c aử Ph n h i ngay l p t cả ồ ậ ứ Ph n h i ngay l p t cả ồ ậ ứ
Tín hi u đ c vệ ọ ề Ch m trung bình 3sậ Ch m trung bình 6sậ
Camera Hình nh rõ ràng,ả
chuy n đ ng không bể ộ ị
Hình nh h i m , cóả ơ ờ
gi t, t c đ khungậ ố ộ
hình cao
t c đ khung hìnhố ộ
th pấ
Nh n xét:ậ
Đ đi u khi n h th ng t b t kì đâu, chúng ta ph i s d ngể ề ể ệ ố ừ ấ ả ử ụ
m ng VPN, đi u này d n t i ph thu c r t nhi u vào t c đ m ng c aạ ề ẫ ớ ụ ộ ấ ề ố ộ ạ ủ
server VPN và sẽ có đ tr nh t đ nh. Tuy nhiên, đ tr này n m trongộ ễ ấ ị ộ ễ ă
m c cho phép, h th ng v n có th ph n h i nh ng camera ph i gi mứ ệ ố ẫ ể ả ồ ư ả ả