awtk踩坑记录一:awtk-web build.py编译过程笔记

PS: awtk-web已于2024.11.6大幅更新,不再使用build.py, 此文的方法作废。

工作需求,接触了awtk, 要求把界面部署到web上,期间因为各种编译问题卡的半死,提了不少issue, 经过几天补课,把项目的编译结构给摸了一遍,做个记录,也希望能帮到有同样问题的朋友。

之前python只是略接触过,第一次见过正规项目用python编译,还尝试自己调试追踪过程,感觉也成长了不少。

测试方法:vscode下用python插件F5 debug, debug方式选择command line arguments
放编译build.py的方法以方便CV:

./emsdk_env
cd ../awtk-web
python build.py D:\AWStudioProjects\Workspace\AwtkApplication3\build.json all

build.py入口:

def run(app_root, config, action):
    prepare_app_target_dir(config)
    prepare_export_funcs(app_root, config)

    if action == 'all':
        build_app_assets(app_root, config)
        build_awtk_js(app_root, config, ' -g4 -gsource-map ')
        build_awtk_web_js(config)
...

注:官方的build_win32.sh经测试在windows平台上无法使用,powershell不识别emsdk_env.sh, 还好emscripten有对应的ps1文件,执行emsdk_env实际上就是执行对应的emsdk_env.ps1文件

1.build_app_assets:生成webroot映像,加载项目资源

  • 从目标的build.json【本例目标名AwtkApplication3, python变量名config】中指定的路径copy资源到awtk-web的对应的design目录,project.json, data/app.html和data/index.html,。
  • 调用update_res.py更新资源res目录

build.json

{
   
   
  "name": "AwtkApplication3",
  "version": "1.0",
  "assets": "res/assets",
  "author": "AWTK Develop Team",
  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",
  "themes":["default"],
  "web": {
   
   
    "app_type": "c",
    "assets": "design",
    "sources": [
      "src/*.c",
      "src/*/*.c"
    ],
    "config": {
   
   
      "fontScale": "0.8",
      "defaultFont": "sans"
    }
  }
}

build.py

#src_app_root='D:\\AWStudioProjects\\Workspace\\AwtkApplication3'
#config是目标项目的build.json对象
def build_app_assets(src_app_root, config):
    #生成对应项目在awtk-web/webroot的对应映像,并复制项目design文件夹到映像目录下
    copy_assets(src_app_root, config)   
    #复制对应项目project.json到对应映像目录下
    copy_project_json(src_app_root, config) 
    #复制awtk-web的html模版app.html及index.html到对应映像
    copy_data_file(config, 'app.html')      
    copy_data_file(config, 'index.html')
    #更新对应映像的assets:为目标映像生成script文件夹和res文件夹以及assets_web.js
    update_assets(config)       
    #构建对应的romfs文件系统(如果有),一般不需要
    build_romfs(app_root, config);
#src = 'scripts'
#dst = 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\scripts'
def prepare_update_res(config):
    src = 'scripts'
    dst = join_path(config_get_app_target_dir(config), 'scripts')

    copy_folder(src, dst)
 
#return: 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3'
def config_get_app_target_dir(config):
    return join_path(WEB_ROOT, config['name'])
        
def update_assets(config):
	#复制awtk-web的scripts文件夹到目标项目的webroot映像下
    prepare_update_res(config)
    #获取目标项目的webroot映像目录
    config_get_app_target_dir(config)
        
