2.4 KiB
WASM Graphic Layer (WGL)
The WGL builds the littlevgl v6.0 into the runtime and exports a API layer for WASM appication programming graphic user interfaces. This approach will makes the WASM application small footprint. Another option will be built the whole littlevgl library into WASM, which is how the sample littlevgl is implemented.
Challenges
When the littlevgl library is compiled into the runtime, all the widget data is actually located in the runtime native space. As the WASM sandbox won't allow the WASM application to directly access the native data, it introduced a few problems for the API porting:
-
Reference to the widget object Almost each littlevgl API will take widget object as the first argument, which leads to either read or write the data associated with the object. We have to prevent the WASM app utilize this to access unauthorized the memmory.
The solution is to track the objects created by the WASM App in the native layer. Every access to the object must be validated in advance. To simplify each native wrapper function, the wgl_native_func_call() will do the validation for the object presented in the first argument.
When multiple WASM apps are creating their own UI, the object will be also validated for his owner module instance.
-
Access the object properties The data structure of widget objects is no longer visible to the applications. The app has to call APIs to get/set the properties of an object.
-
Pass function arguments in stucture pointers We have to do serialization for the structure passing between the WASM and native.
-
Callbacks
API compatibility with littlevgl
We wish the application continue to use the littlevgl API and keep existing header files inclusion, however it is also a bit challenging.
Firstly we have to redefine some data types such as lv_obj_t in the APIs exposed to the WASM app. ''' typedef void lv_obj_t; '''
Prepare the lvgl header files for WASM applicaitons
Run the below script to setup the lvgl header files for the wasm appliation.
core/app-framework/wgl/app/prepare_headers.sh
The script is also automatically executed after downloading the lvgl repo in the wamr-sdk building process.
How to extend a little vgl wideget
Currently the wgl has exported the API for a few common used widgets such as button, label etc.
Refer to the implementation of these widgets for extending other widgets.