WYSIWYG Editor for LittleVGL

Well the tree view took a little longer than I anticipated (30 years of programming experience and I always underestimate, still :))

But it supports pruning (Removing a node and all its children), grafting (Moving a node and rebasing it on the grafted location), and of course display.
Capture

1 Like

Would you consider contributing the treeview as a widget to LittlevGL? It could be useful for other people as well.

Most certainly. Its all going into my public GitHub, and anyone that wants it can haz

I meant making a pull request and possibly having it incorporated in the next release. :wink:

Yep, I got that :slight_smile:

Looks great @rohmer.

Look forward to a version to clone and have a play with :slight_smile:

My take on the tool tray.

The whole purpose of my making this editor is the serialization and deserialzation of lvgl (Which I have working for lv_obj_t and label objects (Label was a POC to make sure everything worked), I will finish more when I have a mind to do more tedium ;)).

Having serialization/deserialzation allows me to let the end user save custom widgets they use and they will show up in the Custom tab.

Also, since this all allows for ease of building more complication things, I included a dialog tab so that custom dialogs could be saved there (I likely will build a file->open one for it)

1 Like

Great progress. I like the simplicity of it. Can wait to try it out.

Man this is fun :slight_smile:

Todays adventure…

Since again this is designed to create widgets as well as full screens. I wanted the ability to resize the TFT simulation (Also could be useful for designing things for different hardware).

This is the UI:
iCapture

So Reposition and Resize.
Reposition will move everything proportionally to the new size vs the old size.
Resize will resize everything to the new size vs old size.

So if you had a widget of 50x50 @ 10x, 10y on a 100x100 screen, and you set the TFT to 200,200
It would be a 50x50 widget at 20x, 20y

And all the others would move as well (keeping parentage of course)

1 Like

Can’t wait to try it!

Ok, I put what I have done up til now on github.

It comes with some goodies, and words of caution.
This definitely a work in progress. I will likely change quite a few things, and certainly add a ton of things (As it doesnt really do what it is intended to yet).

Of note (If you are C++ friendly), in Widgets there are two items:

  • TreeView/Tree Node - This is as it sounds, I need to do the pruning and grafting, but it is functional other than that
  • Collapsible Window - This is a fairly nifty window that collapses on clicking on it. Its easy to use and pretty self explainatory (God I need to add comments to the code :sob: )

Pics of it in action:
Expanded
Capture

Contracted:
Capture

All you need to do is create a object:

CollapsableWindow(lv_obj_t *parent, 
		std::string name, 
		bool isCollapsed, 
		int x, 
		int y, 
		int width, 
		int height);

Then add objects to it:

void AddObjectToWindow(lv_obj_t *obj);

And the rest is taken care of for you. There are some other methods in there, like one to get the collapse button if you so desire to assign another callback to it.

1 Like

Ok, this getting pretty close to a V0.1.

Here is the full screen:

In that pic, you can see the first object created (The arc object).
Todo left:

  • Finish all the code for each of the different objects
    ** The create function
    ** Serialization/Deserialization

Luckily those are pretty fast to do.

  • The property window, this will be a bit of a bear, but at least I have a json structure behind, so I might just create the properties programitically based on the data structure

  • Finally on the bottom I am going to do a ribbon bar esque tool box. For example when you have an object selected, a up/down/left/right position set of buttons to nudge the object. Also alignment functions, etc.

But it is possible to drag the object to position it as well, right?

Absolutely, drag is available.

Got a lot done this weekend :slight_smile:
Yay free time…

So, now all objects base properties show and are editable upon clicking on them.

Wow, your work is excellent! :wink:
lv_gui_designer still has some problem yet :

  • Not support for MacOS, I think I might break some configs.
  • LittlevGL’s limit : Lack of FileBrowser, LittlevGL’s fs is not enough. Maybe we need to write a FileBrowser.
  • Special attribute for some widgets.
  • Style&&Animation editor

If you have any idea or quesition, please let me know.

I am going to simplify lv_gui_designer, which only manages the common attributes(position, size, etc), and generate the code(include event). just build a simple framework for users. Maybe lv_gui_designer can be a part of simulator or lv_example, as a simple tool. @kisvegabor

So in regards to your comments

  1. MacOS support will be trivial, I just need to write a Makefile. Havent done it yet as I am working on a PC :slight_smile:
  2. I will add a file browser, it will work off of my TreeView, so 99% of the file browser is written :slight_smile:
  3. I am going to try and figure out how to abstract user_data. I have some things I am going to add to it to make that easier (Adn to fit into my larger project0
  4. I intend on doing a Style and Theme editor. But V1 needs to be done :slight_smile:

Oh, and thanks for compliemnt

user_data is very convenient for binding extra information. I can add ID, TYPE, etc for the widget on simulator, because lvgl does not provide the function to do this.
Let me share an idea for lv_gui_designer that I haven’t done yet. I think TOOLBOX can provide another way to create the widget. Use the real widget instead of the button with text. For example, a SW widget is better than a button named ‘SW’.

Oh yes I know all about user data, I’m using it all over the GUI designer. The issue is serialization of user data that can be any type

@rohmer @kaiak
Can you comment on this?