Scalable UI

Hi Jules and everybody,

I just started evaluating the framework, very, very, impressive so far.

We need to build a UI (for now Windows), which looks always the same, regardless of screen resolution (and partly of screen ratio). I did this sucessfully some years ago with C++Builder/VCL/Win32 but now looking for somthing else :-). So I thought this vector based framework would just come in quite handy (the SVG capabilities are also great).

Regarding the great transformation feature (as seen in JuceDemo/Components: Transforms, testet with Win7/VS 2012/latest tip), I would like to ask (as a JUCE newbie) the following for informations or hints on how to

- have the combo box dropdown to scale accordingly (no shearing/turning needed)?

- have the button tooltips scale accordingly (slider popup seems to work, but draws a small vertical line near tip of popup if scaled)?

- how / where to apply a transform to popup menues / bubble messages?


- how to keep the/a top level windows aspect ratio constant when sizing with the mouse the JUCE way?


The user will also be able to switch to kioskMode. Unfortunatly (at least in our case) the App gets restored from kioskMode when loosing focus (other App forces itself to front, or keyboard actions like <alt+tab> or <ctrl-esc>, etc.), although the user does not want this.

Jules, would it be possible to add a third parameter like e.g. "allowRestoreOnTaskSwitch" to 

Desktop::setKioskModeComponent (Component* componentToUse,
                                bool allowMenusAndBars = true,
                                bool allowRestoreOnTaskSwitch = true);

so that "if (allowRestoreOnTaskSwitch == false)" it does not get restored inside juce_win32_Windowing.cpp, around line 2482, snip:

    // Windows does weird things to process priority when you swap apps, 
    // so this forces an update when the app is brought to the front
    if (wParam != FALSE)
        Desktop::getInstance().setKioskModeComponent (nullptr); // turn kiosk mode off if we lose focus

This is just a "quick wild guess" on how it could eventually be done, but it would not break existing code and would allow us developers to have more control over the behavior.

I also noticed that (in the demo on Windows) if you switch away from "Use native window title bar" with <ctrl +N> and then toggle to "Show full-screen kiosk mode" with <ctrl + F> and back again <ctrl + F> you end up having the native title bar again. Calling

mainWindow->setUsingNativeTitleBar (false); after desktop.setKioskModeComponent (nullptr); causes flicker from the native title bar window, which is visible during the transition.


Any thoughts and hints are higly apreciated, thanks for commenting.

Best regards


This is extremely easy:

Just create a parent component, and inside that, put all your components, and inside the parent's resize method, just adjust bounds

component.setBounds(getWidth(), getHeight(), x,y); for all your components, inside the parent component, then just adjust the parent component width and height.


If you're rescaling your entire UI, then Desktop::setGlobalScaleFactor might be the easiest thing to use?

If you see any rendering artifacts, please send me some test code that'll replicate it, and I'll take a look!

Hi Jules,

very interesting.

I don't know why but I never noticed this before.

I have a problem however, all the components are resizing correctly except the window itself.

An idea of what I've done wrong?

Did you ever solve this?

If I put this in my editor’s constructor:

setSize(300, 300);
float uiScale = 0.75;

…everything in my UI scales perfectly…except the window stays the original size.

If I do this:

float uiScale = 0.75;
setSize(300 * uiScale, 300 * uiScale);

…then the components and window are both scaled correctly, but the entire contents of the window is clipped at 0.75 of the width and height.