[Huawei Developers] riteshchanchal:
Introduction

Harmony OS 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, 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 obtain device information.

View attachment 5207003​

Requirements

1) DevEco IDE

2) Lite wearable simulator

Implementation

First page, index.hml contains <swiper> container that enables the switch of child components.

<swiper class="container" index="{{index}}">

<div class="swiper-item item1">
<text class="title">BRAND</text>
<text class="subtitle">{{brand}}</text>
<div class="seperator" ></div>
<text class="title">MANUFACTURER</text>
<text class="subtitle">{{manufacturer}}</text>
<div class="seperator" ></div>
<text class="title">MODEL</text>
<text class="subtitle">{{model}}</text>
</div>

<div class="swiper-item item2">
<text class="title">PRODUCT</text>
<text class="subtitle">{{product}}</text>
<div class="seperator" ></div>
<text class="title">LANGUAGE</text>
<text class="subtitle">{{language}}</text>
<div class="seperator" ></div>
<text class="title">REGION</text>
<text class="subtitle">{{region}}</text>
</div>

<div class="swiper-item item3">
<text class="title">SCREEN SHAPE</text>
<text class="subtitle">{{shape}}</text>
<div class="seperator" ></div>
<text class="title">SCREEN DENSITY</text>
<text class="subtitle">{{screendensity}}</text>
<div class="seperator" ></div>
<text class="title">DIMENSION</text>
<text class="subtitle">{{dimension}}</text>
</div>

</swiper>

index.css has style defined for the page.

.container {
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.swiper-item {
width: 454px;
height: 454px;
flex-direction: column;
justify-content: center;
align-items: center;

}
.item1 {
background-color: #007dff;
}
.item2 {
background-color: #cc0000;
}
.item3 {
background-color: #41ba41;
}
.title {
font-size:30px;
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;
}

To obtain the device information, we will call device.info()

device.getInfo({
success: function(data) {

console.log('success get device info brand:' + data.brand);
_this.brand = data.brand;
_this.manufacturer = data.manufacturer;
_this.model = data.model;
_this.language = data.language;
_this.product = data.product;
_this.region = data.region;
_this.screendensity = data.screenDensity;
_this.shape = data.screenShape;
_this.dimension = data.windowWidth + ' X ' + data.windowHeight;

},

fail: function(data, code) {
console.log('fail get device info code:'+ code + ', data: ' + data);
},
});

Code Snippet of index.js

import device from '@system.device';
export default {
data: {
brand: '--',
manufacturer: '--',
language: '--',
model: '--',
product: '--',
region: '--',
dimension: '--',
screendensity: 0,
shape : '--'
}
,

onInit(){
let _this = this;
device.getInfo({
success: function(data) {
console.log('success get device info brand:' + data.brand);
_this.brand = data.brand;
_this.manufacturer = data.manufacturer;
_this.model = data.model;
_this.language = data.language;
_this.product = data.product;
_this.region = data.region;
_this.screendensity = data.screenDensity;
_this.shape = data.screenShape;
_this.dimension = data.windowWidth + ' X ' + data.windowHeight;

},
fail: function(data, code) {
console.log('fail get device info code:'+ code + ', data: ' + data);
},
});
}
}

Tips and Tricks

Not all the information can be obtained on simulator. Hence it is recommended to use physical Harmony OS wearable watch.

Conclusion

In this article, we learnt how easily we can obtain wearable device information such as brand, product, device dimension, density, etc.

References

Harmony OS JS API :

Document

developer.harmonyos.com

Harmony Official document -

Document

developer.harmonyos.com