Convert Figma logo to code with AI

wjakob logonanogui

Minimalistic GUI library for OpenGL

4,635
603
4,635
114
View on GitHub

Top Related Projects

ocornut's avatar

imgui

59,344

Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies

Immediate-Mode-UI's avatar

Nuklear

9,077

A single-header ANSI C immediate mode cross-platform GUI library

vurtun's avatar

nuklear

13,679

A single-header ANSI C gui library

andlabs's avatar

libui

10,698

Simple and portable (but not inflexible) GUI library in C that uses the native GUI technologies of each platform it supports.

raysan5's avatar

raygui

3,379

A simple and easy-to-use immediate-mode gui library

Quick Overview

NanoGUI is a minimalistic cross-platform GUI library for OpenGL 3.x or higher. It provides a simple and lightweight interface for creating user interfaces in C++ applications, with Python bindings available. NanoGUI is designed to be easy to integrate and use in existing OpenGL applications.

Pros

  • Lightweight and minimalistic, with a small footprint
  • Cross-platform support (Windows, macOS, Linux)
  • Easy integration with existing OpenGL applications
  • Python bindings available for rapid prototyping

Cons

  • Limited widget set compared to more comprehensive GUI libraries
  • Requires OpenGL 3.x or higher, which may not be suitable for all projects
  • Documentation could be more extensive
  • Not as feature-rich as some larger GUI frameworks

Code Examples

  1. Creating a simple window with a button:
#include <nanogui/nanogui.h>

using namespace nanogui;

int main() {
    nanogui::init();
    Screen *screen = new Screen(Vector2i(800, 600), "NanoGUI Test");
    
    Window *window = new Window(screen, "Button Example");
    window->setPosition(Vector2i(15, 15));
    window->setLayout(new GroupLayout());

    Button *button = new Button(window, "Click me");
    button->setCallback([] { std::cout << "Button pressed!" << std::endl; });

    screen->performLayout();
    screen->drawAll();
    screen->setVisible(true);

    nanogui::mainloop();
    nanogui::shutdown();
    return 0;
}
  1. Creating a slider and label:
Slider *slider = new Slider(window);
slider->setValue(0.5f);
slider->setFixedWidth(80);

Label *label = new Label(window, "50%");
slider->setCallback([label](float value) {
    label->setCaption(std::to_string(static_cast<int>(value * 100)) + "%");
});
  1. Adding a color picker:
ColorPicker *cp = new ColorPicker(window, Color(255, 120, 0, 255));
cp->setFixedSize({100, 20});
cp->setCallback([](const Color &c) {
    std::cout << "ColorPicker: ["
              << c.r() << ", "
              << c.g() << ", "
              << c.b() << ", "
              << c.w() << "]" << std::endl;
});

Getting Started

  1. Clone the repository:

    git clone --recursive https://github.com/wjakob/nanogui.git

  2. Build the project:

    cd nanogui
mkdir build
cd build
cmake ..
make

  3. Include NanoGUI in your project:

    #include <nanogui/nanogui.h>

  4. Link against the NanoGUI library and its dependencies (OpenGL, GLFW) when compiling your project.

Competitor Comparisons

ocornut logo

imgui

59,344

Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies

Pros of ImGui

  • Simpler integration and setup process
  • More lightweight and faster rendering
  • Extensive documentation and examples

Cons of ImGui

  • Less visually polished out-of-the-box
  • Fewer built-in widgets and controls
  • Limited styling options without custom implementation

Code Comparison

ImGui:

ImGui::Begin("Demo Window");
ImGui::Text("Hello, world!");
if (ImGui::Button("Click me!"))
    // Handle button click
ImGui::End();

NanoGUI:

Window *window = new Window(screen, "Demo Window");
window->setLayout(new GroupLayout());
new Label(window, "Hello, world!");
Button *button = new Button(window, "Click me!");
button->setCallback([] { /* Handle button click */ });

Key Differences

  • ImGui uses immediate mode GUI, while NanoGUI uses retained mode
  • NanoGUI provides a more object-oriented approach
  • ImGui focuses on simplicity and performance, while NanoGUI offers more advanced styling and layout options
  • NanoGUI includes additional features like Python bindings and OpenGL/GLFW integration

