Project: BBB Admin Page – Implementing a General Web Server on a BeagleBone Black

So far, we’ve implemented a very simple web page served by the BeagleBone Black (BBB) and setup a development environment. But to build a sophisticated web-based administration application, we need build a framework to support our future work. Our end goal is a Single Page Application (SPA) built using AngularJS. In this post, we’re going prepare for the Angular-izing of our work by adding node.js plumbing on the BBB to allow an infrastructure to server up web components.

As we did in the last post, we’ll use the “Install New npm Packages” tool to add a new module called serve-static. serve-static allows us to serve files from our node.js server on the BBB. Though it works from the root of where our node.js server is running, we can add directory support based on how we decide to organize our code. From Visual Studio 2013 (VS2013), select the npm element in the Solution Explorer tree, then select the “Install New npm Packages …” option. Once the dialog comes up, search for “serve-static” and install.

Since serve-static also needs the finalhandler module, also install it.

Install the serve-static module

Now, let’s modify our HTML file and code to begin using benefits of the serve-static module. We’ll first rename our client.html to be a more generalized name: index.html. Similarly, we’ll rename our server.js file to be a more generalized name: app.js.

We are now ready to full integrate serve-static into our app.js code.

Adding serve-static into app.js

Most of the code here is boilerplate from the serve-static module’s npm page. We essentially define our modules (lines 3-8), setup default files for index (line 10-11) and then fire up the server in lines 13-21).

We can test our changes in VS2013, if we comment out the setInterval timer, which invokes a push of the temperature. If we don’t we’ll see an error because our the file location referenced will not be found and our file server will crash. We’ll remember to uncomment this line before we upload to the BBB. The result of our VS2013 debugging is:

Debugging serve-static using VS2013

With it working on the PC, we’re ready to test this infrastructure on our BBB – we’ll fire up our trusty WinSCP and transfer down the changes, making sure that we also include the serve-static and finalhandler modules, in addition to the renamed index.html and app.js files. Again, perhaps the better route is pushing the results to github, then bringing down the results to the BBB, but the WinSCP is a bit of a short cut. Here’s how our updated app looks now – the console below is from a PuTTY connection and the browser is on the PC (note the URL which references the BBB and the port we’ve selected for our server).

BBB Serving Temperature Using serve-static Module

With a generalized server in place, we’re ready to move towards building a more sophisticated application. Next post, we’ll start adding an AngularJS framework to our project.

The updated project at github is here: https://github.com/bitstobrowser/AdminApp

 

Project: BBB Admin Page – Setting up a Development Environment

To summarize our current location: We’re on the path of building an administration website built using the AngularJS framework, hosted on the BeagleBone Black (BBB). The purpose of the administration site is to allow us to adjust key configuration parameters and launch other applications. Essentially, I want to provide a web interface to the BBB, similar to the one provided for a network router.

Having written a prototype node.js app which provides us near real-time data via the sockets.io module, we are ready to begin building out the application to do more. Because we’re going to do a lot more, we need to better define our development environment.

In this post, I’ll document the development environment I’m using to build out the administration web application then in subsequent posts I’ll delve into discussions on our AngularJS MV* infrastructure and tying Angular to core BBB functions.

Visual Studio: A Most Unconventional Development Environment for BBB

I’m going to use Visual Studio Community Edition 2013 (VS2013) as my development environment. It may seem unconventional because my target platform is the BBB, but since a lot of the code I’m going to be writing is web-oriented and the bulk of the coding is most easily done on my Windows PC, I need a Windows development environment. While text editors (e.g., Notepad++, EditPlus) and newer development tools (e.g., Sublime, JetBrains, Brackets) are possible options, I’m pretty used to the Visual Studio toolset. The new VS2013 is a full-featured professional package, so there’s a ton of functionality available, including Javascript Intellisense and debugging capabilities. Microsoft has put a focus on providing functionality for JavaScript, Bootstrap and AngularJS developers, primarily for websites running on their Azure platforms, but we can leverage these tools for our work on the BBB – we’ll simply publish to BBB instead of Azure. Best of all, Microsoft has made Visual Studio Community Edition free for non-enterprise use.

