ciUI: A User Interface Block for Cinder

Developing Cinder

rezaali

ciUI: A User Interface Block for Cinder

in Developing Cinder • 10 months ago

Hi Everyone,

I just finished porting ofxUI to Cinder and made some improvements, like variable binding, themes, etc.

Read more about it here: http://www.syedrezaali.com/blog/?p=2366

Download/Fork/Clone from here: https://github.com/rezaali/ciUI

Images are here: http://www.flickr.com/photos/44532783@N04/sets/72157630538746416/

Themes Images are here: http://www.flickr.com/photos/44532783@N04/sets/72157630539131926/

Also, keep in mind I was learning cinder while writing this Block, so if there are better ways of doing things, faster ways of doing things, easier ways of doing things, please let me know :)

Replies(33)

gabor_papp

Re: ciUI: A User Interface Block for Cinder

10 months ago

awesome! thank you.

quickly tried to compile it with latest git. osx 10.7.4, xcode 4.3.3 and encountered some errors:

../cinder/blocks/ciUI/src/ciUIFPS.h
No member named 'getAverageFps' in namespace 'cinder::app'
../cinder/blocks/ciUI/src/ciUIFPSSlider.h
No member named 'getAverageFps' in namespace 'cinder::app'

num3ric

Re: ciUI: A User Interface Block for Cinder

10 months ago

Hell yes!!! Can't wait to explore this tonight.

ahoeben

ciUI: A User Interface Block for Cinder

10 months ago

Yay for Cinder!

I'm trying to use ciUI crossplatform, and it is unfortunate that resource-loading is so different on Windows vs OSX. I can get the examples to compile just fine, as long as I remove all resource loading bits, and the calls to getAverageFps mentioned above.

Update: oh, I forgot to mention a boatload of compiler warnings for conversion from double to float, and a stray include of "cinder/app/AppCocoaTouch.h" in ciUICanvas.h

gabor_papp

Re: ciUI: A User Interface Block for Cinder

10 months ago

i managed to compile the first sample ciUIAllWidgets with some changes on osx as well. it's looking really great!

may i suggest that you move all ui images and the font to ciUI/resources instead of copying it to each sample?

also it would be more cross platform if you moved Resources.h, play.png, and biorhythm.png from the xcode folder to the sample resources folder.

why did you choose to have a header only implementation? it's simpler to include it, but the whole ui is recompiled each time the project is rebuilt, which is quite slow with so many headers. it would be much faster if you separated the headers and the implementation in cpp files.

otherwise, it's looking really good. great ui. congratulations.

rezaali

Re: ciUI: A User Interface Block for Cinder

10 months ago

Hi Gabor,

Thank you for your help in the last couple days fixing the bugs, and updating the block!

Here are some comments, I put all the ui images and fonts in each project because I thought it would be easier to understand how to include resources for the GUI, cinder has pretty elaborate ways of including resources, and being a newb I just decided on what was easiest to get going...but I see your point, and wi;ll prob. clean this up in the second major release.

As for moving play.png and biorhythm.png to the sample resources folder, do you mean literally moving the resources to the "resources" folder within the sample project? Will that eliminate the need for a Resources.h file? Let me know if you do this, I will pull it on github to see how its done :)

I choose a header only implementation because it is simpler to include and modify...I didn't know that the whole project is recompiled each time the project is rebuilt, otherwise I think I would have done it .h + .cpp (maybe in the next release??)

Thank you, glad its received well!

safetydank

Re: ciUI: A User Interface Block for Cinder

10 months ago

Good job, looks great!

rezaali

Re: ciUI: A User Interface Block for Cinder

10 months ago

Thanks everyone for their support, I will be working to make this library better over time and you guys are welcome to contribute fixes, suggest changes, add themes, etc on github :)

gabor_papp

Re: ciUI: A User Interface Block for Cinder

10 months ago

Thank you for your help in the last couple days fixing the bugs, and updating the block!

you are welcome. it's my pleasure to help in this project.

I put all the ui images and fonts in each project because I thought it would be easier to understand how to include resources for the GUI

yes, i understand, although i think it's not much harder to drag the ciUI/resources folder to the project along with ciUI/src. in this case there would not be multiple copies of the ui png files and the font file.

As for moving play.png and biorhythm.png to the sample resources folder, do you mean literally moving the resources to the "resources" folder within the sample project?

yes, now they are in the xcode folder. if there's a windows port it won't be very nice. it's cleaner if the files in the sample resources folder, so vc and xcode can include the png's from there.

