Develop Calculator application for Lite-Wearable in Harmony OS
Article Introduction
In this article, I have explained to develop a calculator application for Huawei Lite Wearable device using Huawei DevEco Studio and using JS language in Harmony OS. Calculator here performs basic arithmetic operations which can be installed in wearable watch.
Huawei Lite Wearable
Requirements
1) DevEco IDE
2) Lite wearable watch (Can use simulator also)
New Project (Lite Wearable)
After installation of DevEco Studio, make new project.
Select Lite Wearable in Device and select Empty Feature Ability in Template.
After the project is created, its directory as shown in below displayed image.
- hml files describe the page layout.
- css files describe the page style.
- js files process the interactions between pages and users.
- The app.js file manages global JavaScript logics and application lifecycle.
- The pages directory stores all component pages.
The common directory stores public resource files, such as media resources and .js files.
Integration process
Design the UI
Step 1: Add background image.
As the first step, we can create a UI that contains keypads with all number keys, operator keys and result display text box.
Create and add the background image for calculator screen using stack component.
index.html
<stack class="stack">
<image src='/common/watchbackground.png' class="background"></image>
</stack>index.css
.stack {
width: 454px;
height: 454px;
justify-content: center;
}Step 2: Add keys UI in the keypad
Create and add rows of the keys for keypad. Numbers 0–9, “.” And equal key for calculating operation.
<div class="calcRow">
<text class="numberBtn" value="7" onclick="handleNumber(7)"></text>
<text class="numberBtn" value="8" onclick="handleNumber(8)"></text>
<text class="numberBtn" value="9" onclick="handleNumber(9)"></text>
<text class="equalBtn" value=" "></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="4" onclick="handleNumber(4)"></text>
<text class="numberBtn" value="5" onclick="handleNumber(5)"></text>
<text class="numberBtn" value="6" onclick="handleNumber(6)"></text>
<text class="equalBtn" value="=" onclick="handlecalculate"></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="1" onclick="handleNumber(1)"></text>
<text class="numberBtn" value="2" onclick="handleNumber(2)"></text>
<text class="numberBtn" value="3" onclick="handleNumber(3)"></text>
<text class="equalBtn" value=" "></text>
</div>.calcRow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 454px;
height: 50px;
background-color: transparent;
}
.equalBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 0px;
border-color: #414343;
color: #414343;
background-color: #f87d4f;
}.numberBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 1px;
color: #414343;
background-color: #ffffff;
border-color: #414343;
border-radius: 5px;
}
Step 3: Add operator keys UI and Result text box
Create and add row of the keys for operator like +, -, *, and /. Create result text field for displaying output.
<div class="row">
<text class="resultText" value="{{result}}"></text>
</div>
<div class="calcRow">
<text class="operatorBtn" value="+" onclick="handleOperator('+')"></text>
<text class="operatorBtn" value="-" onclick="handleOperator('-')"></text>
<text class="operatorBtn" value="x" onclick="handleOperator('x')"></text>
<text class="operatorBtn" value="/" onclick="handleOperator('/')"></text>
</div>row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 454px;
height: 70px;
background-color: transparent;
}
.operatorBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 1px;
border-color: #414343;
color: #414343;
background-color: #e6e6e6;
}
Build calculator logic in index.js
Step 4: Handling respective text field clicks using methods
Operator
OnClick() Implementation
0–9, “.”
handleNumber()
+,-,*,/
handleOperator()
=
handleCalculate()
CE
clearMemory()
Implementation handleNumber(). For any operation we need two operand, for example if it A+B = C, then A is first operand and B is second operand with + is operator which is calculated to result C.
export default {
data: {
firstOperand: '',
secondOperand: '',
operator: '',
accumulator: '',
result: '', }
}Step 5: Handling number keys in java-script
If the operator is empty, then the number clicked is first operand’s digits else it is second operand. If we already have first operand and operator, then append all together and display it in the result display all together as an expression like “a+b”.
if (this.operator == '') {
if (this.firstOperand == '') {
this.firstOperand = number
this.result = number
} else {
if (this.accumulator == '') {
this.firstOperand = this.firstOperand + number.toString()
this.result = this.firstOperand
} else {
this.clearMemory();
this.firstOperand = number
this.result = number
}
}
} else {
if (this.secondOperand == '') {
this.secondOperand = number
} else {
this.secondOperand = this.secondOperand + number.toString()
}
this.result = this.firstOperand + "" + this.operator + "" + this.secondOperand
}Step 6: Handling operator keys in java-script
If the operator is empty save it as new operator, else if we have already operands and operator, then calculate the result of the expression and save new operator for future calculation.
handleOperator(operation) {
if (this.operator == '') {
this.operator = operation;
} else {
if (this.operator != '' && this.firstOperand != '' && this.secondOperand != '') {
this.handlecalculate();
this.operator = operation;
this.firstOperand = this.result;
this.secondOperand = ''
}
}
}Step 7: Handling calculate key in java-script.
Perform the operation using the already saved operands. Save result in accumulator for future reference and display the result in result box.
handleCalculate() {
var first = parseFloat(this.firstOperand);
var second = parseFloat(this.secondOperand)
switch (this.operator) {
case '+':
this.result = first + second
break;
case '-':
this.result = first - second
break;
case 'x':
this.result = first * second
break;
case '/':
this.result = first / second
break;
default:
}
this.accumulator = this.result;
this.firstOperand = this.result
this.secondOperand = ''
this.operator = '';
}Step 8: Handling decimal key in java-script
If the operand are empty then prefix “0.” in operands, else if we have already operands, then just postfix with decimal “.”.
if (this.accumulator != '') {
this.clearMemory();
this.firstOperand = '0.'
this.result = this.firstOperand
}
else if (this.firstOperand == '') {
this.firstOperand = '0.'
this.result = this.firstOperand
}
else if (this.secondOperand == '' && this.operator == '') {
this.firstOperand = this.firstOperand + '.'
} else {
this.secondOperand = this.secondOperand + '.'
this.result = this.firstOperand + "" + this.operator + "" + this.secondOperand
}Step 9: Handling CE key in java-script
Clear all data fields, as there are not required hereafter
clearMemory() {
this.firstOperand = '';
this.secondOperand = '';
this.operator = '';
this.accumulator = '';
this.result = '0';
}Tips and Tricks
You can use Lite-wearable simulator for development. Handle other edge cases for more robust application. Edge cases are like, hitting operator before calculate key.
Conclusion
In this article, we have learnt how to create simple calculator app using various Harmony OS UI components. Calculator here performs basic arithmetic operations which can be installed wearable watch.
References
