927|2

175

帖子

1

资源

一粒金砂(高级)

【平头哥Sipeed LicheeRV 86 Panel测评】五、WAFT初体验 [复制链接]

本帖最后由 sonicfirr 于 2022-3-18 23:32 编辑

       LicheeRV 86板的介绍中说明它是支持WAFT框架的,所以本人也是了解并体验了一下,过程和心得记录此篇。

1、准备条件

       搜索官方文档,说实在的,费了半天劲才找到,而且里面不少坑(以后再讨论),链接是:https://www.yuque.com/waft/docs 。

       也是参考码农爱学习大神的博文,成功避坑,少走了不少弯路。安装并使用WAFT框架的前期准备有:

       1)准备Linux系统,WAFT目前只能在MAC和Linux系统中运行,之前搭建86板编译环境时安装了Ubuntu20.04的虚拟机,这里继续使用。

       2)TF卡扩容,因为烧写官方镜像后,TF卡还有很多空间没有被分配,默认系统容量才8MB,具体方法可以参考码农爱学习的博文“7-Waft图形界面开发测试(下)”。

       3)安装NodeJS(为了获得npm命令),这里也是参考了码农爱学习的博文“6-Waft图形界面开发测试(上)”,看其提到安装后的npm还需要升级。所以自作聪明,从NodeJS官网下载了最新版——下载后是8.5.0,结构在安装waft-cli(WAFT框架的脚手架工具)时还是提示升级到8.5.4,白折腾半天。

       4)安装waft后,在控制台中执行:waft init--》选择3)图文模板--》进入目录cd my-waft-project(默认项目名称)--》运行npm run start。因为WAFT属于前端开发,所以本人还在Ubuntu上装了VScode,用作IDE。搜索了一个WAFT插件,不过发现是用于调试的而且要连接天猫精灵设备(猜想是智能音箱之类的),暂时用不到。

 

image.png

 

2、运行项目

       在控制台项目路径下,执行“npm run start”,就可以启动项目。而且项目启动后,控制台会自动进入waft-cli REPL(即个人习惯称之为“交互”)。相当于运行了npm脚本,这样会开启一个HTTP Server,并且可以通过“静态模式”和“运行模式”进行浏览器访问。这里有个小坑,文档中提到运行模式目前还不稳定,在下用FireFox和Chrome都没有效果,而“静态模式”中TS脚本无效,刚开始没有发现还调试了半天。

       项目启动后,就可以通过Web来访问,因此只要是同一网段的都可以,我分别用手机浏览器,本机Win及虚拟机Ubuntu都做了测试,可以看到Demo的界面——“方糖”图样。

 

image.png

 

image.png

 

image.png

 

3、案例修改并测试

       分析项目代码,并稍作修改,然后打包部署到86板上运行,测试成功。修改的地方是项目中的mock.json,这里定义了一个JSON对象,存储了一些配置数据。分别是:1)imageUrl,UI上左侧显示的方糖Logo,这是通过URL在线加载的图片。2)标题title,UI中大号字“方糖”字样。3)内容detail,UI中介绍文字。因为,暂时还没有具体了解整个代码编写方式,所以首先对这三个参数进行改动,具体操作和改动后界面如下图。

 

image-20220318202226-1.png

  

image.png

 

image.png

 

image.png

   

       然后,就是执行“.build”进行项目打包,也就是在执行启动脚本后进入"waft>"交互后,输入“.build”命令,进行打包创建可执行二进制文件(.wasm格式)。而且在waft交互,还可以push推送,或者使用ADB推送到真机端。不过,本人一直犯懒还没有配置ADB工具,所以使用FileZilla导出到本机,再用MobaXterm SSH传送到86板。

 

image.png

 

image.png

 

image.png

 

       在真机控制台,执行“waft_app app.wasm”,就可以启动案例。可以看到,86板真机上的运行效果 ,因为屏幕长宽比例原因,所以小猫咪图片被拉成瘦长样式了。至此,WAFT初体验成功。

       另外,在系统root目录中已经预制了两个waft案例“render_example.wasm”和“render_example_d1_allwin.wasm”,本人也运行了一下,效果如下图所示。render_example.wasm案例包含组件展示和API展示,可以滑屏翻动。render_example_d1_allwin.wasm案例则是一个智能家居中控台的Demo。

 

image.png

 

image.png

 

image.png

 

image.png

 

image.png

 

 


回复

7106

帖子

0

资源

五彩晶圆(中级)

如果使用使用ADB推送到真机端有什么优势

点评

就是方便啊,通过adb命令直接串口发送到板子。 我这种就是拷到windows,再转到板子,多倒一次一手。  详情 回复 发表于 2022-3-21 17:03

回复

175

帖子

1

资源

一粒金砂(高级)

Jacktang 发表于 2022-3-21 07:24 如果使用使用ADB推送到真机端有什么优势

就是方便啊,通过adb命令直接串口发送到板子。

我这种就是拷到windows,再转到板子,多倒一次一手。


回复
您需要登录后才可以回帖 登录 | 注册

相关帖子
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
    关闭
    站长推荐上一条 1/7 下一条

    About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

    站点相关: 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

    北京市海淀区知春路23号集成电路设计园量子银座1305 电话:(010)82350740 邮编:100191

    电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2022 EEWORLD.com.cn, Inc. All rights reserved
    快速回复 返回顶部 返回列表