基于开源鸿蒙3.2R 的无人机显控应用研究

2023-12-09 08:07李竞择范承宇欧阳迪
机电产品开发与创新 2023年6期
关键词:下拉菜单鸿蒙开发者

李竞择, 范承宇, 欧阳迪

(中国兵器装备集团自动化研究所有限公司, 四川 绵阳621000)

0 引言

鸿蒙是华为开发的一款基于微内核的分布式操作系统,旨在为全场景智能化提供统一的用户体验[1]。鸿蒙的设计目标是构建一个通用的、无缝的全场景操作系统,可以应用于各种设备。 与传统操作系统相比,鸿蒙采用了分布式架构,通过分布式能力的支持实现设备间的协同工作。

开源鸿蒙提供了丰富的开发工具和开发者支持,使开发者能够轻松构建基于鸿蒙的应用和服务。 它具有统一的开发框架和多设备适配能力, 使开发者能够更高效地开发跨设备的应用程序。

本文在开源鸿蒙操作系统3.2R 版本下使用ArkUI开发框架实现了一个智能装备指控系统。

1 开发环境介绍

1.1 ArkTS 开发语言

ArkUI 开发框架是方舟开发框架的简称, 它是一套构建开源鸿蒙操作系统应用界面的声明式UI 开发框架,它使用极简的UI 信息语法、丰富的UI 组件以及实时界面语言工具,帮助开发者提升应用界面开发效率30%,开发者只需要使用一套TypeScript/JavaScript API, 就能在多个开源鸿蒙设备上提供既丰富又流畅的用户界面体验[2]。

当前,ArkTS 是TypeScript 的超集,它在TS 的基础上主要扩展了如下能力:

基本语法:ArkTS 开创性地定义了声明式UI 配合ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI 开发的主体。

状态管理:ArkTS 提供了多维度的状态管理机制。 在UI 开发框架中,与UI 相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。

渲染控制:ArkTS 提供了渲染控制的能力。 条件渲染(if-else)可根据应用的不同状态,渲染对应状态下的UI内容,常用于。 循环渲染(ForEach)可从数据源中迭代获取数据, 并在每次迭代过程中创建相应的组件。 数据懒加载(LazyForEach)从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

ArkTS 开发框架如图1 所示。

图1 ArkTS 开发框架

1.2 FA 与Stage 开发模型

开源鸿蒙应用开发可以选择两种开发模型, 分别是FA 模型和Stage 模型。

OpenHarmony API 8 及其更早版本的应用程序只能使用FA 模型进行开发。

Stage 模型是API9 推出后新的开发模型。 其被设计出来就是为了让开发者能更加方便地开发出分布式环境的复杂应用,下表是Stage 模型和FA 模型的差异。

表1 FA 模型和Stage 模型对比

需要注意的是,开源鸿蒙更新至3.2Release 之后,API也更新至API9,开发者只能选择Stage 模型进行开发。

2 软件设计

2.1 系统实现概览

无人机系统平台的UI 主要由三个部分构成:无人机飞行计划界面、无人机任务计划界面、无人机参数调节界面。 如图2 所示。

图2 系统设计方案

2.2 UI 设计——主界面

主界面作为用户点开APP 后进入的第一个界面应该是简洁明了的。

主界面构成包括两部分,一是屏幕正上方的功能栏,二是功能栏下方的视频区域。 如图3 所示。

图3 登录界面

用户点击功能栏上的按钮后, 下方视频界面上会出现响应功能界面。

2.3 UI 设计——飞行计划

飞行计划界面作为该APP 最为关键的一个部分,承担了APP 的绝大部分功能,包括:小地图显示、 无人机当前位置信息查看和无人机飞行计划更改及命令发送。

用户点击APP 上方的飞行按键后,该界面会由软件下方浮现。如图4 所示。

图4 整体概览

飞行计划包括4个部分:小地图、无人机位置信息、无人机飞行模式及速度修改和无人机命令发送。

小地图区域包括一个地图和一个雷达组件, 地图目前使用二维地形图,雷达组件为自定义组件。

2.4 无人机UI 设计——任务计划

任务计划界面旨在为用户提供一个可以自定义无人机飞行计划的区域,由3 个部分构成:无人机计划展示、快捷键和勾选区域构成。

任务计划界面如图5 所示。

