Added auto pilot and stop controls to ZeroBorg web UI

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

@@ -3,7 +3,18 @@
     width: 25%;
 }
 
-.zb-ctrl-btn.selected {
+.zb-ctrl-btn {
-    color: #78ff00 !important;
+    white-space: normal;
+    height: 6rem;
+}
+
+    .zb-ctrl-btn.selected {
+        color: #78ff00 !important;
+    }
+
+.ctrl-bottom-row {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #ddd;
 }
 

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

@@ -56,6 +56,29 @@ $(document).ready(function() {
                 action: 'gpio.zeroborg.stop',
             });
         });
+
+        $controlsContainer.on('click touch', '.zb-ctrl-btn[data-action]', function() {
+            console.log('Running ' + $(this).data('action') + ' action');
+
+            if ($(this).data('action') === 'stop') {
+                $controlsContainer.find('.zb-ctrl-btn[data-action=auto]').removeClass('selected');
+
+                execute({
+                    type: 'request',
+                    action: 'gpio.zeroborg.stop',
+                });
+            } else if ($(this).data('action') === 'auto') {
+                $(this).toggleClass('selected');
+
+                execute({
+                    type: 'request',
+                    action: 'gpio.zeroborg.drive',
+                    args: {
+                        direction: 'auto_toggle'
+                    }
+                });
+            }
+        });
     };
 
     var init = function() {

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

@@ -28,6 +28,17 @@
             </button>
             <div class="four columns">&nbsp;</div>
         </div>
+
+        <div class="row ctrl-bottom-row">
+            <div class="two columns">&nbsp;</div>
+            <button data-action="auto" class="zb-ctrl-btn four columns">
+                AUTO PILOT
+            </button>
+            <button data-action="stop" class="zb-ctrl-btn four columns">
+                <i class="fa fa-stop"></i>
+            </button>
+            <div class="two columns">&nbsp;</div>
+        </div>
     </div>
 </div>