ofxGui layout


i am starting to use the new ofxGui and am trying to bring a bit more order in to my layout.

i started of working with the ofParameter example, because it made it easier to not have to remember ofxButton, ofxSlider, etc.

to separate different groups of variables, that relate to different parts of my app, i am trying to add separators.
i tried using simple ofParameter elements to make custom headers. But can’t change color or height.
i tried ofxLabel. ofxLabel allowed me to change the height and width of this element but not the color. and the height change did not always push the next elements further down; i.e. overlap.
setFillColor did not work on ofxLabel.

i could create different ofxPanel GUIs but was hoping to keep it all in one gui, and one xml file.

any advise?

you can use ofParameterGroup to group several parameters, set it’s name with parameterGroup.setName(…) and then add those groups to the gui instead of the individual parameters. that will create the separators and also store the values in different sections in the xml

thanks a lot that really helped.

ofParameterGroup group_mapping;  
ofParameterGroup group_belt;  
group_mapping.add(height.set("map height",1,0.5,2));  
group_bet.add(height.set("belt height",1,0.5,2));  

is there any way of using the arrow keys to fine adjust sliders?

1 Like

no, not yet

is there some work around for that. like knowing which gui element the mouse is on top of? this way i can adjust the parameter in the main app via the keys.

i guess you could use the up and down keys to select a gui element and from the app just go through the parameter groups recursively and change their values with left and right

1 Like

how do you step through different gui elements like you suggest?

i guess you mean just stepping through the list of ofParameters. or is there a way to highlight the currently active gui element. or know which gui element the mouse is hovering over?

yes that’s what i was meaning but thinking about it a bit more i realize it would be weird cause you won’t know in which control you are.

i’ve uploaded some changes to ofxGui to be able to adjust sliders using keys, you can also call setFineStep() on any slider or slider group:


this will probably be different when it gets merged (i’m doubting if the step should be in the parameter instead of the slider) but the usage should be pretty similar

1 Like

nice. this works great for me.
thank you very much.

how would i use the setFineStep()
for example i am declaring ofParameter luminance;

but gui.setFineStep() does not work, or neither luminance.setFineStep()

after adding the parameter you can get the corresponding slider with:




depending on the type

great thanks.

this worked for me gui.getFloatSlider(“luminance”).setFineStep(0.05);

also, this taught me how to adjust colors for each gui element separately.

I use OF 0.8.0 and there is no such thing as setFineStep() in the object getIntSlider. Has it been deleted? Or is there a new way to do such a thing?


My problem appears related.
I want to add visual feedback to GUI by highlighting the last active slider - I have many of them.
I have an event handler that brings me the sender - a pointer to my class derived from ofParameter.
How to find the slider in ofxGuiGroup having a pointer to its parameter?

has this ever been added to the newest version of ofxGui?
the arrow key interaction and the step setting i mean.