An easier way.

[excitedbox]

So after digging into the code a little more I think I figured out an easier way of putting this builder together.

Each widget only has 1-3 styles (right now at least until 7.0) so if you make a simple copy to mimic each of the widgets in appearance the whole positioning and styling could be done in basic HTML5 and CSS using the element and any drag and drop library. It should take less than 20 hours of work to put the whole thing together. for the compile you then read the color from the css tags into a variable just as you are doing now.

This eliminates all the complexity of simulating a micropython program using JS->EM->SDL->MP+C.

Instead you have a simple drag and drop UI and only need to save a few color values and positions to the generated python or c file when you compile the code.

[kaiakz]

Good idea! I will have a try.
But I don't familiar with all the styles, maybe I need to learn about them.

[excitedbox]

My background is actually in Web development and not C / python programing so I have actually been looking into making a GUI builder in CSS HTML5 and JS.

I may be able to help get this done if you would like to work together.

[kaiakz]

Welcome!
In fact, my background is not in web-development 😄 I write walv while learning web-development. I think I am still a newbie and not good at designing web interface 😢
It would be better if a web developer could give me some advice and help.

[excitedbox]

For an example of what I mean you can take a look at the demo for grapeJS. That would be harder to adapt though than to make something new from scratch.

If you check out the dragula JS lib it already has the drag and drop functionality. I would create a layout using a UI framework with a sidebar and a main drop element. In the sidebar you then place a few buttons with on click events to create the widget elements as CSS representations of what they look like in LittleVGL. The widget elements then need a drag and drop behavior and an event to activate a off canvas sidebar that uses a JS form to modify the widget´s CSS styles.

Then when you hit the compile button you launch a JS event or use php to parse through the CSS of all the widget elements and output the code for each widget while filling in the position and color values into a text field and a file for downloading.

Most of the code can already be found in JS libs that are freely available and most of the actual work would be writing the compile code that outputs the C or python and making the CSS versions of the widgets although the Material UI framework etc makes it pretty easy to recreate the widgets with a few settings.

Do you have discord?

[kaiakz]

I am looking for a JS lib to simulate the drag-and-drop & resize action. Like vue-grid-layout, we create a draggable & resizable element beside the origin canvas(LittlevGL). When we modify the element, the LittlevGL widget will be modified automatically as well. But the vue-grid-layout has some limitations: It provides nested draggable element, so we can't drag&drap the element freely.

[kaiakz]

Like this: https://konvajs.org/docs/sandbox/Image_Resize.html. We use a rectangle to represent the origin LittlevGL widget. They should have the same size and position. All changes we make to this rectangle will be reflected on the original widget.

Oh, I found that konva.js meets my needs.

[excitedbox]

Yes that is a great library. The DOM drop example could be used for making the side bar if you change out the pictures for buttons that can be used to create the widgets.

I would create a js variable to store all the color values sizes and positions in and then when creating the C or python code you just have to echo out the variables with the values filled in.

LittleVGL 7.0 is coming out soon and the styles are gonna adopt a more css like system. It only makes sense to design for that since it will be out in 2-3 weeks anyway.

[excitedbox]

The other option for generating the code would be to parse the css style sheet and use php to echo out the code when compiling, Downside to that is that many of the changes made on click are set inline and are not contained in the style sheet so there would need to be a work around.

[kaiakz]

LittleVGL 7.0 is coming out soon and the styles are gonna adopt a more css like system. It only makes sense to design for that since it will be out in 2-3 weeks anyway.

I will create a new branch for LittlevGL 7.0 after rewriting some UI and components.

The other option for generating the code would be to parse the css style sheet and use php to echo out the code when compiling, Downside to that is that many of the changes made on click are set inline and are not contained in the style sheet so there would need to be a work around.

I prefer to do that in the user's browser, so I don't need to maintain a php server. 😄 I think walv works fine in the github page.

[excitedbox]

Yea that is true. I like PHP since I have done mostly php development for the last 15 years. I have a dedicated server too if it was needed but using JS is no problem either and would lower costs if it did become very popular.