WYSIWYG Editor for LittleVGL

My projects
1

So I am working on a project that requires serialization and deserialzation of UI.

So, that presented a bit of an issue with developing the UI itself. So I am in the process of creating an editor for LittleVGL.

It is drag and drop and supports all of the widgets within LittleVGL.

Here are the features:

  • WYSIWYG editor
  • Drag and drop of all the widgets in LittleVGL
  • Ability to create new widgets and use those in a drag an drop manner
  • Any resolution supported
  • Scaling of the editior so you can zoom in and out
  • Outputs:
    • JSON format (I also have a json to UI serializer that takes in the data and creates the UI from it)
    • C code for compliing

Ill have it up on my github within a week or 2

2 Likes
2

Amazing!!!

3

Have you seen someone has already started one which you might be interested in here: https://forum.lvgl.io/t/lv-gui-designer-a-drag-and-drop-simple-littlevgl-gui-designer-built-with-littlevgl

But if you plan to continue its development I’d be interested in knowing what language you are developing it in?

4

Yep, gonna continue with it, as I have some requirements beyond simply outputting c.

I am doing it in C#, once .netcore allows for Forms across platforms (Coming soon), it will be cross platform.

5

I was thinking about creating an editor in C# too, create a dll of the littlevGL library along with hooks for the sdl.

How were you planning on interfacing with the library?

6

I was thinking of pinvoking as a viewer.

7

Once I get some of the foundational kinks ironed out, Ill slap it up on my github, and everyone can hack on it.

8

Curiously waiting to see it!

cc @kaiak

9

EarlyUI
EarlyUI.PNG1145×814 67.8 KB

Here is an early view of it.

So, the drawing surface has a few interesting notes:

  1. Im not SUPER concerned about the items looking EXACTLY right there. They are closeish. Eventually ill make them look much closer
  2. The Editor Tools is sepeerated into 2 windows:
    A) Tools (Widgets from LittleVGL, and eventually custom widgets created in the tool)
    B) Properties for the widgets, this is all the different configuration items for a widget (For example Color or Text)
  3. Finally on the Drawing Surface there is a TreeView that shows the hierarchy. This allows for a few things:
    A) Selecting an item (vs clicking on the drawing surface), which gives you the ability to view/change properteties. Move it or resize it.
    B) Moving items within the treeview, this allows you to reparent them
10

And also, ive only been working on it since Sunday :slight_smile:

11

Looks like a good start but why isnt the drawing surface the simulation from the sdl library? That way it is a true wysiwyg?

12

I agree. While this would definitely work if you were just looking to customize the layout of the elements, the advantage of other solutions like @kaiak’s is that you can see what the finished GUI would look like.

13

I do really like the tree view though, especially if you can re-arrange them (we use quite a lot of nested widgets).

I feel your current solution, of having your own ‘representation’ of the widgets, will make styles/themes hard work as you will have to re-implement what is already in the actual library.

If I get time over the weekend I might try to tie a very simple C# winforms app in with the existing VS simulation to provide a few simple calls to add widgets. You could then integrate this into your project if that is something you wanted to try!

14

Well I was intending to have both options.

Essentially this was my plan:

  1. FInish the representations via winforms
  2. Have a on the fly SDL window that gets updated as items get changed in the form
  3. Add a theme editor
15

My goal is to get a V0.5 out on GitHub and hopefully have the members of the community add features

16

@rohmer My question would be why do you need both? aren’t you making work for yourself?
I don’t see what your winforms version will give you that the SDL won’t!

17

Ok, decided to get the other guys work and get it working well. Going to add the tree view to it as well.

Right now it crashes a lot. Lots of null pointers :frowning:

18

@rohmer Are you looking at the latest, web-based version?

19

No, for 2 reasons.

  1. I dont know python (Lesser reason)
  2. C/C++ code I need to write for the serialization/deserialization and factory will be portable to the project I am actually doing this for
20

Here are my plans.

First of all as it works now:

Capture
Capture.PNG1282×832 26.8 KB

I am going to rewrite 2 major pieces this weekend:

  1. The toolbox
    A. I am going to add all of the different widgets supported by LVGL (Easy)
    B. I am going to make it a tab view with 3 tabs:
    • Widgets
    • Dialogs
    • Custom Widgets
  2. The layer view, I am going to create a treeview container for this so that it is:
    A. Easy to see relationships
    B. Prunable (You can delete something, and then its children)
    C. Graftable (You can move something and its children and attach them to a different node)

I also have this all running out of a visual studio project, and will create a cmake project as well.

3 Likes