Transparent windows in linux

Easy Way to Get Semi-Transparent Windows on Ubuntu 21.10

I wrote about a patched version of Mutter that delivers one of the Linux desktop’s most-desired effects: translucent app windows with frosted blur effect, similar to the sort found on macOS and Windows 11.

That method uses a project called Mutter Rounded, which provides a command line script that recompiles Mutter (a core system component) to ‘patch’ in a set of third-party code to add the blur support natively.

While the process isn’t hard to get up and running —I did it 😅— it is a lot more “involved” than some are comfortable with.

Thankfully there is an easier alternative.

If you’re on Ubuntu 21.10 you can install the Blur Me GNOME extension (based on the Blur My Shell extension I’ve written about before). Pair this extension with a GTK theme that supports transparency, like Fluent by Vince Liuice, and you can achieve a modern, eye-catching aesthetic:

While it looks pretty I should stress that this route is not without some drawbacks. I found it a little resource intensive on the laptop I used especially when multiple windows are open. As a counter: others report very good performance.

You get a fairly decent set of controls over how, what, and where the blur effect is applied, including control over the blur brightness and sigma (strength), and a choice of performance vs artefacts options:

If you’re serious about wanting blurred apps on Ubuntu then, overall, Mutter Rounded is probably the better approach of the two. It uses fewer resources, offers a spot more control, and is just as visually effective.

But I appreciate it’s also a hassle (and easily overwritten by system updates) 💁🏻‍♂️.

So, if you have a few CPU cycles to spare and you’re on a fairly decent desktop rig — on laptops the increased resource usage will chow through battery faster — you may find an extension-led approach less intimidating — and much easier to switch off once you get bored of it!

For more detail, and the ideal spot to file any bug reports, head to the Blur Me GitHub page.

Give it a go and let me know what you think!

Home / Themes / Easy Way to Get Semi-Transparent Windows on Ubuntu 21.10

Источник

Transparent Windows on Linux (Electron)

Doom Solution 2: There do seem to be multiple issues with transparency, on different distributions with differing hardware. Examples https://github.com/electron/electron/issues/2170 https://github.com/zeit/hyper/pull/842 https://github.com/electron/electron/issues/15947 Can’t succeed in making transparent window in Electron (javascript) From the Electron docs: https://github.com/electron/electron/blob/master/docs/api/frameless-window.md Solution 3: This worked to me: Solution 1: I assume you sub classed QRubberBand (RubberBand).

Transparent Windows on Linux (Electron)

I have encounter the same problem as you and so I have written :

• this StackOverFlow question : Can’t succeed in making transparent window in Electron (javascript)
• this Electron issue : https://github.com/electron/electron/issues/15947
• and finally request this feature : https://github.com/electron/electron/issues/16809

Till the requested feature is implemented, the solution is simple just add a delay before launching the window.

You can clone this git repo, put the delay to 500, and normally magic will appear.

EDIT 1 : Use this repo : https://gitlab.com/doom-fr/electron-transparency-demo

git clone https://gitlab.com/doom-fr/electron-transparency-demo cd electron-transparency-demo npm install npm start # or npm run startWithTransparentOption # or npm run startWithAllOptions 

For me, it works out of the box with Debian Jessie and electron 4.0.5, for npm start , npm run startWithTransparentOption but not with npm run startWithAllOptions .

NB : be carefull to set at least 500ms to have chance it works. After you can reduce the delay but it is not stable. It is why an event on transparentReady is needed.

There do seem to be multiple issues with transparency, on different distributions with differing hardware. There are various suggested workarounds. You might not be able to make transparency work acceptably for your scenario on all hardware and distributions.

• https://github.com/electron/electron/issues/2170
• https://github.com/zeit/hyper/pull/842
• https://github.com/electron/electron/issues/15947
• Can’t succeed in making transparent window in Electron (javascript)

