How to run an SquareLine project on i.MX 93 EVK using FrameBuffer.

[#1]

Introduction

LVGL is a graphics library to run on devices using a limited amount of resources.

Previously, we have ran an LVGL demo from the LVGL repository, this contains a couple more demos which all of them are pieces of code included and lends us the opportunity to evaluate the library in a quick and easy way.

GUI projects are developed by customers through a lot more options than bare code, there are GUI tools that translate a graphic asset into LVGL code, in this demonstration we will use a tool that's widely used in MCU GUI development and translate the GUI created into LVGL code; SquareLine.

NOTE: refer to the appendix for precedent LVGL documents on i.MX series processors.

HW set-up

• i.MX 93 EVK boot over eMMC/uSD to Linux Factory or Ubuntu.
• Connect power and debug receptables.
• Connect MX8_DSI_OLED1 to J701 (MIPI DSI) through MiniSAS cable.

SquareLine set-up

Download the latest version of SquareLine under the following link according to your host system.

NOTE: This document is intended for demonstration of templates included within the tool, so it's recommended to download a free trial, for formal development please refer to the appendix of this document.

Unzip and execute the installer, this is the windows prompt.

Demo download

After setting SquareLine up go to the example section, we will demonstrate the thermostat capabilities with the Thermostat Demo.

We can directly export these UI files and they would be graphically ready to be build, click on Export -> Export UI Files and select your preferred destination to save these.

LVGL setup. Option 1 Fresh Environment

Clone LVGL and LV_DRIVERS repositories, this is a .gitmodules file that points to the specific branches needed.

[submodule "lvgl"]
path = lvgl
url = https://github.com/lvgl/lvgl.git
branch = release/v8.3
[submodule "lv_drivers"]
path = lv_drivers
url = https://github.com/lvgl/lv_drivers.git
branch = release/v8.3

NOTE: If you are using other methods, you should point to these commits, lv_drivers @ 8cdabe8 and lvgl @ f2c1032.

Gather the necessary files described below from the LVGL Linux Port example found here.

• Makefile
• lv_conf.h
• lv_drv_conf.h
• main.c
• mouse_cursor_icon.c

Patch the Makefile.

+ include $(LVGL_DIR)/thermostat/thermostat.mk

Patch the lv_drv_conf.h

#  define EVDEV_NAME   "/dev/input/event10"        /*You can use the "evtest" Linux tool to get the list of devices and test them*/
+#  define EVDEV_NAME   "/dev/input/event<Number>"

NOTE: This changes according to the output of # evtest.

Patch lv_conf.h

-#define LV_FONT_MONTSERRAT_20 0
+#define LV_FONT_MONTSERRAT_20 1

Patch the main.c

-    disp_drv.hor_res    = 800;
-    disp_drv.ver_res    = 480;
+    disp_drv.hor_res    = 1080;
+    disp_drv.ver_res    = 1920;
…
-    /*Create a Demo*/
-    lv_demo_widgets();
+    /*Create a Squareline Demo*/
+    ui_init();

LVGL Setup. Option 2 with LVGL demos already running

Gather the necessary files described below from the LVGL Linux Port example found here.

• Makefile
• lv_conf.h
• lv_drv_conf.h
• main.c
• mouse_cursor_icon.c

Patch the lv_drv_conf.h

#  define EVDEV_NAME   "/dev/input/event10"        /*You can use the "evtest" Linux tool to get the list of devices and test them*/
+#  define EVDEV_NAME   "/dev/input/event<Number>"

NOTE: This changes according to the output of # evtest.

Patch the main.c

-    disp_drv.hor_res    = 800;
-    disp_drv.ver_res    = 480;
+    disp_drv.hor_res    = 1080;
+    disp_drv.ver_res    = 1920;
…
-    /*Create a Demo*/
-    lv_demo_widgets();
+    /*Create a Squareline Demo*/
+    ui_init();

Run the demo

Build the demo with the following command and copy the ./demo output to the i.MX 93 EVK RootFS.

# source /opt/path/to/your/toolchain
# make clean
# make

The demo can be ran with the following commands.

# systemctl stop weston # For LF
$ sudo service gdm3 stop # For Ubuntu

# ./demo

Conclusion

SquareLine demos can run in prebuilt and basic builds of i.MX processors through FB, which can enable a quick set-up for GUI testing before moving to use a windowing stack without sacrificing any features.

Appendix

Document: How to run LGVL on iMX using framebuffer

Official page for pricing information