kaiakz / walv

[WIP] A LittlevGL-GUI designer on your browser

walv

An Online, WYSIWYG GUI designer for LittlevGL. Cross-platform supported(Even Android and IOS).

Try it online!

Make sure your browser is the latest version(Chrome, Firefox and Safari).

Usage

You need a browser firstly(Recommends PC with 1920x1080), and then visit the github page or just run an HTTP server(python -m http.server) that serves files from this directory.

Create

1. Click a node of the treeview in the left(as the parent), for example, screen.
2. Choose which widget you want, and then click the +.

Generat && Export the final code

1. Click the Generate button to generate the source code, you can preview and edit the code in Code Editor. (You need to re-generate after modifying the widget)
2. Click the Export button, you can download the code in Code Editor.

Feature

• WYSIWYG, MVVM(attribute).
• Just a static web app, you need to use it with the latest browser(FireFox, Chrome...even IOS Safari).
• Drag and drop to control the postion of the widget.
• Choose an object as the parent, and then create children on it.
• Set attribute(postion, size, click, etc).
• Style Editor(initial, now for text only).
• Screenshot.
• Code Preview.
• Highlight(initial).
• TFT_simulator can be customized(size), supports mutiple windows.(To do)
• Animation Editor(planning).
• Save and load project. The tool will save your project automatically, and could restore your work from the last closed window.
• Generate C and MicroPython code: includes GUI and Callback.

Architecture

• A static webpage built with lv_micropython(WASM) and front-end component library, so walv won't send your data to the server.
• WASM part provides a Simulator.
• The front-end component library provides a way to control Simulator: create,delete or modify a widget. Include attribute editor, style editor and animation editor.
• Generate final code by javascript, Use Blob to save file.
• Continue your work in last closed window: By IndexedDB.

How does it work?

• lv_micropython has some JavaScript API: mp_js_do_str()(lv_micropython will excute the parameter, just like eval() in Python or JavaScript)
• walv wraps some commonly used functions(see Getter & Setter), called template.
• walv provides a layer over the lv_micropython, it can generate some real functions by template, and then send those functions to lv_micropython by mp_js_do_str. For example, if the user want to change the X of the btn0 to 88 , walv will use the template (id.set_x(integer)) to generate the btn0.set_x(88), and then send it to lv_micropython by mp_js_do_str("btn0.set_x(88)").

Alibaba Summer of Code 2019 : AliOS-Things

Old : lv_gui_designer