How to make ActiveQt Widget transparent in browser?

niessen

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!!

Vinod Kuntoji

@niessen ,

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

niessen

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

Vinod Kuntoji

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

setAttribute(Qt::WA_TranslucentBackgro

widget->setWindowOpacity(0.4);

niessen

@Vinod-Kuntoji
it dosen’t work yet！：(

Vinod Kuntoji

@niessen ,

Please show me your code

niessen

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

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.

case 4:

Vinod Kuntoji

@niessen ,

Did you call update() function while resizing?

L.Gogs

@niessen

Open Mainwindow stylesheet and write: background:transparent;

niessen

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

niessen

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

hskoglund

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);