Create Transparent Window in QtQuick to show external application through - qt

Question

I am trying to create a QtQuick application running under Linux (Lubuntu 20.04) with a transparent window that shows the desktop or any other application running in the background.I also require a couple of other windows which aren't transparent.
I have tried the suggestions here:
QtQuick 2 Transparent Window Background I just end up with either a grey or black background which doesn't show the desktop.
I have tried all combinations of opacity: 0.0 or color: "transparent", but none give the correct effect.
Here is a minimal non working example:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
id: transparentWindowTest
//flags: Qt.FramelessWindowHint
visible: true
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
opacity: 0.0
Rectangle {
id: transparentWindow
anchors.left: parent.left
anchors.top: parent.top
width: 300
height: 300
color: "transparent"
opacity: 0.0
}
Rectangle {
id: rightWindow
anchors.left: transparentWindow.right
anchors.top: parent.top
width: 200
height: parent.height
color: "blue"
}
Rectangle {
id: bottomWindow
anchors.left: parent.left
anchors.top: transparentWindow.bottom
width: parent.width
height: 200
color: "red"
}
}
Any suggestions on the best way of achieving this?
I have also tried the suggestions in:
How to make a transparent window with Qt Quick?, but these just show a dark background that is not transparent at all. Note that I had to modify the second example so that it would compile under Qt5.15.2, as show below:
transparent2.pro:
QT += quick
# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
opacity: 0.0
color: "transparent"
Rectangle {
id: root
width: 250
height: 250
// completely transparent background
color: "#00FFFFFF"
border.color: "#F00"
border.width: 2
Rectangle {
id: ball
height: 50; width: 50
x: 100
color: "#990000FF"
radius: height / 2
}
SequentialAnimation {
running: true; loops: Animation.Infinite
NumberAnimation { target: ball; property: "y"; to: root.height - ball.height; duration: 1000; easing.type: Easing.OutBounce }
PauseAnimation { duration: 1000 }
NumberAnimation { target: ball; property: "y"; to: 0; duration: 700 }
PauseAnimation { duration: 1000 }
}
}
}
Here is a screenshot showing the output: