Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QWebEngineView as transparent overlay: Event Problem
Forum Updated to NodeBB v4.3 + New Features

QWebEngineView as transparent overlay: Event Problem

Scheduled Pinned Locked Moved Unsolved General and Desktop
3 Posts 2 Posters 2.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • JackDJ Offline
    JackDJ Offline
    JackD
    wrote on last edited by
    #1

    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();
    }
    
    
    raven-worxR 1 Reply Last reply
    2
    • JackDJ JackD

      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();
      }
      
      
      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

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

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

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      0
      • JackDJ Offline
        JackDJ Offline
        JackD
        wrote on last edited by
        #3

        @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.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved