GUI font sizing issues on different Windows versions

[m4l490n]

[EDIT: Forked from https://forum.qt.io/topic/91750/why-a-gui-looks-different-on-different-windows-versions/ --JKSH]

@Flavio-Mesquita

I'm having the exact same problem. I created an application in Win7, compiled, used windeployqt, and then copied the .exe and all the dependencies to win10. It runs just fine but looks bad. So my question is, were you able to have a consistent GUI by using StyleSheets? What example are you referring to?

[JKSH]

@m4l490n said in Why a GUI looks different on different Windows versions?:

I'm having the exact same problem. I created an application in Win7, compiled, used windeployqt, and then copied the .exe and all the dependencies to win10. It runs just fine but looks bad.

Can you provide a screenshot?

So my question is, were you able to have a consistent GUI by using StyleSheets? What example are you referring to?

@Flavio-Mesquita applied the Fusion style: https://doc.qt.io/qt-5/qapplication.html#setStyle

[m4l490n]

@JKSH

Here is a screenshot of both. The image in the top is how it renders in Windows7 and the bottom is in windows 10. It's the exact same code.

You can see that the numbers are bigger and it's all cramped. I'm wondering how can I make it look the same.

How do I apply the Fusion style? I have tried putting the code in several places but nothing is changing. I don't know how to do this.

Thanks!

[JKSH]

@m4l490n said in Why a GUI looks different on different Windows versions?:

You can see that the numbers are bigger and it's all cramped. I'm wondering how can I make it look the same.

Your issue is different from @Flavio-Mesquita. He was talking about different background colours; you have different font sizes.

It looks like you have enabled font scaling in Windows 10 -- is this correct? Does it look better if you connect your Windows 7 PC's screen to your Windows 10 PC?

How do I apply the Fusion style? I have tried putting the code in several places but nothing is changing. I don't know how to do this.

Changing styles will not help you if your issue is caused by font scaling, unfortunately.

Start by reading https://doc.qt.io/qt-5/highdpi.html

[m4l490n]

@JKSH said in Why a GUI looks different on different Windows versions?:

@m4l490n said in Why a GUI looks different on different Windows versions?:

You can see that the numbers are bigger and it's all cramped. I'm wondering how can I make it look the same.

Your issue is different from @Flavio-Mesquita. He was talking about different background colours; you have different font sizes.

It looks like you have enabled font scaling in Windows 10 -- is this correct?

It looks like it is indeed a scaling issue. The image on the top is with 125% scaling that was the scaling the Win10 machine has originally. The one at the bottom is with 100% scaling.

Nevertheless, it still doesn't look right, much better, but still not as good as Win7. I include the correct image from Win7 below. The one I included in my previous post was incorrect, it is from version 0.3.2b which is not the same I'm using for Win10, the 0.3.0b

Here is an overlay of the two versions.

It looks like the window title part is bigger in Win10 and that is pushing everything down. Also, the status and menu bars are a little bigger in Win10

Isn't this scaling issue avoidable? Alternatively, how can I fix the size with respect to the size of the frames instead of hardcoding the value? Maybe that would solve the issue.

[JKSH]

@m4l490n said in GUI font sizing issues on different Windows versions:

It looks like the window title part is bigger in Win10 and that is pushing everything down. Also, the status and menu bars are a little bigger in Win10

Isn't this scaling issue avoidable? Alternatively, how can I fix the size with respect to the size of the frames instead of hardcoding the value? Maybe that would solve the issue.

As a general rule: If an app uses fixed-size widgets and fonts (and/or if the app uses absolute coordinates to position the widgets and text), it will only look good on the OS and screen resolution that it is originally built for.

My first recommendation: Rewrite your GUI to use layouts (https://doc.qt.io/qt-5/layout.html ). This allows your GUI to dynamically decide the best sizes and positions for its components, no matter which OS it's running on.

For example, your custom "channel box" could be arranged this way:

• QFrame (thick outer frame)
  • QVBoxLayout
    • QLabel ("Channel N")
    • QLabel or QLCDNumber (large green number)
    • QGridLayout
      • QPushButton? ("Minimum") | QPushButton? ("Maximum")
      • QLabel (min value) | QLabel (max value)

If your app also needs to support all kinds of screens (from low-DPI 1024x768 screens to high-DPI 4k screens), then you must also make your app DPI aware (https://doc.qt.io/qt-5/highdpi.html )

[JKSH]

@m4l490n said in GUI font sizing issues on different Windows versions:

it still doesn't look right, much better, but still not as good as Win7.

If I'm not mistaken, you must reboot (or at least log off) after you change your scaling settings to see the full improvement.