專案場景：
之前的小車教程式列里寫到了網頁控制小車速度的初步實作，當時只是初步實作小車速度的加減，但運行起來還是出現了些問題，如不能實作小車的移動與變速同時進行、手指離開按鍵后小車仍有延遲等，
問題分析：
之前的教程中小車的移動與變速只能夠按順序調節，非常的不方便，而且隨著低電平輸出時間的增多，小車移動約不受控制，因運行時間的增長而導致小車運行與按鍵之間存在延遲，
因此我們需要進行同步調節(通過網頁端按鍵的交替捕捉)，且小車的運行時的低電平+高電平輸出時間不能變，
經過大量的資料查詢，我找到了這樣一篇博客：JS實作兩個鍵盤按鍵同時觸發的事件，里面有個html是如下圖所示的畫面：
里面是一個簡單的英文短語，但能通過電腦右邊的上下左右鍵盤進行同步移動，若按鍵方向相反，會按照后按的按鍵進行移動，若方向出現夾角，會朝兩方向(∠45°)同時移動，
經過一定的除錯之后，我在兩個地方加了console.log()方法通過F12按鍵進行輸出記錄查看，
switch(ev.keyCode){
case 37:
delta_x=-1;
<!-- console.log('w'); -->
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>小車</title>
</head>
<body>
<!--keyCode 鍵盤碼 在鍵盤事件發生的時候 記錄對應按的哪個鍵-->
<script 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;
<!-- var jiasu=0; -->
<!-- var jiansu=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;
<!-- console.log('w'); -->
break;
case 65:
left1=1;
<!-- console.log('a'); -->
break;
case 88:
right1=1;
<!-- console.log('x'); -->
break;
case 68:
cabk1=1;
<!-- console.log('d'); -->
break;
case 81:
zuoshang1=1;
<!-- console.log('q'); -->
break;
case 69:
zuoxia1=1;
<!-- console.log('e'); -->
break;
case 90:
youshang1=1;
<!-- console.log('z'); -->
break;
case 67:
youxia1=1;
<!-- console.log('c'); -->
break;
case 74:
<!-- jiasu=1; -->
<!-- console.log('j'); -->
go('j');
break;
case 75:
<!-- jiansu=1; -->
<!-- console.log('k'); -->
go('k');
break;
default:
break;
}
}
document.addEventListener('keyup',(e)=>{
var ev = e || window.event;
switch(ev.keyCode){
case 87:
before1=0;
<!-- console.log('w'); -->
break;
case 65:
left1=0;
<!-- console.log('a'); -->
break;
case 88:
right1=0;
<!-- console.log('x'); -->
break;
case 68:
cabk1=0;
<!-- console.log('d'); -->
break;
case 81:
zuoshang1=0;
<!-- console.log('q'); -->
break;
case 69:
zuoxia1=0;
<!-- console.log('e'); -->
break;
case 90:
youshang1=0;
<!-- console.log('z'); -->
break;
case 67:
youxia1=0;
<!-- console.log('c'); -->
break;
default:
break;
}
},false);
var i= null;
$('.before').mousedown(function(){
i = setInterval(function(){
<!-- console.log('w'); -->
go('w');
},50);
});
$('.left').mousedown(function(){
i = setInterval(function(){
<!-- console.log('a'); -->
go('a');
},50);
});
$('.cabk').mousedown(function(){
i = setInterval(function(){
<!-- console.log('x'); -->
go('x');
},50);
});
$('.right').mousedown(function(){
i = setInterval(function(){
<!-- console.log('d'); -->
go('d');
},50);
});
$('.zuoshang').mousedown(function(){
i = setInterval(function(){
<!-- console.log('q'); -->
go('q');
},50);
});
$('.youshang').mousedown(function(){
i = setInterval(function(){
<!-- console.log('e'); -->
go('z');
},50);
});
$('.zuoxia').mousedown(function(){
i = setInterval(function(){
<!-- console.log('z'); -->
go('e');
},50);
});
$('.youxia').mousedown(function(){
i = setInterval(function(){
<!-- console.log('c'); -->
go('c');
},50);
});
$('.jiasu').mousedown(function(){
i = setInterval(function(){
<!-- console.log('j'); -->
go('j');
},100);
});
$('.jiansu').mousedown(function(){
i = setInterval(function(){
<!-- console.log('k'); -->
go('k');
},100);
});
$('#main span').mouseup(function(){
clearInterval(i);
});
});
var timer = window.setInterval(()=>{
if(before1==1) {<!-- console.log('s'); -->
go('w');}
if(cabk1==1) {<!-- console.log('x'); -->
go('x');}
if(left1==1) {<!-- console.log('a'); -->
go('a');}
if(right1==1) {<!-- console.log('d'); -->
go('d');}
if(zuoshang1==1){<!-- console.log('q'); -->
go('q');}
if(zuoxia1==1) {<!-- console.log('e'); -->
go('e');}
if(youshang1==1){<!-- console.log('z'); -->
go('z');}
if(youxia1==1) {<!-- console.log('c'); -->
go('c');}
},80);
</script>
<style 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;}
</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>
<span class="on3 zuoshang"></span>
<span></span>
<span class="on4 zuoxia"></span>
<span></span>
<span class="on5 youshang"></span>
<span></span>
<span class="on6 youxia"></span>
<span></span>
<span class="on7 jiasu"></span>
<span></span>
<span class="on8 jiansu"></span>
<span></span>
</div>
</body>
</html>
上面的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模塊，目的是能夠遠程控制小車在攝像頭監視下行駛，且能夠監測小車周圍的環境資料，希望接下來也能夠寫出這樣的記錄，能為之后同需求的讀者提供幫助，
感謝各位觀看，如有不足，歡迎在評論內留言與討論，如果覺得寫得好的，可以給我點贊+收藏+關注哦，再次感謝各位！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258202.html
標籤：其他
下一篇：JavaScript字串常用方法