Extending ofxGui with new widgets

**eloi** · August 6, 2014, 9:55pm

Hi OFers …

Has anyone ever missed on ofxGui a Drop Down List or a Switch or a Text Input widgets ? Or a scroll bar on the ofxPanel …

I have taken a look at the code of ofxGui, but it’s use of templates is very confusing for my level of C++ … has anyone ever made any of these widgets for ofxGui ?

Would be nice to complete ofxGui with some main widgets that are present on most GUIs …
I’ve been using ofxUI also, but i found more intuitive and easy to develop with ofxGui (even it’s not so nice as ofxUI) …

Just if anyone could give some steps to undestand how to create as example a Drop Down List I would try to dive into it … but as i said, when i look at the nice code of ofxGui i feel like I’m not able to accomplish a clean code as i see there …

Has anyone started something like this before ?

Thanks a lot …

**asper** · August 7, 2014, 9:18am

Good point you mention here. A Dropdown List would be awesome. I recently thought it would be nice to add an ofParameter’<'enum> to generate a drop down list. The Problem is, that you can’t extract the String representation of an enum. So you would have to store an Array of Strings for each enum or use a Map. It would be nice if OF internal enums (like ofPrimitiveMode or ofPolyRenderMode) could be easily integrated in ofxGui. Any thoughts on how to achive this in a clean/easy way?

**nariakiiwatani** · August 7, 2014, 12:21pm

Hi! I’m interested about the future of ofxGui, too.
ofParameter’<'enum> is quite nice, but for only dropdown lists, I think the problem is a bit simpler.
Only a very rough idea and not implemented GUI methods yet, I wrote a class below.
How do you think?

thanks.

template<typename Type>
class ofxComboBox : public ofxBaseGui
{
public:
	void addItem(Type item) {
		items.push_back(item);
	}
	operator const Type & () {
		return value;
	}
	virtual bool mouseMoved(ofMouseEventArgs & args){}
	virtual bool mousePressed(ofMouseEventArgs & args){}
	virtual bool mouseDragged(ofMouseEventArgs & args){}
	virtual bool mouseReleased(ofMouseEventArgs & args){}

	ofAbstractParameter & getParameter(){ return value; }
private:
	virtual void render(){};
	virtual bool setValue(float mx, float my, bool bCheckBounds){ return false; };

private:
	int index;
	vector<Type> items;
	ofParameter<Type> value;
};

**Daan** · November 24, 2014, 8:55am

Have you seen ofUI from Reza Ali ? It’s got a bunch of different widgets including dropdown, switch and text input.
(but doesn’t take advantage of ofParam)

**frauzufall** · July 12, 2015, 3:18pm

Since ofUI is deprecated and crushing, I quickly wanted to port some of the ofUI elements to ofxGui. Here is the code:

This is what I did so far:

ofxGuiGroupExtended, ofxPanelExtended
- horizontal alignment
- header can be hidden
- option to allow only one active toggle (only working with ofxMinimalToggle at the moment)
ofxMinimalToggle, ofxMinimalButton
ofxRotarySlider
ofxGuiSpacer
- spacing element width adjustable size (will be used as height if group or panel is vertically aligned or as width otherwise)
ofxGuiMatrix
- matrix of ofxGui elements, column count and element height adjustable

See example for usage. The elements have to be added to an ofxGuiGroupExtended or ofxPanelExtended object. I tested it on linux 64bit, but not very much, so please file a bug report if you encounter problems.

Here are my questions:

Are there other extensions for ofxGui? I could not find any on ofxaddons.com.
If someone is also interested in this and wants to test, review or add things, I would be very happy
How can I change an ofxToggle's value without having the parameter? I added a function to ofxMinimalToggle called setParameter(bool) to get this functionality, but perhaps there is another way…?

I forgot the rest… Ciao Deborah

**frauzufall** · July 13, 2015, 9:25am

Just added:

ofxGuiPage
- just a container to arrange other gui items; items cannot be dragged out of the page
ofxTabbedPages
- a container to add pages; pages can be chosen via tabs

**arturo** · July 13, 2015, 10:19am

wow, this looks great. about your questions:

Are there other extensions for ofxGui? I could not find any on ofxaddons.com.

no i don’t think so, at least not so complete as these

How can I change an ofxToggle’s value without having the parameter? I added a function to ofxMinimalToggle called setParameter(bool) to get this functionality, but perhaps there is another way…?

you can do: toggle = false; and also use toggle as if it was a boolean, like something.setBool(toggle) since ofxToggle implements the = and cast operators:

bool ofxToggle::operator=(bool v){
    value = v;
    return v;
}

ofxToggle::operator const bool & (){
    return value;
}

but i’d recommend to always use ofParameters to initialize a gui element and keep the original around, which is the real value, the gui only shows and allows to change the value from the graphical representation but assigning values to it is not very correct, still we provide the operators for very simple cases. the best way to use ofxGui is explained in gui/guiFromParametersExample

If someone is also interested in this and wants to test, review or add things, I would be very happy

i can take a look when i have a moment. also it could be included in the official gui if you want, once it’s properly tested you could send a PR against ofxGui that adds all this new elements. if you prefer to maintain yourself as a separate addon that’s great too

**Gallo** · July 13, 2015, 11:19am

nice work @frauzufall !

Will have a look at it.
thanks for the good work
and yes it would be nice to include your work into ofxGui core addon

thanks for sharing though

**drakko** · July 13, 2015, 3:11pm

@frauzufall, great work, I was looking exactly for a way to create extended versions of the ofxGui for a project that i am working on, I’ll let you know how the tests were in osx.

