Lv_gui_designer -- A drag-and-drop, simple LittlevGL-GUI designer built with LittlevGL

Hi everyone!
I am writing a LittlevGL gui design tool by LittlevGL v6.0. It is base on lvgl’s PC_Simualator project.
Here are my target:

  • Design interface by drag-and-drop.
  • Widget’s attribute and style can be change.
  • Generate C code(or more), about interface and callback.

    I am still working in progress, and have a lot of things to do. LittlevGL is powerful, why not use lvgl to write a tool for designing lvgl? Just like Qt Desinger and Glade. I hope it can be useful. I need more advice to improve the tool now. Maybe someone’s idea can make a new feature for it.:grinning:
    github: https://github.com/kaiakz/lv_gui_designer

@jking @TheGrovesy Just like this?

6 Likes

I would love just to have a theme designer. :smile:

1 Like

Wow! It looks much further along than the designer we were working on.

EDIT: I’ve been notified that this link is very popular. Please note that nothing has happened with our designer since August.

@kisvegabor Maybe we should use LittlevGL to make the designer.

@kaiak This looks excellent, how does it handle? I ask because sometimes the simulation can be a little sluggish. Do you have the ability to save and load projects? It would also be good to have a Project Explorer style panel so you can quickly add new screens, switch between them etc.

I completely agree with @jking a theme designer would be great too.

@embeddedt I just checked your link… yes this is a little further on :rofl:

I was planning on create an editor in Visual Studio, use the windows controls but this looks excellent so don’t think I’ll bother now!

It shouldn’t be… care to give an example?

Yes, simulation is a little sluggish sometimes, I guess that’s because lvgl refresh time(or frequency)is not fast as PC’s gui, but it is not the obstacle.

It’s sad that the tool hasn’t the ability to save and load project.:dizzy_face: That’s somthing I need to complete in next step. I think the tool can choose XML file as the project file, and generate C or python code by xml file, just like Glade.

@kaiak

That is awesome! I tried it and worked like a charm on Linux too. It wasn’t sluggish for me.

This project is great and looks awesome but I’m still convinced that using the Python binding would be a more reasonable choice in the long term. I say this mainly becasue of the built-in components like treeview, file browser, menus, etc.

However, it wasn’t absolutely clear that really the Python-based solution is the best direction to take when we were talking about in in the Architecture design topic.

So happy,I can run the code in ubuntu system~

That’s fine. Thanks for your star! I will keep on working. After I completed the demo, I found that LittlevGL has developed lv_gui_builder ‘already’! :rofl: Maybe I am reinventing the wheel.
Anyways, lv_gui_builder is excellent. AGlass0fMilk’s demo is great. He planned use pylvgl and pyqt to develop the project. If I understood well, he also uses lvgl to make the designer in another way, with qt-texture instead of sdl-texture(my project’s way to display). Use LittlevGL to simulate LittlevGL is good (Just like Qt Designer can’t simulate Gtk well). If lv_gui_desiner meets with some limit of LittlevGL, lv_gui_builder will meet as well. Qt provides treeview ,filesystem and menus, etc.

In my opinion, the biggest problem for lv_gui_builder is the lack of developer, not python binding. For the long term, we need more developer. I agree with AGlass0fMilk’s good idea, but if we can’t find any developer to follow it, he would be the only one. Besides, I tried to do some contribution to lv_gui_builder, but I found that lv_gui_builder is built with somethings I am not familiar with(pyqt and pygl). According to the Architecture design topic, I think I am not able to work with it. So I continue to work with lv_gui_designer. It is written in C and LittlevGL, and even if you are a beginner of LittlevGL, you can also join the development of lv_gui_designer. Welcome!

I wrote a LayerView instead of TreeView to display parent-children layer. :sunglasses: I am building the relationship between TFT_Simulator and LayerView.
%E6%88%AA%E5%9B%BE_2019-07-27_01-09-15
I will write XML-file generation for storing the project. XML can be converted to C and python(But I am not familiar with pylvgl, can someone help?). I think I can contribute this part to lv_gui_builder. It is cool that two editor can share some code with each other. :smiley:

Ture, it won’t work without people. Your solution has the advantage it uses LittlevGL therefore contributors will be familiar with the environment.

It also can work. Changing the elements to buttons would allow to choose one as a parent. What do you think?

I saw your comment in the Architecture design topic. Let’s discuss it there.

@kaiak Regarding the theme editor: Its great that you can switch themes at runtime, but what I really meant, and what would be more useful is to be able to edit/create a theme visually and of your tool to generate the theme’s code. For example it would be great if you could pick an element within a theme, for example NewTheme->style.bg, and then use a colour wheel or something to change its colour and see that change reflect your project immediately. And then be able to save and generate the appropriate code for this.

I havent yet tried your tool, but hope to get a chance this week and see if I am able to offer any help, but my time is really busy at the moment. Also as I havent tried the tool yet I apologies in advance if it already does what I have just described!

@embeddedt When I wrote that comment I had been using version 5.3 which often does not detect mouse clicks, and the mouse cursor was quite laggy. This was using my own Visual Studio port which could have been part of the problem :woozy_face: However version 6 is much smoother and more responsive.

OK, I got it. I think the theme is just the common style for all widget. If the editor can edit/create the style of a widget, it is not difficult to edit/create a style for all widget. Besides, we also need a file to store the style/theme(Like CSS?). I have chosen the XML-format to represent the object’s hierarchy and attribute. The project hasn’t finished yet. Many important functions are being developed. Thanks for your advice.:laughing:

Great stuff. Why not store each style/theme as separate XML’s? That way you could probably re-use the xml format. and having each theme as its own file also means it is easy to share/reuse them between projects.

How is it going with the GUI Builder/Designer project?

1 Like