python3实现网页版raspberry pi(树莓派)小车控制
作者:weixin_42534940 发布时间:2021-05-05 05:35:18
标签:python3,树莓派,小车控制
关于树莓派四驱小车的运动方向控制、摄像头方向控制已经在前面的两篇博文中介绍过。有需要的可以参考。本文也是基于上述两个python文件就绪的情况进行的。
本文主要讲述我是如何实现通过网页实现小车控制的。当前的实现方式比较简陋,只能支持控制网页和树莓派在同一个局域网中的场景。如果以后还有精力,可能会进行一些改进。
1. 基本思路
2. 服务端控制程序server.py
# --coding:utf-8--
from http.server import BaseHTTPRequestHandler, HTTPServer
import time
import socket
import urllib
from car_controler import FourWheelDriveCar
from camera_controler import Camera
class CarServer(BaseHTTPRequestHandler):
carControler = FourWheelDriveCar()
cameraControler = Camera()
def get_host_ip(self):
'''
This method is used for getting local ip address
The car server will deploy on this ip
'''
try:
serverSocket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
serverSocket.connect(("8.8.8.8", 80))
localIP = serverSocket.getsockname()[0]
finally:
return localIP
def do_GET(self):
'''
Define the car control GUI for client
For the first edition, it will only return direction contol GUI
'''
localIP = CarServer.get_host_ip(self)
# When this GET method is called, then should init the car
self.carControler.reset()
# Read control page html file from control.html
controlPageFile = open("control.html")
controlPageGUI = controlPageFile.read()
controlPageFile.close()
controlPageGUI = controlPageGUI.replace(
"requestAddress", "http://" + localIP + ":9090/")
controlPageGUI = controlPageGUI.replace(
"cameraAddress", "http://" + 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地址,如 http://192.168.1.101:9090。其中,ip地址是树莓派的ip,端口9090是server中设定的端口,可以自己修改
来源:https://blog.csdn.net/weixin_42534940/article/details/81416578
0
投稿
猜你喜欢
- 首先是三张表, CNo对应的是课程,在这里我就粘贴了。主表人名表按照常规查询SELECT s.SName, c.CName,s2.SCgra
- 学完了net/http和fasthttp两个HTTP协议接口的客户端实现,接下来就要开始Server的开发,不学不知道一学吓一跳,居然这两个
- 宝塔更新Python版本因为在宝塔中的Python版本为2.6.8,使用宝塔Python项目管理的话需要把Python升级到3.x,不然的话
- 目前全球疫情仍然比较严重,为了能清晰地看到疫情爆发以来至现在全球疫情的变化趋势,我绘制了一张疫情变化地图。 废话不多说,先上图下面就来重点介
- 一、软件准备:以下均为截止2005-4-20的最新正式版本PHP(5.1.2):http://www.php.netMySQL(5.0.19
- 一、代理模式代理模式,为其他对象提供一种代理,以此控制一个对象的访问方式。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象
- 安装docker桌面程序从docker官网下载并安装桌面程序。安装好后启动桌面程序。若出现以下错误,说明你的docker 没有启动。1. d
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 19 - TooltipsMootools 1.2
- 最近 UCDChina 以“注意界面上的文字”为主题写了一系列的文章,使我在界面文字上的使用受益匪浅。之后,我对按钮上的内容的表现也做了一些
- 装饰器的基础使用(装饰带参函数)def decorator(func): def inner(info): &nb
- 准备工作右击新建的项目,选择Python File,新建一个Python文件,然后在开头import cv2导入cv2库。转成灰度图像调用i
- 虽然在win2003配置PHP有点非主流,但你还是要会怎么弄。你也可以将本文的虚拟机看成是服务器,宿主机看成是客户端。不像Linux系统,由
- 在最近的一次调试中,出现如下错误~·错误类型:ADODB.Recordset (0x800A0E7D)连接无法用于执行此操作。在此上下文中它
- DROP PRIMAY DEY用于取消主索引。注释:在MySQL较早的版本中,如果没有主索引,则DROP PRIMARY KEY会取消表中的
- TFTP文件传输功能:1、获取文件列表2、上传文件3、下载文件4、退出第一部分,TftpServer部分。①导入相关模块from socke
- 一、什么是ttkbootstrap?官方文档 [较慢]:https://ttkbootstrap.readthedocs.io/en/lat
- 视频地址我用20行代码,帮女神破解相册密码一、事情是这样的今早上班,公司女神小姐姐说,她去年去三亚旅游的照片打不开了好奇问了一下才知道。原来
- 马上要过年了,用 Python 写一副春联&福字送给大家,本文我们主要用到的 Python 库为 tkinter,下面一起来看一下具
- 这篇文章主要介绍了如何基于Python制作有道翻译小工具,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引