Both libraries have their strengths, with ImGui excelling in simplicity and performance, while NanoGUI offers more robust styling and layout capabilities. The choice between them depends on specific project requirements and developer preferences.

Immediate-Mode-UI logo

Nuklear

9,077

A single-header ANSI C immediate mode cross-platform GUI library

Pros of Nuklear

  • Lightweight and highly portable, supporting multiple backends
  • Fully self-contained with no external dependencies
  • Extensive widget set and customization options

Cons of Nuklear

  • Steeper learning curve due to immediate mode paradigm
  • Less modern look and feel compared to NanoGUI
  • Manual memory management required

Code Comparison

NanoGUI example:

Screen *screen = new Screen(Vector2i(800, 600), "NanoGUI Test");
Window *window = new Window(screen, "Button demo");
window->setPosition(Vector2i(15, 15));
window->setLayout(new GroupLayout());
Button *b = new Button(window, "Push me");
b->setCallback([] { cout << "pushed!" << endl; });
screen->performLayout();

Nuklear example:

struct nk_context ctx;
nk_init_default(&ctx, 0);
if (nk_begin(&ctx, "Demo", nk_rect(50, 50, 200, 200),
    NK_WINDOW_BORDER|NK_WINDOW_MOVABLE|NK_WINDOW_SCALABLE|
    NK_WINDOW_MINIMIZABLE|NK_WINDOW_TITLE))
{
    nk_layout_row_static(&ctx, 30, 80, 1);
    if (nk_button_label(&ctx, "button"))
        fprintf(stdout, "button pressed\n");
}
nk_end(&ctx);
vurtun logo

nuklear

13,679

A single-header ANSI C gui library

Pros of Nuklear

  • Single-header library, making it easy to integrate into projects
  • Highly portable, supporting a wide range of platforms and rendering backends
  • Minimal dependencies, allowing for lightweight integration

Cons of Nuklear

  • Less polished and modern-looking UI compared to NanoGUI
  • Steeper learning curve due to its low-level nature
  • Limited built-in theming options

Code Comparison

Nuklear:

struct nk_context ctx;
nk_init_default(&ctx, 0);
if (nk_begin(&ctx, "Demo", nk_rect(50, 50, 200, 200), NK_WINDOW_BORDER|NK_WINDOW_MOVABLE|NK_WINDOW_SCALABLE|NK_WINDOW_MINIMIZABLE|NK_WINDOW_TITLE)) {
    nk_layout_row_dynamic(&ctx, 30, 1);
    if (nk_button_label(&ctx, "Button")) {
        // Button clicked
    }
}
nk_end(&ctx);

NanoGUI:

Screen *screen = new Screen(Vector2i(800, 600), "NanoGUI Test");
Window *window = new Window(screen, "Button Demo");
window->setPosition(Vector2i(15, 15));
window->setLayout(new GroupLayout());
Button *button = new Button(window, "Push me");
button->setCallback([] { cout << "pushed!" << endl; });
screen->performLayout();
andlabs logo

libui

10,698

Simple and portable (but not inflexible) GUI library in C that uses the native GUI technologies of each platform it supports.

Pros of libui

  • Native look and feel across platforms (Windows, macOS, Linux)
  • Lightweight and minimal dependencies
  • Simple C API, easily bindable to other languages

Cons of libui

  • Limited widget set compared to more comprehensive GUI frameworks
  • Less customization options for styling and appearance
  • Slower development pace and smaller community

Code Comparison

libui:

uiInit(NULL);
uiWindow *window = uiNewWindow("Hello", 300, 200, 0);
uiButton *button = uiNewButton("Click Me");
uiWindowSetChild(window, uiControl(button));
uiControlShow(uiControl(window));
uiMain();

nanogui:

nanogui::init();
Screen *screen = new Screen(Vector2i(300, 200), "Hello");
Button *button = new Button(screen, "Click Me");
screen->performLayout();
screen->drawAll();
nanogui::mainloop();

Key Differences

  • libui focuses on native widgets, while nanogui provides a custom rendering approach
  • nanogui offers more advanced graphics capabilities and OpenGL integration
  • libui has a C API, whereas nanogui uses C++
  • nanogui includes additional features like layout managers and themes

