NanoGUI is a minimalistic cross-platform widget library for OpenGL 3.x/DirectX11[12]/Vulkan

Related tags

GUI nanogui
Overview

NanoGUI

Docs Travis Build Status Appveyor Build Status Discord channel

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.

Example screenshots (Dx11, Dx12, Vulkan, OpenGL)

Screenshot of Dx11 backend.

Honsu timetracker

Screenshot of OpenGL backend.

Extensions

Editor

https://github.com/dalerank/nanogui/raw/master/resources/editor.jpg

DropdownBox

https://github.com/dalerank/nanogui/raw/master/resources/dropdownbox.gif

Description

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.

Creating widgets

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.

setCallback([] { cout << "pushed!" << endl; }); //or declarative syntax elm::Button{ Caption{ "Plain button"}, ButtonCallback{[] { cout << "pushed!" << endl; }} };">
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).

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 */">
/* 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)

"Simple mode"

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.

Screenshot

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();">
/// dvar, bar, strvar, etc. are double/bool/string/.. variables

FormHelper *gui = new FormHelper(screen);
ref
    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();
  

Compiling

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-dev

To also get the Python bindings, you'll need to run

$ apt-get install python-dev

On 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-devel

To also get the Python bindings, you'll need to run

$ sudo dnf install python3-devel

To build editor, you will need to run

$ mkdir build && cd build && cmake -DNANOGUI_USE_GLAD=ON .. && make editor

License

NanoGUI 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.

Comments
  • Build crashes on windows x64 in common.cpp

    Build crashes on windows x64 in common.cpp

    Hello, when I run example1.cpp right now, it crashes when getting the cFileName variable. The FirstFindFileA() function seems to be the cause of this since it's returning an incorrect value.

    Capture

    Please let me know if you are aware of this issue and/or if you will be providing a fix soon.

    *Edit - Using Vulkan backend.

    Thanks, Andrew

    opened by Andy608 4
  • collapsed window still blocks those below it

    collapsed window still blocks those below it

    VS2017, DX12

    Example1

    If I collapse a window for example the Tree View and try to click on something that it covered it does not work. If I move the collapsed window bar around the problem follows it as if it was visible.

    opened by RallyTronics 1
  • Fix synchronization issues and clean validation

    Fix synchronization issues and clean validation

    This PR fixes the display error shown on reddit and also cleans up validation.

    I have added the following things:

    • Proper final layout for presenting the image
    • Keep depth buffer contents
    • Properly transition render texture to shader read layout
    opened by SaschaWillems 1
  • What is the status of this library?

    What is the status of this library?

    What is the status of this library? Is it abandoned? This one has Vulkan support; the other does not: https://github.com/mitsuba-renderer/nanogui

    If it's not abandoned, is there plan to maintain it for the future?

    Thanks

    opened by gamagan 1
  • Buttons animation speed is bound with FPS

    Buttons animation speed is bound with FPS

    According to the application: example1

    sample

    As you can see, to increase FPS you have to move your mouse... increased FPS leads to increased speed of animations

    opened by akuskis 0
Releases(v0.0.5)
Owner
dalerank
dalerank
Minimalistic GUI library for OpenGL

NanoGUI NanoGUI is a minimalistic cross-platform widget library for OpenGL 3.x or higher. It supports automatic layout generation, stateful C++11 lamb

Wenzel Jakob 4.1k Oct 5, 2022
A tiny cross-platform webview library for C/C++/Golang to build modern cross-platform GUIs.

webview for golang and c/c++ A tiny cross-platform webview library for C/C++/Golang to build modern cross-platform GUIs. The goal of the project is to

polevpn 18 Sep 26, 2022
HastyBadger is a branch of the excellent widget and GUI library Turbo Badger.

Branch Notice - HastyBadger Hasty is not Turbo. HastyBadger is a branch of the excellent widget and GUI library Turbo Badger. Notabe additions are c++

Michael Tesch 37 Aug 18, 2022
AttoUI – minimalistic C UI toolkit for Wayland

AttoUI – minimalistic UI toolkit for Wayland AttoUI is library that makes creating GUI programs for Wayland in C as simple and bloatless as it can. Th

MasFlam 5 Jan 8, 2022
A single-header ANSI C immediate mode cross-platform GUI library

Nuklear This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed a

Immediate Mode UIs, Nuklear, etc. 6.1k Sep 28, 2022
A library for creating native cross-platform GUI apps

Yue A library for creating native cross-platform GUI apps. Getting started Documentations FAQ Development Examples Sample apps (with screenshots) Muba

Yue 2.8k Oct 2, 2022
Cross-platform malware development library for anti-analysis techniques

The Anti-Analysis Menagerie Cross-platform malware development library for anti-analysis techniques. Design Goals Provide a rich and convenient interf

Alan 21 Sep 16, 2022
Open Source, cross platform C++ library providing integration of VulkanSceneGraph with Qt windowing

Open Source, cross platform C++ library providing integration of VulkanSceneGraph with Qt windowing. Supports Windows, Linux and macOS.

Vulkan made easy 13 Sep 24, 2022
Cross-platform GUI library

Harbour Nuklear backend This backend provides support for Nuklear. It works on on all supported platforms with an OpenGL backend, including iOS and An

Rafał Jopek 2 Jan 19, 2022
Tiny cross-platform webview library for C/C++/Golang. Uses WebKit (Gtk/Cocoa) and Edge (Windows)

A tiny cross-platform webview library for C/C++/Golang to build modern cross-platform GUIs. Also, there are Rust bindings, Python bindings, Nim bindings, Haskell, C# bindings and Java bindings available.

webview 10.5k Sep 30, 2022
Low Latency GUI on top of Vulkan

Low Latency GUI on top of Vulkan

the ttauri project 392 Oct 2, 2022
Purely native C++ cross-platform GUI framework for Android and iOS development. https://www.boden.io

BODEN CROSS-PLATFORM FRAMEWORK Build purely native cross-platform experiences with Boden Website ⬡ Getting Started ⬡ API Reference ⬡ Guides ⬡ Twitter

Ashampoo Systems GmbH & Co KG 1.5k Sep 27, 2022
DeskGap is a framework for building cross-platform desktop apps with web technologies (JavaScript, HTML and CSS).

A cross-platform desktop app framework based on Node.js and the system webview

Wang, Chi 1.8k Sep 18, 2022
Taitank is a cross platform lightweight flex layout engine implemented in C++.

Taitank is a cross platform lightweight flex layout engine implemented in C++.

Tencent 432 Sep 27, 2022
U++ is a C++ cross-platform rapid application development framework focused on programmer's productivity. It includes a set of libraries (GUI, SQL, Network etc.), and integrated development environment (TheIDE).

Ultimate++ Ultimate++ is a C++ cross-platform rapid application development framework focused on programmers productivity. It includes a set of librar

Ultimate++ 503 Sep 28, 2022
A cross-platform GUI for jzIntv

jzIntvImGui Welcome to jzIntvImGui! It's an all-in-one powerful Dear ImGui interface which allows you to manage your collection of Intellivision games

null 6 Sep 16, 2022
Cross platform C++ libraries

CopperSpice Introduction CopperSpice is a set of individual libraries which can be used to develop cross platform software applications in C++. It is

CopperSpice 812 Sep 27, 2022
Yoga is a cross-platform layout engine which implements Flexbox

Yoga Building Yoga builds with buck. Make sure you install buck before contributing to Yoga. Yoga's main implementation is in C++, with bindings to su

Meta 15.6k Oct 3, 2022
Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS.

?? Available Translations: ???? ???? ???? ???? ???? ???? ???? ???? . View these docs in other languages at electron/i18n. The Electron framework lets

Electron 103.9k Sep 30, 2022