Tag Archives: AngularJS

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

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

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

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

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: 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

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

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

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

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

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

BBB web server

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