Ubuntu: Qt GUI components appear jumbled and cutoff with Intel GPU
-
I am a developer on GlobalProtect for Linux which was developed using the Qt framework. Experiencing an issue on Ubuntu 20.04/22.04 with a Dell Precision with Intel GPU the Qt GUI components appear jumbled and cutoff.
VGA configuration for system with Qt GUI issue:
$ lspci | grep VGA 00:02.0 VGA compatible controller: Intel Corporation Device 46a6 (rev 0C)
Qt GUI components display with no issues when running on Ubuntu VM with following VGA configuration:
$ lspci | grep VGA 00:0f.0 VGA compatible controller: VMware SVGA II Adapter
I followed Qt methodology when developing the GUI. Using QLayouts and other components to organize GUI components which were developed using components and containers provided by Qt and adhere to all the standards. This issue is only seen in this case with the Intel GPU.
Added the following to main with no resolution:
QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL); -
I am a developer on GlobalProtect for Linux which was developed using the Qt framework. Experiencing an issue on Ubuntu 20.04/22.04 with a Dell Precision with Intel GPU the Qt GUI components appear jumbled and cutoff.
VGA configuration for system with Qt GUI issue:
$ lspci | grep VGA 00:02.0 VGA compatible controller: Intel Corporation Device 46a6 (rev 0C)
Qt GUI components display with no issues when running on Ubuntu VM with following VGA configuration:
$ lspci | grep VGA 00:0f.0 VGA compatible controller: VMware SVGA II Adapter
I followed Qt methodology when developing the GUI. Using QLayouts and other components to organize GUI components which were developed using components and containers provided by Qt and adhere to all the standards. This issue is only seen in this case with the Intel GPU.
Added the following to main with no resolution:
QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL); -
@JoeCFD This is being run on Dell Precision 5570 with Intel GPU which is a physical system. When running on VM we do not see it at all. I've tried on Ubuntu 18/20/22, RHEL 7,8,9 and do not see this issue.
I followed Qt methodology when developing the GUI. I used QLayouts and other components to organize GUI components. This is the first time I've seen this issue.
If you know what the issue could be please point in the right direction.
-
@JoeCFD This is being run on Dell Precision 5570 with Intel GPU which is a physical system. When running on VM we do not see it at all. I've tried on Ubuntu 18/20/22, RHEL 7,8,9 and do not see this issue.
I followed Qt methodology when developing the GUI. I used QLayouts and other components to organize GUI components. This is the first time I've seen this issue.
If you know what the issue could be please point in the right direction.
-
I am a developer on GlobalProtect for Linux which was developed using the Qt framework. Experiencing an issue on Ubuntu 20.04/22.04 with a Dell Precision with Intel GPU the Qt GUI components appear jumbled and cutoff.
VGA configuration for system with Qt GUI issue:
$ lspci | grep VGA 00:02.0 VGA compatible controller: Intel Corporation Device 46a6 (rev 0C)
Qt GUI components display with no issues when running on Ubuntu VM with following VGA configuration:
$ lspci | grep VGA 00:0f.0 VGA compatible controller: VMware SVGA II Adapter
I followed Qt methodology when developing the GUI. Using QLayouts and other components to organize GUI components which were developed using components and containers provided by Qt and adhere to all the standards. This issue is only seen in this case with the Intel GPU.
Added the following to main with no resolution:
QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL); -
This is a style engine / layout issue.
In your settings dialog you can see that the dialog has been shrunk to beyond what it should be thus squashing the text.
- Try a different Qt style engine
- Depending on what is your current style engine you can try changing the properties (such as font sizes) in some config tool
It is possible that the widgets/windows use fixed positions/sizes and broken size policies. They might have looked ok when they were developed but then with a different style engine they break. Have seen this so many times...
-
@ChrisW67 appreciate your response.
I don't think the resolutions are the issue.
Tried all the resolutions offered on Ubuntu and saw the same jumbled components. The size of both the main panel and the settings panel (attached) are squashed down thus cramping the components such as text, buttons, and tabs. -
This is a style engine / layout issue.
In your settings dialog you can see that the dialog has been shrunk to beyond what it should be thus squashing the text.
- Try a different Qt style engine
- Depending on what is your current style engine you can try changing the properties (such as font sizes) in some config tool
It is possible that the widgets/windows use fixed positions/sizes and broken size policies. They might have looked ok when they were developed but then with a different style engine they break. Have seen this so many times...
@SamiV123 thank you for your thorough and insightful response much appreciated.
In both the cases, I made the panel size fixed length. Here's an overview of my setup for each panel:
Main Panel: QMainWindow with a QVBoxLayout as the central widget. This layout contains embedded layouts and widgets to organize the content of the main panel.
Settings: This is a QDialog with tabs added. This is also fixed size.
Currently I have a primary and secondary rss file that covers mainly QButtons:
QPushButton { background-color: #00557b; color: white; } QPushButton:hover { background-color: #4d88a2; } QPushButton:pressed { background-color: #003b55; } QPushButton:disabled { background-color: #b1b5b7; }The rest of the styles for components I do through code since they require some customization so for example for a Cancel Button:
#define STYLE_CANCEL_BUTTON "color: black; border: none; outline: none;" m_pCancelButton = new QPushButton(tr("Cancel"),this); m_pCancelButton->setStyleSheet(STYLE_CANCEL_BUTTON);That's the extent that I use the Qstyle. I'm open to suggestions to improve.
I'd appreciate any feedback. -
@SamiV123 thank you for your thorough and insightful response much appreciated.
In both the cases, I made the panel size fixed length. Here's an overview of my setup for each panel:
Main Panel: QMainWindow with a QVBoxLayout as the central widget. This layout contains embedded layouts and widgets to organize the content of the main panel.
Settings: This is a QDialog with tabs added. This is also fixed size.
Currently I have a primary and secondary rss file that covers mainly QButtons:
QPushButton { background-color: #00557b; color: white; } QPushButton:hover { background-color: #4d88a2; } QPushButton:pressed { background-color: #003b55; } QPushButton:disabled { background-color: #b1b5b7; }The rest of the styles for components I do through code since they require some customization so for example for a Cancel Button:
#define STYLE_CANCEL_BUTTON "color: black; border: none; outline: none;" m_pCancelButton = new QPushButton(tr("Cancel"),this); m_pCancelButton->setStyleSheet(STYLE_CANCEL_BUTTON);That's the extent that I use the Qstyle. I'm open to suggestions to improve.
I'd appreciate any feedback.This is not what I mean with a style engine.
A style engine is what implements widget drawing inside Qt. For example Qt built-in Fusion or popular Linux Advaita.
The style sheet is used to control the "palette" which defines a set of "Known colors" for various style keys. Not all style engines use the palettes consistently though.
Using fixed sizes is likely your problem. The sizes are not playing nice-nice with the sizes that the style engine would require for drawing the widgets correctly, hence they end up clipped
-
@SamiV123 thank you for your thorough and insightful response much appreciated.
In both the cases, I made the panel size fixed length. Here's an overview of my setup for each panel:
Main Panel: QMainWindow with a QVBoxLayout as the central widget. This layout contains embedded layouts and widgets to organize the content of the main panel.
Settings: This is a QDialog with tabs added. This is also fixed size.
Currently I have a primary and secondary rss file that covers mainly QButtons:
QPushButton { background-color: #00557b; color: white; } QPushButton:hover { background-color: #4d88a2; } QPushButton:pressed { background-color: #003b55; } QPushButton:disabled { background-color: #b1b5b7; }The rest of the styles for components I do through code since they require some customization so for example for a Cancel Button:
#define STYLE_CANCEL_BUTTON "color: black; border: none; outline: none;" m_pCancelButton = new QPushButton(tr("Cancel"),this); m_pCancelButton->setStyleSheet(STYLE_CANCEL_BUTTON);That's the extent that I use the Qstyle. I'm open to suggestions to improve.
I'd appreciate any feedback.
