Squareline studio to Micropython to Raspberry Pi Pico

h136 · December 15, 2024, 11:20pm

What do you want to achieve?

Would it be possible to export my GUI from Squareline Studio to Micropython and upload to Raspberry Pi through Thonny to run?

What have you tried so far?

I am new to the world of embedded system and GUI programming.
I have tried very hard to find a tutorial about this workflow but all I can see are for C or C++

Would highly appreciate any help or lead to this endeavor.
Thank you!

Others

SquareLine Studio version: 1.5.0
Operating system: Mac OS Sequoia 15.1
Target hardware: Raspberry Pi Pico

Hermit · December 16, 2024, 6:52pm

The MicroPython board-template (in desktop categories) can export MicroPython code. It’s not full Python, but MicroPython has only a subset of Python. But the LV-MicroPython code compiled to Raspberry Pi can run those LVGL-oriented MicroPython scripts. (See instructions/scripts in the exported board-template to build it successfully, the target you want is ‘unix’. Pre-built variants are only made for Intel processor, not for ARM which RaspBerry needs.)

h136 · December 17, 2024, 10:15pm

Hi Hermit! Thank you so much for your reply. It is very helpful and I really appreciate it.

May I ask you to clarify a few things?

is the “compiling to Raspberry Pi” a process that happens after I export to MicroPython from Squareline Studio?
where do I find the instructions/scripts you mentioned?
is “building” a process different from compiling?

Hermit · December 18, 2024, 3:56pm

Yes, the board-template (if you have a recent version of the board-template starting with v1.0.2 for LVGL-8.3, or v2.0.0 for LVGL-9.1 available already in SLS) has the build-instructions and scripts along with the precompiled ‘micropython’ executables. These include cloning the exact revision of lv_micropython, lv_bindings and lvgl with submodules. If you have the board-template in zipped form, you don’t even need to export anything from SquareLine studio. The is essentially the same as original lv_micropython repository, but with many additions to build for Linux and even for Windows (which lv_micropython didn’t support but I found out the ways to build it.)
‘Building’ is kindof synonym for ‘compiling’, though building is a broader term including build-scripts & makefiles, compiling, linking, etc.

h136 · December 22, 2024, 6:18am

Thank you for the response again!

if I build the lv_micropython correctly and it runs on my raspberry pi, what will happen if I execute the main.py?
Assuming my app is 480 x 800 but I am using a monitor that’s 1920 x 1080, would it cause any issue?

Hermit · December 22, 2024, 7:15pm

I’m a bit confused by your comments now, if it’s a Raspberry Pi or a Rasbperry Pi Pico actually.

If the target is ‘Pico’, not the normal Raspberry Pi, the display handling entirely depends on the connected display-controller. So the unix/windows+SDL2 targets in the MicroPython board-template can’t be used directly but can serve as working examples. (Also, I’m not sure if MicroPython will be that fast if MicroPython is used on it, as it already kindof sluggish even with results compiled from C code.) It’s worth a try, because the display-driver and LVGL code is actually coming from C code even with MicroPython, it’s only the code put into the interpreter which is Python after all. For Pico, you’ll need to scale to bigger resolution by software, which is slow, but if it’s a monitor somehow, it can do the scaling by itself.

If it’s a normal RaspBerry Pi, it will depend on the OS and SDL2: if you use the desktop environment SDL2 is there, for Raspberry OS Lite you can find our pre-compiled SDL2 in the Raspberry Pi board-template. SDL2 can scale the 480x800 resolution to be full-screen with the proper API-calls and display-drivers/backends (e.g. KMSDRM), and the scaling can even be hardware-accelerated…

h136 · December 22, 2024, 7:58pm

Hi Hermit, thanks for the clarifications! I do apologize if I didn’t make it clear earlier.
I started out trying to make it work on a Pico but decided to switch to a Raspberry Pi 5 to not worry about the firmware.

I am using a normal Raspberry Pi 5 (I will refer to it as RPi5).
I just figured out how to make the UI appear in LVGL Simulator. It’s the first time since I started this forum thread.

The UI is currently exactly the “Thermostat” example in the SLS, exported from my Macbook and copied to RPi5.

A few follow-up questions -

In my LVGL Simulator on RPi5, I am unable to pull the sliders on Temperature & Fan Speed control like I could in the SLS play mode. Is it because my ui_events.py is currently empty?
If that’s the case, what would be a good placeholder code in ui_events.py to enable me test the action of slider in LVGL simulator?
My end goal is to create a GUI based on this Thermostat example to control some motors connected to RPi5’s GPIO.

Hermit · December 23, 2024, 10:31am

Good to see your progress…
If I deduce correctly from your tiny screenshot you don’t call lv.task_handler() / lv.timer_handler() in your while loop, so LVGL can’t do its input-handling and refreshment tasks, probably that’s why you cant’ move the slider & arc.

h136 · December 24, 2024, 5:32am

Thanks Hermit,
With a few fixes: A. adding lv.timer.handler() in while loop B. type cast with lv.slider.__cast__for event_struct.get_target() C. a python module name correction. I am able to move the slider and arc. But I would love to ask a few more -

in the example in SLS, there number inside the arc that show the current temperature. I am still unable to make the number appear. It appears although it’s not showing the value of arc, it should at least give me 23. Do you know what might be wrong?

