Added web interface for gpio plugin

This commit is contained in:
Fabio Manganiello 2018-08-22 19:50:30 +02:00
parent 335d3e3cd7
commit 2c369cb86d
3 changed files with 112 additions and 0 deletions

View file

@ -0,0 +1,29 @@
#gpio-container {
background-color: #f8f8f8;
padding: 12px;
border: 1px solid #ddd;
border-radius: 10px;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 38px;
letter-spacing: .1rem;
}
.gpio-pin {
padding: 1.5em 1em .2em .5em;
border-radius: 10px;
}
.gpio-pin:nth-of-type(odd) {
background-color: #ececec;
}
.gpio-pin:hover {
background-color: #daf8e2 !important;
}
.toggle-container {
text-align: right;
padding-right: 1em;
}

View file

@ -0,0 +1,78 @@
$(document).ready(function() {
var $container = $('#sensors-container');
var createPowerToggleElement = function(pin) {
var $powerToggle = $('<div></div>').addClass('toggle toggle--push pin-ctrl-container');
var $input = $('<input></input>').attr('type', 'checkbox')
.data('number', pin.pin).attr('name', pin.name).addClass('toggle--checkbox pin-ctrl');
var $label = $('<label></label>').attr('for', pin.name).addClass('toggle--btn');
$input.appendTo($powerToggle);
$label.appendTo($powerToggle);
if (pin.value > 0) {
$input.prop('checked', true);
}
return $powerToggle;
};
var initElements = function() {
execute({ type: 'request', action: 'gpio.read_all' }, function(data) {
var response = data.response.output;
for (var pin of response) {
var $pin = $('<div></div>')
.addClass('row gpio-pin')
.attr('data-pin-number', pin.pin);
var $name = $('<div></div>')
.addClass('pin-name ten columns')
.text(pin.name);
var $value = $('<div></div>')
.addClass('pin-value two columns');
var $toggle = createPowerToggleElement(pin);
$toggle.appendTo($value);
$name.appendTo($pin);
$value.appendTo($pin);
$pin.appendTo($container);
}
});
};
var initBindings = function() {
$container.on('click touch', '.pin-ctrl-container', function() {
var $input = $(this).find('.pin-ctrl');
var pinNumber = $input.data('number');
var val = $input.prop('checked') ? 0 : 1;
execute(
{
type: 'request',
action: 'gpio.write',
args: {
pin: pinNumber,
val: val,
}
},
onSuccess = function(response) {
var val = response.response.output.val;
$input.prop('checked', val == 0 ? false : true);
}
);
});
};
var init = function() {
initElements();
initBindings();
};
init();
});

View file

@ -0,0 +1,5 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/gpio.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/gpio.css') }}"></script>
<div class="row" id="gpio-container"></div>