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

2024-11-28 18:39:30

关于树莓派四驱小车的运动方向控制、摄像头方向控制已经在前面的两篇博文中介绍过。有需要的可以参考。本文也是基于上述两个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中设定的端口，可以自己修改

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

python3实现raspberry pi（树莓派）4驱小车控制程序

0. 写在前面: 一两个月前偶然得到一个树莓派一代,发现还是挺强大的,然后就考虑着自己实现一个四驱小车.因为本身是学软件的,所以利用软件来控制实实在在可见的硬件一直是自己的一个梦想.所以当时也是花了很多时间来琢磨.实验小车控制方面的东西.因为时间过去比较久了,这里也就只是记录一下当时踩过的坑.实现的一些思路以及绝大部分源代码.截止当前,我的树莓派小车实现的主要功能是: 控制小车前进.后退.左转.右转.后退左转.后退右转摄像头两路舵机控制(实现摄像头上下左右旋转) 网页版小车控制程序(小车控制
python3实现网页版raspberry pi（树莓派）小车控制

关于树莓派四驱小车的运动方向控制.摄像头方向控制已经在前面的两篇博文中介绍过.有需要的可以参考.本文也是基于上述两个python文件就绪的情况进行的. 本文主要讲述我是如何实现通过网页实现小车控制的.当前的实现方式比较简陋,只能支持控制网页和树莓派在同一个局域网中的场景.如果以后还有精力,可能会进行一些改进. 1. 基本思路 2. 服务端控制程序server.py # --coding:utf-8-- from http.server import BaseHTTPRequestHandler,
微信小程序实现树莓派（raspberry pi）小车控制

本文是基于上一篇"网页版树莓派小车控制程序"改造而成.主要也练习了一下微信小程序的开发.这里简单记录一下主要代码片段.也是趟过了许多的坑,例如:微信小程序不支持完全全屏,微信小程序不能横屏展示.所以开发过程中也用了一些非常手段.可以说这只是一个很基本的demo,所以里面很多东西,比如摄像头监控ip.页面元素定位我都使用了写死的值.特别是界面,我只是在iPhone 6上面做的实验,所以换到其他手机上时,界面就会变型了. 1. 基本思路进入小程序时展示index页,可以让用户输入服务端u
在Debian（Raspberry Pi）树莓派上安装NodeJS的教程详解

在树莓派上运行NodeJS并不需要特别的配置,你只需要确保可以用openssh远程连接到你的树莓派. 安装并配置Open SSH服务器它可以确保你能远程连接到树莓派,它应该已经被安装了,但是这个过程可以确保安装最新版和生成加密密钥. 如果Raspberry Pi运行在'headerlesss'模式.没有显示器,键盘或鼠标的情况下,就需要通过网线连接到树莓派. sudo apt-get install openssh-server sudo rm -rf /etc/ssh/ssh_host_*
jQuery编写网页版2048小游戏

大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源
python模仿网页版微信发送消息功能

这个微信版网页版虽然繁琐,但是不是很难,全程不带加密的.有兴趣的可以试着玩一玩,如果有兴趣的话,可以完善一下,做一些比较有意思的东西. 开发环境:Windows10 开发语言:Python3.6 开发工具:pycharm 抓包工具:fiddler 抓的包如下: import requests import time import re from bs4 import BeautifulSoup import json import random from copyheaders import h
大转盘抽奖小程序版转盘抽奖网页版

今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.ite
JavaScript实现网页版五子棋游戏

本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码,供大家参考,具体内容如下学习js的第三天,跟着老师完成的五子棋小游戏,记录学习成果欢迎大佬们一起分享经验,批评指正. 本程序主要通过三部分实现: 1.棋盘绘制 2.鼠标交互 3.输赢判断 <!DOCTYPE html> <html> <head> <title> canvastest </title> </head> <body> <h1>
php实现的网页版剪刀石头布游戏示例

本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: <?php /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { $what = $_POST['what']; //需要输入的数组 $my_array = array("剪刀","石头","布"); //获胜规则 $guize = array(array("剪刀",&quo
原生js实现的贪吃蛇网页版游戏完整实例

本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc

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

相关推荐

随机推荐