Support for robot control through keyboard

platypush/backend/http/static/js/gpio.zeroborg.js

@@ -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() {

platypush/backend/http/templates/plugins/gpio.zeroborg.html

@@ -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>