Resizing whole project

I’m learning oF and have a tutorial project where I’m drawing contours, edges and Box2D-objects. Since it’s all 640x480 (Kinect resolution) it’s very tiny on my screen and I’d like to draw it bigger. Now, the simplest way I can think of would be to resize the kinect image when assigning it to an ofxCvColorImage and then base everything on that size… but when I tried this with haar, it seemed to cause slowdown, presumably because the amount of pixels being analyzed was increased.

With the simple haar project, I was able to do it by multiplying both the image proportions and the haar rectangles by the same scaler. But this gets more complicated with a greater variety of objects in the project.

ofApp.cpp (3.7 KB)
ofApp.h (1.1 KB)

I found this old thread and tried the method using ofPush/PopMatrix(), but as the user said, this doesn’t leave a clear way to rescale the position of things not explicitly written in draw() or mousePressed(), eg. the clicking and dragging of the ofxGui panel. I tried to download his ScaledApp.h, but it’s an old post and the file has expired.

As you can see in draw(), I tried to use setSize() and setPosition() to fix the gui problem, but I just end up seeing the outlines of the three buttons…

Hi, if you just want to draw it larger you can use the following

ofPushMatrix();
ofScale(2, 2); // or whatever scale you might want to have.
//draw here your image
ofPopMatrix();

gui.draw();// put the gui draw call after ofPopMatrix
1 Like

Ah, that was a very simple solution to put the gui.draw() outside of the Matrix. From there’d it’d be simple to multiply the gui proportions by the same size variable used in ofScale(). Thank you!

I would recommend you not to mess with the gui size, regardless of which gui you use, because that will mess up with the mouse coordinates.
Why would you want to change the gui proportion? which gui are you using (ofxGui, ofxImGui, ofxDatGui, etc):?

oh, just to make it easier to see. using ofxGui

@s_e_p , then you could change some ofxGui dimensions before calling setup:

ofApp::setup()
{
 ofxGuiSetDefaultWidth(400);
 ofxGuiSetDefaultHeight(30); 
 ofxGuiSetTextPadding(10):

 gui.setup(); 
 gui.add(..
}

ofApp::draw()
{
 // Scene
 ofPushMatrix();
 ofScale(2, 2); // or whatever scale you might want to have.
 // draw here your image
 ofPopMatrix();

 // Gui
 gui.draw();// put the gui draw call after ofPopMatrix
}

You can look on ofxBaseGui.h for more customizations.

Also, you can customize the colors:

ofFloatColor cHead = ofFloatColor(0.05f, 0.05f, 0.05f, 0.90f);
ofFloatColor cBg = ofFloatColor(0.16f, 0.16f, 0.16f, 0.8f);
ofFloatColor cBorder = ofFloatColor(0.10f, 0.10f, 0.10f, 0.7f);
ofFloatColor cSlider = ofFloatColor(0.03f, 0.03f, 0.03f, 0.8f);
ofFloatColor cText = ofFloatColor(0.76f, 0.76f, 0.76f, 0.94f);
		
ofxGuiSetHeaderColor(cHead);
ofxGuiSetBackgroundColor(cBg);
ofxGuiSetBorderColor(cBorder);
ofxGuiSetFillColor(cSlider);
ofxGuiSetTextColor(cText);
1 Like

Nice, thank you!

Then dont use ofScale with the gui. it will mess up the mouse interaction.
Follow what @moebiussurfing mentions in order to adjust the gui size, but you need to call those before you call gui.setup()

If you are using a retina or hi dpi display you can call ofxGuiEnableHiResDisplay() before calling gui.setup() and it will make the gui to look in “normal size” instead of super small.

take a look at ofxGui.h for these global ofxGui functions

1 Like