Transparent QMainWindow for Raspberry Pi

RyanAR

Hello everyone,

I can use the following on Windows 10 to make the QMainWindow transparent, without it affecting the children of the main window. I would like to replicate this on a Raspberry Pi.

Inside constructor of MainWindow

setStyleSheet("background:transparent;");
setAttribute(Qt::WA_TranslucentBackground);
setWindowFlags(Qt::FramelessWindowHint);

Screenshot of program running on top of Desktop with Windows

However, when I try to get this running on a Raspberry Pi, the background turns black.

Same code, but on Raspberry Pi

Does anyone know how to get this transparency working on a Raspberry Pi? I'm not sure if I have to use some platform-specific functions. Any help would be appreciated.

System Specs

Qt C++/XML
Windows (10 Pro x64): Creator 5.0.2 / Qt 5.15.2
Linux (Raspberry Pi 4 ): Raspberry Pi OS (based on Debian Stretch). Creator 4.8.2 / Qt 5.11.3

Minimal Implementation

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    setStyleSheet("background:transparent;");
    setAttribute(Qt::WA_TranslucentBackground);
    setWindowFlags(Qt::FramelessWindowHint); // activate for border removal
}

MainWindow::~MainWindow()
{
    delete ui;
}

Minimal UI

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QGroupBox" name="groupBox">
    <property name="geometry">
     <rect>
      <x>310</x>
      <y>160</y>
      <width>271</width>
      <height>51</height>
     </rect>
    </property>
    <property name="styleSheet">
     <string notr="true">QGroupBox
{
	background-color:rgba(0,0,0,0.5);
}</string>
    </property>
    <property name="title">
     <string/>
    </property>
    <widget class="QPushButton" name="pushButton">
     <property name="geometry">
      <rect>
       <x>10</x>
       <y>10</y>
       <width>91</width>
       <height>31</height>
      </rect>
     </property>
     <property name="styleSheet">
      <string notr="true">QPushButton
{
	background-color:rgb(255,0,0);
	border:none;	
	outline:none;
}</string>
     </property>
     <property name="text">
      <string>PushButton</string>
     </property>
    </widget>
    <widget class="QLabel" name="label">
     <property name="geometry">
      <rect>
       <x>110</x>
       <y>20</y>
       <width>121</width>
       <height>16</height>
      </rect>
     </property>
     <property name="styleSheet">
      <string notr="true">QLabel
{
	color:white;
}</string>
     </property>
     <property name="text">
      <string>TextLabel</string>
     </property>
    </widget>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>21</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

Thanks,
Ryan

RyanAR

It took a while to figure out, but it's finally working.

For anyone else with this issue:

Use the raspi-config command, go to advanced settings and enable Compositor. Run the xcompmgr command and then try the program again. Transparency now works!