ofxUI: A User Interface Addon for openFrameworks

ofxUI is an addon for openFrameworks (version 0.7+) that streamlines the creation of graphical user interfaces (GUIs). It provides a comprehensive set of tools for widget layout, spacing, font management, settings management, and widget callbacks, making it easy to build intuitive and aesthetically pleasing interfaces. With a range of customization options—such as colors, fonts, widget sizes, padding, and layout—ofxUI can be tailored to suit the needs of any project.

Built as a GL-based GUI, ofxUI utilizes openFrameworks’ native drawing calls to render its widgets, allowing it to integrate seamlessly into openFrameworks projects. Installation is straightforward: simply drag and drop the addon into your project, copy the GUI folder from an example project’s data folder into your own data folder, and instantiate a Canvas object to begin adding widgets. The README file in the ofxUI addon folder provides a step-by-step guide to getting started in under 10 minutes. The library also includes numerous examples demonstrating how to add widgets, customize layouts, handle events, and save or load settings.

DOWNLOAD/FORK/STAR ofxUI from here: ofxUI on GitHub.

Supported Widgets:

  • Buttons & Toggles: Image buttons, label buttons, toggle matrix, drop-down menus.

  • Sliders: Rotary, range, vertical, and horizontal sliders.

  • Number Dials

  • 2D Pads

  • Labels & FPS Labels

  • Text Input Areas

Compatibility:

ofxUI has been tested on macOS and iOS (openFrameworks 0.7+). Although it has not been tested on Linux and Windows, it should work on these platforms, as its only dependency is openFrameworks.

Open Source Licensing:

ofxUI is released under the MIT License, making it free to use in both commercial and non-commercial projects. If you use it, I’d love to hear from you and see how it’s being applied. If you plan to use it in a commercial project, please consider donating to support future releases, enhancements, and ongoing maintenance.

Inspirations & Motivation:

ofxUI was inspired by popular UI libraries such as controlP5, GLV, SimpleGUI, and influenced by the aesthetics of Apple’s User Interface, Flat UI, GMUNK, and TRON. I developed ofxUI with the goal of creating a tool that combines the minimal elegance of controlP5 (widely used in Processing) with the flexibility and integration capabilities of openFrameworks. I admired the simplicity of simpleGUI for Cinder, but since I primarily work with openFrameworks, I wanted a solution that matched my workflow while offering intuitive usage, flexibility, and ease of integration.

My aim was to create a UI library that is both functional and visually appealing, so when presenting work to clients or releasing an app, it would have a polished look suitable for non-developers and designers alike. I took inspiration from the aesthetic and usability of widgets in MaxMSP, striving to build a similar experience for prototyping interfaces in C++.

Performance:

Although I haven’t formally benchmarked ofxUI against other GUIs, it’s optimized for performance using openFrameworks’ native drawing calls and event listeners. On my 2009 MacBook Pro, the “all widgets” example runs at ~350 fps without vertical sync, demonstrating its efficiency and low CPU overhead.

A Personal Journey:

When I first started programming in C++, I struggled to find a UI solution that was easy to use and didn’t require additional dependencies. Most alternatives were complicated to set up, lacked documentation, or didn’t work out of the box. This motivated me to create ofxUI—a library that is simple, elegant, and powerful, just like ControlP5 for Processing, but built specifically for openFrameworks.

Designer & Developer: Reza Ali
Output: openFrameworks addon (C++, openframeworks)
Year: 2012