How to resize the text in GUI when the app is used in different screen resolution?

I have developed a GUI using GUIDE and packaged that into an app to be used by different user with different screen resolution. I found that GUI figure is being resized according to the resolution but the text is not being scaled and being cut off. How to resize the text in a GUI when the resolution changes when packaged into an app? Any answers are welcomed. Thanks in advance.

[Aravind Kota]

I have got a solution for this. Earlier, I found answers for similar question saying change the units to normalized. I got confused with normal Units with FontUnits. GUI component has different units for every element. Do check the units for being normalized. I still wonder how to change every unit in the GUI to normalized using a command without manually checking the properties.

[Adam]

If you set the GUI to be resizable it should set all 'Units' to normalised, if I remember correctly, though not 'Font Units' I don't think.

[Rik]

GUIDE changing everything to normalized is new to me, but then again, GUIDE sticking its nose into everything sounds not unexpected.

Anyway, I'd be interested to know if there is a way to set the font size dynamically to the window size. Of course there is the nuclear option of using a listener to check for a window size change.

[Adam Danz]

As >1 person above has alluded, changing the FontUnits to normalized should fix the problem. 'FontUnits' is a text property that should be set from GUIDE or wherever you're creating the GUI.

[Aravind Kota]

I thin there should be a way to normalize the FontUnits in the program just like other Units in GUIDE properties.

Answer 1

[Adam Danz]

Option 1:

Open your GUI in GUIDE, right-click your edit box or text object to open the property inspector. Then change FontUnits to 'normalized'. You'll have to do this to all GUI components that have FontUnits property.

Option 2

Don't change the GUI in GUIDE. Instead, when you're opening your GUI have your code search for all objects with 'FontUnits' property and change the property to 'normalized'. To do this, open the GUI code and enter these 2 lines at the end of your "..._OpeningFcn()". If your GUI is named 'MyGUI',

function MyGUI_OpeningFcn()
   ...
    txtHand = findall(handles.MyGUI, '-property', 'FontUnits'); 
    set(txtHand, 'FontUnits', 'normalized')
end

The advantage of this method is that if you add more components to your GUI in the future, you won't need to remember to change their FontUnits. This is fast and changes all components automatically.

Demo

Here's option-2 applied to a fake demo-GUI in GUIDE.

[CAM]

I put Option-2 into my code, but some users (with different screen resolutions) still have problems with font sizing.

I put the option-2 commands "near" the end of my OpeningFcn() code, because I thought I would need to save the handles-structure (using guidata) after updating all the FontUnits to "normalized".

objFonts = findall(handles.guiUltrasoundAnalyzer, '-property', 'FontUnits'); 
set(objFonts, 'FontUnits', 'normalized')
handles.output = hObject;
guidata(hObject, handles);

ls this correct? Or should I move the commands to after the guidata command?

[Adam Danz]

I don't have Matlab open right now to test it but it shouldn't matter. When you set object properties, those properties are saved within the objects whether their handles have been saved to the GUI or not.

[CAM]

Adam: Did you have a chance to verify your answer from July 9? For now, I just made all the fonts 6 or 7-pt on my version, so they resize to a decent level for the other users. It would be nice to know a robust solution, though. Thanks.

[Adam Danz]

I've been out of town with a different laptop that doesn't contain my test GUIs. I don't see why it wouldn't work unless some handles are unaccessable for some reason. it would be very easy to test on your end, too.

When you say that some users still have problems with font sizing, could you be more specific?

[CAM]

Summarizing their comments: The fonts look good enough: they can read everything in the objects. The GUI just doesn't look as good as how we designed it (ex: words look large within the object relative to its size).

Please let me know if you discover any other insights into this issue. Thanks.

[Adam Danz]

I'm updated my answer with a GIF image that shows option 2 (or option 1) functioning.

Perhaps your client doesn't want some objects to resize.

[CAM]

The gif you posted demonstrates exactly what I am seeing. Concentrate on the push button and the popup menu box. The font in the push button takes up more of the button's area when the window size is reduced (less space framed around the words). Similarly, the relative size of the words in the popup menu gets larger such that they become truncated ("Popup M..."). [Notice too that the edit text box does keep its appearance.] This seems to be "normal" behavior. Admittedly I am still disappointed that the original look is not maintained. Did I set my expectations too high? : - )

[Adam Danz]

I see what you're describing and I doubt there's a simple way around it.

Taking a step back, I wonder why the app needs to be resized in the first place. Perhaps there's a difference in monitor size or perhaps the client requires larger font size to see the text. Perhaps you could set the app so that it cannot be resized and instead, create a small/medium/large option somewhere in the app where you pre-program the app & font sizes needed to achieve what you want. IMO that's a lot of work to overcome a minor problem.

[CAM]

My colleagues have different monitor resolutions (ex: 1920x1080) than me (2560x1440), hence the font size issues. I agree with you that there appears to be no simple way around it, other than using smaller fonts overall in the design (as I describe in my comments of July 22). I agree this is a minor issue, and we will just have to account for it in future apps.

Thank you so much for all of your help and the follow up discussions.

[Adam Danz]

This thread from the MathWorks Support Team may be helpful, especially workaround #2.

https://it.mathworks.com/matlabcentral/answers/395508-why-does-the-app-not-resize-properly-for-different-screen-resolutions-in-app-designer#answer_315587

Also see Matlab's documentation on Auto Reflow.

Glad I could help (a little).