HarmonyOS Lite Wearable Morse App
Introduction
In this article we will develop Morse app for Lite Wearables. The Morse application has a tutorial section and a game section for the Morse language. We will build the whole application from scratch together.
Introduction to HarmonyOS for Lite Wearables
Lite Wearable development only supports JavaScript. UI elements are created with HML and designed with CSS. Lite Wearables have fewer features and are simpler than Wearables.
Requirements
- Dev Eco Studio IDE
What Will You Learn
How to:
- Add icons to buttons
- Create a list
- Add animations
- Use setTimeout() function
- Add progress bar
- Route pages with parameters
- Use vibration feature of watch
Creating Project
To create a Lite Wearable project, via the IDE: File > New Project. In the window that opens, select the template shown below and click next.
After entering the project name in the window that opens, you should mark the type of project and the devices to be developed. You can mark more than one device.
Development
1- Project Hierarchy
In this article, I felt the need to show the hierarchy of projects. This image can be helpful when importing the files in the common folder in the following sections. There are 5 screens that we will create in the project, they are created under the pages folder. A JS, HML and CSS file is created for each page. I gathered the icons, CSS files and JS files to be used in the whole application under a folder named common. The app.js file is the first script that runs when the application runs.
2- Index Page, route.js & style.css
First things first, we need to create page that welcomes user and navigates to main screen. It will be simple page that only contains app name.
Our application consists of multiple pages. Navigation between pages is provided by importing the Router. Rather than using the Router on all pages, I gathered the navigation of all pages in a single class and called these methods where necessary.
As you can see, the navigation to the Score page is done with parameters. We will see how to use these parameters while implementing the Score page.
Just like we did in the route.js class, I gathered the CSS classes used in the project in a single file style.css and called them where necessary.
The index page contains only the title and provides navigation to the main page. We call route.js for navigation and it will happen when the screen is swiped to the left.
3- Main Page, Animations & Buttons with Icons
The main page is for the user to learn and practice Morse code. On this page, the user can enter Morse codes and see the results of both Morse code and sentence equivalents simultaneously.
The middle button will turn green when the user makes a short press, and red when a long press. To achieve this, we need to use animations. Since we cannot change the color of the button dynamically, we will create 3 different buttons and change their visibility according to the pressed state.
Since we cannot assign an icon to the button, we create a div and add an Image to it. We add “onclick” attribute to give button attribute to div. When the if statement you see in HML is true in JavaScript, it makes that div visible.
You can see how the color change is done and how the animations are created below. If the colors in “from” and “to” were different in the animation, there would be a smooth color transition.
Main.js includes click methods, navigation and Morse code translation.
The values of “play”, “space”, “dot” and “dash” are determined as true or false according to the button press.
4- Play Page, setTimeout & Vibration
Play page is the game page where a random word is presented to the user and the user is asked to enter the Morse code equivalent of this word. After entering Morse Code, he can switch to the Score page and see how accurate it is.
We will use the animations we use on the main page on this screen as well. We will even show the Morse signals of the given random word using those animations.
When the Morse animations are triggered, the vibration feature of the watch will also work. It will vibrate short for Dot and long vibrate for Dash.
In the JavaScript file, you can see the Morse code word by word, word Morse code and vibration methods. Apart from these, there are important considerations in the creation and presentation of animation.
When the user wants to see the Morse signal of the random word “SOS”, the signals should light up according to the code “… — — …”. This sequence is achieved by making the Divs visible in sequence, as we mentioned earlier. We will use the setTimeout function so that the signals light up in sequence and wait for each other. This method runs the desired function after the specified time. Thus, each signal will light up 2 seconds after the previous signal and a fluent Morse code will be created.
5- Score Page, Progress Bar & Handling Navigation Parameters
The score page displays the accuracy rate, the desired word and the word created by the user with Morse code. These parameters are received from Play page while navigating.
Score page contains a progress bar to show accuracy of user answer.
Variable names must be same with parameter names in route.js file.
6- Morse List Page
This page contains the Morse codes in a list. The user who wants to learn or remember Morse codes can browse this page.
You can create the list in the HML file with the “for” attribute. It is enough to give an array in the JS file inside the “for”.
JS file only contains Morse code array and navigation method.
Tips & Tricks
- If there is a blank screen when you run the simulator, there may be an error in the HML or CSS. CSS not written in HML may have been used.
- While navigating one page to another with parameters, Parameter names must be same with receiver JS file.
- If the icons are not visible inside the div, make sure the icon sizes are not larger than the div size.
Conclusion
We have developed a Morse app for Lite Wearable devices with you. As in this project, HarmonyOS provides development opportunities for many devices, not just smart watches. Lite Wearable development although it contains less libraries and features than Wearable development, it is quite sufficient to make very useful applications.
Thank you for reading. See you in my other articles…;)
