1. 程式人生 > >簡單WiFi控制小車系統(樹莓派+python+web控制介面)

簡單WiFi控制小車系統(樹莓派+python+web控制介面)

 

下面是小車 

 

 

好醜 對不對 ,不過反正可以蛇皮走位就行。

   蛇皮走位演示視訊: 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 控制檔案。

然後就可以點選按鍵 控制小車了  下面是 服務端中反饋

 

框架搭好後,根據自己需求更改 。