ofxUI: A User Interface Addon for OF

Hey Guys!

I’ve been working on a UI library for openframeworks for prototyping and general GUI needs!

You can read about it and check out photos here: http://www.syedrezaali.com/blog/?p=2172

Get the code here: https://github.com/rezaali/ofxUI

Its a pre-beta release, let me know if you have any feedback!


Looks very well-rounded and complete, nice job!
Props for the mass of examples(!), and the clean repository structure (except for the .DS_Store files, I guess). Will try to find the time to dig in further.

What did you miss in existing addons (http://ofxaddons.com/#gui)? What motivated you to write your own?
How much CPU resources does it need, compared to, e.g., ofxControlPanel and ofxhGui (which are about on par feature-wise)?

There’s a thread collecting all the GUIs with some info, maybe add yours there:
http://forum.openframeworks.cc/t/different-guis-for-openframeworks/4376/0 (It is set sticky, but that seems to be broken atm)

Thank you.

In terms of missing, I don’t think they were missing much, in fact they are pretty good for prototyping and debugging.

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 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 an 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’ll add it to that thread, thanks for the info!

Awesome reza! Can’t wait to try this. I love that you’ve integrated image buttons. It would be great to be able to add images to some of the other components too, but this looks like a great start!

ah, thanks for the comments, sounds reasonable :slight_smile:
I haven’t dug into the code yet (so it might already be in there), but one thing that could be really useful is saving/loading GUI layouts/configs to XML (via ofxXmlSettings).

Thanks Seth, I am putting together a TO DO list for the next release, I’ll make sure to consider that, and saving/loading from xml.

No problem! Its not in there yet, but will be. I am figuring out whats the best way to go about doing that.

It looks awesome! I have give it a try under WinXP-OF007-VS2010 but encountered the following runtime error:

GLUT: Fatal Error in openframeworks: pixel format with necessary capabilities not found.  

Display card model is Nvidia GT220. Any hint? Many thanks!

I’ll try it on windows this weekend and let you know!


ofxUI can now save and load settings from XML. Its on github!

yeah, great!
although, something must have happened with that-commit… it’s huge, there’s loads of strange files in there which shouldn’t be in the repo, I think. Maybe update your gitignore file and purge those. Maybe some XCode/MacOS user can advise here?

Whoa, thanks for catching that…I accidentally added all files and git added the precompiled binaries… I cleaned up the directory a bit and updated my ignore file.

The repo should be cleaner now.

Just downloaded it, I’m running Lubuntu on a 1005HA netbook. Will report back if anything acts funny with the integrated chipset and such. Will also report back if everything just works as it should, of course ;).

great UI !!! love it.

I took the liberty to modified the rotaryslider to make them look like this : see attach file.

great job thanks again.[

Excellent UI Reza

How would I go about removing a widget during runtime. eg. gui->removeWidget();



As for removing the widget: I would suggest doing something like this:

ofxUIWidget *widget = gui->getWidget("NAME");   

Do you want to delete it completely or just hide it?

Btw, I just pushed a change to github, grab the latest for this feature.

thanks reza

I was wanting to completely remove it

I have a quick test on the latest version on WinXP-OF007-VS2010 again. example-ofxUIAllWidgets and example-ofxUISaveLoadSettings ran suncessfully, while example-ofxUIButtons encountered the same error:

GLUT: Fatal Error in openframeworks: pixel format with necessary capabilities not found.   

Such a great UI!
Thank you so much reza!

I hope someone will make an example of the UI used with a multiple display setup (1display for the UI, x displays projected)
Using extended windows (2 displays sized) or ofxFenster.
So many people use such setups but there are no default or commonly shared method to doing so.

Keep up the good work!!

I think I know what the problem is, its not related to ofxUI, but the main.cpp files in the examples.

Comment out “window.setGlutDisplayString(“rgba double samples>=6 depth”);” from:

int main( )  
    ofAppGlutWindow window;  
//	window.setGlutDisplayString("rgba double samples>=6 depth");          
	ofSetupOpenGL(&window, 768,1024, OF_WINDOW);			// <-------- setup the GL context  
	ofRunApp( new testApp());  

Hi Reza,
Yes you are right, I overlooked main.cpp in my checking…other examples work now.

A question on setting color of widget: where should these codes be written at? Font setting works but color settings do not.

gui1 = new ofxUICanvas(ofGetWidth() - guiWidth, 0, guiWidth + spacing, ofGetHeight());  
gui1->setColorBack(ofColor(0, 125));					//the rect's back color  
gui1->setColorOutline(ofColor(255, 255, 255, 100));			//the rect's outline color   
gui1->setColorOutlineHighlight(ofColor(255, 255, 0, 200));		//the rect's onMouseOver outline highlight color           
gui1->setColorFill(ofColor(255, 255, 0, 200));				//the rect's fill color   
gui1->setColorFillHighlight(ofColor(255, 255, 0, 255));			//the rect's onMouseDown highlight color   
gui1->addWidgetDown(new ofxUILabel("App Settings", OFX_UI_FONT_MEDIUM));