Will that eliminate the need for a Resources.h file? Let me know if you do this, I will pull it on github to see how its done :)

no, it won't. it is needed for cross platform resources. as it mentioned above there are some problems with the resources on windows, if you don't use the Resources.h. i can send you a pull request for one of the project if you'd like.

I choose a header only implementation because it is simpler to include and modify...

maybe, it's not that a big problem after all, because of precompiled headers. i'm not sure what others think about this.

andrewfb

Re: ciUI: A User Interface Block for Cinder

10 months ago

Congratulations on releasing this - it does look great. I agree with Gabor's points above. Also, another option would actually be to bake the resource(s) into a binary in a .cpp. This is of course not incredibly elegant but in practice usually works fine. You can use a tool like bin2c, and if you've only got the .ttf I'd say it's worth it. Also I noticed you're shipping the vc9 folder in your samples, but we've actually removed vc9 support so no reason messing with that.

-Andrew

rezaali

Re: ciUI: A User Interface Block for Cinder

10 months ago

Thanks Andrew! I am still debating how to handle font loading, I think over time as I use cinder more and more I'll figure out what the typical work flow is, and adopt that. I think for version 2 I will make the change. Thanks for pointing out bin2c, looks neat.

I'll get rid of the vc9 folder as well.

Cheers,
Reza

mauricio...

Re: ciUI: A User Interface Block for Cinder

10 months ago

Nice! Samples seem to work right out of the box (Mac). I added ciUI to my project and got complains from ciUIScrollableCanvas.h of getWindowWidth() being ambiguous. Changing those calls to ci::app::getWindowWidth() fixed it.

If I want to use ciUI along with MayaCamUI, what would I add to the draw()? ciUI gets distorted along with the rest of the scene.

Thanks

gabor_papp

Re: ciUI: A User Interface Block for Cinder

10 months ago

Hi Mauricio,

it seems that the ciUI draw method does not save or restore any opengl states or matrices. you can do something like this around the gui->draw() call.

Area viewport = gl::getViewport();
gl::pushMatrices();
gl::setMatricesWindow( getWindowSize() );
gl::setViewport( getWindowBounds() );
gui->draw();
gl::popMatrices();
gl::setViewport( viewport );

mauricio...

Re: ciUI: A User Interface Block for Cinder

10 months ago

Gabor

That did indeed work. Thanks!

I am using cUI along with MayaCamUI and it seems to have problems. Some widgets in my gui work properly and others get "freaked out".

This image shows VERT SCALE working fine:

I can move the slider (although it also rotates the model since MayaCamUI is listening to that). UPDATE MAP also works:

The rest of the widgets behave erratically (sometimes they do, sometimes they don't, sometimes they activate the wrong boolean). I am trying to replace a params::InterfaceGl with cUI. This is my code for cUI:

float guiWidth;
float guiHeight;
float dim;
float length;
guiWidth = getWindowWidth()*.2;
guiHeight= getWindowHeight();
dim = guiWidth*.0625;
length = guiWidth-CI_UI_GLOBAL_WIDGET_SPACING*2;
gui = new ciUICanvas(0,0,guiWidth, guiHeight);
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_wireframe, "WIREFRAME", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_texture, "TEXTURE", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_lights, "LIGHT", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_particles, "PARTICLES", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_normals, "NORMALS", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUILabelToggle(length, &set_show_background, "BACKGROUND", CI_UI_FONT_SMALL) );
gui->addWidgetDown( new ciUISpacer(length, 2) );
gui->addWidgetDown( new ciUISlider(length,dim, 1, 1000, &new_gravity, "GRAVITY") );
gui->addWidgetDown( new ciUISlider(length,dim, 100, 2000, &rain_start, "CLOUD") );
gui->addWidgetDown( new ciUISlider(length,dim, 0, 1.0, &time_per_particle, "TIME") );
gui->addWidgetDown( new ciUISlider(length,dim, 0.1, 0.4, &elevation_scale, "VERT SCALE") );
gui->addWidgetDown( new ciUISpacer(length, 2) );
gui->addWidgetDown( new ciUIButton(dim*2,dim*2,false, "UPDATE MAP", CI_UI_FONT_SMALL) );
gui->registerUIEvents(this, &rainApp::guiEvent);

I am drawing the gui with the code Gabor provided above. It is the last thing drawn (final lines of draw()).

rezaali

Re: ciUI: A User Interface Block for Cinder

10 months ago

If you upload an example using MayaCamUI, I will debug it, I am in the middle of another project right now, so I will try my best to get back to asap.

Thanks for find this bug/issue :)

