gpio test now demonstrates led and button

Author: jmstriegel

coder-apps/tests/gpio_test/app/app.js

@@ -1,9 +1,19 @@
 var gpio = require("gpio");
 gpio.logging = true;
 
-var gpioID = 4; //actually pin 7, 4 down on left header
-var gpioDevice;
-var connected = false; //ensure only one process talks to us at a time.
+
+// The gpio ids we're using. Note that these aren't the pin numbers, but
+// the IDs exposed by the Pi. Search for Pi GPIO pinout for details.
+var ledGPIOID = 4; //actually pin 7, 4 down on left header
+var buttonGPIOID = 17;
+
+// Handles for our connected gpio devices
+var ledDevice;
+var buttonDevice;
+
+// A collection of all connected sockets.
+// Maps socketid => { socket: sockethandle, id: socketid }
+var connections = {};
 
 exports.settings={};
 //These are dynamically updated by the runtime
@@ -15,89 +25,66 @@ exports.settings={};
 //settings.coder_owner - name of the user, Ie. "Suzie Q."
 //settings.coder_color - hex css color given to this coder.
 
+// Incoming get routes that our app knows how to respond to
 exports.get_routes = [
-    { path:'/', handler:'index_handler' },
+    { path:'/', handler:'index_handler' }, // Render out main html page
 ];
 
+// Incoming post routes that our app knows how to respond to
+// (None in this example)
 exports.post_routes = [
 ];
 
+// Incoming socket events that this module will expose.
 exports.socketio_routes = [
-    { key:'connect', handler:'on_socket_connect' },
-    { key:'gpio', handler:'on_socket_gpio' },
+    { key:'connect', handler:'on_socket_connect' }, // sent by client once socket is loaded
+    { key:'setled', handler:'on_socket_setled' }, // sent by client to turn on/off the led
 ];
 
 
-var connections = {};
 
+//
+// Handles sending the HTML page to the browser
+//
 exports.index_handler = function( req, res ) {
+    // Set up some template variables that are substituted in our HTML.
+    // Look in the HTML head tag to see where these are inserted.
     var tmplvars = {};
     tmplvars['static_url'] = exports.settings.staticurl;
     tmplvars['app_name'] = exports.settings.appname;
     tmplvars['app_url'] = exports.settings.appurl;
     tmplvars['device_name'] = exports.settings.device_name;
 
+    // Send the HTML document to the web browser.
     res.render( exports.settings.viewpath + '/index', tmplvars );
 };
 
 
