使用OpenHarmony專用開發(fā)工具開發(fā)變頻器控制界面

在工農(nóng)業(yè)生產(chǎn)中，變頻器有著廣泛和深遠(yuǎn)的應(yīng)用，變頻器的控制除了本地操作面板和按鈕，旋鈕控制外，更多是通過上位機(jī)來進(jìn)行遠(yuǎn)程操作和監(jiān)控。

2022 年 3 月 30 日，OpenHarmony 3.1 Release 及配套南向開發(fā)工具 DevEco Device Tool 3.0 Release 發(fā)布。

3 月 31 日發(fā)布了 OpenHarmony 首款北向應(yīng)用開發(fā)工具 DevEco Studio 3.0 Beta3 for OpenHarmony，支持 API 8 和 API 9。

具有以下能力特點(diǎn)：

• 支持一站式的信息獲取平臺

• 支持可視化的界面 UI 開發(fā)

• 雙向、極速的 UI 預(yù)覽

• 全新的編譯工具 Hvigor，實(shí)現(xiàn) OpenHarmony 應(yīng)用/服務(wù)的一鍵自動化構(gòu)建。

• 支持全自動化的應(yīng)用簽名機(jī)制，一鍵生成簽名信息，簽名過的 HAP 可以安裝到真實(shí)設(shè)備上運(yùn)行

• 高效的代碼編輯，提供代碼高亮、代碼折疊、代碼格式化等各種常用技巧，同時(shí)支持聯(lián)想補(bǔ)齊、代碼跳轉(zhuǎn)、代碼校驗(yàn)等，實(shí)現(xiàn)代碼的高效編輯。

• 預(yù)覽器支持雙向、極速UI預(yù)覽，實(shí)現(xiàn)了應(yīng)用開發(fā)過程的可視化。

• 豐富的代碼調(diào)試調(diào)優(yōu)能力

模擬器效果如下：

預(yù)備

參考 1：

https://ost.51cto.com/posts/10969

參考 2：

https://ost.51cto.com/posts/11038

官網(wǎng)文檔：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-download-software-0000001218760592

創(chuàng)建工程

①打開應(yīng)用，點(diǎn)擊新建項(xiàng)目，彈窗選擇“Empty Ability”后點(diǎn)擊"Next"

②彈出的工程配置里全部默認(rèn)，點(diǎn)擊“finish”完成 eTS 工程創(chuàng)建。

• index.ets：用于描述 UI 布局、樣式、事件交互和頁面邏輯。

• app.ets：用于全局應(yīng)用邏輯和應(yīng)用生命周期管理。

• pages：用于存放所有組件頁面。

• resources：用于存放資源配置文件。

圖片，代碼，自動簽名，聯(lián)機(jī)調(diào)試

將工程中使用到的圖片，添加到 resources -> base -> media 目錄下：

①編輯代碼，打開預(yù)覽器的雙 T，可以實(shí)時(shí)雙向預(yù)覽。

②完整代碼在 codelabs 的 SliderApplicationEts 基礎(chǔ)上修改而成：

@Entry
@Component
structIndex{
@Stateprivatespeed:number=0
@Stateprivatelastspeed:number=1
@StateprivateimageSize:number=1.5
@Stateprivatefwd_rev:number=1
@Stateprivateangle:number=0
@Stateprivateinterval:number=0

build(){
Column(){
Text("變頻調(diào)速控制")
.fontSize(45)
.fontColor("blue")
.fontWeight(FontWeight.Bold)
.margin({top:50,bottom:20})
Row(){
Image($r('app.media.fengye'))
.objectFit(ImageFit.Contain)
.height(150)
.width(150)
.position({x:120,y:100})
.rotate({x:0,y:0,z:this.fwd_rev,angle:this.angle})
.scale({x:this.imageSize,y:this.imageSize})
}
.width(375)
.height(375)

Row(){
Button(){
Text('啟動')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('green')
.onClick(()=>{
this.speed=this.lastspeed
})
Button(){
Text('停止')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('red')
.onClick(()=>{
this.speed=0
})
}
Row(){
Button(){
Text('正轉(zhuǎn)')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({top:40,left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('#ffc916dd')
.onClick(()=>{
this.fwd_rev=1
})
Button(){
Text('反轉(zhuǎn)')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({top:40,left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('#ffc916dd')
.onClick(()=>{
this.fwd_rev=-1
})
}
this.DescribeText('速度：',this.speed*5)
Slider({value:this.speed,min:0,max:10,step:0.2,style:SliderStyle.OutSet})
.showTips(true)
.blockColor(Color.Red)
.onChange((value:number,mode:SliderChangeMode)=>{
this.speed=value
this.lastspeed=this.speed
clearInterval(this.interval)
this.speedChange()
})
Row(){
Button(){
Text('加速')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({top:20,left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('#ff00ffd9')
.onClick(()=>{
this.speed+=0.2
if(this.speed>=10){
this.speed=10
}
this.lastspeed=this.speed
})
Button(){
Text('減速')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({top:20,left:20,right:20})
.width('40%')
.height('5%')
.backgroundColor('#ff00ffd9')
.onClick(()=>{
this.speed-=0.2
if(this.speed<=?0){
this.speed=0
}
this.lastspeed=this.speed
})
}
}
.margin({left:30,right:30})
}
speedChange(){
varthat=this;
that.angle=0;
this.interval=setInterval(function(){
that.angle+=that.speed
},15)
}
onPageShow(){
clearInterval(this.interval)
this.speedChange()
}
@BuilderDescribeText(text:string,speed:number){
Stack(){
Text(text+speed.toFixed(1)+'Hz')
.margin({top:70})
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
}
}

效果如下：