树莓派小车-WEB按键控制

WEB按键控制

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

官网：

http://www.tornadoweb.org/

tornado安装方法：

pip 安装：

sudo pip install tornado

源代码安装：

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