简单WiFi控制小车系统(树莓派+python+web控制界面)

下面是小车

好丑 对不对 ,不过反正可以蛇皮走位就行。

蛇皮走位演示视频: https://pan.baidu.com/s/1RHHr8bRHWzSEAkrpwu99aw

只需要 一个 index.html 和Index.py 就可以实现 简单WiFi 控制小车。

需要准备

python

bottle 库

bottle 安装

命令: pip install 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 控制文件。

然后就可以点击按键 控制小车了 下面是 服务端中反馈

框架搭好后,根据自己需求更改 。

补充说明一下啊 因为我改过系统的语言和编码设置 (支持utf-8)

详情 : 树莓派 设置系统中文 并安装中文输入法

当很多人遇到

UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe6 in position 的错误,原因是python的str默认是ascii编码,和unicode编码冲突,就会报这个标题错误,解决办法是

1. 开头添加

import sys

reload(sys)

sys.setdefaultencoding(‘utf8’)

2.暴力一点,把所有中文字符 汉字什么的 包括注释了的 都统统删掉 也可以解决

还有遇到 bottle 下载安装后 ,运行说 没有 安***ottle 可能是 你把 bottle 安装到 python 2.7 环境下,而在python3 环境下找不到。

解决办法:

1 在命令行中 用对应pythonX 环境下运行

2.在执行脚本代码前 手动引包(得找到bottle 安装路径


  目录