Smart Phone BeagleBone Black with expandable case (orange)

Overview

Bonescript is an easy way to get started with programming on the BeagleBone Black. This tutorial explains how to create a mobile web interface for your BeagleBone Black, using Javascript and Bonescript. You’ll be able to control the brightness of LEDs from a mobile device (cell phone, tablet) and, on supported phones, you can use motion to control the LEDs. This example uses node.js as the web server, socket.io for communication between the web page and the BeagleBone Black and Mobile JQuery for the web page lay-out.

What you Will Need

Steps to Follow

STEP 1

Install the WiFi adapter (tutorial)

STEP 2

Connect the 3 LEDs and 3 resistor to the BeagleBone (wiring diagram)




With a Network cable plugged-in we will install the socket.io library

STEP 3

First set the time (just to be sure)

/usr/bin/ntpdate -b -s -u pool.ntp.org

STEP 4

Install socket.io

cd /var/lib/cloud9
npm install socket.io

This takes a few minutes, wait until installation is complete.

STEP 5

Installing the Javascript and HTML code Find the tutorial and code on: https://github.com/lgxlogic/BoneScript-SocketIO

Bonescript program listing



// Creates a websocket with socket.io

// Make sure to install socket.io: terminal, goto /var/lib/cloud9 and enter: npm install socket.io
// Installing this takes a few minutes; make sure to wait until the installation is compelete

var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var b = require('bonescript');

app.listen(8080);

// socket.io options go here

io.set('log level', 2);   // reduce logging - set 1 for warn, 2 for info, 3 for debug
io.set('browser client minification', true);  // send minified client
io.set('browser client etag', true);  // apply etag caching logic based on version number

console.log('Server running on: http://' + getIPAddress() + ':8080');

var ledRed = "P9_14";
var ledGreen = "P8_19";
var ledYellow = "P9_16";

// configure pins and set all low

b.pinMode(ledRed, b.OUTPUT);
b.pinMode(ledGreen, b.OUTPUT);
b.pinMode(ledYellow, b.OUTPUT);
b.analogWrite(ledRed,1);
b.analogWrite(ledYellow,1);
b.analogWrite(ledGreen,1);

function handler (req, res) {

  if (req.url == "/favicon.ico"){   // handle requests for favico.ico
  res.writeHead(200, {'Content-Type': 'image/x-icon'} );
  res.end();
  console.log('favicon requested');
  return;
  }

  fs.readFile('HtmlLedDemo.html',    // load html file
  function (err, data) {

    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {

  // listen to sockets and write analog values to LED's
  socket.on('ledRed', function (data) {
    b.analogWrite(ledRed, 1-(data/100));

//    console.log('Red: ' + data);
  });

  socket.on('ledGreen', function (data) {

    b.analogWrite(ledGreen, 1-(data/100));

//    console.log('Green: ' + data);
  });

  socket.on('ledYellow', function (data) {
    b.analogWrite(ledYellow, 1-(data/100));

//    console.log('Yellow: ' + data);
  });

  socket.on('mode', function (data) {

    console.log("Mode: " + data);

    // switch mode
  });
});


// Get server IP address on LAN

function getIPAddress() {

  var interfaces = require('os').networkInterfaces();
  for (var devName in interfaces) {
    var iface = interfaces[devName];
    for (var i = 0; i < iface.length; i++) {
      var alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal)
        return alias.address;
    }
  }

  return '0.0.0.0';
}

  Download HtmlLedDemo .js File 
Save this file as “HtmlLedDemo.js”

STEP 6

WebPage HTML listing

Start another new file (click on + tab) and copy and paste the code, which is available in this download here:
Download HtmlLedDemo .html File
Save this file as “HtmlLedDemo.html”

STEP 7

Now go to the .js file we created earlier and click the RUN button in the Cloud9 IDE In the console you’ll see the IP address of the BeagleBone Black on your network. Enter this IP address in a web browser on your cell phone or other device. Motion control only works on cell phones and tablets with modern browsers such as Google Chrome on Android.

STEP 8

Using the Smart Phone interface we can control the LEDs

Beaglebone Black Tutorial - Screen shot

This tutorial is also posted on the Logic Supply Blog

7 comments:

  1. Great stuff thank you!
    It is so hard to find tutorials for Beagle Bone Black, community is very poor compared with the Raspberry.
    Is it possible to make a demo of the BBB with a PIR sensor as well?

    ReplyDelete
    Replies
    1. kk Thanks for the feedback, you may want to check out our latest tutorial !!

      http://inspire.logicsupply.com/2014/04/alarm2-motion.html

      Cheers

      Delete
  2. kk: Thanks for the feedback, we are glad you enjoy the tutorials. Stay tune, and visit often as we add more tutorials on a regular basis.

    ReplyDelete
  3. Thank you so much for posting this tutorial.

    I am considering getting a Beaglebone Black and I will keep checking your site from time to time.

    ReplyDelete
    Replies
    1. Hi, Glad you have found the tutorial useful. We now have some of the commercial BeagleBone Black's in stock. You can buy/view them here: http://www.logicsupply.com/components/motherboards/arm/bb-black/

      Delete
  4. Sir, these are some of the best tuts I have ever found.
    Currently I am working on Android app which is going to send some data packets to a preconfigured router(I have modified NAT) and router will forward it to BBB through WiFi or Ethernet. I wanted to ask that is it good to run Java (if needed NDK too) and process the packets rather than using any web/cloud based thing. I have previously worked on C/CPP/Java/Python/Android etc and I don't want to involve JavaScript or and web browser based stuff. What would you suggest ?

    ReplyDelete
  5. This tutorial, is just one implementation demonstrating that BoneScript is quite useful in development. You may use this as a guide. I would open the question to the BeagleBoard or Android Community.

    ReplyDelete