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

17 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
  6. This is my blog with some tutorials on Beaglebone Black. If you find it interesting please do a +1.
    http://noobtechiespeaks.blogspot.in/

    Thanks

    ReplyDelete
  7. Hello thanks for this tutorial but i am getting one problem on my android phone its not connecting on the ip address given by the IDE it gives the error like cannot find the server.Its working fine on the computer i have connected.

    ReplyDelete
    Replies
    1. is your bbb already on the same wifi network as your phone?

      Delete
  8. Once i run the code, the following error messages show up
    events.js:72
    throw er; // Unhandled 'error' event
    ^
    Error: listen EADDRINUSE
    at errnoException (net.js:901:11)
    at Server._listen2 (net.js:1039:14)
    at listen (net.js:1061:10)
    at Server.listen (net.js:1135:5)
    at Object. (/var/lib/cloud9/HtmlLedDemo.js:10:5)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain [as _onTimeout] (module.js:497:10)

    [Process stopped]

    How can I solve this problem?

    ReplyDelete
    Replies
    1. I am running into the exact same error. Does anyone have any advice for solving this issue?

      Delete
    2. Teu to use a another port number.

      Delete
  9. how to get rid of this error. Beaglebone is connected through LAN .

    root@beaglebone:/var/lib/cloud9# npm install socket.io
    npm http GET https://registry.npmjs.org/socket.io
    npm http GET https://registry.npmjs.org/socket.io
    npm http GET https://registry.npmjs.org/socket.io
    npm ERR! network getaddrinfo ENOTFOUND
    npm ERR! network This is most likely not a problem with npm itself
    npm ERR! network and is related to network connectivity.
    npm ERR! network In most cases you are behind a proxy or have bad network settings.
    npm ERR! network
    npm ERR! network If you are behind a proxy, please make sure that the
    npm ERR! network 'proxy' config is set properly. See: 'npm help config'

    npm ERR! System Linux 3.8.13-bone50
    npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "socket.io"
    npm ERR! cwd /var/lib/cloud9
    npm ERR! node -v v0.10.25
    npm ERR! npm -v 1.3.10
    npm ERR! syscall getaddrinfo
    npm ERR! code ENOTFOUND
    npm ERR! errno ENOTFOUND
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! /var/lib/cloud9/npm-debug.log
    npm ERR! not ok code 0

    ReplyDelete
    Replies
    1. Pls someone help ..

      Delete
    2. Are you sure the BeagleBone is actually connected to the internet? Try typing "ping google.com" in and seeing if it is connected. I had a problem with my board not connecting right away but maybe 10 minutes or so after the ethernet cable was actually plugged in.

      Delete
  10. Hello sir, Pls ..Could you help me? Once I was running code using PuTTy in windows 7. I got error.

    root@beaglebone:/var/lib/cloud9# node HtmlLedDemo.js
    Option log level is not valid. Please refer to the README.
    Option browser client minification is not valid. Please refer to the README.
    Option browser client etag is not valid. Please refer to the README.
    Server running on: http://192.168.1.12:8080

    events.js:72
    throw er; // Unhandled 'error' event
    ^
    Error: listen EADDRINUSE
    at errnoException (net.js:901:11)
    at Server._listen2 (net.js:1039:14)
    at listen (net.js:1061:10)
    at Server.listen (net.js:1135:5)
    at Object. (/var/lib/cloud9/HtmlLedDemo.js:10:5)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

    ReplyDelete