Added ZeroBorg plugin web UI for motors control
This commit is contained in:
parent
4bd69d1d68
commit
cb44f864cc
3 changed files with 109 additions and 0 deletions
9
platypush/backend/http/static/css/gpio.zeroborg.css
Normal file
9
platypush/backend/http/static/css/gpio.zeroborg.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
.zb-controls-container {
|
||||||
|
margin: auto;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zb-ctrl-btn.selected {
|
||||||
|
color: #78ff00 !important;
|
||||||
|
}
|
||||||
|
|
67
platypush/backend/http/static/js/gpio.zeroborg.js
Normal file
67
platypush/backend/http/static/js/gpio.zeroborg.js
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
var $container = $('#zb-container'),
|
||||||
|
$controlsContainer = $('.zb-controls-container');
|
||||||
|
|
||||||
|
var execute = function(request, onSuccess, onError, onComplete) {
|
||||||
|
request['target'] = 'localhost';
|
||||||
|
return $.ajax({
|
||||||
|
type: 'POST',
|
||||||
|
url: '/execute',
|
||||||
|
contentType: 'application/json',
|
||||||
|
dataType: 'json',
|
||||||
|
data: JSON.stringify(request),
|
||||||
|
complete: function() {
|
||||||
|
if (onComplete) {
|
||||||
|
onComplete();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
if (onError) {
|
||||||
|
onError(xhr, status, error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
success: function(response, status, xhr) {
|
||||||
|
if (onSuccess) {
|
||||||
|
onSuccess(response, status, xhr);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeSend: function(xhr) {
|
||||||
|
if (window.token) {
|
||||||
|
xhr.setRequestHeader('X-Token', window.token);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var initBindings = function() {
|
||||||
|
$controlsContainer.on('mousedown touchstart', '.zb-ctrl-btn[data-direction]', function() {
|
||||||
|
console.log($(this).data('direction') + ' press start');
|
||||||
|
|
||||||
|
$(this).addClass('selected');
|
||||||
|
execute({
|
||||||
|
type: 'request',
|
||||||
|
action: 'gpio.zeroborg.drive',
|
||||||
|
args: {
|
||||||
|
direction: $(this).data('direction')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$controlsContainer.on('mouseup touchend', '.zb-ctrl-btn[data-direction]', function() {
|
||||||
|
console.log($(this).data('direction') + ' press end');
|
||||||
|
|
||||||
|
$(this).removeClass('selected');
|
||||||
|
execute({
|
||||||
|
type: 'request',
|
||||||
|
action: 'gpio.zeroborg.stop',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var init = function() {
|
||||||
|
initBindings();
|
||||||
|
};
|
||||||
|
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
|
33
platypush/backend/http/templates/plugins/gpio.zeroborg.html
Normal file
33
platypush/backend/http/templates/plugins/gpio.zeroborg.html
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
<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 class="zb-controls-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="four columns"> </div>
|
||||||
|
<button data-direction="up" class="zb-ctrl-btn four columns">
|
||||||
|
<i class="fa fa-sort-up"></i>
|
||||||
|
</button>
|
||||||
|
<div class="four columns"> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<button data-direction="left" class="zb-ctrl-btn four columns">
|
||||||
|
<i class="fa fa-caret-left"></i>
|
||||||
|
</button>
|
||||||
|
<div class="four columns"> </div>
|
||||||
|
<button data-direction="right" class="zb-ctrl-btn four columns">
|
||||||
|
<i class="fa fa-caret-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="four columns"> </div>
|
||||||
|
<button data-direction="down" class="zb-ctrl-btn four columns">
|
||||||
|
<i class="fa fa-sort-down"></i>
|
||||||
|
</button>
|
||||||
|
<div class="four columns"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue