ofxDatGui: A New User Interface for OF


I found another probelm. The following command doesn’t place the text element in the middle.

gui->addLabel(":: create file ::")->setLabelAlignment(ofxDatGuiAlignment::CENTER);

I think its a bug unless im doing it wrong.


You can place the elements individually, so I think it’s just a matter of calculating their x position. One of the bundled examples shows how to do that with the y position.

For example:


Yes as @clayh suggested you can layout elements horizontally by setting their x position respective to the preceding components width:

int x = 0;
int y = 0;
component = new ofxDatGuiButton("button1");
component->setPosition(x, y);
x += component->getWidth();
component = new ofxDatGuiButton("button2");
component->setPosition(x, y);
x += component->getWidth();
component = new ofxDatGuiButton("button3");
component->setPosition(x, y);


Thanks, this is a bug. I just pushed up a fix.

Just FYI you can also call setLabelAlignment directly on the gui if you want to all of its components to share the same alignment setting.

gui->addLabel(":: create file ::")


Nice work. As many have requested integration with ofParameter would be really nice.
I started doing it my own way for one of my projects. Here is an example on a class to connect an ofParameterColor to a datgui colorpicker with optional alpha slider. A similar approach would work for other ofParameters.

class ColorPickerFromParameter {
    ColorPickerFromParameter(ofParameter<ofColor> & _p, ofxDatGui * gui, bool alphaSlider=false) : p(_p) {
        g = gui->addColorPicker(p.getName(), p.get());
        p.addListener(this, &ColorPickerFromParameter::paramChangedEvent);
        g->onColorPickerEvent(this, &ColorPickerFromParameter::onColorPickerEvent);
        if(alphaSlider) {
            string name = p.getName() + " alpha";
            s = gui->addSlider(name, 0, p.get().limit(), p.get().a);
            s->onSliderEvent(this, &ColorPickerFromParameter::onSliderEvent);
    ~ColorPickerFromParameter() {
        delete g;
    ofxDatGuiColorPicker * g;
    ofxDatGuiSlider * s;
    ofParameter<ofColor> & p;
    void paramChangedEvent(ofColor & color) {
        if(s) s->setValue(p.get().a);
    void onColorPickerEvent(ofxDatGuiColorPickerEvent e) {
        // color picker doesn't have alpha, preserve its value
        ofColor col(e.color);
        col.a = p.get().a;
    void onSliderEvent(ofxDatGuiSliderEvent e) {
        // color picker doesn't have alpha, preserve its value
        ofColor col(p.get());
        col.a = e.value;


Hey there, I am having a look at ofxDatGui and it looks great!
While poking around, I found that the input from ‘ofxDatGuiTextInput’ is all in CAPS. Is there any obvious reason for that? Thanks a lot


Uppercase text is the default throughout ofxDatGui however you can easily [disable this by editing the theme that styles the components.] (https://github.com/braitsch/ofxDatGui/blob/master/src/themes/ofxDatGuiTheme.h#l190)


Great, thank you so much


Hi @braitsch - I’m using of_v0.9.3_osx_release and as I’m running my code, I get this error:
‘ofxSmartFont’ file not found
Do you know what the issue is and how it can get fixed ?
Thank you so much !


ofxSmartFont is bundled with ofxDatGui and is located in the /src/libs directory. Make sure this libs directory is included in your project. Alternatively you can clone ofxSmartFont to your global OF addons directory and link it into your project from there.


Hi @braitsch - I added a libs folder in my file and place it there but I get the same error. Is this what you mean ?


The only way I’ve been able to remove uppercase / allcaps is by directly editing ofxDatGuiTheme.h so that layout.upperCaseLabels and/or layout.textInput.forceUpperCase is/are set to false.

I’ve tried creating an extension theme class such as

class AppGuiTheme : public ofxDatGuiTheme
    font.size = 10;
    layout.width = 300;
    layout.textInput.forceUpperCase = false;
    layout.upperCaseLabels = false;

and loaded this with

gui0 = new ofxDatGui( ofxDatGuiAnchor::TOP_RIGHT );
gui0->setTheme( new AppGuiTheme() );

but the text remained in uppercase.

I also tried moving the private member ofxDatGuiTheme* mTheme in ofxDatGui.h to being public, and later adding code to change the layout.upperCaseLabels and layout.textInput.forceUpperCase values in my setup() function, but this doesn’t do anything either:

// (after making mTheme public)
gui0 = new ofxDatGui( ofxDatGuiAnchor::TOP_RIGHT );
gui0->setTheme( new AppGuiTheme() );
gui0->mTheme->layout.upperCaseLabels = false;
gui0->mTheme->layout.textInput.forceUpperCase = false;

Changing parameters like this shouldn’t require editing the libraries’ source code / initial member values.

Being able to have mixed letter case is particularly important when you want to enter filenames into textInputs that can’t have their case changed.

Thanks for your work.


The folder structure of the addon should look like this:

If ofxSmartFont.cpp & ofxSmartFont.h are contained anywhere within the ofxDatGui directory it should compile.


It’s compiling. Thanks a million !!!


Hi, thanks for your comment. While upperCaseLabels & forceUpperCase are applied to the component when you apply the theme they don’t actually affect the rendered text until the label or text input value is changed. This was an intentional decision to avoid having to check against a flag and perform a string conversion on every draw call.

I agree though after reading your comment that it’s reasonable to expect the text styling to change immediately after the theme is applied so I just made some changes to cache the underlying text value and draw it from a separate pre-rendered field that reflects any settings applied by the theme.



Hi, I want to thank you for your work on this !
I am really amazed by ofxDatGui, I have tried several OF GUI’s and it is by far the most easy to setup and beautiful.
I have one question:
is there any specific reason that will prevent the integration of scrollview into gui panels in the future or is it just a matter of time ?



I’m looking to implement a “real” range slider, like in ofxUI

Where the mouseDown sets a first value and mouse moved and up set the second value to define a range.

I saw your standard slider is called range slider already so I’ll try to think of an other name for the component I want to make.

Any tips on how to create custom components? Going to try this out


Hi @braitsch! I’m currently using ofxDatGui on a project and everything looks great, thanks for all your work!
I found out I need to use an over event on buttons, but looking at the code I see you are changing the color internally and not calling an event.
I’m still a bit of a beginner in oF, so wanted to check with you if you think it would be too difficult a task for me to try and implement it myself! (and perhaps point me in the right direction!)

Thanks for everything!



Hi thanks for your comment. I’m really happy to hear you’re enjoying the addon. The scrollview component needs a little more work before it can be safely added to a gui. This will happen eventually, at the moment there are just other tasks that have priority.


You can create custom components by extending ofxDatGuiComponent. Take a look at a relatively simple component like ofxDatGuiButton for guidance on what methods need to be implemented.