How to Transparent QGraphicsView widget Background?

[wysota]

Have a look at Qt::WA_TranslucentBackground widget attribute.

[zuck]

QGraphicsView view;
// ...
view.setAttribute(QT::WA_TranslucentBackground);
view.viewport()->setAutoFillBackground(false);

QGraphicsView view;
// ...
view.setAttribute(QT::WA_TranslucentBackground);
view.viewport()->setAutoFillBackground(false);

To copy to clipboard, switch view to plain text mode 

[totem]

Thank you for replying, but unfortunately i'm not sure I've been clear enough. What i want to obtain is described by attached picture


That is to say, i want to see underlying windows in my view




wsh.jpg

[wysota]

Did you even try the code you were given?

[totem]

yes obviously, i even tried that way before posting.

using for my QGraphicsView subclass :

MyView::MyView()
{
// constructor...
  setAttribute(Qt::WA_TranslucentBackground);
  viewport()->setAutoFillBackground(false);
}
 
 
//----------------------------------------------------------------------------------
void MyView::paintEvent(QPaintEvent * e)
{
  QPainter p( viewport() );
 
  p.save();
  p.setCompositionMode(QPainter::CompositionMode_SourceOver);
  p.fillRect(this->rect(), Qt::transparent);
  p.restore();
 
  // draw scene items
  QGraphicsView::paintEvent(e);
}

MyView::MyView()
{
// constructor...
  setAttribute(Qt::WA_TranslucentBackground);
  viewport()->setAutoFillBackground(false);
}


//----------------------------------------------------------------------------------
void MyView::paintEvent(QPaintEvent * e)
{
  QPainter p( viewport() );

  p.save();
  p.setCompositionMode(QPainter::CompositionMode_SourceOver);
  p.fillRect(this->rect(), Qt::transparent);
  p.restore();

  // draw scene items
  QGraphicsView::paintEvent(e);
}

To copy to clipboard, switch view to plain text mode 

and for my QMainWindow subclass :

setStyleSheet("background: red") ;

setStyleSheet("background: red") ;

To copy to clipboard, switch view to plain text mode 

result : i would like to see my desktop where it's red in the view around the scene, but i see red background.
Question is : do i have to override my MainWindow:aintEvent() to be able to achieve this effect ?

redbackground.png

[wysota]

The top-level widget you want to be transparent needs to have that flag set, not its most-child one.

Note that you have to paint every area you want opaque yourself (you can see your image shines through over the calendar on the left).

transparent.png

#include <QtGui>
 
int main(int argc, char **argv){
  QApplication app(argc, argv);
  QMainWindow mw;
  mw.setAttribute(Qt::WA_TranslucentBackground);
  QToolBar *tb =  mw.addToolBar("xyz");
  QGraphicsView *view = new QGraphicsView;
  mw.setCentralWidget(view);
  QDockWidget *dw = new QDockWidget;
  dw->setWidget(new QCalendarWidget);
  mw.addDockWidget(Qt::LeftDockWidgetArea, dw);
  QGraphicsScene scene;
  view->setScene(&scene);
  QPalette p = view->viewport()->palette();
  p.setColor(QPalette::Base, Qt::transparent);
  view->viewport()->setPalette(p);
  scene.addRect(10,10,50,20, QPen(Qt::red), Qt::blue);
  mw.show();
  return app.exec();
}

#include <QtGui>

int main(int argc, char **argv){
  QApplication app(argc, argv);
  QMainWindow mw;
  mw.setAttribute(Qt::WA_TranslucentBackground);
  QToolBar *tb =  mw.addToolBar("xyz");
  QGraphicsView *view = new QGraphicsView;
  mw.setCentralWidget(view);
  QDockWidget *dw = new QDockWidget;
  dw->setWidget(new QCalendarWidget);
  mw.addDockWidget(Qt::LeftDockWidgetArea, dw);
  QGraphicsScene scene;
  view->setScene(&scene);
  QPalette p = view->viewport()->palette();
  p.setColor(QPalette::Base, Qt::transparent);
  view->viewport()->setPalette(p);
  scene.addRect(10,10,50,20, QPen(Qt::red), Qt::blue);
  mw.show();
  return app.exec();
}

To copy to clipboard, switch view to plain text mode 

[totem]

Ok you solved my problem

I just paste a modified-version of your sample code, because Windows needs some extra-flag to be set :
Actually only Qt::FramelessWindowHint is needed (regarding documentation) but the others are usefull