-var enableGPIO = function() {
-    console.log("Enabling GPIO " + gpioID );
-    gpioDevice = gpio.export( gpioID, {
-        ready: function() {
-            //Pause briefly after pin is exported.
-            //There seems to be an error if you try to immediately access it.
-            setTimeout( function() {
-                console.log("GPIO  value: on");
-                gpioDevice.setDirection("out");
-                gpioDevice.set(1, function() {
-                    console.log("GPIO should be on");
-                });
-                //blinkLED();
-            }, 100 );
-        }
-    });
-};
-var disableGPIO = function() {
-    console.log("Disabling GPIO" + gpioID );
-    gpioDevice.removeAllListeners();
-    gpioDevice.reset();
-    gpioDevice.unexport();
-};
-
-var ledval = 0;
-var blinkLED = function() {
-    if ( !connected ) {
-        return;
-    }
-    
-    gpioDevice.set( ledval );
-    if ( ledval == 0 ) {
-        ledval = 1;
-    } else {
-        ledval = 0;
-    }
-
-    //run this method again after half a second
-    setTimeout( blinkLED, 500 );
-};
-
-
-
+//
+// Respond to the "connect" message sent by a new socket client.
+//
+// We do two things here:
+// 1. save the socket object into the "connections" variable so we can talk to it later.
+// 2. initialize the GPIO pins if this is the first time a socket has connected.
+//
 exports.on_socket_connect = function( socket, data ) {
     console.log( 'socket connect from ID: ' + socket.socketID );
     console.log( data );
 
-    if ( !connected ) {
+    // Enable the GPIO pins if this is the first connection
+    if ( Object.keys( connections ).length <= 0 ) {
         enableGPIO();
-        connected = true;
     }
 
+    // Store information about this socket so we can communicate with
+    // all connected sockets in the future.
     connections[socket.socketID] = {
         socket: socket,
-        name: data.name,
         id: socket.socketID
     };
+    
+    // Watch for this socket to disconnect so that we can remove it from
+    // our collection of connected sockets.
     socket.on('disconnect', function() {
         console.log( 'socket disconnect from ID: ' + socket.socketID );
         delete connections[socket.socketID];
@@ -111,41 +98,113 @@ exports.on_socket_connect = function( socket, data ) {
 
 };
 
+//
+// Respond to a "setled" message from a socket connection to update the LED value
+//
+exports.on_socket_setled = function( socket, data ) {
+    if ( data.value !== "undefined" ) {
+        setLED( data.value );
+    }
+};
+
+
+
+//
+// This is called once from our first socket connection.
+// - set up the LED GPIO as an output
+// - set up the Button GPIO as an input and tie it to send a "change" message
+//
+var enableGPIO = function() {
+    
+    // Set up the LED output GPIO
+    console.log("Setting up LED as an output on GPIO " + ledGPIOID );
+    ledDevice = gpio.export( ledGPIOID, {
+        direction: "out",
+        ready: function() {
+        }
+    });
+    
+    // Set up the button input GPIO
+    console.log("Setting up Button as an input on GPIO" + buttonGPIOID);
+    buttonDevice = gpio.export( buttonGPIOID, {
+        direction: "in",
+        ready: function() {
+            
+            // Set up buttonDevice to call the buttonChange  
+            // function (below) whenever its value changes.
+            buttonDevice.on("change", buttonChange);
+        }
+    });
+
+};
+
+//
+// This is called when the last socket disconnects.
+// It releases our GPIO pins so they can be used by another program.
+//
+var disableGPIO = function() {
+    console.log("Disabling GPIO" + ledGPIOID );
+    ledDevice.removeAllListeners();
+    ledDevice.reset();
+    ledDevice.unexport();
+
+    console.log("Disabling GPIO" + buttonGPIOID );
+    buttonDevice.removeAllListeners();
+    buttonDevice.reset();
+    buttonDevice.unexport();
+};
 
-exports.on_socket_gpio = function( socket, data ) {
-    switch (data.command) {
-        case "set":
-            setGPIO( data.value );
-            break;
-        case "direction":
-            setDirection( data.direction );
-            break;
-        case "value":
-            sendValue( socket );
-            break;
+//
+// This is triggered by the GPIO "change" event on buttonDevice. This was
+// set up inside emabledGPIO().
+//
+// The change event sends this function a value, either 0 (off) or 1 (on).
+//
+var buttonChange = function( val ) {
+    // Recall that this code is running on the device. We need to send a
+    // socket message with the button data to our javascript in the
+    // web browser. In fact, we need to send this data to every connected
+    // socket, since there may be more than one browser window looking at
+    // this page.
+    
+    console.log( "buttonChange event with value: " + val );
+    
+    // Iterate through all of our socket connections
+    for ( var socketid in connections ) {
+        // Get the socket object for this socket
+        var socket = connections[socketid].socket;
+        
+        // The "appdata" event will be received by the Coder.socketConnection 
+        // object in the front end code and sent to the appropriate listener 
+        // that we've defined.    
+        // The "buttonupdate" key refers to a listener we set up on the front
+        // end with the code:
+        // Coder.socketConnection.addListener( "buttonupdate", function... )
+        socket.emit( "appdata", {
+            key: "buttonupdate",
+            data: val
+        });
     }
 };
 
-var setGPIO = function( val ) {
+//
+// Set the value on the LED GPIO device, either 0 (off) or 1 (on).
+//
+var setLED = function( val ) {
     val = parseInt( val );
     if ( val != 0 ) {
         val = 1;
     }
-    gpioDevice.set( val );
-};
-var setDirection = function( dir ) {
-    if ( dir !== "in") {
-        dir = "out";
-    }
-    gpioDevice.setDirection( dir );
-};
-var sendValue = function( socket ) {
-    socket.emit( "apdata", {
-        key: "gpiovalue",
-        data: gpioDevice.value
-    });
+    ledDevice.set( val );
 };
 
+//
+// Called by Coder whenever this module is reloaded. This usually happens when
+// you save your code in the editor. This is a good place to destroy any intervals
+// or clean up any long running code or handles.
+//
 exports.on_destroy = function() {
 };
 
+
+

coder-apps/tests/gpio_test/app/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-11-30",
-    "modified": "2013-12-08",
+    "modified": "2014-01-09",
     "color": "#2ecc71",
     "author": "",
     "name": "GPIO Test",

coder-apps/tests/gpio_test/static/css/index.css

@@ -1,4 +1,42 @@
 
 .pagecontent {
     padding: 24px;
+}
+
+#buttonval {
+    width: 100px;
+    height: 100px;
+    background-color: #000000;
+}
+#buttonval.on {
+    background-color: #F03050;
+}
+
+
+.button {
+    cursor: pointer;
+    width: 200px;
+    height: 150px;
+    margin: 24px 0;
+    background-color: #3498D8;
+    line-height: 150px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+}
+
+.button.press {
+    background-color: #2488A8;
+}
+
+
+#output {
+    position: absolute;
+    left:0;
+    right:0;
+    bottom:0;
+    height: 150px;
+    color: #fff;
+    background-color: #000;
+    overflow: hidden;
 }