So let’s start. If you don’t have VS2013 already, head to the the Visual Studio website and download it. It’s not a small piece of software, so allow 15-30 minutes to download and install.

Microsoft Visual Studio Community 2013 Website

Before we jump in, I’m also going to add in the Web Essentials 2013 for Visual Studio plugin to give us even more developer friendly tools. Information on Web Essentials is available here, but the download is kept here. Once everything is installed, we’re ready to fire up Visual Studio.

Visual Studio Community Edition

Creating a VS2013 node.js Project

To start, we’ll create a project, but reference our existing work, then we’ll import the relevant files to get to a point where we are ready to work.

Step A – Create Visual Studio Node.js Project

Step B – Import Files into Visual Studio 2013

Step C – Up and Running in Visual Studio with node.js Project

Preparing the VS2013 for Debugging: Reconciling the Required Server Modules

If we try debugging, by pressing the green arrow, we’ll run into two problems:

• Visual Studio will ask us to build the project. VS2013 is not really compiling, but it needs to build a framework for it to support our debugging efforts. This is pretty easy to get around, we just tell VS2013 OK, do what you need to do.
• Our application will fail in the command line, because we’re missing our referenced libraries. To fix this, we need to import the modules into our project.

Specifically, we need the following modules for the server:

• http, fs – since these are included as part of the base node installation, we do not need to install them
• socket.io – we will import this module, using VS2013’s npm package installation tool
• bonescript – we will modify our code to not require this, using node’s fs module instead

We can install socket.io by selecting npm (Node Package Manager) from the Solution Explorer window, right-clicking and selecting the “Install New npm Packages …” option. The first time you do this, it will download all of the available module options (there are a ton), but subsequent times, it will be near instantaneous to get to the window we want.

VS2013 – Install npm Packages

As per our first few lines of the app.js file, we can see the list of modules we need to include. Simply search for the relevant modules and add them, Visual Studio will add them to the project and, optionally, to the package.json file. Make sure that you include the right modules, because there are so many of the same name – if you make a mistake, simply remove them from the Solution Explorer tree.

VS2013 – Install npm Module Dialog

We will also modify our code to use the fs module, instead of the bonescript module, to have a more generic code base.

Running and Debugging our Application

With this complete, we’re ready to test our project. We can select the Debug menu’s “Start debugging” option, press green arrow button on the menu bar or simply press the F5 function key to launch the application. Of course, we won’t see a temperature, because we’re running the application on a PC for the moment, but it will prove that our application is functioning and ready for debugging. We can even use breakpoints and the watch windows if need be.

VS2013 – Project Debugging

Adding Some Polish to the Client-Side Presentation Through the Bootstrap.js Module

Bootstrap is a widely-used Javascript module for marking up client-side user interface. It’s popularity is because it is a mobile-first, responsive HTML/CSS/Javascript framework.

To add Bootstrap to our client HTML, we’ll first have to reference it within a script. For simplicity-sake, we’ll use the provided CDN in our HTML header. We can now add some basic commands to make some improvements to our previous gaudy html. Specifically, we’ll throw in a couple of labels to pretty our browser presentation:

Adding Some Basic Bootstrap to our App Client

Running App and Client (with Bootstrap)

Final Step – Upload to the BeagleBone Black

There are two way to manage how our code now gets to the BBB:

• Use GitHub – in this case you’ll add, commit and push the changes to the repository, then pull them down from the BBB. This is the recommended approach
• Use WinSCP – upload the files to BBB directly. This may be faster and more direct. Furthermore, it is possible to set up a directory synchronization task to manage host and target directories automatically.

For this blog entry we will show the second option, using WinSCP’s synchronization functionality. In this method, you’ll might want to omit synchronizing the VS2013 directories and files, as shown below:

Using WinSCP Synchronize Directories Feature

We can PuTTY to the BBB and run our application:

Finally, I’ve updated the repository here: https://github.com/bitstobrowser/AdminApp

Project: BBB Admin Page – Connecting a BeagleBone node.js app to a browser using socket.io (Part 2)

So, three things to improve on the last post:

First, I’ve created a github repository which contains the source for our project. It can be found here: https://github.com/bitstobrowser/socketTemp.

