Create Transparent Window in QtQuick to show external application through

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: