Harmony OS: Step Speed and Geographic Displacement Calculator
Hi everyone,
In this article, we will learn how to develop a Step Speed and Geographic Displacement Calculator Project for a Lite Wearable Device. This project will be developed to run on devices with Harmony OS. This app allows users to check their speed while walking or running and see the measurement of displacement from the start point to the endpoint of the exercise.
Here are the technical requirements of this project and the tools we will use for the project :
- JavaScript , HML ( HarmonyOS Markup Language) ,CSS
- DevEco Studio IDE (2.1.0.501 or later version)
- Lite Wearable Device Simulator ( Which is embedded in DevEco Studio)
Note : The HarmonyOS Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events.
For more details about JS, HML, and CSS please refer to this link.
Also, there are some APIs of Lite Wearable Devices that we will use in this project. You can find the name and links of them in the following.
- Page Routing (For details, click this link)
2. Timer (For details, click this link)
3. Sensor - Step Counter (For details, click this link)
4. Geographic Location (For details, click this link)
Creating Lite Wearable Project in DevEco Studio
After opening DevEco Studio, you need to click “Create HarmonyOS Project” to create a new project in it.
After that, please select “Lite Wearable” for the Device part, choose a template for your ability and click next.
Note : We will choose “Empty Feature Ability” for this project.
The project will be created and index page components will be added your project by default.
Start Screen Design and Development
The Start Screen will be created for allowing users to start the application before they start to walk or run. Since the application will automatically start with the “index” page, we will use this page as the Start Screen.
On this screen, we will have the title part introducing the app and a button that we will use to redirect the user to the second page.
We will add add an <input> tag for the button and <text> tags for the title part to the index.hml file.
Note: Please don’t forget to define “onclick” method into the input tag for the button.
We can also use CSS files to define the styles of the component we defined in the HML files. As an example, the “index.css” file can be in the following.
After adding component tags to the HML file, we will use the Page Routing API to open the second page of the application when the button is pressed. Before defining routing, please right-click to the “pages” folder and select New -> JS Page to create the second page.
Then open the index.js file and create a method with the same name as the button’s onclick method (“start”). In the start() method we need to call router.replace API by giving URI (path) of the second page created before.
Note: You must import system.router module before you use router API.
Second Screen Design and Development
This screen will be the part where we calculate the step speed and geographic location displacement. On this page, steps will be counted, step distance and displacement will be calculated every 5 minutes. First, we will create the page layout. This page has some texts for Distance, Displacement, and Speed Fields and their current values.
The HML file of this page can be like in the following.
On this page, every 5 minutes, steps will be counted then step distance and displacement will be calculated. We will do this in the JS file on the second page. As you can see below, at the beginning of onInit() function, we get step value and initial location. Then, with the help of the Timer API, we can call functions that calculate step distance and get geolocation, every 5 minutes.
Note : These functions will be implemented later.
Now we need to implement calculateStepDistance() function. In this method, firstly we will subscribe to the step counter to keep step values.
After that, we need to calculate the distance the user walked by using step value. We will assume that the distance between each two steps is 0.762 meters. So, multiply the step value by 0.762 to obtain the distance and then calculate the speed with using the following formulas.
Distance (walking or running) = Step Value x 0.762 (m)
Distance ( km) = Distance(m) / 1000
Time (delay set in setInterval())= 5 minutes = 0.002777777777777 hour
Speed(walking or running) = Distance(km) / Time (km/h)
We will create three variables to keep distances:
- instantDistance : It will keep the distance walked in five minutes. This will be used to calculate speed.
- distanceMeter: It will keep the total distance in meter. Distance will be kept in meter in each time distance calculator is called.
- distanceKM : It will keep the total distance in kilometer. If distanceMeter is greater than 1000, it will be converted to km.
Your code can be in the following.
Now, we will calculate geographic displacement using geolocation API. When users start the exercise, we will get the latitude and longitude values of the instant location. And we will keep these values as “initial position”. The initial position will not be changed until the end of the exercise.
Five minutes after the user starts the exercise, we will get the user’s instant location for the second time. And this will be kept as the final location. The final location will be changed every 5 minutes.
After getting the final location, we need to call calculateDisplacement() method which will calculate the geographic displacement using lat/long values of the initial and final location.
A lot of formulas have been produced to calculate the distance between two locations with known lat and long values. You can find some of them at the link below.
We will use the haversine formula to calculate displacement.
Haversine formula:
a = sin²(Δφ/2) + cos φ1 ⋅ cos φ2 ⋅ sin²(Δλ/2)
c = 2 ⋅ atan2( √a, √(1−a) )
d = R ⋅ c
whereφ is latitude, λ is longitude, R is earth’s radius (mean radius = 6,371km);
note that angles need to be in radians to pass to trig functions!
This formula can be implemented in JavaScript as in the following.
After completing all the operations, we can define “go back” option to finish the exercise. To do this, first, we can create a “utils.js” file in the “common” folder and define the backToHome() method to go to the index page as in the following.
We will call backToHome() method when user swipe the screen to the right. Also, you need to unsubscribe geolocation and sensor APIs when the user finishes the exercise.
Your JS file for your second page will be as follows.
Running the Project on Simulator
After developing your project, you can run it in a simulator. To do this, please click “Run” button below the toolbar.
A window will be opened to select a device to run the project. Please select the “Huawei Lite Wearable Simulator” and click “OK”.
Setting Parameter for Simulator
After you run the project on simulator, you will see a button at the bottom of the device simulator like below.
After clicking this button, you will see a panel open. In this panel, you can manually set the values of all the data you need. We will set step counter and geographic location values for our project.
