Raspberry Pi 3 [Relay Control via Web Interface]

ตอนนี้เราจะมาสร้างหน้าเว็บสำหรับดูสถานะและควบคุมรีเลย์อย่างง่ายๆ

 

ก่อนอื่น ผมได้ทำการเปลี่ยน PIN ของ GPIO บน Raspberry Pi 3 เพื่อให้เป็นระเบียบมากขึ้นจากครั้งที่แล้ว
โดยผมได้เลือกใช้ PIN: 12 (GPIO 18), PIN: 16 (GPIO 23), PIN: 18 (GPIO 24) และ PIN: 22 (GPIO 25) สำหรับสั่งงานรีเลย์ตัวที่ 1-4 ตามลำดับ ดังรูปด้านล่างนี้

 

หลังจากการทดสอบการทำงานของรีเลย์ทุกตัว (ในบทความที่แล้ว) จากนั้นเราจึงเริ่มขึ้นตอนการติดตั้ง Apache Web Server, PHP และเขียนหน้าเว็บ ดังขั้นตอนต่อไปนี้ครับ

 

ติดตั้ง Apache Web Server และ PHP ดังนี้

ใช้คำสั่ง sudo apt-get install apache2 เพื่อติดต้ัง apache web server

(หากขึ้นว่า Package apache2 is not available ให้ใช้คำสั่ง sudo nano /etc/apt/sources.list  จากนั้น uncomment บันทัดสุดท้าย เซฟไฟล์และใช้คำสั่ง sudo apt-get update เมื่อเรียบร้อยแล้วให้ลองใช้คำสั่งด้านบนอีกครั้ง)

จากนั้นทดสอบเปิดเว็บด้วย

http://localhost/ หรือ http://{RASPBERRY_IP}/

 

จากนั้นติดตั้ง PHP5 Module สำหรับ Apache

sudo apt-get install php libapache2-mod-php

 

เมื่อเรียบร้อยแล้ว ให้ใช้คำสั่งต่อไปนี้

cd /var/www/html

เนื่องจากไฟล์ index.html จะมีเจ้าของเป็น root ทำให้ไม่สามารถแก้ไขหรือลบได้ ให้ใช้คำสั่งเปลี่ยน owner ดังนี้

sudo chown pi: index.html

จากนั้นทำการลบไฟล์ index.html เพราะเราไม่ใช้

ใช้คำสั่ง sudo nano index.php เพื่อสร้างไฟล์และเขียนโค้ดต่อไปนี้ เพื่อทดสอบการทำงานของ php

<?php phpinfo(); ?>

และลองเปิดหน้าเว็บดู จะพบกับหน้านี้ ถือว่าติดตั้งเสร็จเรียบร้อยแล้ว

 

จากนั้นเพิ่ม user ของ apache นั่นคือ www-data ให้สามารถใช้คำสั่ง sudo ได้ ด้วยวิธีการต่อไปนี้

sudo nano /etc/sudoers

จากนั้นเพิ่มบันทัดต่อไปนี้ลงไปท้ายสุด

www-data ALL=(ALL) NOPASSWD: ALL

และเพื่อความสะดวก ทุกท่านสามารถดาวน์โหลดไฟล์ที่ผมได้ทำเอาไว้แล้ว ==> relay_control_via_web.zip
(สามารถแก้ไขรูปแบบการแสดงผลให้สวยงามขึ้นได้ในภายหลังได้ด้วยตัวท่านเอง) และทำการ copy file ไปไว้ที่ /var/www/html

 

โดยหลักการทำงานคือ

เมื่อมีการเปิดหน้าเว็บขึ้นมา จะเรียกไฟล์ index.html และจะทำการ post ajax firstcheck.php เพื่อทำการตรวจสอบสถานะของรีเลย์ (ซึ่งภายใน firstcheck.php จะเป็นการเรียกคำสั่ง python firstcheck.py และส่งค่ากลับเป็น json)

เมื่อมีการสั่งงานรีเลย์ จะทำการ post ajax changestate.php โดยที่ไปเรียกคำสั่ง relay_off หรือ relay_on (มี parameter คือชุดของรีเลย์ ที่ได้ทำการเซฟค่า BCM GPIO ID เอาไว้ในไฟล์ .py ดังกล่าวแล้ว) เพื่อเป็นการสั่งให้รีเลย์ดังกล่าว ทำงาน

(เพื่อความปลอดภัย ในกรณีที่ท่านต้องการแยกไฟล์ .py ออกจาก web root directory /var/www/html ท่านสามารถทำได้ โดยท่านจะต้องทำการแก้ไขไฟล์ .php ให้เรียก path ที่ถูกต้อง – และตรวจสอบ permission execute ของไฟล์สำหรับ user: www-data ด้วย)

 

ทดสอบลองเปิดหน้าเว็บ
(เว็บถูกพัฒนาขึ้นด้วย bootstrap ดังนั้น จะสามารถใช้งานผ่านหน้าจอมือถือได้ทันที เพียงเรียก http://RASPBERRY_IP/)

         
ทดสอบการแสดงผลและการสั่งงานบน Google Chrome ทั้งบน iOS และ PC

 

สำหรับตอนหน้า จะเป็นการสั่งงานรีเลย์ด้วยระบบอัตโนมัติตามค่าที่ได้จากเซนเซอร์ภายนอก ซึ่งจะเป็นการประยุกต์ใช้ทั้งส่วนการ Input จากเซนเซอร์และ Output ไปยังรีเลย์
เช่น เมื่ออุณหภูมิถึง 30 องศา ให้เปิดพัดลมระบายอากาศ เป็นต้น

 

ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ

ขอบคุณครับ