用python3實現網頁版raspberry pi(樹莓派)小車控制
阿新 • • 發佈:2019-01-09
目錄
關於樹莓派四驅小車的運動方向控制、攝像頭方向控制已經在前面的兩篇博文中介紹過。有需要的可以參考。本文也是基於上述兩個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" onmousedown="directionBtnDown('F')" onmouseup="directionBtnUp()">F</button> <button class="left drectionBtn" id="L" onmousedown="directionBtnDown('L')" onmouseup="directionBtnUp()">L</button> <button class="right drectionBtn" id="R" onmousedown="directionBtnDown('R')" onmouseup="directionBtnUp()">R</button> <button class="bottom drectionBtn" id="B" onmousedown="directionBtnDown('B')" onmouseup="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" onmousedown="directionBtnDown('VU')">Up</button> <button class="left drectionBtn" id="HL" onmousedown="directionBtnDown('HL')">Left</button> <button class="right drectionBtn" id="HR" onmousedown="directionBtnDown('HR')">Right</button> <button class="bottom drectionBtn" id="VD" onmousedown="directionBtnDown('VD')">Down</button> </span> </body> </html>
4. 使用方式簡介
- 在樹莓派上執行MJPG-Streamer
- 在樹莓派上執行服務端控制程式server.py
- 在相同區域網的pc上開啟瀏覽器,訪問server地址,如 http://192.168.1.101:9090。其中,ip地址是樹莓派的ip,埠9090是server中設定的埠,可以自己修改