#include <QtGui>
int main(int argc, char **argv)
{
	QApplication app(argc, argv);
	QMainWindow mw;
	mw.setAttribute(Qt::WA_TranslucentBackground);
	mw.setWindowFlags( Qt::FramelessWindowHint|Qt::WindowSystemMenuHint|Qt::WindowStaysOnTopHint ) ;
	QToolBar *tb = mw.addToolBar("xyz");
	QGraphicsView *view = new QGraphicsView;
	mw.setCentralWidget(view);
	QDockWidget *dw = new QDockWidget;
	dw->setWidget(new QCalendarWidget);
	mw.addDockWidget(Qt::LeftDockWidgetArea, dw);
	QGraphicsScene scene;
	view->setScene(&scene);
	QPalette p = view->viewport()->palette();
	p.setColor(QPalette::Base, Qt::transparent);
	view->viewport()->setPalette(p);
	scene.addRect(10,10,50,20, QPen(Qt::red), Qt::blue);
	mw.show();
	return app.exec();
}

#include <QtGui>
int main(int argc, char **argv)
{
	QApplication app(argc, argv);
	QMainWindow mw;
	mw.setAttribute(Qt::WA_TranslucentBackground);
	mw.setWindowFlags( Qt::FramelessWindowHint|Qt::WindowSystemMenuHint|Qt::WindowStaysOnTopHint ) ;
	QToolBar *tb = mw.addToolBar("xyz");
	QGraphicsView *view = new QGraphicsView;
	mw.setCentralWidget(view);
	QDockWidget *dw = new QDockWidget;
	dw->setWidget(new QCalendarWidget);
	mw.addDockWidget(Qt::LeftDockWidgetArea, dw);
	QGraphicsScene scene;
	view->setScene(&scene);
	QPalette p = view->viewport()->palette();
	p.setColor(QPalette::Base, Qt::transparent);
	view->viewport()->setPalette(p);
	scene.addRect(10,10,50,20, QPen(Qt::red), Qt::blue);
	mw.show();
	return app.exec();
}

To copy to clipboard, switch view to plain text mode 

Now I will try to paint every area I want opaque, and voilÃ

thank you

[manojmka]

Thanks to all of you guys for this useful post!! It works great.

I want user to be able to peep through the whole UI and see something working behind application. henceforth, I tried doing:

void MotionAlarm::setThroughTransparent(QWidget *widget)
{
    if(widget==NULL)
        return;
    widget->setAttribute(Qt::WA_TranslucentBackground);
    setThroughTransparent(widget->parentWidget());
}
 
void MotionAlarm::somefunction()
{
    setThroughTransparent(graphicsView);
}

void MotionAlarm::setThroughTransparent(QWidget *widget)
{
    if(widget==NULL)
        return;
    widget->setAttribute(Qt::WA_TranslucentBackground);
    setThroughTransparent(widget->parentWidget());
}

void MotionAlarm::somefunction()
{
    setThroughTransparent(graphicsView);
}

To copy to clipboard, switch view to plain text mode 

It works but the problem is that even the blank areas on parent windows become transparent which should not happen! Is there any way, that I can make a hole in UI for a specific region (graphics view), see the desktop but still operate on graphics view?

I tried doing it in the following way:

void MotionAlarm::on_buttonReset_clicked()
{
    QRegion region = graphicsView->visibleRegion();
    region.translate(graphicsView->pos());
    createHole(region);
}
 
void MotionAlarm::createHole(QRegion region)
{
    QRegion widgetRegion = visibleRegion();
    QRegion visibleReg = widgetRegion.subtracted(region);
    this->setMask(visibleReg);
}

void MotionAlarm::on_buttonReset_clicked()
{
    QRegion region = graphicsView->visibleRegion();
    region.translate(graphicsView->pos());
    createHole(region);
}

void MotionAlarm::createHole(QRegion region)
{
    QRegion widgetRegion = visibleRegion();
    QRegion visibleReg = widgetRegion.subtracted(region);
    this->setMask(visibleReg);
}

To copy to clipboard, switch view to plain text mode 

but then I lose all the control on graphics view and don't see any graphics items rendered as well as mouse events are lost!

[wysota]

Set a mask on the window (QWidget::setMask()).

[manojmka]

I did, but then I can not see Graphics items at all and mouse events are also not captured by application! Please see the function createHole()

[wysota]

Is "MotionAlarm" class object a top-level window?

[manojmka]

For my current test application, yes. It may not be the top level widget/window in real application, but all the test cases which I have described belong to the test application only.