Support for robot control through keyboard
This commit is contained in:
parent
25e601ca4d
commit
cf2b362947
2 changed files with 58 additions and 4 deletions
|
@ -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() {
|
||||
|
|
|
@ -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"> </div>
|
||||
|
|
Loading…
Reference in a new issue