簡單WiFi控制小車系統(樹莓派+python+web控制介面)
阿新 • • 發佈:2019-01-08
下面是小車
好醜 對不對 ,不過反正可以蛇皮走位就行。
蛇皮走位演示視訊: https://pan.baidu.com/s/1RHHr8bRHWzSEAkrpwu99aw
只需要 一個 Index.html 和Index.py 就可以實現 簡單WiFi 控制小車。
需要準備
python
bottle 庫
樹莓派控制介面(web客戶端)
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遙控樹莓派</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script> <style type="text/css"> #front { margin-left: 55px; margin-bottom: 3px; } #rear{ margin-top: 3px; margin-left: 55px; } .btn{ background: #62559f; } </style> <script> $(function(){ $("button").click(function(){ $.post("/cmd",this.id,function(data,status){}); }); }); </script> </head> <body> <div id="container" class="container"> <div> <button id="front" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up"></button> </div> <div> <button id='leftFront' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left"></button> <button id='stop' class="btn btn-lg btn-primary glyphicon glyphicon-stop"></button> <button id='rightFront' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right"></button> </div> <div> <button id='rear' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down"></button> </div> <div> <button id='leftRear' class="btn btn-lg btn-primary glyphicon">左後轉</button> <button id='rightRear' class="btn btn-lg btn-primary glyphicon">右後轉</button> <div> </div> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
js指令碼解釋:
<script>
$(function(){
$("button").click(function(){
$.post("/cmd",this.id,function(data,status){});
//表示 按鈕對應的id值 會被傳入樹莓派伺服器中,就如同 你在樹莓派的命令列(cmd)中輸入 id 的值
});
});
</script>
樹莓派小車控制程式+we服務端
Index.py
#!/usr/bin/env python3
# -*- coding:utf-8 -*-
from bottle import get,post,run,request,template
import RPi.GPIO as GPIO
import time
import sys
#### 定義Car類
class Car(object):
def __init__(self):
self.enab_pin = [5,6,13,19]
#### self.enab_pin是使能端的pin
self.inx_pin = [21,22,23,24]
#### self.inx_pin是控制端in的pin
self.RightAhead_pin = self.inx_pin[0]
self.RightBack_pin = self.inx_pin[1]
self.LeftAhead_pin = self.inx_pin[2]
self.LeftBack_pin = self.inx_pin[3]
#### 分別是右輪前進,右輪退後,左輪前進,左輪退後的pin
self.setup()
#### setup函式初始化埠
def setup(self):
print ("begin setup ena enb pin")
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
for pin in self.enab_pin:
GPIO.setup(pin,GPIO.OUT)
GPIO.output(pin,GPIO.HIGH)
#### 初始化使能端pin,設定成高電平
pin = None
for pin in self.inx_pin:
GPIO.setup(pin,GPIO.OUT)
GPIO.output(pin,GPIO.LOW)
#### 初始化控制端pin,設定成低電平
print ("setup ena enb pin over")
#### fornt函式,小車前進
def front(self):
self.setup()
GPIO.output(self.RightAhead_pin,GPIO.HIGH)
GPIO.output(self.LeftAhead_pin,GPIO.HIGH)
#### leftFront函式,小車左拐彎
def leftFront(self):
self.setup()
GPIO.output(self.RightAhead_pin,GPIO.HIGH)
#### rightFront函式,小車右拐彎
def rightFront(self):
self.setup()
GPIO.output(self.LeftAhead_pin,GPIO.HIGH)
#### rear函式,小車後退
def rear(self):
self.setup()
GPIO.output(self.RightBack_pin,GPIO.HIGH)
GPIO.output(self.LeftBack_pin,GPIO.HIGH)
#### leftRear函式,小車左退
def leftRear(self):
self.setup()
GPIO.output(self.RightBack_pin,GPIO.HIGH)
#### rightRear函式,小車右退
def rightRear(self):
self.setup()
GPIO.output(self.LeftBack_pin,GPIO.HIGH)
#### 定義main主函式
def main(status):
car = Car()
if status == "front":
car.front()
elif status == "leftFront":
car.leftFront()
elif status == "rightFront":
car.rightFront()
elif status == "rear":
car.rear()
elif status == "leftRear":
car.leftRear()
elif status == "rightRear":
car.rightRear()
elif status == "stop":
car.setup()
@get("/")
def index():
return template("index")
@post("/cmd")
def cmd():
adss=request.body.read().decode()
print("按下了按鈕:"+adss)
main(adss)
return "OK"
run(host="0.0.0.0")
web服務端 實際就這點程式碼, 主要是 bottle 庫的強大,(實際控制的小車的程式碼 根據自己的需求改就行了)
from bottle import get,post,run,request,template
@get("/")
def index():
return template("index")
#### 這個是 客戶端請求 服務端就發給一個 index.html 控制介面給客戶端
@post("/cmd")
def cmd():
adss=request.body.read().decode()#### 接收到 客戶端 發過來的資料
print("按下了按鈕:"+adss)
main(adss) #### 傳值到主函式 實現對應功能
return "OK"
run(host="0.0.0.0") #### 開啟服務端
執行 index.py 開啟伺服器:
然後開啟瀏覽器(手機瀏覽器也可以但必須在同一個區域網內) 輸入 樹莓派的ip 我的是 192.168.191.4:8080
有可能 開啟比較慢 10分鐘內吧 哈哈哈(我第一次開啟 就用了好久 都以為沒有成功)
手機端輸入ip
登入成功!!!
輸入之後 伺服器會給你丟擲一個 index.html 控制檔案。
然後就可以點選按鍵 控制小車了 下面是 服務端中反饋
框架搭好後,根據自己需求更改 。