MagicHat - 12 - Web interface

While struggling to complete the blood-pressure measurement device, let's have a look about how to show measured value

In this project, measures will be communicated to the user in two way

1. through a web interface that can be accessed by any device running a web browser
2. through a Text-To-Speech engine

As I'm still waiting for the components required to build the Text-To-Speech engine, in this post I will focus on the web interface

The web interface will be built using node.

The first step to take is to install node and expand the memory. I followed this tutorial to accomplish this task. All steps completed with no issues (except you have to change to opkg configuration file by replacing the line

src/gz barrier_breaker http://download.linino.org/dogstick/all-in-one/latest/packages/

with

src/gz barrier_breaker http://downloads.arduino.cc/openwrtyun/1/packages

As I like experimenting new approaches to the a problem, I decided to move away from the typical solution based on periodic poll to update the values on the web interface and use web sockets instead. The data flow is shown in picture below

Basically, whenever the Atmel 32U4 has updated data, it sends such data (formatted as a JSON document) to the node application that is listening on port /dev/ttyATH0)

If a client is connected on a web socket, the node application sends the same document on the web socket. Upon receiving new data, web client update widgets accordingly

This is not the best approach from a software-engineering point of view (I broke the separation-of-concern principle as the Atmel32U4 should be unaware of data format used by the web client) but it's quick and easy  to implement and to understand

First of all, a node package needs to be installed in order to access the serial port from the node application itself

opkg node-serial

In the node application, first of all we need to create a listening web socket, that passively waits for a client connection.

_ws = null;
var wss = new webSocketServer({server:server});
wss.on('connection', function(ws) {
  _ws = ws;
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
  ws.on('close', function(message) {
    console.log('closed');
    _ws = null;
  });

Then, we need to open the serial port that listens for data from Atmel 32U4.

_data = "";
yunPort = new serialPort.SerialPort('/dev/ttyATH0', { baudrate: 115200 });
yunPort.on('data', function(data) {
  console.log('data ' + data);
  if (_ws)
  {
    _data = _data + data;
    if (_data.indexOf("\r\n") > 0)
    {
      _ws.send(_data);
      _data = "";
    }
  }
});

The CR+LF bytes to detect the end of the JSON document produced by the Arduino sketch, so inside the "data received" event I need to check for the presence of the CR+LF pair. If this the case, I can send data to the web client

As I said, the Arduin sketch uses the serial connection (which is typically wrapped by the Bridge library) to send data. In order to have full access to the serial port, we first need to change the /etc/inittab file and remove the link between the serial port itself and the console. This operation is very simple: just open the file /etc/inittab and comment the last line as shown here

::sysinit:/etc/init.d/rcS S boot
::shutdown:/etc/init.d/rcS K shutdown
# removed to use Serial1 from Arduino sketch
#ttyATH0::askfirst:/bin/ash --login

Now, in the Arduino sketch, we can initialize the serial port

Serial1.begin(115200)

and finally write any data we want. In this case, I'm sending a JSON document ready to be sent to the web client

Serial1.print("{\"temperature\":");
Serial1.print(hat.getTemperature());
    Serial1.print(", \"bpm\":");
    Serial1.print(hat.getBPM());
    Serial1.print(", \"pressure\":{\"min\":0,\"max\":");
Serial1.print(hat.getPressure());
    Serial1.print("}, \"pulse\":[");
    for (i = 0; i<pulseDataLen; i++)
    {
      if (i > 0)
Serial1.print(",");
      Serial1.print(pulseData[i]);
    }
Serial1.println("]}");

The information included in the JSON document are

1. temperature
2. heartbeat per minute
3. blood pressure
4. heartbeat samples taken by the pulse sensor. In this way, the web client can show an interesting chart with the sampled values

In next post, I will talk about the client-side implementation of the web interface. See you soon!