Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qdsang/lv_gui_builder
Drag end drop GUI designer for LVGL Creator editor
https://github.com/qdsang/lv_gui_builder
builder creator editor gui lvgl visualization vue
Last synced: 5 days ago
JSON representation
Drag end drop GUI designer for LVGL Creator editor
- Host: GitHub
- URL: https://github.com/qdsang/lv_gui_builder
- Owner: qdsang
- License: other
- Created: 2024-05-23T12:16:38.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-13T05:29:55.000Z (14 days ago)
- Last Synced: 2025-01-15T12:59:23.933Z (12 days ago)
- Topics: builder, creator, editor, gui, lvgl, visualization, vue
- Language: JavaScript
- Homepage: https://qdsang.github.io/lv_gui_builder/
- Size: 7.49 MB
- Stars: 99
- Watchers: 8
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lvgl gui builder
[WIP] Drag end drop GUI designer for LVGL
## Demo
## Try It Online
https://qdsang.github.io/lv_gui_builder/
## 🚀 Development
```bash
# configure
1. installation of the recommended plugins in the .vscode directory
2. node version 18.x or 20+
3. npm version 8.x or latest
# clone
git clone xxx
# enter the project directory
cd lv_gui_builder
# install dependencies
npm i
# start the service
npm run serve
```
## ✔️ Preview
```bash
# stage environment
npm run preview
open http://localhost:5173/#/editor2
```
## TODO
v1
- [x] Emulator
- [x] Code refactoring
- [x] Property management
- [x] Component list
- [x] Component addition
- [x] Component duplication
- [x] Modify ID
- [x] Component property styles
- [ ] Align
- [X] Component sorting (zindex)
- [X] Component size drag
- [ ] Style grouping
- [ ] Generate C
- [!] Shortcuts
- [!] Window Layout [golden-layout](https://golden-layout.com/) [vue-grid-layout](https://jbaysolutions.github.io/vue-grid-layout/guide/04-allow-ignore.html)
v2
- [X] Project settings
- [ ] Events
- [ ] Font library https://lvgl.io/tools/font_conv_v5_3
- [ ] Image library https://lvgl.io/tools/imageconverter_v9
- [ ] Color library
- [x] Animation library
- [ ] i18n
v3
- [ ] VSCode Extension https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample
- [ ] Low Code
- [ ] LVGL Version Manager
## Reference
- https://github.com/kaiakz/lv_gui_designer
- https://github.com/kaiakz/walv/tree/master
- https://forum.littlevgl.com/t/wysiwyg-editor-for-littlevgl/642
- https://github.com/rohmer/LVGL_UI_Creator
- https://github.com/CURTLab/LVGLBuilder
- https://github.com/lvgl/lv_gui_builder
- https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html
- https://github.com/nishad2m8/T-Display-S3-YT/tree/master
- https://github.com/peterhinch/micropython-font-to-py/blob/master/font_to_py.py
## Contribution
Please make sure to read the [Contributing Guide](https://github.com/vuejs/core/blob/main/.github/contributing.md) before making a pull request.
Thank you to all the people who already contributed to Builder!
## Star History
[](https://star-history.com/#qdsang/lv_gui_builder&Date)
## License
[MIT](https://opensource.org/licenses/MIT)