kaiakz / lv_gui_designer

[Pause maintenance, my new related tool - walv]A drag-and-drop, simple LittlevGL-GUI designer built with LittlevGL

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

lv_gui_designer

New Project WALV. An online tool.

Alibaba Summer of Code 2019 : For AliOS-Things

image

What is lv_gui_designer?

lv_gui_designer is a drag-and-drop, simple GUI designer built with LittlevGL, and is based on pc_simulator_sdl_eclipse. Its interface is built with LittlevGL.

Feature

  • Create object based on an object, Parent-child structure(In test, now if you want to create a obj, you need to choose a parent in layerview).
  • Drag and drop to control the postion of the widget.
  • TFT_simulator can be customized(size), supports mutiple windows.(To do)
  • Modfied attribute(postion, size, click, etc) and style. (Doing)
  • Save project in XML format, project can be loaded as live-demo.
  • XML can be converted to C and Python: includes GUI and Callback. Just add a function lv_gui_main to your code.(Doing)

Screenshot

Select a parent for a widget: image Load XML File to live-demo(Beta), try to write some tags <CONTAINER><BTN><LABEL><ARC><DDLIST>, etcto design your GUI: image

How it works?

lv_gui_designer is very dependent on LittlevGL v6.0:

  • USE EVENT
  • Three parts: Creator, Simulator, Setting, just three lv_win object.
  • Creator: Select what widget you want to create at Simulator, and the widget will enable "drag" (lv_obj_set_drag & lv_obj_set_drag_parent), so we can drag-and-drop it.
  • Simulator: Only its child can be drag-and-drop, its grandchild is not a drag-able widget, for example, there are a Button on the Simulator with a Label, due to Button is a auto-align Container, Label will be sticked to Button's centre. Every widget on there has a callback function to transport some information to Settting.
  • Setting: Select a widget on Simulator by LayerView, we can create a new son-widget on it and change its attribute, style, animation, we can delete it.

Get Start

Prerequreies SDL & Mini-XML

  • Git clone the project.
  • cd into the folder, and make (Linux is fine)
  • run ./lv_gui_designer

About

[Pause maintenance, my new related tool - walv]A drag-and-drop, simple LittlevGL-GUI designer built with LittlevGL

License:Apache License 2.0


Languages

Language:C 99.5%Language:C++ 0.4%Language:Makefile 0.1%Language:Python 0.0%Language:Shell 0.0%Language:CMake 0.0%