A demo of interacting with the BeagleBone via browser

1 - BB.js

// the node library we use for interacting with the BeagleBone
var b = require('bonescript');

// the webserver we'll use on the BB
var app = require('http').createServer(httpserver);
app.listen(8080); // listen on which port?

b.pinMode("P9_14", b.OUTPUT); // configuring this pin for output


function httpserver (req, res) {
  // This is the function that defines the server-- you can read more about
  // it at http://nodejs.org/api/http.html

  var url = req['url']; // grab the URL which was requested
 
  var digitRE = /\/([0-9]\.[0-9])/;
 
  var timer = null; // we'll use this to toggle listening to the potentiometer
 
  if (url == 'favicon.ico') { 
    // do nothing when the browser looks for a 
    // http://en.wikipedia.org/wiki/Favicon
  }
  
  else if (url == '/pot') {
    // if we go to 192.168.7.2:8080/pot

    timer = setInterval(function() { // start a timer
      b.analogRead("P9_40", function(reading) { // which reads P9_40
        var value = reading['value']; // captures just the # returend
        console.log("Setting P9_14 to the reading from P9_40, " + value);
        b.analogWrite("P9_14", value); // takes that value, writes to the LED
      });
    }, 500); // every 500ms

    res.writeHead(200); // Set our Status Code to indicate success
    res.end("(/pot) Served from your BeagbleBone!"); // Return some text
  }
  
  else if (url.match(digitRE)) {  
    // if we go to 192.168.7.2:8080/X.Y, where X & Y are digits

    clearInterval(timer); // turn off the timer we may have started in /pot
    var value = parseFloat(digitRE.exec(url)[1]); // grab the digits in our URL
    console.log("Setting P9_14 to " + value);
    b.analogWrite("P9_14", value); // and write that value to the LED

    res.writeHead(200); // Set our Status Code to indicate success
    res.end("(X.Y) Served from your BeagbleBone!"); // Return some text
  }
}

2 - Refactoring BB.js

// the node library we use for interacting with the BeagleBone
var b = require('bonescript');

// the webserver we'll use on the BB
var app = require('http').createServer(httpserver);
app.listen(8080); // listen on which port?

b.pinMode("P9_14", b.OUTPUT); // configuring this pin for output


function httpserver (req, res) {
  // This is the function that defines the server-- you can read more about
  // it at http://nodejs.org/api/http.html

  function setLEDBrightness(value) {
    console.log("Setting P9_14 to " + value);
    b.analogWrite("P9_14", value);
  }

  function readPotentiometer() {
    var value = null;
    b.analogRead("P9_40", function(reading) { value = reading['value']; });
    console.log("The reading from P9_40 is " + value);

    return value;
  }

  function returnSuccess(response, message) {
    console.log("Returning a success message");
    
    res.writeHead(200);
    res.end(message);
  }

  var url = req['url']; // grab the URL which was requested
  var digitRE = /\/([0-9]\.[0-9])/;
  var timer = null; // we'll use this to toggle listening to the potentiometer
 
  if (url == 'favicon.ico') { 
    // do nothing when the browser looks for a 
    // http://en.wikipedia.org/wiki/Favicon
  }
  
  else if (url == '/pot') {
    // if we go to 192.168.7.2:8080/pot

    timer = setInterval(function() { // start a timer
      setLEDBrightness(readPotentiometer());
    }, 500); // every 500ms

    returnSuccess(res, "(/pot) Served from your BeagbleBone!")); // Return some text
  }
  
  else if (url.match(digitRE)) {  
    // if we go to 192.168.7.2:8080/X.Y, where X & Y are digits

    clearInterval(timer); // turn off the timer we may have started in /pot

    var value = parseFloat(digitRE.exec(url)[1]); // grab the digits in our URL
    setLEDBrightness(value);

    returnSuccess(res, "(X.Y) Served from your BeagbleBone!"));
  }
}

3 - Adding readPot.js

// the node library we use for interacting with the BeagleBone
var b = require('bonescript');

// the webserver we'll use on the BB
var app = require('http').createServer(httpserver);
app.listen(8080); // listen on which port?

b.pinMode("P9_14", b.OUTPUT); // configuring this pin for output


function httpserver (req, res) {
  // This is the function that defines the server-- you can read more about
  // it at http://nodejs.org/api/http.html

  function setLEDBrightness(value) {
    console.log("Setting P9_14 to " + value);
    b.analogWrite("P9_14", value);
  }

  function readPotentiometer() {
    var value = null;
    b.analogRead("P9_40", function(reading) { value = reading['value']; });
    console.log("The reading from P9_40 is " + value);

    return value;
  }

  function returnSuccess(response, message) {
    console.log("Returning a success message");

    res.setHeader('Access-Control-Allow-Origin','*');
    res.writeHead(200);
    res.end(message);
  }

  var url = req['url']; // grab the URL which was requested
  var digitRE = /\/([0-9]\.[0-9])/;
  var timer = null; // we'll use this to toggle listening to the potentiometer
 
  if (url == 'favicon.ico') { 
    // do nothing when the browser looks for a 
    // http://en.wikipedia.org/wiki/Favicon
  }
  
  else if (url == '/pot') {
    // if we go to 192.168.7.2:8080/pot

    timer = setInterval(function() { // start a timer
      setLEDBrightness(readPotentiometer());
    }, 500); // every 500ms

    returnSuccess(res, "(/pot) Served from your BeagbleBone!")); // Return some text
  }
  
  else if (url.match(digitRE)) {  
    // if we go to 192.168.7.2:8080/X.Y, where X & Y are digits

    clearInterval(timer); // turn off the timer we may have started in /pot

    var value = parseFloat(digitRE.exec(url)[1]); // grab the digits in our URL
    setLEDBrightness(value);

    returnSuccess(res, "(X.Y) Served from your BeagbleBone!"));
  }

  else if (url == '/readPot') {
    // if we go to 192.168.7.2:8080/readPot

    // return the potentiometer reading
    b.analogRead("P9_40", function(x) { returnSuccess("" + x['value']); });
  }
}

4 - BB.html

<html>

<head>
    <style>
    html, body {
        margin: 0;
        padding: 0;
    }

    #me {
        width: 100px;
        height: 100px;
    }
    </style>
</head>

<body>
    <div id='me'></div>
    <script>
    function httpGET(url) {
        // This function lets us, in some ways, simulate a browser and go
        // visit a particular URL programmatically, and returns the results.
        //
        // You can read more about it at:
        // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, false);
        xhr.send();

        return xhr.responseText;
    }

    window.setInterval(function() {
        // grab the potentiometer reading
        var potReading = parseFloat(httpGET('http://192.168.7.2:8080/readPot'));

        // set the innerHTML to the reading
        document.getElementById('me').innerHTML = potReading;

        // and rotate the div proportional to the reading
        document.getElementById('me').style.webkitTransform = 'rotate(' + 360 * potReading + 'deg)';
    }, 16); // every 16ms
    </script>
</body>

</html>

5 - Wiring: Yellow = pin, Reds = interchangeable.jpg