Both libraries aim to provide simple GUI creation, but they cater to different use cases and preferences in terms of appearance, functionality, and programming paradigms.

raysan5 logo

raygui

3,379

A simple and easy-to-use immediate-mode gui library

Pros of raygui

  • Lightweight and simple, with minimal dependencies
  • Designed specifically for game development and real-time applications
  • Extensive documentation and examples provided

Cons of raygui

  • Less feature-rich compared to nanogui
  • Limited cross-platform support (primarily focused on desktop platforms)

Code Comparison

raygui:

GuiButton((Rectangle){ 25, 25, 125, 30 }, "Button");
GuiSlider((Rectangle){ 25, 65, 125, 30 }, "Slider", &value, 0, 100);
GuiCheckBox((Rectangle){ 25, 105, 125, 30 }, "CheckBox", &checked);

nanogui:

Button *b = new Button(window, "Button");
Slider *s = new Slider(window);
s->setValue(0.5f);
CheckBox *c = new CheckBox(window, "CheckBox");

Summary

raygui is a lightweight GUI library tailored for game development, offering simplicity and ease of use. It provides extensive documentation but has limited cross-platform support. nanogui, on the other hand, offers more features and better cross-platform compatibility but may be more complex to use. The choice between the two depends on the specific requirements of your project and your preferred programming language (C for raygui, C++ for nanogui).

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

NanoGUI

|docs| |travis| |appveyor|

.. |docs| image:: https://readthedocs.org/projects/nanogui/badge/?version=latest :target: http://nanogui.readthedocs.org/en/latest/?badge=latest :alt: Docs

.. |travis| image:: https://travis-ci.org/wjakob/nanogui.svg?branch=master :target: https://travis-ci.org/wjakob/nanogui :alt: Travis Build Status

.. |appveyor| image:: https://ci.appveyor.com/api/projects/status/m8h3uyvdb4ej2i02/branch/master?svg=true :target: https://ci.appveyor.com/project/wjakob/nanogui/branch/master :alt: Appveyor Build Status

.. begin_brief_description

NanoGUI is a minimalistic cross-platform widget library for OpenGL 3.x or higher. 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_.

Note: this repository is currently in maintenance-only mode. A new and significantly modernized/refactored version of NanoGUI with features such as Metal/GLES/WebAssembly support is available here <https://github.com/mitsuba-renderer/nanogui>_.

.. _NanoVG: https://github.com/memononen/NanoVG .. _pybind11: https://github.com/wjakob/pybind11

.. end_brief_description

  • Documentation <https://nanogui.readthedocs.io>_

.. contents:: Contents :local: :backlinks: none

Example screenshot

.. image:: https://github.com/wjakob/nanogui/raw/master/resources/screenshot.png :alt: Screenshot of Example 1. :align: center

Description

.. begin_long_description

NanoGUI builds on GLFW_ for cross-platform OpenGL context creation and event handling, GLAD_ to use OpenGL 3.x or higher Windows, Eigen_ for basic vector types, 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.

.. _GLFW: http://www.glfw.org/ .. _GLAD: https://github.com/Dav1dde/glad .. _Eigen: http://eigen.tuxfamily.org/index.php?title=Main_Page

.. end_long_description

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.

.. code-block:: cpp

Button *b = new Button(window, "Plain button"); b->setCallback([] { 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).

.. code-block:: cpp

/* 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))); });

The Python version of this same piece of code looks like this:

.. code-block:: py

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.

.. image:: https://github.com/wjakob/nanogui/raw/master/resources/screenshot2.png :alt: Screenshot :align: center

.. code-block:: cpp

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

.. code-block:: bash

$ apt-get install cmake xorg-dev libglu1-mesa-dev

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

.. code-block:: bash

$ apt-get install python-dev

On RedHat/Fedora, make sure that you have installed the following packages

.. code-block:: bash

$ 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

.. code-block:: bash

$ sudo dnf install python3-devel

License

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

.. _LICENSE: https://github.com/wjakob/nanogui/blob/master/LICENSE.txt

NanoGUI uses Daniel Bruce's Entypo+ <http://www.entypo.com/>_ font for the icons used on various widgets. This work is licensed under a CC BY-SA 4.0 <https://creativecommons.org/licenses/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.

.. end_license