On Linux, users have to put —enable-transparent-visuals —disable-gpu in the command line to disable GPU and allow ARGB to make transparent window, this is caused by an upstream bug that alpha channel doesn’t work on some NVidia drivers on Linux.

if(process.platform === "linux") < app.commandLine.appendSwitch('enable-transparent-visuals'); app.disableHardwareAcceleration(); app.on('ready', () =>setTimeout(createWindow, 400)); > 

PyQt5: Create semi-transparent window with non, First set your background to be completely transparent. This only applies to the window’s background, and not the children objects. self.setAttribute (QtCore.Qt.WA_TranslucentBackground, True) You can remove the border if you want with this. self.setWindowFlags (QtCore.Qt.FramelessWindowHint)

How can we make a QRubberBand semi-transparent

I assume you sub classed QRubberBand (RubberBand).

After calling the setWindowopacity the paint event is generated (http://doc.qt.io/qt-5/qwidget.html#windowOpacity-prop)

So redefine the paint event in RubberBand class.

Inside the paint event call «initStyleOption» (given below)

By calling «initStyleOption» you can set the rubber band parameters for drawing.

The real issue with making the QRubberband semi-transparent is that mplayer is painting on a window without Qt having any knowledge of it. Hence Qt itself cannot act as a compositor to generate the required effect.

One possibility would be to make the QRubberBand a top level window. That way the compositing is the responsibility of the underlying graphics system rather than Qt.

With that in mind try the following. Firstly a utility base class to manage the geometry.

class abstract_rubber_band < public: virtual QRect get_geometry () const < return(QRect(m_parent->mapFromGlobal(widget().geometry().topLeft()), widget().size())); > virtual void set_geometry (const QRect &rect) < widget().setGeometry(map_rect(rect)); >protected: explicit abstract_rubber_band (QWidget *parent) : m_parent(parent) <> /* * @param point Coords relative to effective parent. */ QPoint map_point (QPoint point) const < if (point.x() < 0) point.rx() = 0; else if (point.x() >= m_parent->width()) point.rx() = m_parent->width() - 1; if (point.y() < 0) point.ry() = 0; else if (point.y() >= m_parent->height()) point.ry() = m_parent->height() - 1; point = m_parent->mapToGlobal(point); return(point); > QRect map_rect (QRect rect) const < return(QRect(map_point(rect.topLeft()), map_point(rect.bottomRight()))); >private: QWidget &widget () < return(dynamic_cast(*this)); > const QWidget &widget () const < return(dynamic_cast(*this)); > QWidget *m_parent; >; 

Now use the above as a base of the required rubber band class.

class rubber_band: public abstract_rubber_band, public QRubberBand < using super = QRubberBand; public: /* * @param parent Note that this isn't actually used as the * parent widget but rather the widget to which * this rubber_band should be confined. */ explicit rubber_band (QWidget *parent) : abstract_rubber_band(parent) , super(QRubberBand::Rectangle) < setAttribute(Qt::WA_TranslucentBackground, true); >protected: virtual void paintEvent (QPaintEvent *event) override < QPainter painter(this); painter.fillRect(rect(), QColor::fromRgbF(0.5, 0.5, 1.0, 0.25)); QPen pen(Qt::green); pen.setWidth(5); painter.setPen(pen); painter.setBrush(Qt::NoBrush); painter.drawRect(rect().adjusted(0, 0, -1, -1)); /* * Display the current geometry in the top left corner. */ QRect geom(get_geometry()); painter.drawText(rect().adjusted(5, 5, 0, 0), Qt::AlignLeft | Qt::AlignTop, QString("%1x%2+%3+%4").arg(geom.width()).arg(geom.height()).arg(geom.left()).arg(geom.top())); >>; 

The above rubber_band class should almost be a drop in replacement for QRubberBand . The main difference is that rather than reading/writing its geometry with geometry / setGeometry you must use get_geometry / set_geometry — those will perform the mapping to/from global coordinates.

In your particular case create the rubber_band with.

rubberBand = new rubber_band(ui->videoShowLabel); 

How to set background color of view transparent in, backgroundColor: ‘transparent’ is by far the easiest solution. Try this backgroundColor: ‘#00000000’ it will set background color to transparent, it follows #rrggbbaa hex codes. For some reason, this variant displays the result color with opacity incorrectly. If I’m not mistaken it’s a bug in RN.

PyQt5: Create semi-transparent window with non-transparent children

Ok, while is seems not to work with the available flags you can still use Qt.WA_TranslucentBackground because it is possible to draw a semitranparent rect on that transparency.

Derive your mainwindow from QMainWindow and use that class instead.

Apply self.setAttribute(Qt.WA_TranslucentBackground, True) to that class

Implement the paintEvent of your mainwindow class like this (similar, might contain errors, but the principle should work):

QPixmap canvas(rect()) canvas.fill(Qt.transparent) # fill transparent (makes alpha channel available) QPainter p(canvas) # draw on the canvas p.setOpacity(0.3) p.setBrush(QBrush(Qt.white)) # use the color you like p.setPen(QPen(Qt.transparen)) p.drawRect(rect()) # draws the canvas with desired opacity p.start(self) # now draw on the window itself p.drawPixmap(rect(), canvas) 

I just wanted to provide another solution in case someone else runs into this problem. The way I solved it is like this.

First set your background to be completely transparent. This only applies to the window’s background, and not the children objects.

self.setAttribute(QtCore.Qt.WA_TranslucentBackground, True) 

You can remove the border if you want with this.

self.setWindowFlags(QtCore.Qt.FramelessWindowHint) 

Now, if you want there to still be some background color, apply a QFrame to your window, and place all child objects within it. Using your style sheet, set the color of the frame and your desired opacity like this. The last value is the opacity percentage.

self.main_frame.setStyleSheet("background-color: rgba(0, 120, 185, 60)") 

Html — Is it possible to make part of the browser, Since standard compliance is very high on the priority list for all browser developers, making this out of the box would be a problem. Namely because there is no CSS/HTML support for it, and the standard is to have a white background. This means that they would need a custom «flag» somewhere in the markup to …

Is it possible to make part of the browser transparent to display underlying desktop/windows in a web app?

This is not possible «currently», but there’s no technical reason why a browser couldn’t provide a proprietary API for this, using non standard html/css/js.

However, that’s what it would take, a browser to actually implement this functionality and then expose it as an API, and even then it would be browser specific.

UPDATE (as some people have perhaps misunderstood my answer. ):

I’m giving technical context to the question. Of course noone’s ever going to implement this, but I’m saying it’s technically possible.

Also, doing this would not break the sandbox model. The browser itself (forget an API for a second) could implement transparency any way it wanted. Once it that it could hook it up to it’s Javascript engine, and create a stupid call: Chrome.Element(«»).WeirdTransparency()

UPDATE to Questioner’s Update:

The reason why would I like it is that I want to build a cross-platform (Linux, Windows, Mac), zero-install, fancy-looking rich client application (not meant to be served as an Internet website)

AIR kinda covers 90% or your requirements. It still needs a small install, but apart from that, you’re running.

This is possible in Electron. By setting a transparent background on the body.

I’m sure browser developers would need a lot of «inspiration» — aka $$$ to do this. It’s currently not a feature that a whole lot of people are looking for.

Since standard compliance is very high on the priority list for all browser developers, making this out of the box would be a problem. Namely because there is no CSS/HTML support for it, and the standard is to have a white background. This means that they would need a custom «flag» somewhere in the markup to tell it to switch off the white background.

This would be exclusive to the browser that implements the «feature» and anyone else using any other browser would not be privy to the it.

Acrylic material, To paint a specific surface, apply one of the WinUI 2 theme resources to element backgrounds just as you would apply any other brush resource. XAML Copy Источник