ciUI: A User Interface Library for Cinder

After hearing Andrew Bell’s (@drawnline) inspiring talk on creative coding at Eyeo 2012 and discussing UI design with Alex Biem (@tangibleint), I was motivated to port ofxUI (originally developed for openFrameworks) to Cinder. If you’re not familiar with ofxUI, it’s a library that provides a variety of widgets and layout methods to build aesthetically pleasing, clean, and usable interfaces.

I’ve always admired the beautiful work produced using Cinder, particularly Robert Hodgin’s visual experiments, and was curious to see how Cinder handles shaders, textures, FBOs, VBOs, and image manipulation. Porting ofxUI to Cinder not only presented an opportunity to explore these features but also allowed me to gain a deeper understanding of Cinder’s architecture and design philosophy.

Introducing ciUI:

ciUI is a Cinder Block (for version 0.8.4) that simplifies the process of creating graphical user interfaces (GUIs). It provides features such as variable binding, widget layout, spacing, font loading, color theming, settings management, and widget callbacks. ciUI is designed to be minimal, flexible, and easily customizable, making it a robust tool for building elegant and responsive interfaces in Cinder projects.

Key Features:

  • Comprehensive Widget Library: Buttons, toggles, sliders (horizontal, vertical, circular), dials, 2D pads, text inputs, waveform & spectrum graphs, image displays, and more.

  • Layout Management: Automated widget spacing, alignment, and grouping, enabling quick UI composition.

  • Theming & Customization: Easily apply different color schemes, fonts, and widget styles to match your project’s aesthetic.

  • Event Handling & Callbacks: Integrate custom event handling and connect widgets to application logic using intuitive callback functions.

  • Cross-Platform Support: ciUI has been tested on macOS and iOS (Cinder 0.8.4) and should work on Windows, though it hasn’t been fully verified.

How to Get Started:

To integrate ciUI into your project, simply clone or download the repository from GitHub: ciUI on GitHub. Add the src folder from the Block to your project, include the New Media Fett.ttf font in your resource folder, instantiate a Canvas object, and start adding widgets. The library supports drag-and-drop integration and adheres to Cinder’s Block structure, making it straightforward to incorporate into your workflow.

The included README file provides a step-by-step tutorial on how to use ciUI in your projects, complete with code examples and explanations. Within 15 minutes, you’ll have a fully functional interface with various interactive widgets. There are also numerous sample projects demonstrating how to customize layout, handle events, and bind variables to widgets.

Supported Widgets:

  • Buttons & Toggles: Multi-image buttons, label buttons, toggle matrix, radio toggles, drop-down lists.

  • Sliders: Minimal, bilabel, circle, rotary, range, vertical, and horizontal sliders.

  • Number Dials & 2D Pads

  • Labels & Text Inputs

  • Waveform & Spectrum Graphs

  • Dynamic Moving Plots

  • Image Display & Image Color Sampling

Open Source & Licensing:

ciUI is released under the MIT License, making it free to use in both commercial and non-commercial projects. If you decide to use it, I’d love to hear about your work and feature it as a case study. For those using ciUI in commercial projects, please consider donating to support further development and future features.

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