NAUI - a UI framework for rendering engines

Announce new projects or updates of Irrlicht Engine related tools, games, and applications.
Also check the Wiki
Post Reply
chronologicaldot
Competition winner
Posts: 709
Joined: Mon Sep 10, 2012 8:51 am

NAUI - a UI framework for rendering engines

Post by chronologicaldot »

I've been hard at work lately creating a UI framework that can be strapped onto any 3D engine you prefer, and of course, the very first one I bridged to is Irrlicht, which was quite easy.

Image
https://www.pasteboard.co/kq06mZhDps32.png
(Note to self: This image is set to expire Oct 7, so I'll have to find another more permanent image dump later, or link to an image on a Github page.)

Current Features:
- Elements: Panel, Button, Image display, Text box, Windows, Contextual (basis of ContextMenu), ContextMenu, Dropdown Menu, ScrollBar, ScrollPane, DualArea.
- Elements have a transform for position, rotation, and scaling, with rotation being at 90-degree angles (for speed and simplicity), and an element's transform is relative to its parent's transform
- Elements can have rounded corners, borders, and some have multiple colors depending on their state
- All element features can be optionally set using a Style object passed to Element::style(). This is alot like deserializeAttributes() in Irrlicht but easier.
- Layouts can be used to control how child elements are placed and size - including layouts Flow (sequential), Grid, Pin (closest to Irrlicht's), and Stretch.
- Copy, Cut, and Paste from any element using keyboard shortcuts.
- OS mouse visual changes for various situations (like resizing windows, editing text, etc).
- Optional receiving of user input events from SDL3 with very little effort to include the feature. SDL3 is optional, and you could use Irrlicht for events if you wanted, but that will require converting from Irrlicht events to NAUI events.
- Font rendering includes bridge to Harfbuzz and Freetype (which makes for the pretty text you see in the sample image), which completes support for text-shaping (and no more ugly box fonts)
- Supports Text Input events, received via SDL3 (or manually, if you dare), which allows for input from Linux Anthy, Windows IME, and similar services.
- Callbacks for many things accept lambda functions, like Button::onClick(), Element::onHover(), and Button::onPressed().

TextBox special features:
- UTF-8 encoded text, UTF-32 done transparently for editing
- Text can be oriented left-to-right, right-to-left, top-down, and bottom-up
- Text orientation can be automatically detected from bcp language setting
- Selection of multiple-characters over multiple lines supported, with keyboard commands for controlling selection, AND selection works regardless of orientation
- Via FreeType2, support for text of any language is possible.
(Currently, only one font with one specification (e.g. bold, weight=100, size=14) is possible per TextBox. I plan to add RichTextBox later, but that's going to be alot more work.

Limitations:
- C++17 only
- Harfbuzz, Freetype, and Irrlicht must be installed separately and prior. (SDL3 code is already included)

Bonus:
- An naui::IrrApp class is included that does most of the setup work for you, so all you have to do for setup is tell it the app window size, which fonts to load, and where the icons directory is.

Comments:
My sample tests ran faster than the comparable Irrlicht versions, albeit this was done in the earlier stages of development and by manually transforming elements rather than using a layout, which could be slower.
Layouts make building a UI significantly smoother than Irrlicht. While Irrlicht was "fast" if you knew the exact dimensions, much of building a UI in Irrlicht involves doing math to position the next element. Layouts eliminate the need for any math on your part.

There are some things not very intuitive:
Some functions for setting element values must be called before others, otherwise the rendering features won't be properly set. These are properly handled if you set an element using Element::style(), but the other functions may not be intuitive.

There are things you will miss from Irrlicht: namely, simplicity
Elements require setting a transform and a bounding box, whereas Irrlicht was just a bounding box.
Creating new elements is a tricky task, which can be simple in one sense but requires checking the right boxes and overriding the correct functions to complete.

There are defects:
Trying to copy from an element (like a text box) only initiates the copy process, so if you delete this element and try to paste the contents elsewhere, you will probably crash the application. I haven't tried this, but I'm positive it'll happen. The only fix I can see is replacing the std::shared_ptr usages for storing elements with a reference-counting system like Irrlicht.

There are wont-fixes:
I noticed Irrlicht with OpenGL lags on my computer on certain things, like resizing the window, using either the native Irrlicht GUI or NAUI, which is annoying.
CuteAlien
Admin
Posts: 10057
Joined: Mon Mar 06, 2006 2:25 pm
Location: Tübingen, Germany
Contact:

Re: NAUI - a UI framework for rendering engines

Post by CuteAlien »

Nice, will it be open source?
IRC: #irrlicht on irc.libera.chat
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
chronologicaldot
Competition winner
Posts: 709
Joined: Mon Sep 10, 2012 8:51 am

Re: NAUI - a UI framework for rendering engines

Post by chronologicaldot »

CuteAlien wrote: Sat Jul 18, 2026 10:13 pm Nice, will it be open source?
I'm planning on an LGPL2 license, something you can link to in commercial apps but the main library would remain free software.
chronologicaldot
Competition winner
Posts: 709
Joined: Mon Sep 10, 2012 8:51 am

Re: NAUI - a UI framework for rendering engines

Post by chronologicaldot »

This project is coming along. I'm starting to use it for a *real* project, and it's amazing how many bugs and shortcomings pop out of the woodwork when you do that.
I've added new elements, including:
- ColorSelector, ColorHistory, and related Color selecting UI elements. Even has the classic checkered bg for alpha channels.
- PenTester. NAUI supports pen tablet inputs, so I found it useful to create and include a UI element that displays all the pen info that SDL would provide. Makes for easy testing.
- FileSelector and FileSelectorWindow (Window with FileSelector), which can select files, create folders, and delete files. FileSelector can even load virtual directories (which also was useful for debugging). It can sort files by name and date modified, show/hide "invisible" files (Linux . files), and open directories by double-click or select regular files by double click.
There are also some nice pretty icons.
Image

Fixes:
I did end up replacing std::shared_ptr with my own reference-counting pointer system. It works much better. I also had to ditch things like std::vector for a custom linked list because of the way my ref-counting system works. Oh well. So much for using the standard library...

Correction on my first post:
- Layouts don't "eliminate" math, but they do greatly reduce it.
- By "creating new elements", I meant inheriting from Element to make a custom one. If you just build "from the outside" using the add-Some-Element methods and use setBounds() or style(), it's actually fairly straightforward to make a UI for your app.
Post Reply