docs/metal_detection/quick_develop.md · OpenHarmony-SIG/knowledge_demo_temp

OpenHarmony金属探测器应用

简介

金属探测器应用是通过接送消息，判断是否检测到金属；应用是采用方舟开发框架（ArkUI）基于eTS扩展的声明式开发范式编写页面；通过NAPI接口接送设备的消息；页面进行发现中，发现到金属，未发现金属的页面展示。

demo效果（HH-SCDAYU200）

工程目录

完整的项目结构目录如下

entry
│  └─src
│      └─main
│          │  config.json                       //  应用配置文件
│          │  
│          ├─ets
│          │  └─MainAbility
│          │      │  app.ets                    // 应用程序主入口
│          │      │
│          │      ├─common                      // 动画源图片目录
│          │      │      img_1.png
│          │      │      img_2.png
│          │      │  
│          │      ├─model   
│          │      │      CommonLog.ets          // 日志打印模块
│          │      │      PlayerManager.ets      // 音频播放模块      
│          │      └─pages
│          │              index.ets             // 金属探测器首页
│          │              
│          └─resources
│              ├─base
│              │  ├─element
│              │  │      string.json
│              │  │      
│              │  ├─graphic
│              │  ├─layout
│              │  ├─media                       // 存放媒体资源
│              │  │      icon.png
│              │  │      img_background.png
│              │  └─profile
│              └─rawfile

开发步骤

1. 新建OpenHarmony ETS项目

在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next，Language 选择eTS语言，最后点击Finish即创建成功。

2. 编写金属探测主页面

如上效果图是通过接收到的设备消息，改变页面展示图,整体布局分为两个部分。

2.1 标题

1）主要有Flex布局容器一个text组件；

@Component
struct TitleName {
  build() {
    Flex() {
      Text('金属探测器')
        .fontSize('36lpx')
        .fontColor('#FFFFFF')
        .margin({ left: '40lpx', top: '16lpx' })
    }
  }
}

2.2 检测状态

1）主要分为检测中背景动画，检测状态图，检测结果文字说明组成

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Stack() {
          ImageAnimator()
            .images([
              {
                src: "/common/img_1.png",
                duration: 500,
                width: 500,
                height: 500,
                top: 0,
                left: 0
              },
              {
                src: "/common/img_2.png",
                duration: 500,
                width: 500,
                height: 500,
                top: 0,
                left: 0
              },
              {
                src: "/common/img_3.png",
                duration: 500,
                width: 500,
                height: 500,
                top: 0,
                left: 0
              },
              {
                src: "/common/img_4.png",
                duration: 500,
                width: 500,
                height: 500,
                top: 0,
                left: 0
              },
              {
                src: "/common/img_5.png",
                duration: 500,
                width: 500,
                height: 500,
                top: 0,
                left: 0
              }
            ])
            .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(3)
            .fillMode(FillMode.None).iterations(this.iterations).width(500).height(500)
        Image(this.detection)
          .width('532lpx')
          .height('531lpx')
      }

      Text(this.detectionState)
        .margin({ top: "90lpx" })
        .fontSize('40lpx')
        .fontColor('#FFFFFF')

    }
    .width('100%')
    .height('100%')
  }

2）调用recvMsg接口接送金属探测器的消息，并修改首页展示状态

@Component
struct detectionImage {
  @State detectionState: string = ''
  detection: Resource = $r("app.media.img_normal");
  isDisplay: boolean = false;
  metal: string = '';

  aboutToAppear() {
    this.playerManager.setOnStatusChangeListener(() => {
      CommonLog.info('setOnStatusChangeListener ' + this.playerManager.getCurrentMusic().url)
    })

    var intervalID = setInterval(() => {
      //NAPI调用
      tcpserverapi.recvMsg().then((result) => {
        if (result.clientNumber == 0) {
          this.detectionState = '';
          this.detection = $r("app.media.img_normal");
          this.state = AnimationStatus.Stopped
          this.onPlayOrPauseMusic(true);
          this.metal = ''
        } else{
          var resultMetal = result.message;
          if (resultMetal.match("metal:")) {
            if(this.metal != resultMetal.slice(6)) {
              this.metal = resultMetal.slice(6);
              CommonLog.info('metal' + this.metal)
              if (this.metal === 'Detected') {
                this.detectionState = '发现金属';
                this.onPlayOrPauseMusic(false);
                this.detection = $r("app.media.img_detected");
                this.state = AnimationStatus.Stopped
              }
              else if (this.metal === 'UnDetected' || this.metal === 'CalibrateOK') {
                this.detectionState = '检测中';
                this.onPlayOrPauseMusic(true);
                this.detection = $r("app.media.img_detecting");
                this.state = AnimationStatus.Running
              }
            }
          }
        }
      })
    }, 200)
  }
  }

3.NAPI

3.1 底层NAPI模块封装

1）NAPI接口开发具体请参考文档OpenharmonyNAPI开源仓库。

2）本应用封装的模块名为tcpserverapi，源码路径，下载好的tcpservermodule文件夹。

