Added web interface for gpio plugin

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

@@ -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;
+}
+

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

@@ -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();
+});
+

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

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