Hello everyone,
Just for fun, study and personal needs, I developed this simple application to speed up my LVGL projects.
I’m providing a URL so you can test it and send me your feedback.
Thank you in advance.
3 Likes
looks great. There are some small glitchy type bugs but that could be because of me using Firefox. It’s mostly in the resizing and moving of the UI elements.
One suggestion though. Because all widgets in LVGL are like a child class of lv_object the ability to nest items exists. So you can place an lv_button that has an lv_img as a child. showing this hierarchy would be beneficial while providing the ability to drag and drop the UI elements in that view as to properly set the parent of those kinds of arrangements.
Thanks @kdschlosser !!!
I appreciate your comments and suggestions.
Yes, you’re right about the Firefox issue.
I’m investigating the causes and hope to get back to you with a solution soon.
This is a really useful suggested feature.
I’ve added collapsible tree-style navigation in the top left, by screen.
Here’s how to use it:
-
Look at the top-left panel (where the list of screens used to be).
-
You’ll see your screens listed there. Click the small arrow next to a screen’s name to expand it .
-
This will reveal a tree-like view of all the widgets on that screen.
-
If you have container widgets like a Panel or TabView, they will also have an arrow, allowing you to see the child widgets nested inside them.
This new Project Explorer gives you the full hierarchical view you suggested, allowing you to see the parent-child relationships and manage them with drag-and-drop.
Suggestion implemented, already published and available in version 0.4-beta.
B.Regards,
If you are game for adding MicroPython code generation support lemme know. I have a spinoff project that I have been working on that takes care of a lot of the shortcomings that are seen in the official binding. The biggest thing is a common API across all of the display drivers and the input drivers. This makes it really easy to generate code for. The code that gets generated would be as simple as upload it to the MCU and run it. The generated code would not need to be modified to make it work. .
I would be happy to assist with that if it is something you are interested in doing. I have also written scripts that read the LVGL header files and is able to output the entire LVGL API in a manner that makes it easier to process instead of needing to add things by hand. This kind of a script can also be used to determine differences between versions of LVGL so you will know what you need to update.
Out of question with your editor am I able to place an image say inside of a button? does it get displayed like that?
Because all of the widgets are derived from lv_obj_t they are all containers themselves and the ability to nest widgets is possible. This is the reason why I am asking to what level of support the editor has for nesting outside of a tree view.
Also adding a way to key in a custom display resolution would be awesome and perhaps support for a round representation for the screen as well.
The custom screen size is already available at new project screen size “Custom”
I’ll implement round screen and resolution options
About button with image, there is a specific widget ImgButton (Controller Widgets) that allows upload your image or define a URL source.
OK the button with an image is a bad example.
Say the arc slider and putting a label in the middle of it. This can be done by making the parent of the label the arc widget and then centering the label and presto you have a perfectly centered label in the middle of the arc widget.
1 Like
I got your point.
It’s already possible to do this using widgets inside a new container.
Certainly not the cleanest way to do it.
Suggestion noted for implementation.
Thank you.
Attached a .txt file that needs to be renamed as .json extension to be loaded as a project in LVGL Architect. (due to extension policy I cant upload .json directly here)
container_hierarchy_test.txt (2.8 KB)
Wow, that looks awesome! Just curious, what tech stack did you use for this tool? Thanks!
1 Like
I’m genuinely impressed! It’s a fantastic work! I show it to our team at LVGL. 
Do you use lvgl to render the preview or is it HTML?
1 Like
It looks like it is HTML. I could be wrong. I didn’t look at the code for the site. It is very well done…
It seems HTML to me as well.
Hi @dhugoexe,
in fact its a node.js/react/html/css stack.
There is a possibility that I could compile it for desktop, but due to lack of time I haven’t yet tested generating the binaries.
After fixing some bugs and implementing some pending features, I intend to create a beta binary.
Thanks for the comments!!!
My goal was to create something really simplistic that could speed up the creation of my ESP32 projects with LVGL.
I’m currently traveling to visit clients, and as soon as I return I intend to resume the pending corrections and implementations.
Once again, thank you for the comments, suggestions, and bug reports.
Has anyone tried uploading the generated code to an MCU?
I’d love to know.
Looks very nice! Thank, you, keep working on it.
New version v0.5-beta already published
Improvements and new features
1) Universal Parenting:
Any widget (lv_obj_t) can act as a parent for another.
Enhanced Tree View: The “Project Explorer” tree view will now reflect this new flexibility.
Any widget that has children will now have an expand/collapse arrow, allowing you to see its children.
You can drag widgets in the tree view and drop them directly onto other widgets to change their parent, or drag them to the root level of the screen.
(Thanks to @kdschlosser)
2) Rotation Screen
Dropdown rotation menu header added (0/90/180/270°)
Your chosen rotation will be saved as part of the project file and generating version-aware.
The main.ino file in the code export now includes the correct LVGL function to set the display rotation.
It will use: lv_display_set_rotation() with LV_DISPLAY_ROTATION_… enums for LVGL v9.x.
A commented-out lv_disp_set_rotation() with LV_DISP_ROT_… enums for LVGL v8.x, as it requires the user’s specific display driver instance.
3) LVGL code export version (From 8.3 to 9.4)
This allow the generated C code to be tailored to specific LVGL versions, ensuring compatibility and leveraging version-specific features.
Select the desired LVGL version from menu in the main header, next to the canvas size and rotation controls, for selecting the target LVGL version (from v8.3 to v9.4) and then export it.
4) Project file extension
I have been changed project extensions from .json to .lvga to prevent security policy issues.
Already saved files just need to be renamed to .lvga extension and could be loaded normally.
5) Others
Fixed some bugs and screen refinement.
TODO
- Color Depth
- Resolution
- Round Screen
===================================================
All your comments, feedback, and suggestions are very welcome.
Thanks.
Hi @kisvegabor,
I found the solution right here at LVGL. The most efficient approach is to use JS/WASM with Emscripten toolchain. That way the simulation will run on client side too much smoothly.
During testing, I will keep the HTML preview running in parallel with the LVGL simulator engine.
Your suggestions on how to approach this are very welcome.
NICE! This is going to be a really handy thing to be able to use.
Have you put any thought into adding a way to add custom code? Using something like blockly could be a handy thing to have for newbies where it is a drag and drop style interface that will write the code. a code editor for custom code would also be a nice addition.
I know those are some pretty large things to add and it would take some serious planning and probably quite a bit of time to do. Thankfully it has become easier to do because of already made code editors and such.
There is also another really nifty tool I have come across which is called Wokwi. An integration with something like that would really be an awesome thing…
1 Like
I will first work on basic and consistent usability, focusing on ease of use and user experience.
Debuging each widget on a case-by-case basis and make it stable.
At this point the generation of .ino/.cpp code is just an example of how to integrate the exported lvgl code into your own code.
Suggestions noted for the future.
Thanks a lot.
1 Like