Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Chris Meier

Software Developer and Co-founder of FoodChain

NodeHeart Part 2: Becoming Smart

With our smart heart monitor up and running, we now need to connect it to the web. This will enable the heart monitor to be viewed remotely at a nursing station.

We will be using:

  1. The smart heart monitor built in Part 1.
  2. A Raspberry Pi (specifically the B+)

We will have the smart heart monitor communicate through a web server running on the Raspberry Pi.

First, we must initialize a new npm project:

1
npm init

Fill out the fields appropriately. We will also need a few node modules:

1
npm install serialport express socket.io

Create a file called server.js, which is where our code will run.

server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var http = require('http');
var express = require('express');
var serialport = require('serialport');

app = express();
//start a new server
var server = http.createServer(app).listen(3000);

var io = require('socket.io').listen(server);

//connect to the serial port with the heart monitor
var portName = 'YOUR PORT NAME HERE';
var sp = new serialport.SerialPort(portName, {
    baudRate: 9600,
    dataBits: 8,
    parity: 'none',
    stopBits: 1,
    flowControl: false,
    parser: serialport.parsers.readline("\r\n")
});

sp.on('data', function(input) {

    console.log(input);
});

app.get('/', function(req, res){
  res.send('hello world');
});

You should see the rate measurements on your console when you run:

1
node server.js

Pretty cool right? Now let’s graph it. We will be using Smoothiecharts, which is a great library for creating real time charts and Socket.io to read the data in real time.

Install the Socket.io package via npm

1
sudo npm install socket.io

We need to modify our server.js file to handle socket io:

server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var serialport = require('serialport');
var express = require('express');
app = express();
var http = require('http').Server(app);

//Include the socket.io module
var io = require('socket.io')(http);

//connect to the serial port with the heart monitor
var portName = 'COM3';
var sp = new serialport.SerialPort(portName, {
    baudRate: 9600,
    dataBits: 8,
    parity: 'none',
    stopBits: 1,
    flowControl: false,
    parser: serialport.parsers.readline("\r\n")
});

app.get('/', function(req, res){
  res.sendFile(__dirname + '/public/graph.html');
});

//When someone connects to the server, open a connection
io.on('connection', function(socket){
   console.log("connected");
   //begin sending data over the socket
   sp.on('data', function(input) {
     //send over socket via the ‘heart rate’ topic
     io.emit('heart rate', input);
   });
});



http.listen(3000, function(){
  console.log('listening on *:3000');
});

We need to create a html file to graph the data:

graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <title>NodeHeart EKG</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

  </head>
  <body>

    <h1>NodeHeart EKG</h1>



  </body>
</html>

We now need to add the ability to connect with our server and begin receiving data:

1
2
3
4
5
6
7
8
//open a connection with the server
var socket = io();

        //subscribe to the ‘heart rate’ topic and print the data received to the console
socket.on('heart rate', function(data){
            console.log(data);

         });

Now let’s add it to our graph page:

graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <title>NodeHeart EKG</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

  </head>
  <body>

    <h1>NodeHeart EKG</h1>


  <script type="text/javascript">
//open a connection with the server
var socket = io();

        //subscribe to the ‘heart rate’ topic and print the data received to the console
socket.on('heart rate', function(data){
            console.log(data);

         });


    </script>


  </body>
</html>

Here, we establish a connection to our server and begin reading in the data from the heart monitor. The data is sent out via a topic, which allows you to read separate data streams and keep them separate. For example, if we were to add functionality to measure a patient’s pulse we wouldn’t want that data mixed in with the heart rate measurements. Topics allow us to keep these separate so we can ensure we are reading the correct data. I chose the topic name ‘heart rate’ for the EKG data. For now, we will just print the data to the browser’s console.

This data needs to be graphed to be useful. So now we will add Smoothiecharts functionality to the web page. We will create a new chart and a canvas element to display it.

graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <title>NodeHeart EKG</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

  </head>
  <body>

    <h1>NodeHeart EKG</h1>
<!--Add the canvas element-->
    <canvas id="mycanvas" width="400" height="100"></canvas>

  <script type="text/javascript">
//open a connection with the server
var socket = io();

        //subscribe to the ‘heart rate’ topic and print the data received to the console
socket.on('heart rate', function(data){
            console.log(data);

         });


    </script>


  </body>
</html>

We will need to create a new new chart and a TimeSeries() to append our data to. Using the setInterval() method, we will add an EKG measurement once per second:

1
2
3
4
5
6
7
8
9
10
11
12
13
 var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));

var ekgLine = new TimeSeries();

setInterval(function() {

     socket.on('heart rate', function(data){
            //append EKG data to TimeSeries

 });

}, 1000);

When a measurement comes through via Socket.io we will append it to the TimeSeries() using the time that it come through.

1
2
3
4
5
6
7
8
9
10
setInterval(function() {

 socket.on('heart rate', function(data){


       //append the measurement to the TimeSeries
         ekgLine.append(new Date().getTime(), data);
     });

}, 1000);

Finally, we need to have our chart graph our EKG data. We do this by appending the TimeSeries() to the chart:

1
smoothie.addTimeSeries(ekgLine);

We then add the script to our html:

graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <title>NodeHeart EKG</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

  </head>
  <body>

    <h1>NodeHeart EKG</h1>

    <canvas id="mycanvas" width="400" height="100"></canvas>

  <script type="text/javascript">

  var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));


     var socket = io();

     var ekgLine = new TimeSeries();

     // Add a random value to each line every second
setInterval(function() {

 socket.on('heart rate', function(data){



     ekgLine.append(new Date().getTime(), data);
     });



}, 1000);


    // Add to SmoothieChart
smoothie.addTimeSeries(ekgLine);

    </script>


  </body>
</html>

We’re all set. Hook up the heart monitor to the Arduino and attach the leads to your body. We can then start up the server:

1
Node server.js

When we visit “`localhost:3000’’, we will now see our EKG graph!

images

In Part 3, we will make it so a server can connect with multiple EKG machines and display their output instead of connecting to the EKG machine directly with our browser.