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

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

Python 相关文章推荐
由Python编写的MySQL管理工具代码实例
Apr 09 Python
Python数据类型之Set集合实例详解
May 07 Python
PyTorch中Tensor的拼接与拆分的实现
Aug 18 Python
Python爬取破解无线网络wifi密码过程解析
Sep 17 Python
wxPython多个窗口的基本结构
Nov 19 Python
详解Python中的format格式化函数的使用方法
Nov 20 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
May 22 Python
Python新手学习标准库模块命名
May 29 Python
matplotlib 多个图像共用一个colorbar的实现示例
Sep 10 Python
Django中日期时间型字段进行年月日时分秒分组统计
Nov 27 Python
Python 实现集合Set的示例
Dec 21 Python
python 写一个水果忍者游戏
Jan 13 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
You might like
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Python3.5 创建文件的简单实例
2018/04/26 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Django model class Meta原理解析
2020/11/14 Python
python之随机数函数的实现示例
2020/12/30 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
综治目标管理责任书
2015/05/11 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS