jbbqqf
Posts: 8
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: 1641
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas! :)
Contact: Website

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
Want to run Minecraft Java on your RPi? Easiest way is with Pi-Apps - just click Install.
https://github.com/Botspot/pi-apps
Pi-Apps also includes Zoom, Visual Studio, Tor browser, Windows 10 theme, and 33 more.
Over 50,000 users!

jbbqqf
Posts: 8
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: 1641
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas! :)
Contact: Website

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.
Want to run Minecraft Java on your RPi? Easiest way is with Pi-Apps - just click Install.
https://github.com/Botspot/pi-apps
Pi-Apps also includes Zoom, Visual Studio, Tor browser, Windows 10 theme, and 33 more.
Over 50,000 users!

6by9
Raspberry Pi Engineer & Forum Moderator
Raspberry Pi Engineer & Forum Moderator
Posts: 10307
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.

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

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

Tue Jan 28, 2020 10:51 am

Ok, I understand that there is no easy way to display an app over the omxplayer layer.

Code: Select all

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.
I tried it at first and from what I remember there were small FPS drops. But now when I test it, the video runs smoothly :)

But, I have 2 new issues :

1/ how to tell a window to stay on top via CLI ? I tried solutions presented in this post https://www.raspberrypi.org/forums/view ... p?t=236620.

Code: Select all

wmctrl -r "The App" -b add,above
does not work and does not print anything. The return code of the command (echo $?) is 1 (error). When I add the verbose flag (-v) the only line printed is "envir_utf8: 1". The command is working on a debian buster though.

As for

Code: Select all

xprop -id `xdotool search "The App"` -set _NET_WM_STATE_ABOVE true
I have a error message "xprop: error: unsupported conversion for _NET_WM_STATE_ABOVE" that google doesn't seem to know.

2/ Manually toggling the "always on top" flag on a window lets it stay on top, but VLC in fullscreen acts like omxplayer, covering everything and ignoring the "always on top"

I'm considering writing a bit of code to integrate VLC in a frameless gtk/wx window (examples https://git.videolan.org/?p=vlc/binding ... es;hb=HEAD), but I still need to find a solution to automatize putting my button application "always on top".

User avatar
Botspot
Posts: 1641
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas! :)
Contact: Website

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

Tue Jan 28, 2020 1:38 pm

jbbqqf wrote:
Tue Jan 28, 2020 10:51 am
how to tell a window to stay on top via CLI?
I assume you mean making the application be over VLC, not making VLC always on top.

Two ways to do it:
  1. Always on top
  2. focus
These two accomplish the same thing, but focusing your application window seem to be a better option in your case.

Xdotool or wmctrl can focus windows.

Just have a script repeat the focus command every 1 second or so.

A focused window stays on top as long as it's focused. Since it's focused, you are likely to get better responsiveness to the moue.
You can keep trying to make windows always on top with wmctrl, but I never got it working. In the end, I just went with xdotool clicking the button "Always on top". Kind of a hacky way to do it, but it works in my case.
jbbqqf wrote:
Tue Jan 28, 2020 10:51 am
VLC in fullscreen acts like omxplayer, covering everything and ignoring the "always on top"
Yes. In fullscreen VLC is even more efficient since it runs in an OMX-style overlay.
Fortunately VLC has 2 different fullcreen modes. Pressing F gets you to the overlay (undesirable).
But pressing F11 gets you to a different fullscreen not in an overlay.
Last edited by Botspot on Sat Feb 15, 2020 3:05 pm, edited 2 times in total.
Want to run Minecraft Java on your RPi? Easiest way is with Pi-Apps - just click Install.
https://github.com/Botspot/pi-apps
Pi-Apps also includes Zoom, Visual Studio, Tor browser, Windows 10 theme, and 33 more.
Over 50,000 users!

rbn
Posts: 162
Joined: Tue Dec 27, 2011 8:32 pm
Location: Near Peterborough
Contact: Website

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

Sat Feb 15, 2020 2:59 pm

I'm wondering if some the stuff in this thread is relevant to my problem here?
viewtopic.php?f=31&t=265187

If so are you able to give any guidance.

User avatar
Botspot
Posts: 1641
Joined: Thu Jan 17, 2019 9:47 pm
Location: Texas! :)
Contact: Website

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

Thu May 21, 2020 1:59 pm

rbn wrote:
Sat Feb 15, 2020 2:59 pm
I'm wondering if some the stuff in this thread is relevant to my problem here?
viewtopic.php?f=31&t=265187

If so are you able to give any guidance.
What's "problem" are you having? :?
Want to run Minecraft Java on your RPi? Easiest way is with Pi-Apps - just click Install.
https://github.com/Botspot/pi-apps
Pi-Apps also includes Zoom, Visual Studio, Tor browser, Windows 10 theme, and 33 more.
Over 50,000 users!

uNki
Posts: 1
Joined: Fri May 01, 2020 5:10 pm

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

Tue Aug 25, 2020 7:46 pm

Just to be clear: it's still not possible to achieve smooth playback of 1080p material in Chromium on a RP4?
Last time I checked I tried in vain to play a 1080p video within an HTML video tag inside an Electron application on a RP3. I was wondering if this would work now with the RP4 - seems like it doesn't :/

SergeyYurkov
Posts: 1
Joined: Sun Aug 30, 2020 11:32 am

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

Sun Aug 30, 2020 11:42 am

Hi jbbqqf,
I have a similar task but I don't need overlay elements to be interactive. So I'm thinking about creating a vlc overlay module. There were some efforts in that direction a while ago (https://wiki.videolan.org/SoC_2007_Proj ... o_Overlays). I wonder what's your current progress?

Return to “Advanced users”