ugui

ugui? μgui? micro-gui?

Cross-platform C++ SVG-based GUI library, used by Write for iOS, Android, Windows, macOS, and Linux. For a demo, try the wasm version of Write at styluslabs.com/write.

Why consider choosing ugui?

• fully scalable vector GUI
• appearance is defined by SVG and CSS, including dynamic CSS styling
• delegation of rendering, tree management, etc. to almost-standard SVG library makes GUI code simpler and more hackable
• implementation of basic widgets is compact and completely independent of appearance
• serialization of GUI to SVG assists debugging and presents opportunities for automated testing
• retained-mode GUI with dirty rectangle/damage support instead of immediate-mode GUI (IMGUI) - only changed portion of window is redrawn
• lightweight: x64 Linux executable for sample app, depending only on libsdl2, is about 1 MB including uncompressed resources and font. About 3500 SLOC in ugui.

Originally written for SDL2, but can be used with GLFW (via glfwSDL.c) or directly with native API (see, e.g., winmain.cpp in Ascend Maps). In the future, direct platform support will be added to ugui.

Example

On Linux, clone Write, apt install libsdl2-dev, then cd ugui && make to generate Release/uguitest. For other platforms, first build the example app for nanovgXC as described in the nanovgXC README to get makefile and SDL set up properly.

In the app, press Print Screen to write the GUI as SVG to debug_layout.svg, press F12 to toggle showing dirty rectangle (red) and layout rectangle (green), and press Esc to exit.

Layout

layout.h from the layout library, based on oui-blendish, is used for calculating layout. Potential alternatives include flex, yoga, and clay.

Supported layout attributes:

• margin / margin-left -top -right -bottom:
• layout = box | flex
• box-anchor = ( (left | right | hfill) (top | bottom | vfill) ) | fill
• flex-direction = row | column | row-reverse | column-reverse
• justify-content = flex-start | flex-end | center | space-between
• flex-wrap = nowrap | wrap

Files

• svggui.cpp - core UI logic (SvgGui class) and components (Widget and Window classes)
• widgets.cpp - basic GUI widgets (button, menu, combo box, scroll area, etc.)
• textedit.cpp - text editing widgets
• colorwidgets.cpp - color picking/editing widgets
• theme.cpp - SVG and CSS for default theme
• svggui_sdl.h - header for using ugui without SDL

Dependencies

• https://github.com/styluslabs/usvg
• stb_textedit for the text box widget
• https://github.com/randrew/layout for layout