wasm-micro-runtime/samples/littlevgl
2019-12-24 11:09:54 +08:00
..
vgl-native-ui-app Enable WASI feature, enhance security and add SGX sample (#142) 2019-11-20 21:16:36 +08:00
vgl-wasm-runtime Add thumb target, implement xtensa invokeNative asm code and update makefiles (#151) 2019-12-24 11:09:54 +08:00
wasm-apps Enhance wasm loader and interpreter, enhance code security and update document (#149) 2019-12-13 15:30:30 +08:00
build.sh Enhance wasm loader and interpreter, enhance code security and update document (#149) 2019-12-13 15:30:30 +08:00
LICENCE.txt Import app manager, samples and test-tools 2019-05-17 17:15:25 +08:00
README.md Remove the binding between current thread and module instance and bugs fix (#131) 2019-10-11 15:25:23 +08:00

Introduction

This sample demonstrates that a graphic user interface application in WebAssembly by compiling the LittlevGL, an open-source embedded 2d graphic library into the WASM bytecode.

In this sample, the whole LittlevGL source code is built into the WebAssembly code with the user application. The platform interfaces defined by LittlevGL is implemented in the runtime and exported to the application through the declarations from source "ext_lib_export.c" as below:

    EXPORT_WASM_API(display_init),
    EXPORT_WASM_API(display_input_read),
    EXPORT_WASM_API(display_flush),
    EXPORT_WASM_API(display_fill),
    EXPORT_WASM_API(display_vdb_write),
    EXPORT_WASM_API(display_map),
    EXPORT_WASM_API(time_get_ms), };

The runtime component supports building target for Linux and Zephyr/STM Nucleo board. The beauty of this sample is the WebAssembly application can have identical display and behavior when running from both runtime environments. That implies we can do majority of application validation from desktop environment as long as two runtime distributions support the same set of application interface.

Below pictures show the WASM application is running on an STM board with an LCD touch panel.

WAMR UI SAMPLE

WAMR UI SAMPLE

The number on top will plus one each second, and the number on the bottom will plus one when clicked. When users click the blue button, the WASM application increases the counter, and the latest counter value is displayed on the top banner of the touch panel.

The sample also provides the native Linux version of application without the runtime under folder "vgl-native-ui-app". It can help to check differences between the implementations in native and WebAssembly.

Configure 32 bit or 64 bit build

On 64 bit operating system, there is an option to build 32 bit or 64 bit binaries. In file ./vgl-native-ui-app/CMakeLists.txt and/or ./vgl-wasm-runtime/CMakeLists.txt , modify the line: set (BUILD_AS_64BIT_SUPPORT "YES") where YES means 64 bit build while NO means 32 bit build.

Install required SDK and libraries

  • 32 bit SDL(simple directmedia layer) (Note: only necessary when BUILD_AS_64BIT_SUPPORT is set to NO) Use apt-get: sudo apt-get install libsdl2-dev:i386 Or download source from www.libsdl.org:
./configure C_FLAGS=-m32 CXX_FLAGS=-m32 LD_FLAGS=-m32
make
sudo make install
  • 64 bit SDL(simple directmedia layer) (Note: only necessary when BUILD_AS_64BIT_SUPPORT is set to YES) Use apt-get: sudo apt-get install libsdl2-dev Or download source from www.libsdl.org:
./configure
make
sudo make install
  • Install EMSDK
    https://emscripten.org/docs/tools_reference/emsdk.html

Build and Run

Linux

  • Build
    ./build.sh
    All binaries are in "out", which contains "host_tool", "vgl_native_ui_app", "ui_app.wasm" and "vgl_wasm_runtime".

  • Run native Linux application
    ./vgl_native_ui_app

  • Run WASM VM Linux applicaton & install WASM APP
    First start vgl_wasm_runtime in server mode.
    ./vgl_wasm_runtime -s
    Then install wasm APP use host tool.
    ./host_tool -i ui_app -f ui_app.wasm

Zephyr

WASM VM and native extension method can be built into Zephyr, Then we can install wasm app into STM32.

  • Build WASM VM into Zephyr system
    a. clone zephyr source code
    Refer to Zephyr getting started.
    https://docs.zephyrproject.org/latest/getting_started/index.html
    west init zephyrproject
    cd zephyrproject
    west update
    b. copy samples
    cd zephyr/samples/
    cp -a <wamr_root>samples/littlevgl/vgl-wasm-runtime vgl-wasm-runtime
    cd vgl-wasm-runtime/zephyr_build
    c. create a link to wamr core
    ln -s <wamr_root>/core core
    d. build source code
    Since ui_app incorporated LittlevGL source code, so it needs more RAM on the device to install the application. It is recommended that RAM SIZE not less than 320KB. In our test use nucleo_f767zi, which is not supported by Zephyr. However, nucleo_f767zi is almost the same as nucleo_f746zg, except FLASH and SRAM size. So we changed the DTS setting of nucleo_f746zg boards for a workaround.

    Modify zephyr/dts/arm/st/f7/stm32f746.dtsi, change DT_SIZE_K(256) to DT_SIZE_K(320) in 'sram0' definition.
    mkdir build && cd build
    source ../../../../zephyr-env.sh
    cmake -GNinja -DBOARD=nucleo_f746zg ..
    ninja flash

  • Test on STM32 NUCLEO_F767ZI with ILI9341 Display with XPT2046 touch
    Hardware Connections

+-------------------+-+------------------+
|NUCLEO-F767ZI       | ILI9341  Display  |
+-------------------+-+------------------+
| CN7.10             |         CLK       |
+-------------------+-+------------------+
| CN7.12             |         MISO      |
+-------------------+-+------------------+
| CN7.14             |         MOSI      |
+-------------------+-+------------------+
| CN11.1             | CS1 for ILI9341   |
+-------------------+-+------------------+
| CN11.2             |         D/C       |
+-------------------+-+------------------+
| CN11.3             |         RESET     |
+-------------------+-+------------------+
| CN9.25             |    PEN interrupt  |
+-------------------+-+------------------+
| CN9.27             |  CS2 for XPT2046  |
+-------------------+-+------------------+
| CN10.14            |    PC UART RX     |
+-------------------+-+------------------+
| CN11.16            |    PC UART RX     |
+-------------------+-+------------------+
  • Install WASM application to Zephyr using host_tool
    First, connect PC and STM32 with UART. Then install to use host_tool.
    ./host_tool -D /dev/ttyUSBXXX -i ui_app -f ui_app.wasm