Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QWebEngineView as transparent overlay: Event Problem



  • Hi

    I currently try to create an transparent window containing a QWebEngineView with a transparent background to generate a transparent overlay for another application. After some trial & error I got what I wanted and it looks the way a I intended (I'm an absolute beginner in C++ and Qt but have several years of Java experience).
    The problem is now that the window does not behave like I expected. I can not click "through" the parts of the Window that are transparent. All events a caught by the 500x500px window. Is there a way to fix this? If I only create the window without the webengine it works.

    Below is my very simple code:

    #include <QtWidgets>
    #include <QMainWindow>
    #include <QApplication>
    #include <qwebengineview.h>
    
    
    int main(int argc, char *argv[])
    {
    
        QApplication app(argc, argv);
        QMainWindow window;
        window.resize(500, 500);
    
        window.setWindowTitle("Transparency Test");
        //window.setAttribute(Qt::WA_NoSystemBackground, true);
        window.setAttribute(Qt::WA_TranslucentBackground, true);
        window.setWindowFlags(Qt::FramelessWindowHint);
        QWebEngineView* web = new QWebEngineView();
        web->page()->setBackgroundColor(Qt::transparent);
        web->setHtml("<html><head><style>"
                     "h1 {background-color: #00ff00;}</style></head>"
                     "<body style='background : rgba(0,0,0,0);' ><h1>This is heading 1</h1></body></html>",
                     QUrl("http://localhost"));
        window.setCentralWidget(web);
    
        window.show();
        return app.exec();
    }
    
    

  • Moderators

    @JackD
    i am not sure if it will work (probably not):

    window.setAttribute( Qt::WA_TransparentForMouseEvents, true );
    web.setAttribute( Qt::WA_TransparentForMouseEvents, false );
    


  • @raven-worx said:

    window.setAttribute( Qt::WA_TransparentForMouseEvents, true );
    web.setAttribute( Qt::WA_TransparentForMouseEvents, false );

    Does unfortunately not work. As far as I understand the docs, WA_TransparentForMouseEvents should disable the handling of mouse events completely, but I need the mouse events on the parts of the web engine that are not transparent.

    I made a poc with JavaFX webView and its working there, but JavaFX is using a very old webkit with a lot of features missing that I need.


Log in to reply