ofxUI: A User Interface Addon for OF

January 27, 2012

ofxUI is an addon for openFrameworks (version 07) that easily allows for the creation of user interfaces aka GUIs. ofxUI also takes care of widget layout, spacing, font loading, saving and loading settings, and widget callbacks. ofxUI can be easily customized (colors, font & widget sizes, padding, layout, etc).

ofxUI is a GL based GUI and uses openFramework’s drawings calls to render its widgets. It integrates into openFrameworks projects very easily since it was designed specifically for OF. Just drag and drop the addon into your project, copy the GUI folder from an example project’s data folder into your data folder, instantiate a Canvas object to add widgets on! The README in the ofxUI addon folder includes a step by step tutorial on how to use the library in your projects in under 10 minutes. There are many examples included in the download that show how to add widgets, customize their placement, get values from different types of widgets, set widget values, add callback functions for gui events,  saving and loading settings, and more.

DOWNLOAD/FORK ofxUI from here: https://github.com/rezaali/ofxUI

 Widgets in ofxUI:

  • Buttons & Toggles (Image buttons, label buttons, toggle matrix, Drop Down Menu)
  • Sliders (rotary, range, vertical, horizontal)
  • Number Dials
  • 2D pads
  • Labels, FPS labels
  • Text Input Area

It has been tested on OSX  and iOS (OF 07). It should work on linux and windows, since its only dependency is openFrameworks. ofxUI is open source under an MIT License, therefore you can use it in commercial and non-commercial projects. If you do end up using it, please let me know I would to show examples of it out there in the wild. If you plan to use it in a commercial project please consider donating to help support this addon and future releases/fixes/features.

This UI library was inspired & influenced by:

- controlP5 (http://www.sojamo.de/libraries/controlP5/)
- GLV (http://mat.ucsb.edu/glv/)
- SimpleGUI (http://marcinignac.com/blog/simplegui/)
- Apple’s User Interface

I was motived to write my own UI addon because I wanted something like ControlP5 (which is easy to get up and running) for Processing for OF. I use ControlP5 a lot and love its minimal aesthetic. I also love simpleGUI for Cinder, but since I primarily code using OF, I developed ofxUI with the intentions that it needs to be minimally designed, intuitive to use, easily integrated, flexible and customizable.

I designed ofxUI so that if I present my work to a client or put out an App on the App store, it would have a decent aesthetic and be presentable to non-hackers/programmers. I really like the widgets in MaxMsp, so I wanted to have something similar so when I prototype in C++ I could easily go about creating a UI that is pleasing to use and works robustly.

In terms of performance, I haven’t compared it to other GUIs out there, but since its written using OF drawing calls and uses Listeners built in to OF, it run very fast and doesn’t take a lot of CPU…atleast when I tested it when my sketches. On my laptop (Apple Macbook Pro 2009) without vertical sync the all widgets example runs upwards of ~350 fps.

When I first started programming with C++ it was difficult for me to use the other GUIs…their either depended on other libraries, which weren’t included in the download, and it wouldn’t work out of the box, or they were complicated to integrate into my projects. Additionally, I was motived to write my own since I wanted something like ControlP5 (which is easy to get up and running) for Processing for OF. I use ControlP5 a lot and love its minimal aesthetic. I also love simpleGUI for Cinder, but since I primarily code using OF, I developed ofxUI with the intentions that it needs to be minimally designed, intuitive to use, easily integrated, flexible and customizable.

Tags: , , , , , , , ,