BaptisteB

Re: ciUI: A User Interface Block for Cinder

10 months ago

Some samples crash on my computer. This is due to ciUIButton. In the constructor the method setValue(*) is called before the label is allocated. As the label is used in setValue that crash.

It work fine if I put setValue at the end of init thought.

I guess one can reproduce it running ciUIButtons or ciUIAllWidgets.

rezaali

Re: ciUI: A User Interface Block for Cinder

9 months ago

Just fixed it, thanks for letting me know. There is another issue, where I am not able to load settings from an XML file, trying to figure that out now.

num3ric

ciUI: A User Interface Block for Cinder

9 months ago

I'm wondering if & how it would be possible for the GUI to capture the mouse events. Meaning it would handle the events and prevent the app from calling its own mouseDown, mouseUp, etc. The cinder app has the the register/unregister functions which you are using as expected in ciUICanvas.h. Maybe some capture methods would be useful? Or is the cinder design already using bubbling up of events?

This issue is indeed directly about Cinder, and not ciUI per say. I will investigate... when I have some time.

Éric

Edit: Wait, is this already the case in AntTweakBar? Can't remember.

rezaali

ciUI: A User Interface Block for Cinder

9 months ago

it is possible to capture the events, I'll work on getting this to work soon.

BaptisteB

Re: ciUI: A User Interface Block for Cinder

9 months ago

I am working on a project and used SimpleGUI, but customized. I decided to switch from simpleGUI to ciUI mainly because of the text editing box, the range slider and the beauty of the thing.

Anyway, I am now stuck because I want to have a dynamic managing of the positions of the elements in my Canvas. For instance, if I set an element as invisible I would like the elements under to come up and not having empty space.

Unfortunately the positions are absolute and it seems it would be a huge work to change everything to relative, like in SimpleGUI. Or just to update the positions, because the elements look independent the one to the others.

Am I right on these points? Is there a solution to handle this? Should I switch back to Simple GUI and maybe take some ciUI objects with me if I want to work this way?

Thanks a lot Rezaa for your work,

Cheers

rezaali

Re: ciUI: A User Interface Block for Cinder

9 months ago

So thats something I've been thinking about for a while now, how to place and keep widgets in place. As of right now the position of the widgets are like you stated, positioned upon creation.

I am thinking about creating a map like system that keeps track of where widgets are relative to each other, so that if a widget is removed or hidden things move properly.

No problem, thanks for the suggestion, I will look into making it a reality with the next version.

khuxley

Re: ciUI: A User Interface Block for Cinder

9 months ago

Anyone have a VS2010 example of this running on Windows with Cinder 0.8.4 that they could share?

I've been trying to compile the "ciUIAllWidgets" example for several days now with no success. I've fixed the resource references but now I'm getting compiler errors "Intellisense: expected an identifier" in:

windef.h
wingdi.h
winuser.h
wincon.h

Didn't want to bother posting a bunch of code yet if someone already has a working example I could follow.

Thanks,

Ken

www.kenhuxley.com/art

mauricio...

Re: ciUI: A User Interface Block for Cinder

8 months ago

How do you handle window resizing with ciUI? I haven't found a method that updates the width/height/position.

I love this block.

rezaali

Re: ciUI: A User Interface Block for Cinder

8 months ago

@mauricio.giraldo if you just want to resize the canvas' window, then you can do something like:

canvas->getRect()->setWidth(...);

canvas->getRect()->setHeight(...);

Let me know exactly what you are attempting to do.

tioWashie

RE: ciUI: A User Interface Block for Cinder

7 months ago

Hi, there,
I´ve tested ciUI at my mac and every things goes allright.
I like very much this block at MacOS

When I go to Windows, after adjust the resource files (Resources.rs and Resources.h) to contains the custom font NewMedia, I´ve found a error that can't fix:

1>c:\projetos.cpp\cinder_0.8.4_vc2010\blocks\cinder-ciui\src\ciuicanvas.h(418): error C2661: 'cinder::app::loadResource' : no overloaded function takes 1 arguments

Any idea how to fix this?

Thanks in advanced

ariel.mal..

Re: ciUI: A User Interface Block for Cinder

7 months ago

The 'cinder::app::loadResource' : no overloaded function takes 1 arguments error will only fire on Windows.

It means that you used something like loadResource("foo.png"), which is not supposed to work on that platform.

Instead, you need to use Cinder's "cross platform predefined resources" scheme:

#define RES_FOO CINDER_RESOURCE(../resources/, foo.png, 128, IMAGE)