To run the code, you can download it either directly to your BeagleBone Black or to your desktop and use a utility, like WinSCP, to transfer it to your BBB. Once on your BBB, navigate to the directory and start the server by executing the following command: node server.js.

Second, let’s quickly review the code to get an understanding of how it works:

BBB Temperature Server

• Lines 3-6: Define the set of libraries that we need to use. Importantly, we tell socket.io to listen for any connections on the server’s port.
• Line 8: Here we listen for any HTTP requests on port 8888.
• Lines 10-21: Serve up a client.html file to all browser HTTP requests
• Line 23: Sets a timer to go off every 2500ms or 2.5 seconds. We’ll use this to read and update the attached browsers.
• Lines 25-26: Is the user file which contains the temperature information
• Lines 28-32: This is the function that is called every 2500ms and it reads the contents of the temperature file and then calls another function to send the information out to any clients.
• Lines 34-39: This puts the temperature in a JSON object and then emits (sends) the data to all attached socket connections.

At the client end, it’s even less lines of code:

BBB Socket Temp Client

• Lines 3-4: We specify the JavaScript libraries that we will need to reference.
• Line 6: Creates a socket connection, using the same port as the specified in the browser access.
• Line 7: Defines what we do in case we get a socket message of type ‘temperature’ – we will call the handleTemperature function.
• Lines 9-14: When we receive a ‘temperature’ function, we unpack the JSON object to get the value sent to us. We convert to Fahrenheit for our display. Then finally on line 13, we update the HTML as marked by the “temp” ID with the latest temperature information.
• Lines 18-22: This is our basic HTML display – line 22 will be adjusted whenever we receive a message by the handleTemperature function.

Third, I’ve put a better version of the video up – much better resolution:

Project: BBB Admin Page – Connecting a BeagleBone node.js app to a browser using socket.io

Having established running a basic node.js application on the BeagleBone Black in the previous post, we can now progress to connecting our app to a browser. We’ll do this by running JavaScript on both the browser and our BBB, then allow them to share data in real-time using the socket.io library.

What we’ll do in this step is to read the on-board CPU temperature of the ARM 3359 processor, every second and inform any attached browser of the most recent value. In an obscure forum discussion, I was able to find out my Debian BBB-specific distro makes this CPU temperature register location available at the /sys/devices/ocp.3/44e10448.bandgap/temp1_input – you may need to verify that this is available on your OS or if there is a slight variation of the location. Information on the bandgap register is available in the AM335x Technical Reference Manual (chapter 9). The temp_input file holds the current temperature (multiplied by 1000) – for example, in the image below, the CPU temperature is 53 C. On the web, you’ll see many caveats that this not an accurate measurement and should not be used for any serious application – but for our demo app, it serves the purpose of sending I/O changes from the BBB to any attached browser.

Location of CPU Temperature Information

Our demo consists of two parts: the node.js server located on the BBB and a web page with a JavaScript connection to the BBB.

Node.Js CPU Temperature Server

Our node.js server does two things, first it serves up a web page, when requested, and secondly, every second it sends the latest temperature to all of the attached browsers.

Our first step to getting this working is to install socket.io using the node package manager (npm), which handles the transporting of temperature information to the browser.

Install socket.io using npm

Unexpected Detour to Fix Disk Size

I noticed that I was having problems doing any work, node started behaving weird and I started getting errors. I realized that the partition allocated for the Linux kernel on my SD card was full. While I had an 8GB SD lying around, I was able to stumble on this excellent set of instructions to expand the Linux kernel partition on my SD card, which allows me to continue to use my 4GB SD card, with a 10 minute procedure.

Here’s what my SD card’s Linux kernel partition looked like before:

Linux kernel partition on SD before

Here’s the disk allocation after expanding the partition size:

Linux kernel partition on SD after

And finally, after finishing up the resizing command:

Result of Linux kernel partition resize

What I learned from this detour is that a 2GB SD card shouldn’t be used for Debian on BBB, the 4GB is fine, but consider right-sizing the partitions beforehand and, if available, start with a 8GB SD.

Temperature Sensor App

So back from our tangent, we’re ready to test out reading the on-board temperature measurement and displaying it in (near) real-time to a connected browser. I’ve written a very small node.js app called bbbTemp which performs this function.

