How to make ActiveQt Widget transparent in browser?



  • I create a browser plugin demo with the qtbrowserplugin ,and load it to IE browser, but can not set it transparent.
    Override the paintEvent()

    	QPainter p(this);
    	p.fillRect(rect(), QColor(255,0,0, 0));
    
    

    it will be show the window default background at Windows OS;
    Append a attribute :

    setAttribute(Qt::WA_TranslucentBackground);
    

    for this widget ,it will be show the black background;

    and this method

    	setAutoFillBackground(true);
    	QPalette pal = palette();
    	pal.setColor(QPalette::Background, QColor(100,100,100,0));
    	setPalette(pal);
    

    it looks same as 2nd;

    What should I do?
    Thanks!!



  • @niessen ,

    You can try, painter->setOpacity(val);



  • @Vinod-Kuntoji
    Thanks for replay. but it not work. still show the default background color .



  • @niessen said in How to make ActiveQt Widget transparent in browser?:

    setAttribute(Qt::WA_TranslucentBackgro

    widget->setWindowOpacity(0.4);



  • @Vinod-Kuntoji
    it dosen’t work yet!:(



  • @niessen ,

    Please show me your code



  • @Vinod-Kuntoji
    it's just a very simple demo:
    In Qt 4.8.6, IE11;

    the header file:

    #ifndef BROWSERWIDGET_H
    #define BROWSERWIDGET_H
    
    class BrowserWidget: public QWidget, public QAxBindable
    {
    	Q_OBJECT
    
    	Q_CLASSINFO("MIME", "application/x-browser-widget")
    	Q_CLASSINFO("ClassID", "{1FF1F21C-464F-4460-9179-76D668CC6588}")
    	Q_CLASSINFO("InterfaceID", "{57436653-AA44-42f4-BA0F-DD65A8A77AE6}")
    	Q_CLASSINFO("EventsID", "{204C5D3B-75C3-4d5d-9347-D5A1216C6658}")
    
    public:
    	BrowserWidget(QWidget * parent = 0);
    
    protected:
        virtual void paintEvent(QPaintEvent * e) override;
    };
    
    #endif // BROWSERWIDGET_H
    
    

    and the source file:

    #include "StdAfx.h"
    #include "BrowserWidget.h"
    
    BrowserWidget::BrowserWidget(QWidget * parent /*= 0*/): QWidget(parent)
    {
    	setMinimumSize(200, 100);
            //  ***********   1   ************
    	//setWindowFlags(Qt::FramelessWindowHint);
    	//setAttribute(Qt::WA_TranslucentBackground);
    
            //  ***********   2   ************
    	//setWindowOpacity(0.9);
    
            //  ***********   3   ************
    	//setAutoFillBackground(true);
    	//QPalette pal = palette();
    	//pal.setColor(QPalette::Background, Qt::transparent);
    	//setPalette(pal);
    
    	QLabel * label = new QLabel(this);
    	label->setFixedSize(200, 100);
    	label->setText("hello world");
    
    }
    
    BrowserWidget::paintEvent(QPaintEvent* e)
    {
         //  ***********   4   ************
        //QPainter p(this);
        //p.fillRect(rect(), Qt::transparent);
    }
    

    There is html content.

    <html>
        <head>
            <title></title>
            <meta charset="utf-8">
            <style type="text/css">
    			html,body{
    			    margin:0;
    				padding:0;
    				width:100%;
    				height:100%;
    				position:relative;
    				background:url(bristleGrass.jpg) no-repeat center center;
    				background-size:50%,50%;
    			}
                .browserPluginDiv{
                    width:800px;
                    height: 450px;
                    position: absolute;
                    top:300px;
                    left: 100px;
                    z-index: 0;
                    
                }
    			#browserPlugin{
    				position:absolute;
    				left:0;
    				top:10px;
    				z-index:200;
    				
    			}
            </style>
        </head>  
        <body>  
            <div id="browserPluginDiv" class="browserPluginDiv">
    			<object id="browserPlugin" classid="clsid:1FF1F21C-464F-4460-9179-76D668CC6588" width="160" height="90"></object>	
    		</div>
        </body> 
    </html>
    

    The background image is set in the html page.
    case 1:
    at first show, it looks like transparent, but it not repaint when I resize the browser window.
    0_1503302402313_1.gif
    And when I click the browser minisize button, then restore it , it will show the default background color.
    alt text
    case 2:
    same as case 1.
    case 3:
    it always show the black color.
    alt text
    case 4:
    alt text



  • @niessen ,

    Did you call update() function while resizing?



  • @niessen

    Open Mainwindow stylesheet and write: background:transparent;



  • @Vinod-Kuntoji
    I just resize the browser window, and the widget size is fixed.
    I don't know how to call update() function in the widget while resizing the IE window. if the background image is a gif, there will no resizing, no position changed, and how to notify the widget to update?



  • @L.Gogs
    thanks for reply.
    it is not display in the Mainwindow, but as a QtActive control in the IE browser.
    And I have tried that, set stylesheet for the widget with "background:transparent", it will show likes case 3.
    if I stylesheet is "background-origin: content;background-position: center; background-repeat:no-repeat;background-image:url("f:/test_icon.png")", it as following picture shows:
    alt text
    around of the test_icon.png is transparent area.0_1503366361088_test_icon.png



  • Hi, I think the best approach is to change the css for the div for the .browserPluginDiv, try adding something like
    background-color: rgba(255, 255, 255, 0.5);


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.