Pedometer implementation using Harmony OS Lite wearable - Huawei Developers

Introduction
HarmonyOS is a future-proof distributed operating system open to you as part of the initiatives for the all-scenario strategy, adaptable to mobile office, fitness and health, social communication, and media entertainment, to name a few. Unlike a legacy operating system that runs on a standalone device, HarmonyOS is built on a distributed architecture designed based on a set of system capabilities. It is able to run on a wide range of device forms, including smartphones, tablets, wearables, smart TVs and head units.
In this article, we will create a simple pedometer application for lite wearable which will count each step user takes, distance covered and Heart rate. Also, for every 1000 steps completion, wearable device will vibrate.
Pedometer app will have 2 UI screens, first screen will have start button. Once user clicks on Start button, app will route to second screen which will show STEPS, BPM (heart rate) and METER/KM (total distance) covered.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Requirements
1) DevEco IDE
2) Lite wearable simulator (or lite wearable watch)
Implementation
First page, index.hml contains start button.
Code:
<div class="container">
<text class="title">Pedometer</text>
<text class="subtitle">Step Counter</text>
<image class= "image" src='/common/pedometer.png' ></image>
<input class="button" type="button" value="Start" onclick="start"></input>
</div>
index.css has style defined for first page.
Code:
.container {
display: flex;
justify-content: center;
align-items: center;
left: 0px;
background-color: #192841;
top: 0px;
flex-direction: column;
width: 454px;
height: 454px;
}
.title {
font-size:38px;
font-family: HYQiHei-65S;
justify-content: center;
}
.subtitle {
font-size:30px;
justify-content: center;
}
.button {
width: 200px;
height: 50px;
font-size: 30px;
margin-top: 15px;
background-color: indigo;
}
.image {
width: 128px;
height: 143px;
justify-content: center;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 20px;
}
index.js contains the implementation of start button. Once user clicks on start button, app will route to second page stepcounter.hml
Code:
import router from '@system.router'
export default {
data: {
title: 'World'
},
start() {
router.replace({
uri: 'pages/stepcounter/stepcounter'
});
}
}
Second page, stepcounter.hml contains UI design for displaying step count, heart beat count and total distance covered.
Code:
<div class="container" onswipe="touchMove">
<image class= "image" src='/common/stepscount.png' ></image>
<text class="subtitle">{{stepcount}}</text>
<div class="seperator" ></div>
<image class= "image" src='/common/heartbeat.png' ></image>
<text class="subtitle">{{heartbeatcount}}</text>
<div class="seperator" ></div>
<image class= "image1" src='/common/jogging.png' ></image>
<text class="subtitle">{{distance}}</text>
</div>
stepcounter.css has style defined for second page.
Code:
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
background-color: #192841;
}
.title {
font-size:38px;
font-family: HYQiHei-65S;
justify-content: center;
}
.subtitle {
font-size:30px;
color: lightgrey;
margin: 15px;
justify-content: center;
}
.seperator {
height: 1px;
width: 454px;
margin-bottom: 5px;
margin-top: 5px;
background-color: white;
}
.image {
width: 48px;
height: 48px;
justify-content: center;
margin-bottom: 5px;
}
.image1 {
width: 48px;
height: 48px;
justify-content: center;
margin-bottom: 5px;
margin-top: 15px;
}
stepcounter.js has implementation of various APIs.
1. Body state API
This API is used to listen for changes of the sensor wearing state. We will use this API to know if user is wearing wearable device or not.
Code:
// to listen the sensor wearing state, returns true if wear is in wrist
sensor.subscribeOnBodyState({
success: function(response) {
console.log('get on-body state value:' + response.value);
if(response.value === true) {
// get the heart rate
_this.getHeartBeatCount();
}
},
fail: function(data, code) {
console.log('fail to get on body state, code:' + code + ', data: ' + data);
},
});
For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0202458325873420042