Support for robot control through keyboard

This commit is contained in:
Fabio Manganiello 2018-04-12 18:42:01 +02:00
parent 25e601ca4d
commit cf2b362947
2 changed files with 58 additions and 4 deletions

View file

@ -1,6 +1,7 @@
$(document).ready(function() {
var $container = $('#zb-container'),
$controlsContainer = $('.zb-controls-container');
$controlsContainer = $('.zb-controls-container'),
curDirection = undefined;
var execute = function(request, onSuccess, onError, onComplete) {
request['target'] = 'localhost';
@ -35,20 +36,23 @@ $(document).ready(function() {
var initBindings = function() {
$controlsContainer.on('mousedown touchstart', '.zb-ctrl-btn[data-direction]', function() {
console.log($(this).data('direction') + ' press start');
var direction = $(this).data('direction');
curDirection = direction;
console.log(direction + ' press start');
$(this).addClass('selected');
execute({
type: 'request',
action: 'gpio.zeroborg.drive',
args: {
direction: $(this).data('direction')
direction: direction
}
});
});
$controlsContainer.on('mouseup touchend', '.zb-ctrl-btn[data-direction]', function() {
console.log($(this).data('direction') + ' press end');
curDirection = undefined;
$(this).removeClass('selected');
execute({
@ -62,6 +66,7 @@ $(document).ready(function() {
if ($(this).data('action') === 'stop') {
$controlsContainer.find('.zb-ctrl-btn[data-action=auto]').removeClass('selected');
curDirection = undefined;
execute({
type: 'request',
@ -69,6 +74,7 @@ $(document).ready(function() {
});
} else if ($(this).data('action') === 'auto') {
$(this).toggleClass('selected');
curDirection = 'auto_toggle';
execute({
type: 'request',
@ -79,6 +85,54 @@ $(document).ready(function() {
});
}
});
var keyEventToDirection = function(event) {
var direction;
switch (event.keyCode) {
case 32: // SPACE bar
direction = 'auto'; break;
case 37: // LEFT
direction = 'left'; break;
case 38: // UP
direction = 'up'; break;
case 39: // RIGHT
direction = 'right'; break;
case 40: // DOWN
direction = 'down'; break;
default:
return;
}
return direction;
};
$container.on('keydown', function(event) {
if (curDirection) {
return;
}
var direction = keyEventToDirection(event);
if (direction) {
if (direction === 'auto') {
$controlsContainer.find('.zb-ctrl-btn[data-action=auto]').click();
} else {
$controlsContainer.find('.zb-ctrl-btn[data-direction=' + direction + ']').mousedown();
}
}
});
$container.on('keyup', function(event) {
var direction = keyEventToDirection(event);
if (direction) {
if (direction === 'auto') {
$controlsContainer.find('.zb-ctrl-btn[data-action=auto]').click();
$controlsContainer.find('.zb-ctrl-btn[data-action=stop]').click();
} else {
$controlsContainer.find('.zb-ctrl-btn[data-direction=' + direction + ']').mouseup();
}
}
});
};
var init = function() {

View file

@ -1,7 +1,7 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/gpio.zeroborg.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/gpio.zeroborg.css') }}"></script>
<div id="zb-container" class="row">
<div id="zb-container" class="row" tabindex="1">
<div class="zb-controls-container">
<div class="row">
<div class="four columns">&nbsp;</div>