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脚本自动生成需要文件实例代码
Feb 04 Python
Python错误: SyntaxError: Non-ASCII character解决办法
Jun 08 Python
Django在win10下的安装并创建工程
Nov 20 Python
Python实现一个Git日志统计分析的小工具
Dec 14 Python
python实现Decorator模式实例代码
Feb 09 Python
python编程使用协程并发的优缺点
Sep 20 Python
python实现动态数组的示例代码
Jul 15 Python
tensorflow之自定义神经网络层实例
Feb 07 Python
numpy的Fancy Indexing和array比较详解
Jun 11 Python
Python自定义sorted排序实现方法详解
Sep 18 Python
Django debug为True时,css加载失败的解决方案
Apr 24 Python
OpenCV-Python 实现两张图片自动拼接成全景图
Jun 11 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存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JS重要知识点小结
2011/11/06 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python的另外几种语言实现
2015/01/29 Python
python生成验证码图片代码分享
2016/01/28 Python
谈谈python中GUI的选择
2018/03/01 Python
python3中的md5加密实例
2018/05/29 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python调用服务接口的实例
2019/01/03 Python
如何使用Pytorch搭建模型
2020/10/26 Python
python 用struct模块解决黏包问题
2020/11/07 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
大学生个人简历自我评价
2013/11/16 职场文书
语文教育专业应届生求职信
2013/11/23 职场文书
单位在职证明书
2014/09/11 职场文书
公务员检讨书
2014/11/01 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript