Widget / GPIO

This widget allows you to toggle GPIO pins using the GPIO JSON Server. It also provides other events and data streams such as w1-therm temperature monitoring.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="net-delarre-widget-gpio" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group" style="padding-right:4px;">
                <button type="button" class="btn btn-xs btn-default settings" data-toggle="modal" data-target="#net-delarre-widget-gpio-settings"><span class="glyphicon glyphicon-cog"></span></button>
            </div>
            <div class="btn-group" style="padding-right:4px;">
                <button type="button" class="btn btn-xs btn-default disconnect" data-toggle="popover" data-placement="auto" data-container="body" data-content="Disconnect from serial port server" data-trigger="hover"><span class="glyphicon glyphicon-remove-sign" title="Disconnect from GPIO Server"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
                <button type="button" class="btn btn-xs btn-default showbody"><span class="glyphicon glyphicon-chevron-down"></span></button>
            </div>
            <div class="btn-group">
                <div class="dropdown">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <!-- <li class="divider"></li> -->
                    <!-- <li role="presentation" class="dropdown-header fork-name"></li> -->
                    <li><!-- <a href="" target="_blank" class="fork">Fork Widget</a> --></li>
                </ul>
                </div>
            </div>
        </div>
        <span class="panel-title"...

CSS

#net-delarre-widget-gpio.hidebody .panel-body {
    display: none
}
#net-delarre-widget-gpio.hidebody .hidebody {
    display: none
}
#net-delarre-widget-gpio.hidebody .showbody {
    display: block;
}
#net-delarre-widget-gpio .showbody {
    display: none
}
#net-delarre-widget-gpio .connected-body {
    display: none;
}
#net-delarre-widget-gpio.connected .connected-body {
    display: block;
}
#net-delarre-widget-gpio.connected .install-body {
    display: none;
}
#net-delarre-widget-gpio-body {
    overflow: auto;
    overflow-x: hidden;
}
#net-delarre-widget-gpio .net-delarre-widget-gpio-pins-area {
}
#net-delarre-widget-gpio .nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
#net-delarre-widget-gpio #editPinForm {
    margin: 10px;
}
#net-delarre-widget-gpio #editPinForm .form-group {
    margin-bottom: 3px;
}
#net-delarre-widget-gpio .pin-controls .control-label {
    text-align: right;
    line-height: 33px;
}
#net-delarre-widget-gpio input[type=range] {
    padding: 6px 12px;
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:net-delarre-widget-gpio"], function (gpio) {
    console.log("test running of " + gpio.id);
    gpio.init();


} /*end_test*/ );

cpdefine("inline:net-delarre-widget-gpio", ["chilipeppr_ready", "jquerycookie"], function () {   
    var classPrefix = "net-delarre-widget-gpio";
    return {
        id: "net-delarre-widget-gpio",
        url: "http://fiddle.jshell.net/benjamind/L3c7csaw/show/light/",
        fiddleurl: "http://jsfiddle.net/benjamind/L3c7csaw/",
        name: "Widget / GPIO",
        desc: "This widget allows access to GPIO pins on a remote device via the GPIO JSON Server",
        publish: {
        },
        subscribe: {
        },
        foreignPublish: {
        },
        foreignSubscribe: {
        },
        init: function (host) {
            this.forkSetup();

            this.wsConnect(null, host);
    
            // setup onconnect pubsub event, get the pin map when we connect successfully
            chilipeppr.subscribe("/" + this.id + "/ws/onconnect", this, function (msg) {
                this.getPinmap();
                this.getPinStates();
            });
            // setup recv pubsub event
            // this is when we receive data from the socket
            chilipeppr.subscribe("/" + this.id + "/ws/recv", this, function (msg) {
                this.onWsMessage(msg);
            });

            // setup low-level send pubsub event
            // this is when a widget sends data to the socket
            chilipeppr.subscribe("/" + this.id + "/ws/send", this, function (msg) {
                this.wsSend(msg);
            });
           
            var that = this;
            
            // show last remote host, if there is one
            var lasthost = $.cookie('lasthost-gpio');
            if (lasthost) {
                $('#net-delarre-widget-gpio-host').val(lasthost);
            }
            // if connect btn or enter...