Hello,
to create multiple user interfaces for my machine learning project, either random or via design files, I have created a UI generator.
This generator is used in my project to synthesize user interfaces to train a machine learning model on classification of LVGL widget types and also localization of them via bounding boxes.
It is still a large work-in-progress, but I thought I might share it here for people to see. Specifically the UiLoader class might come in handy, if you want to quickly draft up a UI design using JSON.
This is by no means perfect or even good at all, it is just something I built to synthesize somewhat realistic designs/layouts in a simplified manner.
It is also solely focused on the visual aspect, as nothing functional is needed for me to create a screenshot.
Here is the generator project:
(It only runs via the linux port of lv_micropython and I also do not intend to support more)
The random mode using the RandomUI class is still a work in progress. It can only place widgets randomly using absolute values and doesn’t randomize style properties (i.e. colors, sizes, etc.).
I might update this post at some point if it has gotten better.
Here are a few screenshots of what it created:
(Sources for them are in the designs folder, but I was too lazy to label the images on which is which)
Also as a note:
Yes, I did create most of these JSON files by instructing ChatGPT. That AI might be able to use what I’ve built here, but it certainly isn’t a great designer.
If I wrote them myself, they’d probably be more refined looking, but I didn’t have that much time to play around as I need to focus on the ML aspect of my project.
The following widget types are currently implemented for the UiLoader (JSON):
- arc
- bar
- button
- buttonmatrix
- calendar
- checkbox
- dropdown
- label
- led
- roller
- scale
- slider
- spinbox
- switch
- table
- textarea (not quite refined yet)
I can’t really provide instructions on how to use it, my time is currently quite limited, but I might in the future.
In general, styles are applied via the set functions, and you’ll need to use the correct property name (i.e. the same way it is written as the name of the function)
Also, you can only apply one style per widget, but I might make that a list in the future, seems like an easy fix.
Not all properties are properly supported yet and there’s a bit of special handling involved (for example, to parse the hex color from the string, which only works if the property contains the word ‘color’)
For the options of specific widgets, I’d recommend you to check out the corresponding “create_” function which will read the element of said widget.
That’s all I can say for now, it is quite a raw project to say the least, so do not expect much from it.
If you are curious about my ML project - here is the root of my evil:
