Assignments Goals

• Write an application that interfaces with an input &/or output device that you made

Week's Lectures

Preface

During my years at my workplace I used a lot of languages to develop all sort of User Interfaces, ranging from bare WIN32 Api, C++, C#, Processing and many others. So for this week assigment I wanted to explore the possibility to use som web based application to display data coming from my GF_SensorBoard.

This is my first time trying to interface web content with hardware, so I guessed I would start easy, using some kind of serial communication to send data to the PC, and then intercept it from a web page.

After a bit of searching on the web, and peeking at Neil's example, I decided to use NodeJS as bridge between the hardware connection (Serial port) and the user interface (Web Page). To get mor comfortable with the different components and the interaction between them, I started looking THIS page, that has a lot of really good example on NodeJS.

Work files links

Preparing NodeJS package

After installing NodeJS, it's time to start creating my Node application. The generation of a new application is started with the command npm init, inside of the folder where I want my project to be stored.

That command creates a new file, package.json, containing all the information about the application itself, such as the name, description and entry point. Along with these, the file contains all the dependencies for the application, that is all the libraries the application needs to work.

• 

For my application I will need two different node libraries:

• express:
  a minimal and flexible Node.js web application framework that provides a robust set of features for web
• node-serialport:
  package to access serial ports for reading and writing data.

To install this dependencies in the application folder, I used the command
npm install <lib_name> --save.
In this way, the library is downloaded and installed, and the package.json file is updated with informations about the dependency.

This is really useful, because with the package.json file you can recreate the full dependency tree with the npm install command.

• 

General Architecture

The application is composed by several main blocks, to manage different aspects. The image below shows a simplified flowchart that summarize the operation flow of the application.

• 

Using Highcharts.js

To display live data on my webpage I wanted to use a ready-to-use javascript framework, and after a bit of browsing, I ended up on Highcharts webpage. It's a powerful framework, free for non-commercial use, and with tons of example and documentation pages. It has all kind of different charts type, such as splines, bars and pies, and the overall performance of live data is quite good.

• 

For my application I decided to use a spline with multiple Y (one for each touch channel) and a solid gauge for the temperature value. The examples are quite simple to understand and to customize, and if you want you can use jsFiddle to edit and try them online.

The code I used to generate the spline charts, is the following:

The code I used to generate the gauge charts, is the following:

Using the application

Once everything is ready, you can start the application with the command
node serial_parser.js <com_port>

Now the Node application is listening for the data on the serial port, and for new HTTP requests on localhost, port 8080.

• 

Assignments Outcomes

• Interpret and implement programming protocols

Have you:

described your process using words/images/screenshots
explained the protocols you used
had a fun time
outlined problems and how you fixed them
included original code