Real-time HR Tracking web app built with AT&T M2X, Pusher & CanvasJS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
css
data
images
js
.gitignore
NOTICE.md
README.md
favicon.ico
index.html

README.md

Real-Time Heart Rate Tracker
built with AT&T M2X, Pusher & Canvas.js

This is a sample application which leverages the AT&T M2X Time-Series Datastore to gather and store heart rate data, and the M2X Pusher Integration to stream data in real-time through a Pusher WebSocket Channel to a web application that displays the current heart rate & a dynamic chart from Canvas.js.

View Live Demo

http://panoply.cloud/heart-rate-tracker/

Heart Rate Tracker

Prerequisites

Setup

You will need the following in order to run the application:

  1. An M2X Device with a heart-rate Stream which is receiving real-time data updates. Don't have one? See: Data Generation
  2. Configured M2X Pusher Integration to send M2X Device data to Pusher WebSocket channel. Don't have one? See: Configure M2X Pusher Integration

Data Generation

If you don't have an M2X Device seeding live data, we've included a Python script that leverages the M2X Python Client Library to push generated heart rate data to M2X.

The script assumes you have already created an M2X Device and added a Stream called heart-rate. Note: the ID of this device will be used when running the script in the M2X_HR_DEVICE environment variable.

Requirements:

  • Python 3
  • pip 3
  • M2X Python Client

To execute the script, run the following commands:

  1. Install M2X Python Client:

    pip install m2x
  2. Set environment variables for M2X_API_KEY & M2X_HR_DEVICE:

    export M2X_API_KEY=[YOUR-M2X-API-KEY]
    export M2X_HR_DEVICE=[YOUR-M2X-DEVICE-ID]
  3. Run the script:

    pyhthon ./bin/hr_datagen.py

Configure M2X Pusher Integration

The M2X -> Pusher Integration, once configured, will deliver all data from the configured data sources to Pusher which in turn publishes those data updates to a WebSocket channel which your client applications can subscribe to in order to receive real-time updates.

Create an Integration by making an HTTP request to the Create Integration endpoint of the M2X API. Please refer to the M2X API documentation when crafting your request, note that the Create Integration endpoint requires an M2X Master API Key in the X-M2X-KEY header.

Install & Run

  1. Clone this repository
  2. Add your Pusher App ID & Channel Name to js/main.js. Note: the channel name is the channel_prefix provided when configuring the M2X Pusher integration plus the name of the M2X Device Stream. Example: [channel prefix m2x-] + [stream name heart-rate] = [channel name m2x-heart-rate]
  3. Open index.html in your browser to view the data streaming in real-time