树莓派|树莓派小车教程(四)之——基本实现网页控制小车速度可调(同步执行) js|html|嵌入式|raspberry|pi|python

项目场景：之前的小车教程序列里写到了网页控制小车速度的初步实现。当时只是初步实现小车速度的加减，但运行起来还是出现了些问题，如不能实现小车的移动与变速同时进行、手指离开按键后小车仍有延迟等。

问题分析：之前的教程中小车的移动与变速只能够按顺序调节，非常的不方便。而且随着低电平输出时间的增多，小车移动约不受控制。因运行时间的增长而导致小车运行与按键之间存在延迟。
因此我们需要进行同步调节(通过网页端按键的交替捕捉)，且小车的运行时的低电平+高电平输出时间不能变。
经过大量的资料查询，我找到了这样一篇博客：JS实现两个键盘按键同时触发的事件。里面有个html是如下图所示的画面：

文章图片

里面是一个简单的英文短语，但能通过电脑右边的上下左右键盘进行同步移动。若按键方向相反，会按照后按的按键进行移动。若方向出现夹角，会朝两方向(∠45°)同时移动。
经过一定的调试之后，我在两个地方加了console.log()方法通过F12按键进行输出记录查看。

switch(ev.keyCode){ case 37: delta_x=-1; break; case 38: delta_y=-1; console.log('x'); break;

var timer = window.setInterval(()=>{ if(delta_x==-1) {console.log('s'); } var unit = 10; var p = document.getElementsByTagName('p')[0]; var left = window.getComputedStyle(p,null).left; var top = window.getComputedStyle(p,null).top; p.style.left=parseInt(left)+delta_x*unit+'px'; p.style.top=parseInt(top)+delta_y*unit+'px'; },50);

在这两个地方加输出函数后，网页通过F12查看按键输出会有这样的现象：
在先按"←"再一起按"↑"时，会有这两处字母交替出现，随着第二处代码最后"50"的增大会x与s的比值会减少。

文章图片

但先按"↑"再一起按"←"时，随着"←"的按下，x会停止出现，s则一直存在。

文章图片

我们需要的则是第一个现象。可以让方向控制都作为x，变速控制都作为s。这样就能实现在小车行驶的同时变速。但也是因为有第二个现象。不能先按变速按键再一起按方向按键，否则只能一直行驶，速度不变。
代码产出：根据上面的方法以及现象，我写出了这样的网页文件xiaoche.html:

src="http://img.readke.com/221009/0926253032-3.jpg"> 小车 type="text/javascript"> var before1=0; var cabk1=0; var left1=0; var right1=0; var zuoshang1=0; var youshang1=0; var zuoxia1=0; var youxia1=0; function go(k){$.post('/',{ k:k},function(){ }); } $(function(){window.document.onkeydown = abc; function abc(ev){ev = (ev) ? ev : window.event; // 指定方向键，w(上-->87),a(左-->65),x(下-->68),d(右-->88) switch(ev.keyCode){case 87: before1=1; break; case 65: left1=1; break; case 88: right1=1; break; case 68: cabk1=1; break; case 81: zuoshang1=1; break; case 69: zuoxia1=1; break; case 90: youshang1=1; break; case 67: youxia1=1; break; case 74:go('j'); break; case 75:go('k'); break; default: break; } }document.addEventListener('keyup',(e)=>{var ev = e || window.event; switch(ev.keyCode){case 87: before1=0; break; case 65: left1=0; break; case 88: right1=0; break; case 68: cabk1=0; break; case 81: zuoshang1=0; break; case 69: zuoxia1=0; break; case 90: youshang1=0; break; case 67: youxia1=0; break; default: break; } },false); var i= null; $('.before').mousedown(function(){i = setInterval(function(){go('w'); },50); }); $('.left').mousedown(function(){i = setInterval(function(){go('a'); },50); }); $('.cabk').mousedown(function(){i = setInterval(function(){go('x'); },50); }); $('.right').mousedown(function(){i = setInterval(function(){go('d'); },50); }); $('.zuoshang').mousedown(function(){i = setInterval(function(){go('q'); },50); }); $('.youshang').mousedown(function(){i = setInterval(function(){go('z'); },50); }); $('.zuoxia').mousedown(function(){i = setInterval(function(){go('e'); },50); }); $('.youxia').mousedown(function(){i = setInterval(function(){go('c'); },50); }); $('.jiasu').mousedown(function(){i = setInterval(function(){go('j'); },100); }); $('.jiansu').mousedown(function(){i = setInterval(function(){go('k'); },100); }); $('#main span').mouseup(function(){clearInterval(i); }); }); var timer = window.setInterval(()=>{if(before1==1){go('w'); } if(cabk1==1){go('x'); } if(left1==1){go('a'); } if(right1==1){go('d'); } if(zuoshang1==1){go('q'); } if(zuoxia1==1){go('e'); } if(youshang1==1){go('z'); } if(youxia1==1){go('c'); } },80); type="text/css"> #main{ width: 150px; height: 150px; background: #ccc; } #main span{ width: 50px; height: 50px; float: left; } #main span.on2{ background: #ff00ff; } #main span.on3{ background: #555555; position: absolute; left: 8px; top: 8px; } #main span.on4{ background: #555555; position: absolute; left: 108px; top: 8px; } #main span.on5{ background: #555555; position: absolute; left: 8px; top: 108px; } #main span.on6{ background: #555555; position: absolute; left: 108px; top: 108px; } #main span.on7{ background: #10e62a; position: absolute; left: 300px; top: 58px; } #main span.on8{ background: #f10606; position: absolute; left: 370px; top: 58px; } > class="on2 before"> > class="on2 left"> > class="on2 right"> > class="on2 cabk"> > class="on3 zuoshang"> > class="on4 zuoxia"> > class="on5 youshang"> > class="on6 youxia"> > class="on7 jiasu"> > class="on8 jiansu"> >

上面的html中结合了onkeydown与keyup方法来对每个按键影响的变量进行0/1的赋值。最后通过var timer = window.setInterval(()=>函数来判断变量的数值以进行go()函数的调用。且这些变量中并没有加减速。因此加减速能与他们分开并交替传输到python代码中。
接下来给出python代码xiaoche.py:

# coding:utf-8 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#GPIO.setmode(GPIO.BOARD) define("port",default=8080,help="run on the given port",type=int) IN1 = 11 IN2 = 12 IN3 = 13 IN4 = 15#IO口初始化 def init(): GPIO.setmode(GPIO.BOARD) GPIO.setwarnings(False) GPIO.setup(IN1,GPIO.OUT) GPIO.setup(IN2,GPIO.OUT) GPIO.setup(IN3,GPIO.OUT) GPIO.setup(IN4,GPIO.OUT) #向右 def right(tf): GPIO.output(IN1,GPIO.HIGH) GPIO.output(IN2,GPIO.LOW) GPIO.output(IN3,False) GPIO.output(IN4,False) time.sleep(tf) #GPIO.cleanup() #向左 def left(tf): GPIO.output(IN1,GPIO.LOW) GPIO.output(IN2,GPIO.HIGH) GPIO.output(IN3,False) GPIO.output(IN4,False) time.sleep(tf) #GPIO.cleanup() #向前 def before(tf): GPIO.output(IN1,False) GPIO.output(IN2,False) GPIO.output(IN3,GPIO.HIGH) GPIO.output(IN4,GPIO.LOW) time.sleep(tf) #GPIO.cleanup() #向后 def cabk(tf): GPIO.output(IN1,False) GPIO.output(IN2,False) GPIO.output(IN3,GPIO.LOW) GPIO.output(IN4,GPIO.HIGH) time.sleep(tf) #GPIO.cleanup() #左上 def zuoshang(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 youshang(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() #右下 def youxia(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 zuoxia(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 change(tf): GPIO.output(IN1,False) GPIO.output(IN2,False) GPIO.output(IN3,False) GPIO.output(IN4,False) time.sleep(tf) #GPIO.cleanup()sleep_time=0.012 change_time=0.001 class IndexHandler(tornado.web.RequestHandler):def get(self): self.render("xiaoche.html") def post(self): init() global sleep_time global change_time arg=self.get_argument('k') if(arg=='w'): before(sleep_time) change(change_time) #print("1") elif(arg=='x'): cabk(sleep_time) change(change_time) elif(arg=='a'): left(sleep_time) change(change_time) elif(arg=='d'): right(sleep_time) change(change_time) elif(arg=='q'): zuoshang(sleep_time) change(change_time) elif(arg=='z'): youshang(sleep_time) change(change_time) elif(arg=='e'): zuoxia(sleep_time) change(change_time) elif(arg=='c'): youxia(sleep_time) change(change_time) elif(arg=='j'): if(change_time>0.001): sleep_time=sleep_time+0.0001; change_time=change_time-0.0001; elif(arg=='k'): if(change_time<0.003): sleep_time=sleep_time-0.0001; change_time=change_time+0.0001; 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) #print("1") http_server.listen(options.port) print("Demo is runing at 192.168.1.102:8888") tornado.ioloop.IOLoop.instance().start() #print("1")

该函数内的代码与网页控制小车速度的初步实现里代码唯一不同的地方是将sleep_time也设定成了全局变量，与change_time相反的增减，以此达到每次循环的时间都是一样的。运行时的效果也是比较明显的。
但是两个时间的比例还是需要多次试验才能定下。否则比例不当会造成小车边开边卡。
运行结果在图片上还是没什么变化，还是需要自己一步步调试才能成功。

文章图片

文章图片

不足：现在网页控制还是有点不足的，由于可以同步。导致各个方向控制的按键中，若有多个同时按下，可能导致驱动异常。且必须先按方向键才能接着一起按变速键，否则无法实现变速。
总结：其实自己也没想的，这么快就已经出到小车教程系列四了。希望看到这了的朋友能够在树莓派小车上有自己的突破。
关于小车行驶方面是没有问题了，只在这方面有需求的读者们一个系列看到这里希望能基本解决你们的需求。不过我的项目中不仅是小车能开，还需要装载摄像头与监测模块、4G模块，目的是能够远程控制小车在摄像头监视下行驶，且能够监测小车周围的环境数据。希望接下来也能够写出这样的记录，能为之后同需求的读者提供帮助。
【树莓派|树莓派小车教程(四)之——基本实现网页控制小车速度可调(同步执行)】感谢各位观看，如有不足，欢迎在评论内留言与讨论。如果觉得写得好的，可以给我点赞+收藏+关注哦，再次感谢各位！