loadResource(RES_FOO);

Refer to the Cinder samples (e.g. Picking3D) for more details...

colin.bou

Réf.: ciUI: A User Interface Block for Cinder

7 months ago

Hello,

Very good !

Is ciUI compatible with touchscreen ?

Thanks

gazoo101

Re: ciUI: A User Interface Block for Cinder

6 months ago

Hey everyone,

Thought I'd share the ugly hack I've used to get ciUI to compile and run the simple example (ciUISimpleExample) on Windows.

To sum up, the main issue plaguing ciUI is its use of loadResource which is intended for use exclusively on ios. Additionally, the resources used by all (i think) of the sample code programs, are located in the xcode folder, and not the resource folder as one might expect. To have ciUI up and running with the simple example, you need to do a few things:

in ciUICanvas.h you will recieve a number of errors about the aforementioned function. Replace the function calls with the loadFile function like so, from

fontLarge = Font( loadResource( filename ), fontsize);

into...

fontLarge = Font( loadFile( filename ), fontsize);

and copy the font (NewMedia Fett.ttf) needed for this simple example from the xcode folder into the vc10 folder (in case you're using vs2010), if you have not changed the 'Working Directory' setting.

Finally, all the other loadResource calls (in a few other files) have to be fixed or neutered. I decided just to hack them for now, by handing them a very unsafe empty imagesource reference. It's ugly, it's hacky, but it compiles, and since the code is never called - it works out. For example in the ciUImultiImageToggle.h

change this

back = loadImage(loadResource(_pathURL));
down = loadImage(loadResource(coreURL+"down"+extension));
over = loadImage(loadResource(coreURL+"over"+extension));
on = loadImage(loadResource(coreURL+"on"+extension));

into this

cinder::ImageSourceRef emptyImg = cinder::ImageSourceRef();

back = emptyImg;
down = emptyImg;
over = emptyImg;
on = emptyImg;

That should at least get stuff compiling.

Finally colin.bou - I don't think ciUI natively supports touch support, but plug in TUIO and you can hook it up yourself. At least, that's what I intend to do!

Regards,

Gazoo

tfpb

Re: ciUI: A User Interface Block for Cinder

6 months ago

@rezaali this is great! thanks for sharing :)

@gazoo111 - for some of the examples it won't work to use an empty reference, you will get a runtime error.

I just replaced the loadResource with loadFile and this worked fine for me. Also remember to copy any resources from the xcode folder to the vc10 folder for each sample you are running.

back = loadImage(loadFile(_pathURL));

down = loadImage(loadFile(coreURL+"down"+extension));

over = loadImage(loadFile(coreURL+"over"+extension));

on = loadImage(loadFile(coreURL+"on"+extension));

rationali..

Re: ciUI: A User Interface Block for Cinder

5 months ago

I replaced loadResource with loadAsset - this has the advantage that you can put one assets folder in the ciUI samples folder and all samples will be able to locate the assets there.

+1 for being able to having ciUI able to swallow input events that it is handling - I might give this a try myself when I get a moment.

Might also look into nicer event handling for buttons/text input just rather than doing everything in one big event handler with lots of string comparisons...

gazoo101

Re: ciUI: A User Interface Block for Cinder

6 months ago

@CinderellaDave - I know :-) Thus, why I wrote...

compile and run the simple example (ciUISimpleExample) on Windows

... as well as noted that the code is never called in that example, and that the fix is 'hacky'. I suppose I should have stressed the fact that it would only run that example properly, more.

Regards,

Gazoo

tfpb

Re: ciUI: A User Interface Block for Cinder

6 months ago

@gazoo101 - sorry :) ... quick to type, slow to read ... ( internet proverb ) :)

tioWashie

RE: ciUI: A User Interface Block for Cinder

6 months ago

I done that changes but not work yet.
Now I have a crash message:

Unhandled exception at 0x7571c41f in ciUIButtons.exe: Microsoft C++ exception: cinder::StreamExc at memory location 0x0018cbcc..

Any idea why its happened?

Thanks

gazoo101

Re: ciUI: A User Interface Block for Cinder

6 months ago

@CinderellaDave - No worries. It's the common status of the internet :-)

@tiowashie - You may have neglected the final vital step, which is to copy the resources into the directory that the ciUI is looking for them in. This depends a bit on your development environment. If it's Visual studio 20xx, then you should just need to copy them into vc10 or vc9 folder respectively. Otherwise you can try and step debug the problem.

Top Reply

Response title

Attachments

Replies(33)

Statistics

Tags

Actions

Related Posts