""" 
	运行update.res.py更新资源,相当于
    cd D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3
    本地系统python .
sudo apt install --fix-missing ros-galactic-usb-cam Reading package lists... Done Building dependency tree Reading state information... Done The following additional packages will be installed: ffmpeg ros-galactic-image-transport-plugins ros-galactic-theora-image-transport Suggested packages: ffmpeg-doc The following NEW packages will be installed: ffmpeg ros-galactic-image-transport-plugins ros-galactic-theora-image-transport ros-galactic-usb-cam 0 upgraded, 4 newly installed, 0 to remove and 150 not upgraded. Need to get 1,754 kB of archives. After this operation, 3,864 kB of additional disk space will be used. Do you want to continue? [Y/n] y Get:1 http://mirrors.aliyun.com/ubuntu focal-security/universe amd64 ffmpeg amd64 7:4.2.7-0ubuntu0.1 [1,453 kB] Err:2 http://packages.ros.org/ros2/ubuntu focal/main amd64 ros-galactic-theora-image-transport amd64 2.3.3-1focal.20220430.143745 404 Not Found [IP: 64.50.233.100 80] Err:3 http://packages.ros.org/ros2/ubuntu focal/main amd64 ros-galactic-image-transport-plugins amd64 2.3.3-1focal.20220430.172112 404 Not Found [IP: 64.50.233.100 80] Err:4 http://packages.ros.org/ros2/ubuntu focal/main amd64 ros-galactic-usb-cam amd64 0.4.2-1focal.20220430.172301 404 Not Found [IP: 64.50.233.100 80] Fetched 1,453 kB in 1s (1,062 kB/s) Unable to correct missing packages. E: Failed to fetch http://packages.ros.org/ros2/ubuntu/pool/main/r/ros-galactic-theora-image-transport/ros-galactic-theora-image-transport_2.3.3-1focal.20220430.143745_amd64.deb 404 Not Found [IP: 64.50.233.100 80] E: Failed to fetch http://packages.ros.org/ros2/ubuntu/pool/main/r/ros-galactic-image-transport-plugins/ros-galactic-image-transport-plugins_2.3.3-1focal.20220430.172112_amd64.deb 404 Not Found [IP: 64.50.233.100 80] E: Failed to fetch http://packages.ros.org/ros2/ubuntu/pool/main/r/ros-galactic-usb-cam/ros-galactic-usb-cam_0.4.2-1focal.20220430.172301_amd64.deb 404 Not Found [IP: 64.50.233.100 80] E: Aborting install.
最新发布
07-11
AWTK开发手册-AWTK开发实践指南-中文手册.pdf AWTK = Toolkit AnyWhere 随着手机、智能手表等便携式设备的普及,用户对 GUI 的要求越来越高,嵌入式系统对高性能、高可靠性、低功耗、美观炫酷的 GUI 的需求也越来越迫切,ZLG开源 GUI 引擎 AWTK 应运而生。AWTK 全称为 Toolkit AnyWhere,是 ZLG 倾心打造的套基于 C 语言开发的 GUI 框架。旨在为用户提供个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的 GUI 引擎,并支持跨平台同步开发,次编程,终生使用。 最终目标: 支持开发嵌入式软件。 支持开发Linux应用程序。 支持开发MacOS应用程序。 支持开发Windows应用程序。 支持开发Android应用程序。 支持开发iOS应用程序。 支持开发2D游戏。 其主要特色有: 小巧。在精简配置下,不依赖第三方软件包,仅需要32K RAM + 256K FLASH即可开发些简单的图形应用程序。 高效。采用脏矩形裁剪算法,每次只绘制和更新变化的部分,极大提高运行效率和能源利用率。 稳定。通过良好的架构设计和编程风格、单元测试、动态(valgrind)检查和Code Review保证其运行的稳定性。 丰富的GUI组件。提供窗口、对话框和各种常用的组件(用户可以配置自己需要的组件,降低对运行环境的要求)。 支持多种字体格式。内置位图字体(并提供转换工具),也可以使用stb_truetype或freetype加载ttf字体。 支持多种图片格式。内置位图图片(并提供转换工具),也可以使用stb_image加载png/jpg等格式的图片。 紧凑的二进制界面描述格式。可以手工编辑的XML格式的界面描述文件,也可以使用Qt Designer设计界面,然后转换成紧凑的二进制界面描述格式,提高运行效率,减小内存开销。 支持主题并采用紧凑的二进制格式。开发时使用XML格式描述主题,然后转换成紧凑的二进制格式,提高运行效率,减小内存开销。 支持裸系统,无需OS和文件系统。字体、图片、主题和界面描述数据都编译到代码中,以常量数据的形式存放,运行时无需加载到内存。 内置nanovg实现高质量的矢量动画,并支持SVG矢量图。 支持窗口动画、控件动画、滑动动画和高清LCD等现代GUI常见特性。 支持国际化(Unicode、字符串翻译和输入法等)。 可移植。支持移植到各种RTOS和嵌入式Linux系统,并通过SDL在各种流行的PC/手机系统上运行。 脚本化。从API注释中提取API的描述信息,通过这些信息可以自动生成各种脚本的绑定代码。 支持硬件2D加速(目前支持STM32的DMA2D和NXP的PXP)和GPU加速(OpenGL/OpenGLES/DirectX/Metal),充分挖掘硬件潜能。 丰富的文档和示例代码。 采用LGPL协议开源发布,在商业软件中使用时无需付费。 目前核心功能已经完成,内部开始在实际项目中使用了,欢迎有兴趣的朋友评估和尝试,期待您的反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值