Use Tizen Web To Measure Heart Rate With Galaxy Watches

Ummey Habiba Bristy

Engineer, Samsung Developer Program

Health monitoring is a very popular feature in smart watches, and Tizen provides various APIs for this purpose. One API is HumanActivityMonitor, which allows users to monitor health by providing metrics such as heart rate, step count, and stress level.

This blog describes how to measure heart rate using this API. A sample web app combined with a widget is attached. This sample app measures heart rate and stores data by timestamp, and the widget shows the last measured heart rate. This blog focuses on how to measure heart rate using the device sensor, stored data, and communication between an app and a widget.

Create and run a Tizen project

1. Create a project in Tizen Studio. Because our target is an app that is combined with a widget, select the Widget template to create this project.

2. Add the Tizen Advanced UI (TAU) framework library to your project. You can create and manage various UI functionalities using the TAU library as an alternative to designing a UI with HTML and CSS components.

3. Link the tau.circle.min.css and tau.min.js in the app’s index.html file.

<link rel="stylesheet"
href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)"
href="lib/tau/wearable/theme/default/tau.circle.min.css">

<script src="lib/tau/wearable/js/tau.min.js"> </script>

Measure heart rate and manage data

To measure heart rate using the HumanActivityMonitor API, add the following feature and privilege to the config.xml file:

<feature name="http://tizen.org/feature/humanactivitymonitor"/>

<tizen:privilege name="http://tizen.org/privilege/healthinfo"/>

Applications must request a user’s permission for privacy-related features. The tizen.ppm.requestPermission() method invokes the permission pop-up. When users give permission through the pop-up, they can then use the app features related to that privilege.

To measure heart rate, users must give permission to access the sensor using the following code snippet:

function onSuccess() {

    function onchangedCB(hrmInfo) {
        console.log(‘heart rate:’ + hrmInfo.heartRate);
        tizen.humanactivitymonitor.stop('HRM');
    }
    tizen.humanactivitymonitor.start('HRM', onchangedCB);
}

function onError(e) {
    console.log("error " + JSON.stringify(e));
}
tizen.ppm.requestPermission("http://tizen.org/privilege/healthinfo",onSuccess, onError);

Note that the HumanActivityMonitor API provides heart rate data directly in BPM (beats per minute). If you need the raw data of the sensor, you can use SensorHRMRawData.

The following screenshot shows how to measure heart rate using the sample app:

The Web Storage API stores data in key-value format. This API offers two types of storage - Local and Session. In the sample, we use local storage, along with Date as key and heartRate as value. The Date key retrieves data according to date, week, and month. If you do not want to retrieve history according to date, you can use a different key, such as an integer value; just make sure there is no repetition in key value.

Create a Date object to get the current time stamp. localStorage.setItem() puts the key (Date)-value (heartRate) pair in local storage.

var date_key = new Date();
localStorage.setItem(date_key, hrmInfo.heartRate);

To retrieve data, filter according to the key. Date and month are retrieved from the Date object and filter data using localStorage.getItem(localStorage.key(i)).

var date = new Date();
var lastdate = new Date(localStorage.key(i));
if (lastdate.getDate() == date.getDate()
&& lastdate.getMonth() == date.getMonth()) {
              console.log(localStorage.key(i)+ " :" + localStorage.getItem(localStorage.key(i)));

The following screenshot shows how the history is categorized by day, week, and month:

Communication between the app and a widget

The sample widget shows the last measured heart rate value, and heart rate history is stored in the local storage of the web app. To establish communication between the app and widget, we’ll use the Preference API. The Preference API stores key-pair values, allowing web widgets to communicate with their parent apps. In the app, data is stored with ‘KEY’:

tizen.preference.setValue('KEY', hrmInfo.heartRate);

In the widget, data is retrieved using the same ‘KEY’:

if (tizen.preference.exists('KEY')) {
    console.log(‘Last Measured: ‘ + tizen.preference.getValue('KEY'));
}

The following screenshot of the sample widget shows the last measured heart rate:

Launch the app from a widget

To launch an app from widget, add the following privilege to config.xml:

<tizen:privilege
name="http://tizen.org/privilege/application.launch"/>

To launch an app, provide your app ID in tizen.application.launch().

tizen.application.launch(YourAppID);

In the sample widget, the user taps Measure to launch the heart-rate measuring page or History to launch the heart-rate history page, and Preference can be used to determine which one is clicked. To implement, a different key-value pair is set for each page in the widget, and in the web app, key values are checked to detect which page is clicked.

For example, in the widget, the open_measure key is set to 1 to link to the Measure Page. The app then launches.

tizen.preference.setValue(‘open_measure’, 1);
tizen.application.launch(YourAppID);

The app checks for the open_measure key. If the key exists, the user is redirected to the Measure Page with tau.changePage().

window.onload = function() {
    if (tizen.preference.exists(' open_measure ')) {
        tau.changePage(YourPageID);
    }
}

You can also use the HumanActivityMonitor API to implement a step counter, stress level reading, GPS, and other features in your wearable device. Because enabling other features is similar to implementing the heart rate monitor, you can use this blog as a guide and the attached sampleHeartRateMonitor to enable a full range of health monitoring metrics to your Galaxy Watch.