**frauzufall** · July 13, 2015, 10:54pm

Thanks for your support and the answers to my questions!

It would be awesome to include it into the core addon. I could file a PR for ofxMinimalToggle, ofxMinimalButton and ofxRotarySlider as soon as the OSX fix is confirmed, they compiled on Windows and someone actually used them.

It takes a little bit more work / testing to push the other things into ofxGui, because they depend on ofxGuiGroupExtended and ofxPanelExtended. I had to overwrite ofxPanel and ofxGuiGroup in order to add the functionality of horizontal alignment, hidden header and only-one-active-toggle. This way ofxGuiGroupExtended is perhaps a little bit overloaded for a base class? What do you think? I had no idea for another way to implement this. I also think it makes no sense to have ofxGuiGroup as well as ofxGuiGroupExtended in the core addon. You don’t know which controls work in the base group and for which you need the extended version.

Also I don’t know how the extended group is doing with more nested controls. The placement and spacing especially when adding horizontal alignment is a pain in the ass. I spend most of the time fiddling around with adding and removing spacings and borders and its still far from pixel-accurate.

Two more questions:

I got a class, for example ofxGuiPage. In sizeChangedCB(), it calls parent->sizeChangedCB();. This is not possible because this method is protected. I had to add friend class ofxGuiPage to ofxGuiGroupExtended in order for it to work. This is the same for every class I derive and where I use parent->sizeChangedCB(). How can one avoid this?
I wanted to add an FPS display. How can I tell an ofxBaseGui control to update regularly since there is no changing parameter involved?

**Gallo** · July 14, 2015, 7:31am

Great news !

I used to use ofxUI but it is now deprecated. Still works but i think Ali Reza won’t maintain it in the future. Too bad, but yeah, ofxUI widgets were sometimes not really easy to use.

What is the purpose of ofxGuiGroupExtended and ofxPanelExtended compared to their original ?

I don’t know the details on how it is done in ofxUI, but for your only-one-active-toggle maybe this could be like in Qt : a Toggle is a basic Button with attribute like active set to true or false. Also in Qt, you can create a group and add buttons to it and then make each button exlusive with setExclusive(true) to make them exclusively active, say switch off every button but the active one within the group.

**frauzufall** · July 13, 2015, 10:55pm

I guess I had bad luck, as soon as ofxUI got deprecated it crushed And I have quite a heavy UI to port now… (that’s what part of it looked like) But I really like the approach of ofxGui and using ofParameters so it’s a good investigation.

The idea to use toggle.setExclusive(true) is nice. The toggle would need to know what its parent is, though. This is only possible for derivatives of ofxGuiGroup, right? Could we change that?

The other things added to ofxGuiGroupExtended are horizontal alignment and hidden headers. Could that be a part of ofxGuiGroup?

**Gallo** · July 14, 2015, 7:42am

I was aware of ofxUI being deprecated when reading this post. Last time i asked the developper, he was planning to port ofParameter to ofxUI. I think this was too much work. He was the creator of this addon but he wasn’t the only contributor, so maybe one day…

Anyway this would be very nice if the core ofxGui addon could be extended with new widgets and features.

I am not a code expert and i don’t know the deep details about ofxGui and ofxGuiGroup so i can"t tell, but i agree that it would be better if you can merge ofxGuiGroupExtended and ofxPanelExtended features into their original code

**frauzufall** · July 14, 2015, 10:58am

Nevermind the question about how to update an FPS display… I can just call an update method from ofApp::update.

**frauzufall** · July 14, 2015, 12:36pm

Just added:

ofxCanvas shows texture reference
ofxZoomableCanvas texture can be zoomed with scroll wheel and dragged with mouse button when in zoom

I won’t be doing much more right now, just an FPS display perhaps. That’s all I need in the moment and enough testing material

**Gallo** · July 14, 2015, 12:57pm

This is really neat !
Thanks a lot for all the efforts.

I suggest, once it is tested, to fork the core ofxGui and merge the changes and features and do a Pull Request
If possible, merge the features of ofxGuiPanelExtended and ofxGuiGroupExtended into the original code.

By the way, what is the use of a canvas ? i mean what is the difference between a canvas and a panel ?

Let us know if you need some testings

**frauzufall** · July 14, 2015, 10:51pm

The canvas is used to display textures. The zoomable canvas is used to scroll to a certain area of the texture. Should I rename it or is something like this already part of ofxGui? I thought not. But I also was halfway through implementing ofxLabel when my compiler told me it already existed.

The addon now contains a small FPS plotter derived from a value plotter.

The addon example seems to compile under Linux, Windows and OSX, thanks to the testers. You need the current github OF version though. What else do we have to test? Android? I only use Linux, I don’t know much about other devices. And we should test further nesting of elements. Please write me on github if you encounter any problems / weird looking things.

**Gallo** · July 14, 2015, 11:26pm

Ok. So canvas is only used for embedding textures ? I think i get confused in comparing it with ofxUI Canvas which is used to embed any kind of widgets like a panel does in ofxGui

maybe i can have some tests under iOS on my office iPad

**thomasgeissl** · July 15, 2015, 6:47am

Glad to see some progress here. Nice work.
Would it be possible to use ofBaseDraws instead of a texture?
It would cover many cases.
Here is the inheritance diagram:
http://www.openframeworks.cc/doxygen/classof_base_draws.html

**frauzufall** · July 15, 2015, 2:44pm

@Gallo I renamed them to ofxGuiBaseDraws and ofxGuiZoomableBaseDraws until someone comes up with prettier names!
@thomasgeissl Thanks for the hint, it’s done.