3）下载完成后放到3.1Beta版本根目录，并按照参考PPT配置编译脚本；第一次编译完成需要烧写整个镜像，请参考润和RK3568开发板标准设备上手-HelloWorld；后面修改模块源码，只需将库send到板子里面。命令如下：

先挂载，再send
hdc_std shell mount -oremount,rw /
hdc_std file send libtcpserverapi.z.so system/lib/module/libtcpserverapi.z.so

3.2 应用端导入NAPI模块

import tcpserverapi from '@ohos.tcpserverapi'

3.3 应用端NAPI接口调用

//调用initRecv接口 初始化 TCP 服务器
tcpserverapi.initServer()

//定时调用recvMsg获取金属探测器消息
  var intervalID = setInterval(() => {
      //NAPI调用
      tcpserverapi.recvMsg().then((result) => {
        if (result.clientNumber == 0) {
          this.detectionState = '';
          this.detection = $r("app.media.img_normal");
          this.isDisplay = false;
          this.metal = ''
        } else{
          var resultMetal = result.message;
          if (resultMetal.match("metal:")) {
            this.metal = resultMetal.slice(6);
            console.info('=======' + this.metal)
            if (this.metal === 'Detected') {
              this.detectionState = '发现金属';
              this.detection = $r("app.media.img_detected");
              this.isDisplay = false;
            }
            else if (this.metal === 'UnDetected' || this.metal ==='CalibrateOK') {
              this.detectionState = '检测中';
              this.detection = $r("app.media.img_detecting");
              this.isDisplay = true;

            }
          }
        }
      })
    }, 200)

4.音频播放开发

本应用里面音频播放，主要是在探测到金属后，播报已探测到金属，达到通知用户的目的，可以简单分为下面四个小节：

4.1 导入meida模块

import media from '@ohos.multimedia.media';

4.2 创建音频播放实例

// OH media对象
private player = media.createAudioPlayer();

4.3实现音频播放接口

play(seekTo) {
  if (this.player.state == 'playing' && this.player.src == this.getCurrentMusic().url) {
    return
  }

  if (this.player.state == 'idle' || this.player.src != this.getCurrentMusic().url) {
    CommonLog.info('Preload music url = ' + this.getCurrentMusic().url)
    this.player.reset()
    this.player.src = this.getCurrentMusic().url
    this.player.on('dataLoad', () => {
      CommonLog.info('dataLoad duration=' + this.player.duration)
      this.totalTimeMs = this.player.duration
      if (seekTo > this.player.duration) {
        seekTo = -1
      }
      this.player.on('play', () => {
        if (seekTo > 0) {
          this.player.seek(seekTo)
        }
      })

      this.player.play()
      if(this.statusChangeListener){
        this.statusChangeListener()
      }
      this.setProgressTimer()
      this.isPlaying = true
    })
  }
  else {
    if (seekTo > this.player.duration) {
      seekTo = -1
    }
    this.player.on('play', () => {
      if (seekTo > 0) {
        this.player.seek(seekTo)
      }
    })

    this.player.play()
    this.setProgressTimer()
    this.isPlaying = true
  }
}

4.4 实现暂停播放接口

pause() {
  CommonLog.info("pause music")
  this.player.pause();
  this.cancelProgressTimer()
  this.isPlaying = false
}

详细的参考接口:音视频开发接口

项目下载和导入

1）git下载

git clone https://gitee.com/chenchenfangfang/knowledge_demo_attitude_control.git

2）项目导入

打开DevEco Studio,点击File->Open->下载路径/metal_detection/app-code/metalDetection

1. 设备编译约束

以润和大禹系列HH-SCDAYU200开发板套件为例

润和RK3568开发板标准设备上手-HelloWorld

OpenHarmony-SIG / knowledge_demo_temp

OpenHarmony金属探测器应用

简介

工程目录

开发步骤

1. 新建OpenHarmony ETS项目

2. 编写金属探测主页面

2.1 标题

2.2 检测状态

3.NAPI

3.1 底层NAPI模块封装

3.2 应用端导入NAPI模块

3.3 应用端NAPI接口调用

4.音频播放开发

4.1 导入meida模块

4.2 创建音频播放实例

4.3实现音频播放接口

4.4 实现暂停播放接口

项目下载和导入

1. 设备编译约束

2. 应用编译约束

简介

发行版

贡献者

近期动态

OpenHarmony-SIG / knowledge_demo_temp .gitee-modal { width: 500px !important; }

OpenHarmony金属探测器应用

简介

工程目录

开发步骤

1. 新建OpenHarmony ETS项目

2. 编写金属探测主页面

2.1 标题

2.2 检测状态

3.NAPI

3.1 底层NAPI模块封装

3.2 应用端导入NAPI模块

3.3 应用端NAPI接口调用

4.音频播放开发

4.1 导入meida模块

4.2 创建音频播放实例

4.3实现音频播放接口

4.4 实现暂停播放接口

项目下载和导入

1. 设备编译约束

2. 应用编译约束

简介

发行版

贡献者

近期动态

搜索帮助

OpenHarmony-SIG / knowledge_demo_temp