首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

python3实现网页版raspberry pi（树莓派）小车控制

Posted in Python onFebruary 12, 2020

关于树莓派四驱小车的运动方向控制、摄像头方向控制已经在前面的两篇博文中介绍过。有需要的可以参考。本文也是基于上述两个python文件就绪的情况进行的。

本文主要讲述我是如何实现通过网页实现小车控制的。当前的实现方式比较简陋，只能支持控制网页和树莓派在同一个局域网中的场景。如果以后还有精力，可能会进行一些改进。

1. 基本思路

python3实现网页版raspberry pi（树莓派）小车控制

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中设定的端口，可以自己修改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

python3实现网页版raspberry pi（树莓派）小车控制

- Author -

weixin_42534940

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python中的错误和异常处理简单操作示例【try-except用法】
Jul 25 Python
Python爬虫获取整个站点中的所有外部链接代码示例
Dec 26 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
Apr 21 Python
Python工厂函数用法实例分析
May 14 Python
pip安装时ReadTimeoutError的解决方法
Jun 12 Python
pyside+pyqt实现鼠标右键菜单功能
Dec 08 Python
Python创建数字列表的示例
Nov 28 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
Jun 03 Python
python 负数取模运算实例
Jun 03 Python
python生成xml时规定dtd实例方法
Sep 21 Python
python如何做代码性能分析
Apr 26 Python
pytorch finetuning 自己的图片进行训练操作
Jun 05 Python
解决Pycharm 导入其他文件夹源码的2种方法
Feb 12 #Python
Tensorflow 模型转换 .pb convert to .lite实例
Feb 12 #Python
tensorflow的ckpt及pb模型持久化方式及转化详解
Feb 12 #Python
关于Tensorflow 模型持久化详解
Feb 12 #Python
Python qrcode 生成一个二维码的实例详解
Feb 12 #Python
python标准库sys和OS的函数使用方法与实例详解
Feb 12 #Python
python标准库os库的函数介绍
Feb 12 #Python
D1875(1) D1835(1) 德生9700DX(1) 德生PL330(2) 德劲1103(3) ICF-SW7600GR(1) 山进(2) L4X25T(1) PHILIPS(3) 飞利浦(2)
You might like
php获取系统变量方法小结
2015/05/29 PHP
帝国cms目录结构分享
2015/07/06 PHP
用js实现小球的自由移动代码
2013/04/22 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
在Python中表示一个对象的方法
2019/06/25 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
新驾驶员个人自我评价
2014/01/03 职场文书
铁路工务反思材料
2014/02/07 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
国际贸易专业求职信
2014/06/04 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
接收函
2019/04/22 职场文书
2019最新校园运动会广播稿！
2019/06/28 职场文书