After hearing Andrew Bell’s (@drawnline) awesome talk about feeding babies with creative code at Eyeo 2012 and talking to Alex Biem (@tangibleint) I was inspired to port ofxUI (made for Openframeworks) to Cinder. If you aren’t familiar with ofxUI, check it out here. ofxUI contains many widgets and layout methods to help place those widgets so to make user interfaces that are more aesthetically appealing, useable, clean, and minimal.

I’ve seen some beautiful work come out of Cinder, check out Robert Hodgin’s work, and been wanting to know if Cinder makes it more straightforward to use shaders, textures, texture coordinates, FBOs, VBOs, and images to create beautiful visual works. One of the main reasons I ported over ofxUI to Cinder is that it was a chance for me to learn more about how Cinder works, how its designed, and how to use it. The rest of this post will cover ciUI, assuming you know nothing about ofxUI or openFrameworks.

DOWNLOAD/FORK/STAR ciUI from here: https://github.com/rezaali/ciUI 

ciUI is a Block for Cinder (version 0.8.4) that easily allows for the creation of user interfaces aka GUIs. ciUI also takes care of variable binding, widget layout, spacing, font loading, color themes, saving and loading settings, and widget callbacks. ciUI can be easily customized (colors, font & widget sizes, padding, layout, etc). ciUI widgets are minimally designed, intuitive to use, easily integrated, flexible and customizable.

ciUI is a GL based GUI and uses Cinder’s drawings calls to render its widgets. It integrates into Cinder projects very easily since it follow’s Cinder’s Block ideology. Just drag and drop the Block’s src folder into your project, add the New Media Fett.ttf font into the resource folder in your project, instantiate a Canvas object to add widgets on, and give it a callback function and/or bind variable to the widgets and your set! The README in the ciUI Block folder includes a step by step tutorial on how to use the library in your projects in under 15 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, themes, iOS, saving and loading settings, and more.

Widgets in ciUI:

  • Buttons & Toggles (multi-image & single image buttons, label buttons, toggle matrix, radio toggles, Drop Down List)

  • Sliders (multi-image, minimal, bilabel, FPS, circle, rotary, range, vertical, horizontal)

  • Number Dials

  • 2D pads

  • Labels, FPS labels

  • Text Input Area

  • Waveform & Spectrum Graphs

  • Moving Plot/Graph

  • Image Display, Image Color Sampler

It has been tested on OSX  and iOS (Cinder 0.8.4). It should work on windows, but I haven’t tested it yet. ciUI 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 Block and future releases/fixes/features.

Designer & Developer: Reza Ali      
Output: Cinder Block (C++, Cinder)
Year: 2012