< >
Home » 树莓派3小车 » 树莓派小车-WEB按键控制

树莓派小车-WEB按键控制

WEB按键控制

这次教程的代码需要用到python的一个异步io框架tornado。

官网：

  • http://www.tornadoweb.org/

tornado安装方法：

  1. pip 安装：

    sudo pip install tornado

  2. 源代码安装：

    wget https://pypi.python.org/packages/source/t/tornado/tornado-4.3.tar.gz
    tar xvzf tornado-4.3.tar.gz
    cd tornado-4.3
    python setup.py build
    sudo python setup.py install

小车控制的python代码：

#!/usr/bin/python
#coding: utf8
import sys
import RPi.GPIO as GPIO
import time
import sys
import tornado.ioloop
import tornado.web
import tornado.httpserver
import tornado.options
from tornado.options import define,options
define("port",default=80,type=int)
IN1 = 11
IN2 = 12
IN3 = 13
IN4 = 15
def init():
        GPIO.setmode(GPIO.BOARD)
        GPIO.setup(IN1,GPIO.OUT)
        GPIO.setup(IN2,GPIO.OUT)
        GPIO.setup(IN3,GPIO.OUT)
        GPIO.setup(IN4,GPIO.OUT)

# 前进
def forward(tf):
        GPIO.output(IN1,GPIO.HIGH)
        GPIO.output(IN2,GPIO.LOW)
        GPIO.output(IN3,GPIO.HIGH)
        GPIO.output(IN4,GPIO.LOW)
        time.sleep(tf)
        GPIO.cleanup()

# 后退
def reverse(tf):
        GPIO.output(IN1,GPIO.LOW)
        GPIO.output(IN2,GPIO.HIGH)
        GPIO.output(IN3,GPIO.LOW)
        GPIO.output(IN4,GPIO.HIGH)
        time.sleep(tf)
        GPIO.cleanup()

# 左转弯
def left(tf):
        GPIO.output(IN1,GPIO.LOW)
        GPIO.output(IN2,GPIO.LOW)
        GPIO.output(IN3,GPIO.HIGH)
        GPIO.output(IN4,GPIO.LOW)
        time.sleep(tf)
        GPIO.cleanup()

# 右转弯
def right(tf):
        GPIO.output(IN1,GPIO.HIGH)
        GPIO.output(IN2,GPIO.LOW)
        GPIO.output(IN3,GPIO.LOW)
        GPIO.output(IN4,GPIO.LOW)
        time.sleep(tf)
        GPIO.cleanup()

# 后左转弯
def pivot_left(tf):
        GPIO.output(IN1,GPIO.LOW)
        GPIO.output(IN2,GPIO.HIGH)
        GPIO.output(IN3,GPIO.LOW)
        GPIO.output(IN4,GPIO.LOW)
        time.sleep(tf)
        GPIO.cleanup()

# 后右转弯
def pivot_right(tf):
        GPIO.output(IN1,GPIO.LOW)
        GPIO.output(IN2,GPIO.LOW)
        GPIO.output(IN3,GPIO.LOW)
        GPIO.output(IN4,GPIO.HIGH)
        time.sleep(tf)
        GPIO.cleanup()

# 原地左转
def p_left(tf):
        GPIO.output(IN1,GPIO.LOW)
        GPIO.output(IN2,GPIO.HIGH)
        GPIO.output(IN3,GPIO.HIGH)
        GPIO.output(IN4,GPIO.LOW)
        time.sleep(tf)
        GPIO.cleanup()

# 原地右转
def p_right(tf):
        GPIO.output(IN1,GPIO.HIGH)
        GPIO.output(IN2,GPIO.LOW)
        GPIO.output(IN3,GPIO.LOW)
        GPIO.output(IN4,GPIO.HIGH)
        time.sleep(tf)
        GPIO.cleanup()
class IndexHandler(tornado.web.RequestHandler):
        def get(self):
                self.render("index.html")
        def post(self):
                init()
                sleep_time = 0.1
                arg = self.get_argument('k')
                if(arg=='w'):
                        forward(sleep_time)
                elif(arg=='s'):
                        reverse(sleep_time)
                elif(arg=='a'):
                        left(sleep_time)
                elif(arg=='d'):
                        right(sleep_time)
                elif(arg=='q'):
                        pivot_left(sleep_time)
                elif(arg=='e'):
                        pivot_right(sleep_time)
                elif(arg=='z'):
                        p_left(sleep_time)
                elif(arg=='x'):
                        p_right(sleep_time)
                else:
                        return False
                self.write(arg)
if __name__ == '__main__':
        tornado.options.parse_command_line()
        app = tornado.web.Application(handlers=[(r"/",IndexHandler)])
        http_server = tornado.httpserver.HTTPServer(app)
        http_server.listen(options.port)
        tornado.ioloop.IOLoop.instance().start()

小车控制的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sunny的小车</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
    function go(k){
        $.post('/',{k:k},function(){});
    }
    $(function(){
        window.document.onkeydown = abc;
        function abc(env){
            env = (env) ? env : window.event;
            if(env.keyCode=='87'){
                go('w');
            }
            if(env.keyCode=='83'){
                go('s');
            }
            if(env.keyCode=='65'){
                go('a');
            }
            if(env.keyCode=='68'){
                go('d');
            }
            if(env.keyCode=='81'){
                go('q');
            }
            if(env.keyCode=='69'){
                go('e');
            }
            if(env.keyCode=='90'){
                go('z');
            }
            if(env.keyCode=='88'){
                go('x');
            }
        }
        var i = null;
        $('.before').mousedown(function(){
            i = setInterval(function(){
                go('w');
            },100);
        });
        $('.left').mousedown(function(){
            i = setInterval(function(){
                go('a');
            },100);
        });
        $('.right').mousedown(function(){
            i = setInterval(function(){
                go('d');
            },100);
        });
        $('.cabk').mousedown(function(){
            i = setInterval(function(){
                go('s');
            },100);
        });
        $('#main span').mouseup(function(){
            clearInterval(i);
        });
    });
</script>
<style type="text/css">
    #main{width: 150px;height: 150px;background: #ccc;}
    #main span{width: 50px;height: 50px;float: left;z-index: 999;}
    #main span.on2{background: #ff00ff;}
</style>
<div id="main">
    <span></span>
    <span class="on2 before"></span>
    <span></span>
    <span class="on2 left"></span>
    <span></span>
    <span class="on2 right"></span>
    <span></span>
    <span class="on2 cabk"></span>
    <span></span>
</div>
</body>
</html>

视频演示：

  • 高清下载地址：http://yunpan.cn/cL6FIb8AaAKMz （提取码：72d6）
  • 链接: http://pan.baidu.com/s/1qWCHnTM 密码: c38p

纠错,疑问,交流: 请进入讨论区或 点击加入Q群

获取最新文章: 扫一扫右上角的二维码加入“创客智造”公众号


标签: 树莓派小车