NanoGUI is a minimalistic cross-platform widget library for OpenGL 3.x/DirectX11[12]/Vulkan. It supports automatic layout generation, stateful C++11 lambdas callbacks, a variety of useful widget types and Retina-capable rendering on Apple devices thanks to NanoVG by Mikko Mononen. Python bindings of all functionality are provided using pybind11.
Contents
Editor
DropdownBox
NanoGUI builds on GLFW/Win32 native (dx11/12) for cross-platform context creation and event handling, and NanoVG to draw 2D primitives.
Note that the dependency library NanoVG already includes some basic example code to draw good-looking static widgets; what NanoGUI does is to flesh it out into a complete GUI toolkit with event handling, layout generation, etc.
NanoGUI currently works on Mac OS X (Clang) Linux (GCC or Clang) and Windows (Visual Studio ≥ 2015); it requires a recent C++11 capable compiler. All dependencies are jointly built using a CMake-based build system.
NanoGUI makes it easy to instantiate widgets, set layout constraints, and register event callbacks using high-level C++11 code. For instance, the following two lines from the included example application add a new button to an existing window window and register an event callback.
Button *b = new Button(window, "Plain button");
b->setCallback([] { cout << "pushed!" << endl; });
//or declarative syntax
elm::Button{ Caption{ "Plain button"},
ButtonCallback{[] { cout << "pushed!" << endl; }}
};The following lines from the example application create the coupled slider and text box on the bottom of the second window (see the screenshot).
/* Create an empty panel with a horizontal layout */
Widget *panel = new Widget(window);
panel->setLayout(new BoxLayout(BoxLayout::Horizontal, BoxLayout::Middle, 0, 20));
/* Add a slider and set defaults */
Slider *slider = new Slider(panel);
slider->setValue(0.5f);
slider->setFixedWidth(80);
/* Add a textbox and set defaults */
TextBox *textBox = new TextBox(panel);
textBox->setFixedSize(Vector2i(60, 25));
textBox->setValue("50");
textBox->setUnits("%");
/* Propagate slider changes to the text box */
slider->setCallback([textBox](float value) {
textBox->setValue(std::to_string((int) (value * 100)));
});
//or declarative syntax
/* Create an empty panel with a horizontal layout */
elm::Widget{
WidgetBoxLayout{ BoxLayout::Horizontal, BoxLayout::Middle, 0, 20 },
Children{},
elm::Slider{ InitialValue{0.5f}, FixedWidth{80},
SliderCallback{ [&](float value) {
if (auto t = TextBox::find("#tbx")
t.setValue(std::to_string(value * 100);
}}
},
elm::TextBox{ FixedSize{60, 25}, TextValue{"50"},
UnitsText{"%"}, WidgetId{ "#tbx" }
}
}
/* Propagate slider changes to the text box */The Python version of this same piece of code looks like this:
# Create an empty panel with a horizontal layout
panel = Widget(window)
panel.setLayout(BoxLayout(BoxLayout.Horizontal, BoxLayout.Middle, 0, 20))
# Add a slider and set defaults
slider = Slider(panel)
slider.setValue(0.5f)
slider.setFixedWidth(80)
# Add a textbox and set defaults
textBox = TextBox(panel)
textBox.setFixedSize(Vector2i(60, 25))
textBox.setValue("50")
textBox.setUnits("%")
# Propagate slider changes to the text box
def cb(value):
textBox.setValue("%i" % int(value * 100))
slider.setCallback(cb)Christian Schüller contributed a convenience class that makes it possible to create AntTweakBar-style variable manipulators using just a few lines of code. For instance, the source code below was used to create the following example application.
/// dvar, bar, strvar, etc. are double/bool/string/.. variables
FormHelper *gui = new FormHelper(screen);
ref<Window> window = gui->addWindow(Eigen::Vector2i(10, 10), "Form helper example");
gui->addGroup("Basic types");
gui->addVariable("bool", bvar);
gui->addVariable("string", strvar);
gui->addGroup("Validating fields");
gui->addVariable("int", ivar);
gui->addVariable("float", fvar);
gui->addVariable("double", dvar);
gui->addGroup("Complex types");
gui->addVariable("Enumeration", enumval, enabled)
->setItems({"Item 1", "Item 2", "Item 3"});
gui->addVariable("Color", colval);
gui->addGroup("Other widgets");
gui->addButton("A button", [](){ std::cout << "Button pressed." << std::endl; });
screen->setVisible(true);
screen->performLayout();
window->center();Clone the repository and all dependencies (with git clone --recursive),
run CMake to generate Makefiles or CMake/Visual Studio project files, and
the rest should just work automatically.
On Debian/Ubuntu, make sure that you have installed the following packages
$ apt-get install cmake xorg-dev libglu1-mesa-devTo also get the Python bindings, you'll need to run
$ apt-get install python-devOn RedHat/Fedora, make sure that you have installed the following packages
$ sudo dnf install cmake mesa-libGLU-devel libXi-devel libXcursor-devel libXinerama-devel libXrandr-devel xorg-x11-server-develTo also get the Python bindings, you'll need to run
$ sudo dnf install python3-develTo build editor, you will need to run
$ mkdir build && cd build && cmake -DNANOGUI_USE_GLAD=ON .. && make editorNanoGUI is provided under a BSD-style license that can be found in the LICENSE file. By using, distributing, or contributing to this project, you agree to the terms and conditions of this license.
NanoGUI uses Daniel Bruce's Entypo+ font for the icons used on various widgets. This work is licensed under a CC BY-SA 4.0 license. Commercial entities using NanoGUI should consult the proper legal counsel for how to best adhere to the attribution clause of the license.