Beginner: Controlling Brightness in Harmony OS Lite wearable - Huawei Developers

Introduction
Harmony OS is a future-proof distributed operating system open to you as part of the initiatives for 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, Harmony OS is built on a distributed architecture designed based on a set of system capabilities. It can run on a wide range of device forms, including smartphones, tablets, wearables, smart TVs and head units.
In this article, we will create simple Lite wearable JS application to control the brightness of wearable.
{
"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
Implementation
First page, index.hml contains basic UI component showing list of predefined brightness values in percentage.
HTML:
<div class="container">
<image class= "image" src='/common/brightness_control.png' ></image>
<text class="title">
Brightness Control
</text>
<list class="showList">
<list-item class="showListItem" for="{{(index, value) in listData}}" tid="id">
<text class="content" onclick="onItemClick(value)">
{{value}}
</text>
<div class="divider"></div>
</list-item>
</list>
</div>
Here, we have placed brightness_control.png image in common directory.
index.css has style defined for the page.
CSS:
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
background-color: #192841;
width: 454px;
height: 454px;
}
.image {
width: 64px;
height: 64px;
justify-content: center;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 20px;
}
.showList {
flex-direction: column;
width: 300px;
margin-bottom: 10px;
margin-top: 10px;
height: 250px;
}
.showListItem {
flex-direction: column;
align-items: center;
width: 300px;
background-color: #192841;
height: 80px;
}
.title {
font-size: 30px;
}
.content {
margin-bottom: 10px;
margin-top: 10px;
}
.divider {
width: 454px;
height: 2px;
margin-bottom: 10px;
margin-top: 10px;
background-color: lightgrey;
}
Firstly, we need to import the brightness module.
Code:
import brightness from '@system.brightness';
Once user selects predefined brightness value from list, we will call brightness.setValue(value). The value is an integer ranging from 1 to 255.
JavaScript:
setBrightness() {
let _brigtenessValue = this.brigtenessValue;
brightness.setValue({
value: _brigtenessValue,
success: function(){
console.log('handling set brightness success.');
},
fail: function(data, code){
console.log('handling set brightness value fail, code:' + code + ', data: ' + data);
},
});
}
To set screen brightness adjustment mode, we will call brightness.setValue().The value can be 0 or 1.
0: The screen brightness is manually adjusted.
1: The screen brightness is automatically adjusted.
JavaScript:
setBrightnessMode(modeValue) {
brightness.setMode({
mode: modeValue,
success: function(){
console.log('handling set mode success.');
},
fail: function(data, code){
console.log('handling set mode fail, code:' + code + ', data: ' + data);
},
});
}
Code snippet for app.js
JavaScript:
import brightness from '@system.brightness';
export default {
data: {
listData: ['Auto Mode' , '10%', '30%', '50%', '75%', '100%'],
brigtenessValue : 1,
AUTO_MODE : 1,
MANUAL_MODE : 0,
},
onItemClick(value) {
console.log(value);
if(value === 'Auto Mode') {
this.setBrightnessMode(this.AUTO_MODE);
}
else {
this.setBrightnessMode(this.MANUAL_MODE);
let valueInt = parseInt(value.substring(0, value.length -1));
this.brigtenessValue = 255 * (value/100);
this.setBrightness();
}
},
setBrightnessMode(modeValue) {
brightness.setMode({
mode: modeValue,
success: function(){
console.log('handling set mode success.');
},
fail: function(data, code){
console.log('handling set mode fail, code:' + code + ', data: ' + data);
},
});
},
setBrightness() {
let _brigtenessValue = this.brigtenessValue;
brightness.setValue({
value: _brigtenessValue,
success: function(){
console.log('handling set brightness success.');
},
fail: function(data, code){
console.log('handling set brightness value fail, code:' + code + ', data: ' + data);
},
});
},
}
Tips and Tricks
If you are using simulator for development, you can check the changed brightness value by clicking hamburger menu.
Conclusion
In this article, we have learnt how to create simple app to control Brightness of wearable device. You only need one touch to change current display brightness to one of the predefined values or select the "Auto Brightness" mode.
References
Harmony Official document:
Document
developer.harmonyos.com
Harmony OS JS API
Read In Forum