diff --git a/platypush/backend/http/static/css/gpio.zeroborg.css b/platypush/backend/http/static/css/gpio.zeroborg.css index 57344a793..4aaeb43ea 100644 --- a/platypush/backend/http/static/css/gpio.zeroborg.css +++ b/platypush/backend/http/static/css/gpio.zeroborg.css @@ -3,7 +3,18 @@ width: 25%; } -.zb-ctrl-btn.selected { - color: #78ff00 !important; +.zb-ctrl-btn { + 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; } diff --git a/platypush/backend/http/static/js/gpio.zeroborg.js b/platypush/backend/http/static/js/gpio.zeroborg.js index 1df5cd2bc..dec3c73cc 100644 --- a/platypush/backend/http/static/js/gpio.zeroborg.js +++ b/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() { diff --git a/platypush/backend/http/templates/plugins/gpio.zeroborg.html b/platypush/backend/http/templates/plugins/gpio.zeroborg.html index 2f0a4cb3b..f035a7f87 100644 --- a/platypush/backend/http/templates/plugins/gpio.zeroborg.html +++ b/platypush/backend/http/templates/plugins/gpio.zeroborg.html @@ -28,6 +28,17 @@
 
+ +
+
 
+ + +
 
+