图5 任务计划界面

无人机计划展示为用户展示了无人机的经纬度信息、无人机高度信息、无人机距目标地距离等,用户可以通过加载已有的计划来更新这些数据, 也可以通过键盘输入数据并保存。

数据展示由一个Text 组件和一个TextInput 组件组成, 通过特质的图片和.backgroundColor 为数据读写区进行渲染调色,部分代码如下所示:

按键包括:读取任务计划键、上传任务计划键、清除任务计划键、读取视频流地址键、加载地图文件键和获取家的位置。

其中读取、上传、加载键用户点击后会在屏幕中间弹出一个输入框用于输入文件地址。 部分代码如下所示:

勾选区域由一个地图选择下拉菜单和勾选项构成,下拉菜单选用自定义下来菜单,实现逻辑如图6 所示。

图6 下拉菜单逻辑

勾选组件由开源鸿蒙官方组件中的checkBox 实现,当用户勾选了某个选择框后,会触发.onChange 事件并通过udp 通信传递给无人机。

2.5 无人机UI 设计——参数调节

用户点击功能栏后的参数调节按键后, 会在视频界面上方出现一个参数调节界面用于调节无人机参数,用户可以通过直接输入数值来调节无人机的油门量和转动时间,也可以通过拉动调节无人机的电机工作速率。

参数调节界面如图7 所示。

图7 参数调节界面

部分代码如下所示:

3 模块化组件

为减少主界面代码并且方便调试, 通常将需要反复使用的组件进行模块化处理方便调用。

本文提供了许多自定义的模块, 希望能给广大开发者提供一些开发思路。

3.1 自定义模块——下拉菜单

官方提供了一个下拉组件Select 供开发者使用,但Select 可供修改的属性较少,若开发者想自定义一个边框则需要自己做一个下拉组件框架。

本文设计的下拉选择模块如图8 所示。

图8 自定义下拉选择组件

下拉选择组件的实现逻辑是:点击下拉按钮后出现一个下拉菜单,里面是可选择的几个选项,选择后按钮的文本变为刚刚选中的选项的文本,然后下拉菜单边框消失。

一个下拉选择组件应该包括的基本要素应该有:下拉按钮本身图片资源“selectedImage”、下拉菜单项图片资源“optionImage”、下拉菜单文本“selectedText”、下拉菜单显隐“optionVisible”,其他属性包括各种边框的宽高等属性这里不做赘述,开发者可以根据自己的喜好进行添加。

3.2 自定义模块——雷达

雷达是一种利用电磁波进行探测和测距的技术。 在UI 中雷达通常有一个扫描波和扫描点构成。 雷达作为军事应用中必不可少的一环常出现于各种显控应用中。

该模块实现逻辑为:使用Row 组件中的.sweepGradient 属性绘制扇形并设置渐变属性, 同时通过.rotate 属性配合.animation 显式动画来达到一个扫描的效果,部分代码如下所示:

4 结束语

开源鸿蒙是华为对标安卓开发的一款开源操作系统,旨在为中国开发者提供一个良好的、可持续性发展的开源开发环境。

鸿蒙系统的开源是一个长期的、 持续的、 开放的过程,需要全球开发者和合作伙伴的广泛参与和支持。目前越来越多的芯片开始适配支持开源鸿蒙, 包括但不限于RK3568、RK3588 等。

过去的鸿蒙应用开发和安卓类似,都是以Java 为主。自2023 开源鸿蒙开发者大会召开之后,鸿蒙应用开发和开源鸿蒙应用开发之间的隔阂被打破了, 开发者可以使用ArkTS 语言同时为两款操作系统进行应用开发。

本文使用ArkTS 开发语言开发了一款无人机系统平台, 使用ArkUI 独有的声明式开发方式进行了一系列创新性的组件开发, 希望为广大ArkTS 开发者提供一些新的思路。

相信随着未来相关技术水平的不断提高,ArkTS 语言也会不断进步。

猜你喜欢
下拉菜单鸿蒙开发者
奇思妙想(4)
鸿蒙:打破安卓垄断 所有权归属国家
鸿蒙来了
巧做智能下拉菜单
华为一大批鸿蒙商标等待审查
制作更炫酷的下拉菜单
将Widget小部件放到
16%游戏开发者看好VR
iOS开发者调查
iOS开发者调查