ui_Label_Celsius = lv.label(ui_Temp_Num_Bg)
ui_Label_Celsius.set_text("23")
ui_Label_Celsius.set_width(lv.SIZE_CONTENT)    # 1
ui_Label_Celsius.set_height(lv.SIZE_CONTENT)   # 1
ui_Label_Celsius.set_x(10)
ui_Label_Celsius.set_y(0)
ui_Label_Celsius.set_align( lv.ALIGN.CENTER)
ui_Label_Celsius.set_style_text_color(lv.color_hex(0xFFFFFF), lv.PART.MAIN | lv.STATE.DEFAULT )
ui_Label_Celsius.set_style_text_opa(255, lv.PART.MAIN| lv.STATE.DEFAULT )
ui_Label_Celsius.set_style_text_font( font_Number, lv.PART.MAIN | lv.STATE.DEFAULT )

See attached screenshot - my arc and sliders are working now.

2. I am testing the other sample included in SLS. The interactions are working but It appears all the bitmap textures are not(orange, distorted and not displaying correctly). Any idea what might be the cause?

Huge Thanks!

Hermit · December 24, 2024, 10:17am

For the thermostat temperature value, I suspect your exported python code has problem with loading/using the special ‘Number’ font. If it’s so, you probably have a warning dropped by LVGL in the console. (LVGL-9.1 doesn’t handle 8bpp fonts. If they’re 8bpp, converting to 4bpp might help.)
The colour problem might come from the fact that the color-depth in project-settings is set to 16bit and the colours somehow get swapped. Maybe it’s just the image-colours that get swapped. The ‘16bit’ vs ‘16bit swap’ in project settings might do the trick. But as LVGL-9.1 handles it differently (and there 16bit swap is done by the flush-callback, and not in advance by the image-conversion) you might have proper results by simply changing between LVGL-version 8 and 9.

h136 · December 29, 2024, 12:06am

Hi Hermit,

I am able to resolve the color-depth issue by increasing it to 32bit and re-export.

However the font is still an issue. The fonts are confirmed to be 4bpp. I have the following 2 lines in my ui.py and the print gives me “None”. what are other potential issues?

font_Number_extra = lv.binfont_create("./ui_font_Number_extra.bin") print(font_Number_extra)

Hermit · December 29, 2024, 9:18am

Your python-code seem to use incorrect path. At least, when exporting custom font with the MicroPython board-template, this line looks something like: font_Font1 = lv.binfont_create("A:ui_font_Font1.bin")
It uses the ‘A:’ drive instead of direct “./”. Drive “A:” is pre-configured for STDIO filesystem-driver to point to folder “” (aka “./”) in the lv_conf.h that the MicroPython executable is built with.

h136 · December 29, 2024, 6:40pm

Hi Hermit, I have tried a few methods and none of them is letting me create the font:

lv.binfont_create("A:ui_font_Font1.bin")
lv.binfont_create("./ui_font_Font1.bin")
lv.binfont_create("/home/absolute-path/..../ui_font_Font1.bin")

Do you think there might be other issues in creating font?
I have already done for lv_conf.h in my build:

#define LV_FONT_FMT_BIN 1

thanks!

Hermit · December 30, 2024, 11:14pm

It works with the code exported from MicroPython board-template on Debian Linux which I use. I think it should work in pretty the same way for you on the Raspberry Pi, which is also Debian essentially, just an ARM one. So I think you have some difference in your lv_conf.h or other thing before compilation into ARM ‘micropython’ executable. Maybe try to find the cause by creating a very simple example-project in SquareLine Studio with only a single label on the screen having a custom font. Check if it works for you by exporting it with the MicroPython board-template. If it works on your PC, then this same exported folder should work on the Raspberry Pi the same way if you compiled the ARM micropython-executable correctly… if the simple label with custom font works, then there’s some other problem with the more complex Thermostat project export… if not, the issue is really the font-handling, all font-related settings should be double-checked in lv_conf.h, and, and should be check if every font-related build-phases were fine during the compilation of the ARM micropython executable.

h136 · December 31, 2024, 2:33am

yes! I will try the simple export on a Debian Linux on x86 platform. At the meantime, would you mind sharing your lv_conf.h so I can cross check my settings against yours? thanks a lot and happy new year!

Hermit · December 31, 2024, 5:19pm

I tested with the same lv_conf.h that is present in the available board-template in ‘corrections/lib/lv_binding’ (but attached anyway), nothing special, no modification.
lv_conf.h (33.4 KB)
Happy New Year to all of you too…

h136 · December 31, 2024, 6:11pm

thanks, there are 8 files total in the correction folder in exported board-template. do I replace all folders in my lv_micropython source files and rebuild my lv_micropython?

I have been using the one I got from lv_micropython github and maybe that’s one of the reasons why it does not work.

Hermit · December 31, 2024, 8:32pm

It’s always a good ide to start a fresh build. Yes, all the corrections are needed (build.sh copies all by overwriting these files in the lv_micropython). It’s crucial that the exact lv_micropython version is used (even revision/subversion counts), that’s why the clone.sh gets it with the exact hash-numbers, not just by some name-based matching.

h136 · January 1, 2025, 4:38am

the font now works correctly after swapping out all the files with correction folder. thanks again!