如何用Python3编写网页控制树莓派小车的网页版程序？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1466个文字，预计阅读时间需要6分钟。
关于树莓派四驱动小车，我已在前两篇博文中介绍了运动方向控制和摄像头方向控制。具体操作细节，您可以参考以下内容：
1. 运动方向控制： - 使用树莓派GPIO引脚连接到小车的电机驱动板。 - 通过编程控制GPIO引脚的高低电平，实现电机的正转、反转和停止。 - 结合速度控制，可以实现对小车运动方向的精确控制。
2. 摄像头方向控制： - 将摄像头连接到树莓派的CSI接口。 - 通过编程控制摄像头的俯仰和滚转角度，实现摄像头的方向调整。 - 利用树莓派的图像处理库，可以对摄像头采集到的图像进行分析，进一步优化摄像头方向。
以下是基于上述内容的Python代码示例：
python运动方向控制import RPi.GPIO as GPIOimport time
定义GPIO引脚IN1=17IN2=27IN3=22IN4=23
设置GPIO模式GPIO.setmode(GPIO.BCM)
设置GPIO引脚为输出模式GPIO.setup(IN1, GPIO.OUT)GPIO.setup(IN2, GPIO.OUT)GPIO.setup(IN3, GPIO.OUT)GPIO.setup(IN4, GPIO.OUT)
定义运动方向函数def move_forward(): GPIO.output(IN1, GPIO.HIGH) GPIO.output(IN2, GPIO.LOW) GPIO.output(IN3, GPIO.HIGH) GPIO.output(IN4, GPIO.LOW)
def move_backward(): GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.HIGH) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.HIGH)
def stop(): GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.LOW) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.LOW)
测试运动方向控制move_forward()time.sleep(2)move_backward()time.sleep(2)stop()
摄像头方向控制import cv2import numpy as np
初始化摄像头cap=cv2.VideoCapture(0)
while True: # 读取摄像头图像 ret, frame=cap.read()
# 对图像进行预处理 gray=cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) blurred=cv2.GaussianBlur(gray, (5, 5), 0) edges=cv2.Canny(blurred, 50, 150)
# 寻找边缘 lines=cv2.HoughLinesP(edges, 1, np.pi/180, threshold=100, minLineLength=100, maxLineGap=10)
if lines is not None: for line in lines: x1, y1, x2, y2=line[0] cv2.line(frame, (x1, y1), (x2, y2), (0, 255, 0), 2)
# 显示图像 cv2.imshow('Camera', frame)
if cv2.waitKey(1) & 0xFF==ord('q'): break
释放摄像头资源cap.release()cv2.destroyAllWindows()
通过以上代码，您可以实现对树莓派四驱动小车运动方向和摄像头方向的精确控制。
关于树莓派四驱小车的运动方向控制、摄像头方向控制已经在前面的两篇博文中介绍过。有需要的可以参考。本文也是基于上述两个python文件就绪的情况进行的。
本文主要讲述我是如何实现通过网页实现小车控制的。当前的实现方式比较简陋，只能支持控制网页和树莓派在同一个局域网中的场景。如果以后还有精力，可能会进行一些改进。
1. 基本思路
2. 服务端控制程序server.py
# --coding:utf-8-- from " + localIP + ":9090/") controlPageGUI = controlPageGUI.replace( "cameraAddress", "" + localIP + ":8080/") self.send_response(200) self.send_header("Content-type", "text/html") self.end_headers() self.wfile.write(controlPageGUI.encode()) def do_POST(self): length = int(self.headers['Content-Length']) qs = self.rfile.read(length) direction = qs.decode() print(direction) cameraDirection = ['HR', 'HL', 'VU', 'VD', 'RESET'] if direction in cameraDirection: # This is used to control the camera self.cameraControler.cameraRotate(direction) else: # This is used to control the car self.carControler.carMove(direction) self.send_response(200) if __name__ == "__main__": raspCarServer = CarServer hostIP = raspCarServer.get_host_ip(raspCarServer) hostPort = 9090 myServer = HTTPServer((hostIP, hostPort), raspCarServer) print(time.asctime(), "Server Starts - %s:%s" % (hostIP, hostPort)) try: myServer.serve_forever() except KeyboardInterrupt: pass
3. 服务端返回的页面control.html
几点说明：
- html文件中有两个地址，我是在server.py中做了替换的，所以client请求之后会有实际的地址给到浏览器，最终都是使用的树莓派的ip
- 有个显示监控视频的区域，可以直接用我给出的示例使用即可，前提是你也用的MJPG-Streamer来获取摄像头监控
- 小车控制我只给来前后左右运动，没有给后退的转向控制，有需要可以自己添加
- 比较重要的是点击按钮之后发送请求到服务端，参考文件<script>中的代码
<html> <script> function directionBtnDown(direction) { var url = "requestAddress" var request = new XMLHttpRequest(); request.open("POST", url); request.send(direction) } function directionBtnUp() { var url = "requestAddress" var request = new XMLHttpRequest(); request.open("POST", url); request.send("S") } </script> <style type="text/css"> span.car { position: absolute; margin-top: 30%; height: 480px; } span.camera { position: absolute; margin-top: 5%; margin-left: 290px; height: 480px; width: 640px; background-color: blue } span.camera_control { position: absolute; margin-top: 30%; margin-left: 950px; height: 480px; background-color: blue } button.top { position: absolute; height: 50px; width: 90px; margin-left: 90px } button.left { position: absolute; height: 50px; width: 90px; margin-top: 50px; } button.right { position: absolute; height: 50px; width: 90px; margin-top: 50px; margin-left: 180px } button.bottom { position: absolute; height: 50px; width: 90px; margin-top: 100px; margin-left: 90px } </style> <head> <title>control page</title> </head> <body> <span id="car_control" class="car"> <button class="top drectionBtn" id="F" οnmοusedοwn="directionBtnDown('F')" οnmοuseup="directionBtnUp()">F</button> <button class="left drectionBtn" id="L" οnmοusedοwn="directionBtnDown('L')" οnmοuseup="directionBtnUp()">L</button> <button class="right drectionBtn" id="R" οnmοusedοwn="directionBtnDown('R')" οnmοuseup="directionBtnUp()">R</button> <button class="bottom drectionBtn" id="B" οnmοusedοwn="directionBtnDown('B')" οnmοuseup="directionBtnUp()">B</button> </span> <span id="camera_view" class="camera"> <img id="view" src="cameraAddress?action=stream" /> </span> <span id="camera_control" class="camera_control"> <button class="top drectionBtn" id="VU" οnmοusedοwn="directionBtnDown('VU')">Up</button> <button class="left drectionBtn" id="HL" οnmοusedοwn="directionBtnDown('HL')">Left</button> <button class="right drectionBtn" id="HR" οnmοusedοwn="directionBtnDown('HR')">Right</button> <button class="bottom drectionBtn" id="VD" οnmοusedοwn="directionBtnDown('VD')">Down</button> </span> </body> </html>
4. 使用方式简介
- 在树莓派上运行MJPG-Streamer
- 在树莓派上运行服务端控制程序server.py
- 在相同局域网的pc上打开浏览器，访问server地址，如 192.168.1.101:9090。其中，ip地址是树莓派的ip，端口9090是server中设定的端口，可以自己修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。
本文共计1466个文字，预计阅读时间需要6分钟。
关于树莓派四驱动小车，我已在前两篇博文中介绍了运动方向控制和摄像头方向控制。具体操作细节，您可以参考以下内容：
1. 运动方向控制： - 使用树莓派GPIO引脚连接到小车的电机驱动板。 - 通过编程控制GPIO引脚的高低电平，实现电机的正转、反转和停止。 - 结合速度控制，可以实现对小车运动方向的精确控制。
2. 摄像头方向控制： - 将摄像头连接到树莓派的CSI接口。 - 通过编程控制摄像头的俯仰和滚转角度，实现摄像头的方向调整。 - 利用树莓派的图像处理库，可以对摄像头采集到的图像进行分析，进一步优化摄像头方向。
以下是基于上述内容的Python代码示例：
python运动方向控制import RPi.GPIO as GPIOimport time
定义GPIO引脚IN1=17IN2=27IN3=22IN4=23
设置GPIO模式GPIO.setmode(GPIO.BCM)
设置GPIO引脚为输出模式GPIO.setup(IN1, GPIO.OUT)GPIO.setup(IN2, GPIO.OUT)GPIO.setup(IN3, GPIO.OUT)GPIO.setup(IN4, GPIO.OUT)
定义运动方向函数def move_forward(): GPIO.output(IN1, GPIO.HIGH) GPIO.output(IN2, GPIO.LOW) GPIO.output(IN3, GPIO.HIGH) GPIO.output(IN4, GPIO.LOW)
def move_backward(): GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.HIGH) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.HIGH)
def stop(): GPIO.output(IN1, GPIO.LOW) GPIO.output(IN2, GPIO.LOW) GPIO.output(IN3, GPIO.LOW) GPIO.output(IN4, GPIO.LOW)
测试运动方向控制move_forward()time.sleep(2)move_backward()time.sleep(2)stop()
摄像头方向控制import cv2import numpy as np
初始化摄像头cap=cv2.VideoCapture(0)
while True: # 读取摄像头图像 ret, frame=cap.read()
# 对图像进行预处理 gray=cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) blurred=cv2.GaussianBlur(gray, (5, 5), 0) edges=cv2.Canny(blurred, 50, 150)
# 寻找边缘 lines=cv2.HoughLinesP(edges, 1, np.pi/180, threshold=100, minLineLength=100, maxLineGap=10)
if lines is not None: for line in lines: x1, y1, x2, y2=line[0] cv2.line(frame, (x1, y1), (x2, y2), (0, 255, 0), 2)
# 显示图像 cv2.imshow('Camera', frame)
if cv2.waitKey(1) & 0xFF==ord('q'): break
释放摄像头资源cap.release()cv2.destroyAllWindows()
通过以上代码，您可以实现对树莓派四驱动小车运动方向和摄像头方向的精确控制。
关于树莓派四驱小车的运动方向控制、摄像头方向控制已经在前面的两篇博文中介绍过。有需要的可以参考。本文也是基于上述两个python文件就绪的情况进行的。
本文主要讲述我是如何实现通过网页实现小车控制的。当前的实现方式比较简陋，只能支持控制网页和树莓派在同一个局域网中的场景。如果以后还有精力，可能会进行一些改进。
1. 基本思路
2. 服务端控制程序server.py
# --coding:utf-8-- from " + localIP + ":9090/") controlPageGUI = controlPageGUI.replace( "cameraAddress", "" + localIP + ":8080/") self.send_response(200) self.send_header("Content-type", "text/html") self.end_headers() self.wfile.write(controlPageGUI.encode()) def do_POST(self): length = int(self.headers['Content-Length']) qs = self.rfile.read(length) direction = qs.decode() print(direction) cameraDirection = ['HR', 'HL', 'VU', 'VD', 'RESET'] if direction in cameraDirection: # This is used to control the camera self.cameraControler.cameraRotate(direction) else: # This is used to control the car self.carControler.carMove(direction) self.send_response(200) if __name__ == "__main__": raspCarServer = CarServer hostIP = raspCarServer.get_host_ip(raspCarServer) hostPort = 9090 myServer = HTTPServer((hostIP, hostPort), raspCarServer) print(time.asctime(), "Server Starts - %s:%s" % (hostIP, hostPort)) try: myServer.serve_forever() except KeyboardInterrupt: pass
3. 服务端返回的页面control.html
几点说明：
- html文件中有两个地址，我是在server.py中做了替换的，所以client请求之后会有实际的地址给到浏览器，最终都是使用的树莓派的ip
- 有个显示监控视频的区域，可以直接用我给出的示例使用即可，前提是你也用的MJPG-Streamer来获取摄像头监控
- 小车控制我只给来前后左右运动，没有给后退的转向控制，有需要可以自己添加
- 比较重要的是点击按钮之后发送请求到服务端，参考文件<script>中的代码
<html> <script> function directionBtnDown(direction) { var url = "requestAddress" var request = new XMLHttpRequest(); request.open("POST", url); request.send(direction) } function directionBtnUp() { var url = "requestAddress" var request = new XMLHttpRequest(); request.open("POST", url); request.send("S") } </script> <style type="text/css"> span.car { position: absolute; margin-top: 30%; height: 480px; } span.camera { position: absolute; margin-top: 5%; margin-left: 290px; height: 480px; width: 640px; background-color: blue } span.camera_control { position: absolute; margin-top: 30%; margin-left: 950px; height: 480px; background-color: blue } button.top { position: absolute; height: 50px; width: 90px; margin-left: 90px } button.left { position: absolute; height: 50px; width: 90px; margin-top: 50px; } button.right { position: absolute; height: 50px; width: 90px; margin-top: 50px; margin-left: 180px } button.bottom { position: absolute; height: 50px; width: 90px; margin-top: 100px; margin-left: 90px } </style> <head> <title>control page</title> </head> <body> <span id="car_control" class="car"> <button class="top drectionBtn" id="F" οnmοusedοwn="directionBtnDown('F')" οnmοuseup="directionBtnUp()">F</button> <button class="left drectionBtn" id="L" οnmοusedοwn="directionBtnDown('L')" οnmοuseup="directionBtnUp()">L</button> <button class="right drectionBtn" id="R" οnmοusedοwn="directionBtnDown('R')" οnmοuseup="directionBtnUp()">R</button> <button class="bottom drectionBtn" id="B" οnmοusedοwn="directionBtnDown('B')" οnmοuseup="directionBtnUp()">B</button> </span> <span id="camera_view" class="camera"> <img id="view" src="cameraAddress?action=stream" /> </span> <span id="camera_control" class="camera_control"> <button class="top drectionBtn" id="VU" οnmοusedοwn="directionBtnDown('VU')">Up</button> <button class="left drectionBtn" id="HL" οnmοusedοwn="directionBtnDown('HL')">Left</button> <button class="right drectionBtn" id="HR" οnmοusedοwn="directionBtnDown('HR')">Right</button> <button class="bottom drectionBtn" id="VD" οnmοusedοwn="directionBtnDown('VD')">Down</button> </span> </body> </html>
4. 使用方式简介
- 在树莓派上运行MJPG-Streamer
- 在树莓派上运行服务端控制程序server.py
- 在相同局域网的pc上打开浏览器，访问server地址，如 192.168.1.101:9090。其中，ip地址是树莓派的ip，端口9090是server中设定的端口，可以自己修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。