วันพุธที่ 12 กันยายน พ.ศ. 2561

โปรเจคหุ่นยนต์ Raspberry Pi ควบคุมด้วย เว็บเพจ



โปรเจคหุ่นยนต์ Raspberry Pi ควบคุมด้วย เว็บเพจ โดยในโปรเจคนี้เราจะสร้างเว็บเซิร์ฟเวอร์ จาก Raspberry Pi  โดยการใช้งาน Flask ในการพัฒนา Web Application  และ สั่งควบคุมหุ่นยนต์  จาก เว็บบราวเซอร์ ผ่านทาง ระบบอินทราเน็ต ที่ใช้ WiFi  หรือ วง แลน หรือใช้ เร้าเตอร์ เดียวกัน เท่านั้น



อุปกรณ์ที่ใช้











ขั้นตอนการทำงาน


1. การติดตั้ง Linux ให้กับ Raspberry โดยใช้ไฟล์ image


2. การใช้งาน GPIO ใน Raspberry Pi ด้วย Python


3. การประกอบหุ่นยนต์ Raspberry Pi


4. วิธีเปิดใช้งาน Remote Desktop ไปยัง Raspberry Pi


5. ทดสอบการเคลื่อนที่ของหุ่นยนต์ Raspberry Pi


6. การติดตั้งโปรแกรมถ่ายโอนไฟล์ SFTP Server


7. การใช้งาน Flask ในการพัฒนา Web Application


8. โปรเจคหุ่นยนต์ Raspberry Pi ควบคุมด้วย เว็บเพจ


8.1 ดาวน์โหลดโค้ด web_robot และ อัพโหลดไปยัง Raspberry Pi

โดยดาวน์โหลดโค้ดจากลิงค์ด้านล่าง

https://drive.google.com/open?id=1cu6pE89yRtwKOgAXdXYta0QoGJQFHNKI
โดยศึกษาการใช้งาน โปรแกรม FileZilla (ไฟล์ซิลลา) ได้จาก ขั้นตอนที่ 6

 คลายซิบ และ อัพโหลด ขึ้นสู่ Raspberry Pi 3

โดยให้คลิกขวาโฟลเดอร์ที่ต้องการอัพโหลด คือ web_robot เลือก Upload



โปรเจค web_robot อัพโหลด ขึ้นสู่ Raspberry Pi 3 สำเร็จ


ดูโครงสร้างการจัดเก็บไฟล์ของ โปรเจค web_app ด้วย File Manager

โฟลเดอร์ ที่เก็บไฟล์ app.py และ motors.py



โค้ด app.py
#######
# Author: RobotSiam.com
# Date: 18 August 2018
#
# app.py
#######

 from flask import Flask, render_template, request, redirect, url_for, make_response
import motors
import RPi.GPIO as GPIO

 GPIO.setmode(GPIO.BOARD) #set up GPIO

 app = Flask(__name__) #set up flask server

 #when the root IP is selected, return index.html page
@app.route('/')
def index():

 return render_template('index.html')

 #recieve which pin to change from the button press on index.html
#each button returns a number that triggers a command in this function
#
#Uses methods from motors.py to send commands to the GPIO to operate the motors
@app.route('/<changepin>', methods=['POST'])
def reroute(changepin):

 changePin = int(changepin) #cast changepin to an int

 if changePin == 1:
motors.turnLeft()
elif changePin == 2:
motors.forward()
elif changePin == 3:
motors.turnRight()
elif changePin == 4:
motors.backward()
else:
motors.stop()
response = make_response(redirect(url_for('index')))
return(response)

 app.run(debug=True, host='0.0.0.0', port=8000) #set up the server in debug mode to the port 8000



โค้ด motors.py


#######
# Author: RobotSiam.com
# Date: 15 August 2018
#
# motors.py
#######

 import RPi.GPIO as GPIO
import time

 #set GPIO numbering mode and define output pins
GPIO.setmode(GPIO.BOARD)
GPIO.setwarnings(False)
GPIO.setup(11,GPIO.OUT)
GPIO.setup(13,GPIO.OUT)
GPIO.setup(35,GPIO.OUT)
GPIO.setup(37,GPIO.OUT)


def forward():
print("Going Forwards")
GPIO.output(11,True)
GPIO.output(13,False)
GPIO.output(35,True)
GPIO.output(37,False)
time.sleep(0.3)
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)
def backward():
print("Going Backwards")
GPIO.output(11,False)
GPIO.output(13,True)
GPIO.output(35,False)
GPIO.output(37,True)
time.sleep(0.3)
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)

 def turnRight():
print("Going Right")
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,True)
GPIO.output(37,False)
time.sleep(0.3)
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)

 def turnLeft():
print("Going Left")
GPIO.output(11,True)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)
time.sleep(0.3)
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)
def stop():
print("Stopping")
GPIO.output(11,False)
GPIO.output(13,False)
GPIO.output(35,False)
GPIO.output(37,False)




 โฟลเดอร์ ที่เก็บไฟล์รูปภาพ



โฟลเดอร์ ที่เก็บไฟล์ index.html

โค้ด index.html

<!DOCTYPE html>

<html>

<head>
<title>Web Robot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
table ,td, tr {
width: 30%;
}

</style>

<body>

<table style="width:100%; max-width: 500px; height:300px;">
<tr>
<td>
<form action="/1" method="POST">
<input type="image" name="direction" src="/static/img/left.svg" value="left" style="float:left; width:80% ;">
</br>
</form>
</td>
<td>
<form action="/2" method="POST">
<input type="image" name="direction" src="/static/img/forward.svg" value="forward" style="float:left; width:80%;">
</br>
</form>
</td>
<td>

<form action="/3" method="POST">
<input type="image" name="direction" src="/static/img/right.svg" value="right" style="float:left; width:80%;">
</br>
</form>

</td>
</tr>
<tr>
<td>
<form action="/4" method="POST">
<input type="image" name="direction" src="/static/img/reverse.svg" value="reverse" style=" margin-left:80px; width:80%;">
</br>
</form>
</td>
<td>
<form action="/5" method="POST">
<input type="image" name="direction" src="/static/img/stop.svg" value="stop" style="margin-left:80px; width:80%;">
</br>
</form>
</td>

</tr>
</table>

</body>
</html>


8.2 ทดสอบการทำงาน

เปิดโปรแกรม เทอมินอล (Root Terminal)

แล้วใช้คำสั่ง


cd web_robot


sudo python app.py


โปรแกรมพร้อมทำงาน


*** ถ้าต้องการออกจากโปรแกรม หรือ ยกเลิกการทำงาน ให้กด Ctrl พร้อมกับ c ***


เปิดบราวเซอร์ ที่โทรศัพท์มือถือ หรือ คอมพิวเตอร์ ที่ใช้ WiFi  หรือ วง แลน หรือใช้ เร้าเตอร์ เดียวกัน ที่ URL ป้อน ไอพีที่ได้จากขั้นตอนที่ 6 และตามด้วย :8000

ในตัวอย่างคือ     http://192.168.1.39:8000


จะแสดงหน้าจอตามรูปด้านล่าง





ที่ตัวหุ่นยนต์ เปิด เพาเวอร์สวิตซ์ จะมีไฟสีแดงติดที่ Motor Driver




ทดลองควบคุมหุ่นยนต์


วีดีโอผลลัพธ์การทำงานของ โปรเจคหุ่นยนต์ Raspberry Pi ควบคุมด้วย เว็บเพจ


หมายเหตุ : เรียบเรียงและแก้ไขดัดแปลงจากบทความด้านล่าง

Raspberry Pi Web Controlled Robot With Video Stream
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)