I found a very useful utility, called WinSCP, to allow me to transfer files to the BBB from my Windows machine. WinSCP gives me the luxury of doing development and testing in Windows, then fine tuning and minor debugging on the BBB. (It’s one of the nice little tools that deserves a donation – I gave mine and I hope that you will too.)

WinSCP File Transfer

In next week’s post, I’ll share the code, but in the meantime, here’s a video of our application running:

 

 

 

 

Project: BBB Admin Page – Running a Basic Node.js Program

The default Debian distro for BBB includes the Cloud9 Integrated Development Environment (IDE), which we can use to run a very basic program to blink LEDs. The Cloud9 IDE is available over the virtual USB to Ethernet port’s default IP address and port 3000:

Cloud9 Integrated Development Environment (IDE)

We’ll be using node.js technology to handle our requests, so let’s first confirm that we have node installed on our system. The best way to do this to simple ask for the version installed, if we get a response and the response is a latest build, then we’re ready to move on. We can issue a command directly from the Cloud9 bash window:

Test node.js installation

We’ll be writing our programs in JavaScript within the node.js infrastructure. To get started we’ll load the demo/blinkled.js.

blinkled.js program

• Line 1: Initialize the bonescript library
• Line 3: Defines the leds variable, by referencing user space names for known outputs
• Lines 5-7: Defines the leds as outputs
• Lines 9-12: Sets the leds to off state
• Line 14: Defines a timer that will go call the toggle function every 1000ms (1sec)
• Line 16-22: If the led state is off, turn if on, else turn it off

We can now run the program by typing the following into the bash window: node demo/blinkled.js. The end result is the following:

Now that we have the programming environment in place, we’ll step up to create a web page that can allow us to control the LEDs.

Project: BBB Admin Page – Updating to Debian

With our board running, one of the first tasks we’ll perform is to build an SD card that we can boot from, based on the Debian distribution. The latest Debian build is available at http://beagleboard.org/latest-images. Once downloaded, we uncompress the build using 7-zip and then download the IMG file using Image Writer for Windows to the SD card. After this is done, we insert into the BBB and reset the board to use the SD card.

Write Debian IMG file to SD card using Image Writer for Windows

By firing up PuTTY and entering the IP address, we can connect to the BBB using an SSH session.

BBB SD First Boot

Now that we have our OS in place, we’ll next look at development environments, in particular the Cloud9 IDE and BoneScript (node.js library optimized for the Beagle family).

EDIT: Derek Malloy has a great description of the procedure to copy the SD image to the BeagleBone Black’s EMMC flash.

 

 

 

 

Project: Admin Website for BeagleBone Black – Step 1

In this project, I’m going to build an admin panel for a BeagleBone Black (BBB) system. We’re going to use node.js and either AngularJS or backbone.js as the website’s framework, based on an existing admin template pattern. We’ll use this admin website to talk to the lower-level components (e.g., GPIO) of the board. What makes this possible is the microprocessor and Linux OS combination on the BBB – this combination represents a great sandbox for the cliché Internet of Things (IoT) project.

I’ve purchased a BBB kit from an on-line electronics supplier, which should give us all the tools we need to build out our project:

BeagleBone Black Kit

The BBB can be powered by a 5VDC adapter or via the USB port. By simply plugging the BBB into my Windows 8.1 PC using the USB cord, the device shows up in Windows Explorer as a mounted drive:

BBB in Windows

We can navigate to the mounted drive (F:) and access the START.htm web page, which will acts as a guide to learning how to start using the board:

Getting Started with the BBB

The START.htm page provides us with some helpful advice to further set up the board. We’ll use the high-lighted buttons to install Windows drivers for the board and then access the on-board web server.

Setup up drivers and access web server

I had some issues installing the driver on my Windows 8.1 PC at first, but after I used the link provided for the Microsoft Visual C++ 2010 SP1 Redistributable Package (x64), this repaired my C++ Redistributable installation and the install finished smoothly:

BBB Drivers installed on Windows 8.1

I found that I had to reboot before I could go to the next step, which was to access the USB to virtual Ethernet port, which is made available at http://192.168.7.2:

BBB web server

We’re now up and running – ready to move on to more heady stuff.