芯片开放社区
直播中

吴凡

10年用户 942经验值
擅长:48674
私信 关注
[技术讨论]

【平头哥Sipeed LicheeRV 86 Panel测评】Waft图形界面开发测试(上)

Waft(WebAssembly Framework for Things) 是一个面向 AIoT 的高性能应用研发框架,由阿里工程师研发,基于WebAssembly和自研的渲染引擎技术打造,适用于智能终端的软件应用研发场景,目前已在天猫精灵上得到应用。

下面介绍如何在Ubuntu中使用Waft开发环境,也是自己的实际操作记录。

1 安装npm

在ubuntu中安装npm,使用如下指令:

sudo apt-get install npm

提示需要node-gyp,再使用如下指令安装:

sudo apt-get install nodejs-dev node-gyp libssl1.0-dev
安装完之后,再重新安装npm(顺带也把node.js装一下):

sudo apt-get install node.js npm
安装完npm之后,使用输入如下指令:

sudo npm i waft-cli -g

又提示一堆err!

2 升级npm

本来是想用如下指令再装一个cnpm试试:

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
这个装的较慢,大约十几到几十分钟。

这期间网上又搜索发现,上面报错的问题是因为是npm的版本太低了:


The error npm ERR! typeerror Error: Missing required arguments #1 is an error that basically is telling us that the current nodejs is outdated.

等cnpm安装完,再使用如下指令来升级npm的版本:

sudo npm install -g n
sudo n latest
sudo npm install -g npm
hash -d npm
npm i
最终我的npm的版本为8.4.0:


注意上面输入npm i时提示错误,就先执行了一下npm init,如下图,它会产生一个package.json文件:


3 Waft例程测试

再来使用这个指令,注意要加sudo:

sudo npm i waft-cli -g

上面还是报错,好像是网络问题,再试一下又可以了:


3.1 初始化waft例程

然后进行waft的初始化:

waft init
这里有几个例程,通过键盘的上下键可以选择,这里我选择第3个:


确定之后,会下载该例程,并多出一个my-waft-project的文件夹:


3.2 启动调试

进入到my-waft-project目录下,运行调试:

cd my-waft-project
npm run start

3.3 网页端查看效果

启动调试之后之后,可以在浏览器中查看显示的界面,如果是在ubuntu的浏览器中,使用本机地址127.0.0.1,我使用的是同一局域网下的Windows系统的浏览器,显示效果如下:


浏览器显示的时候,ubuntu中也会同步输出一下信息:


3.4 REPL命令行模式

启动调试后会自动开启REPL模式,可以通过.help查询支持哪些命令:

waft> .help
.aot          aot编译 --wasm=build/app.wasm
.build        编译工程 --default=默认页面(可选) --page=指定单页(可选) --card=指定的卡片(可选) --aot=true(可选, 是否输出 .aot 文件) --push=true(可选, 构建完自动推送)
.clear        清空屏幕输出。
.disconnect   断开终端链接
.exit         退出 REPL。
.help         查看更多 WAFT REPL 命令。
.nlu          adb模拟语音调试 如".nlu 早上好"
.push         推送真机设备或模拟器 --wasm=build/app.wasm --mock=src/mock.json (可选)
.simulator    启动模拟器 --wasm=build/app.wasm
.ui
.update       触发调试更新 onMessage 事件,--mock=src/mock.json 或者 --mock={"dataSource":{"desc":"hello\***ig\sold"}}
.upgrade      升级官方插件工具例如: .upgrade simulator 或着 .upgrade aot 3.5 编译waft例

使用如下指令来编译打包:

.build --aot=true --aotTarget=riscv64

编译结果在build目录中:

        

3.6 板子中运行waft例程

注:此篇文章,SD中是镜像使用的是百度云盘开发资料中的LicheeRV_tina_86panel_480p_waft.7z压缩包里镜像。

使用adb将编译的app.aot传送到板子中运行:


运行指令为:

waft_app app.aot
观察板子,屏幕上什么也没显示:


用手触摸屏幕,可以看到有触摸点的坐标打印:


4 更新Waft二进制库

本来以为是waft自带的库没有更新,就参考这里:


开始给板子更新waft的库。

4.1 下载Waft库

下载地址:


选择Waft_binary_v0_0_005这个:


解压之后,有5个文件夹,需要把它们分别拷贝到板子中的对应目录中。


4.2 拷贝到板子中

一开始在Windows上使用adb来拷贝,有问题:


将Waft库先拷贝到ubuntu中,再通过ubuntu的adb连接板子,就能正常拷贝了:


所以的拷贝指令:

adb push ./bin/waft_app /usr/bin
adb push ./lib/* /usr/lib/
adb push ./resources /
adb push ./waftapps /
  • bin中存放waft容器二进制运行文件
  • lib中存放waft_app运行时依赖的共享库
  • resources中存放waft依赖的资源文件,如字库文件
  • waftapps存放waft字节码文件

4.3 空间不够的问题

在拷贝resources时,提示空间不够了:


查看一下存储空间的使用情况:


果然是不够用了,虽然SD卡的容量够,但没有分配给Linux系统。

下篇介绍如何给Linux扩容,以及后续的Waft例程测试效果展示。



文章转载自:平头哥芯片开放社区 作者:码农爱学习

更多回帖

发帖
×
20
完善资料,
赚取积分