jbbqqf
Posts: 3
Joined: Thu Jan 16, 2020 3:37 pm

Transparent windows (RPi3 or 4, electron app)

Thu Jan 16, 2020 4:00 pm

I am working on a project to display an HD video on a RPi (4, but 3 can work as well) with interactive buttons on the foreground. I expect the end result to be similar to this page: https://magic.wizards.com/fr/innistradmap. It looks like an animation, but in reality the page background is a video (https://media.wizards.com/2016/campaign ... p_c491.mp4) and the buttons manipulate the video player to make you feel it's animated.

The naive approach I tried was to embed the video in chromium. But since it's an HD video and I can't manage to make chromium use the hardware acceleration, the 24 fps video drops frames.

On the other hand, omxplayer plays accelerated videos very smoothly. So the second idea I had was to play a background video in omx and use background transparency in my minimal web application. Chromium can't display transparent backgrounds, but electron can. In this post https://stackoverflow.com/questions/535 ... javascript, there is a procedure for a Proof of Concept. The PoC is working well on my debian buster workstation, but the background is not transparent (black) on a bare RPi4 with the latest raspbian desktop.

From what I can read, the transparent background availability is OS dependent (window manager ?). But my knowledge in that area is limited. Can anyone help me understand and what it would require to work ?

I am also open to other suggestions if it achieves the goal described in the first link.

User avatar
Botspot
Posts: 320
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas

Re: Transparent windows (RPi3 or 4, electron app)

Sat Jan 18, 2020 2:04 pm

Most modern linux distributions ship with a compositor. Compositors mainly handle fading windows in and out, shadows, and transparency.

Raspbian is slimmed down for older models, so there is no compositor running by default. But there is one installed. To enable it:

Code: Select all

sudo raspi-config
Navigate using arrow keys and Enter. raspi-config --> Advanced Options --> Compositor --> Yes --> OK --> Finish.
On the next reboot, xcompmgr will autostart with default settings. If you want to change these settings, it's best to disable compositor from raspi-config, and then add your own custom xcompmgr line in ~/.config/lxsession/LXDE-pi/autostart.

Mine looks like this:
xcompmgr -C -c -o 0.5 -l -19 -t -10 -r 14
Atomic Pi's are radioactive. Orange Pi's are too sour.
Rock PI's are too hard. Banana Pi's are too soft...
Raspberry Pi's are JUST RIGHT!

jbbqqf
Posts: 3
Joined: Thu Jan 16, 2020 3:37 pm

Re: Transparent windows (RPi3 or 4, electron app)

Mon Jan 20, 2020 9:25 am

Thank you! It works!

Default xcompmgr options were not working though, so I had to use the

Code: Select all

~/.config/lxsession/LXDE-pi/autostart
trick. The command I use is just

Code: Select all

xcompmgr
with no options as it solves my use case.

I guess the autostart file overloads a default one that is supposed to launch the desktop, because creating this directory tree makes the Pi boot with no desktop, but it actually is better for this project :)

I'm still not done yet, because now I realize omxplayer is bypassing the X windows system, so now I need to find a way to display the application on top of the omxplayer layer :roll:

User avatar
Botspot
Posts: 320
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas

Re: Transparent windows (RPi3 or 4, electron app)

Mon Jan 20, 2020 1:20 pm

jbbqqf wrote:
Mon Jan 20, 2020 9:25 am
so now I need to find a way to display the application on top of the omxplayer layer :roll:
Oh, good luck with that... Attempting to run an X-based application over omxplayer's framebuffer layer is no easy task!
Maybe try VLC. It's hardware accelerated, and does not play in an "always-on-top" overlay like omxplayer does. In other words, other windows can cover the video no problem.
Last edited by Botspot on Mon Jan 20, 2020 2:39 pm, edited 1 time in total.
Atomic Pi's are radioactive. Orange Pi's are too sour.
Rock PI's are too hard. Banana Pi's are too soft...
Raspberry Pi's are JUST RIGHT!

6by9
Raspberry Pi Engineer & Forum Moderator
Raspberry Pi Engineer & Forum Moderator
Posts: 7742
Joined: Wed Dec 04, 2013 11:27 am
Location: ZZ9 Plural Z Alpha, aka just outside Cambridge.

Re: Transparent windows (RPi3 or 4, electron app)

Mon Jan 20, 2020 2:05 pm

To have things over the top requires per pixel alpha blending.
X will always create a final frame buffer without alpha because it expects to be in charge of what's on the display.
There's nothing stopping you using some other tool to create a DispmanX layer on top of omxplayer, but it can't be a simple X app.
Software Engineer at Raspberry Pi Trading. Views expressed are still personal views.
I'm not interested in doing contracts for bespoke functionality - please don't ask.

Return to “Advanced users”