Questions on best practices for using emscripten + lvgl

[sukesh-ak]

First of all, thank you so much for LVGL and making it work with emscripten.
I was already a fan of lvgl and now even more with this discovery. I just got it working :)

@kisvegabor I have few questions for using lvgl with emscripten.

What I am building

TFT UI using LVGL with backend data coming from websocket.
Currently using ESP32-S3 for UI but later it will be ported to RPI (Linux), Circle (RPI) and probably STM32 as well.
I am quite comfortable with lvgl already and also use lv_msg in my application.

What I want to know in this LVGL + emscripten context

• What are the best practices for using lvgl widgets + interaction with lvgl since I would like to increase code sharing?
• What should I avoid in the UI portion of the code so that web version is pretty straight forward to be implemented?
• Is it ok to build using lv_msg for the UI API so that from web I can send messages to LVLG?
• Is it ok to use lv_timer so that its portable in both cases?
• Can I pass screen resolution (or dimension) from web page to resize the lvgl UI?

-TIA

[kisvegabor]

Hi @sukesh-ak,

Great questions!

What are the best practices for using lvgl widgets + interaction with lvgl since I would like to increase code sharing?

Normally the LVGL UI is very portable. The only place where this "cross-platformness" can be broken is the events. So unless you add something like stm_set_io(PORTA, PIN7, ON) to lv_events the UI code will be portable. If you use lv_msg then you can easily separate the UI from the drives and the app.

What should I avoid in the UI portion of the code so that web version is pretty straight forward to be implemented?

Any LVGL code can be compiled by Emscripten. So basically you can do anything in LVGL, it will work on web too. Assuming you don't use HW specific functions.

Is it ok to build using lv_msg for the UI API so that from web I can send messages to LVLG?

Yes, I highly recommend it. I used lv_msg in some of my latest UI projects and I was quite happy with it. Especially when I realized that the global variables' address can be used as msg_id as the addresses are unique. (See here)

Is it ok to use lv_timer so that its portable in both cases?

Yes, it's ok. However note that lv_timer is single threaded and blocking. So if you poll something in a timer the other timers will be blocked. Of course you can implement a state machine in these cases and check the current state in every 10 ms or so.

Can I pass screen resolution (or dimension) from web page to resize the lvgl UI?

The LVGL UI can be easily resized by updating the display driver. However, I'm not sure about how to update the SDL part to have a canvas with different size. Have you already checked that?

[sukesh-ak]

@kisvegabor Thanks for the response.

I have already tried to separate the UI from Hardware code using lv_msg so guess it should be easier.

I have also used both ways using lv_msg, since UI changes might send notification to the hardware side of code for data update or so.

Interesting about the lv_timer being single threaded and blocking. Will keep this in mind.

The LVGL UI can be easily resized by updating the display driver. However, I'm not sure about how to update the SDL part to have a canvas with different size. Have you already checked that?

I don't need it to be changed dynamically like screen resizing but just first time while loading. For example if my UI is used on Smartphone browser vs iPad/PC etc.

The autogenerated html file has some code for the size of the canvas, so I believe we can do this during html file load. Not tried yet though.

[stale]

This issue or pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[garudaonekh]

Hi @sukesh-ak ,
Very interested with your issue.

1. Yes, I also need to separate UI from the core so that I can push the UI to Mobile App. Do you have more input on this?
2. Communication between the UI with the controller.
3. Auto layout to adjust mobile phone screen size. Is it a way for it to auto adjust or need to generate multiple display and load the one that fit the screen?

Regards;

[sukesh-ak]

Hi @sukesh-ak , Very interested with your issue.

1. Yes, I also need to separate UI from the core so that I can push the UI to Mobile App. Do you have more input on this?
2. Communication between the UI with the controller.
3. Auto layout to adjust mobile phone screen size. Is it a way for it to auto adjust or need to generate multiple display and load the one that fit the screen?

Regards;

I don't have anything to share publicly. Will do once I get some time to write a simple prototype.

For 3)
I have managed to do auto-sizing using percentage values in another project of mine.
You can see it here => https://github.com/sukesh-ak/ESP32-TUX

[garudaonekh]

thanks