Transparent overlay

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

Transparent overlay

Postby Aaaaaaaa » Thu Mar 23, 2023 11:17 am

During the lifetime of my application, the user may open several browser windows, and possibly several at any one time. The intention with most of these windows is to display a website in a borderless window, with a few native functions exported in a "window" variable, and a mostly-transparent control overlay.

The transparency is a big concern because it doesn't seem to be a core feature of CEF (even though it is in both CefSharp and Electron?) but regardless, I haven't got that far yet: I'm still trying to work out how to add my overlay in the first place.

The overlay is a .html file so I thought this would be pretty simple to do using CefWindow::AddOverlayView. But it seems loading a file from anywhere other than a http/https URL is nigh-on-impossible in CEF - so that's a no-go. An overlay view does show but it's just a white rectangle covering up the whole page underneath, because it hasn't attempted to load any contents.

The next thing I tried was using a render process handler to intercept the overlay's creation and fill out the DOM myself. That isn't possible, either: I would need to know exactly which DOM belongs to my overlay, and the render process handler doesn't get informed about each of the views; when I create my first window and overlay, my render process handler gets one OnBrowserCreated and 13 OnContextCreated callbacks. (But only 8 OnContextReleased and 0 OnBrowserDestroyed, concerningly...)

I had the idea to pass a CefDictionaryValue into CefBrowserView::CreateBrowserView so I can identify browser views like that. But since I'm calling CreateBrowserView twice with two different dictionaries and only getting one OnBrowserCreated callback with one dictionary in it, it doesn't particularly help.

I'm starting to suspect the only way of achieving this relatively simple use-case will be to turn on windowless rendering, write my own code for opening a native x11/wayland/win32/cocoa window depending on platform, and set up a whole OpenGL or Vulkan context purely for drawing the pixels CEF sends me - thus taking up precious CPU bandwidth with work the GPU should rightly be doing. Even for a CEF application this seems like an insane level of design complexity just for one part of it to be possible. Please tell me there's a simpler way or something I'm missing? Thanks in advance.

Relevant repo links:
https://github.com/Adamcake/Bolt/blob/m ... rowser.cxx
https://github.com/Adamcake/Bolt/blob/m ... xx#L20-L25
https://github.com/Adamcake/Bolt/blob/m ... andler.cxx
Aaaaaaaa
Techie
 
Posts: 12
Joined: Wed Mar 15, 2023 2:36 pm

Re: Transparent overlay

Postby magreenblatt » Thu Mar 23, 2023 2:15 pm

The intention with most of these windows is to display a website in a borderless window, with a few native functions exported in a "window" variable, and a mostly-transparent control overlay.

Does the overlay need to be a separate browser? If so, why?
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Transparent overlay

Postby Aaaaaaaa » Thu Mar 23, 2023 2:25 pm

magreenblatt wrote:Does the overlay need to be a separate browser? If so, why?

I can't add controls into the actual webpage because those pages aren't all under my control, and because some of them were built to function as actual websites, in which having a "close" button and a "show devtools" button wouldn't make sense, for example. On the other hand, if you're asking if the overlay necessarily needs to be HTML as opposed to something else, then no, not at all - it just seemed like it'd be the easiest option at the time.

Also, unrelated, but just because I didn't mention it in any of my previous posts: thank you so much for all your hard work building and maintaining CEF! I'm sure you hear this often but it is greatly appreciated. Not to mention that you're willing to give your time over to any old user like me who has a question. Again, thank you.
Aaaaaaaa
Techie
 
Posts: 12
Joined: Wed Mar 15, 2023 2:36 pm

Re: Transparent overlay

Postby magreenblatt » Thu Mar 23, 2023 2:45 pm

The cefclient app can be run as a frameless window with overlay controls (buttons and text field). The command-line flags are “--use-views --hide-frame --hide-controls”. You can test that to see if the functionality would work for you.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Transparent overlay

Postby Aaaaaaaa » Thu Mar 23, 2023 6:24 pm

Hmm, I'll need some time to look at how cefclient does this but at a glance it looks like there's something embedded in the page source which facilitates the addition of the overlay controls? https://github.com/chromiumembedded/cef ... e.html#L45 - but I'll see what cefclient is doing to it, maybe I can make something work with this. Thanks for the tip.
Aaaaaaaa
Techie
 
Posts: 12
Joined: Wed Mar 15, 2023 2:36 pm

Re: Transparent overlay

Postby magreenblatt » Thu Mar 23, 2023 7:37 pm

Draggable regions come from the html content. The overlay controls do not.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Transparent overlay

Postby Aaaaaaaa » Sat Mar 25, 2023 6:36 pm

OK - I'm halfway there. The cefclient does this by making a custom CefRequestHandler that responds to a certain website URL (http://tests/overlay I think), sending the overlay instead of actually making a web request. The question remains of how to make the view transparent, though, since obviously I want the actual webpage to be visible through the un-occupied parts of my overlay. Setting opacity via CSS didn't work, and in the core CEF API transparency doesn't even seem to be a consideration.

I'm going to try patching my build with this PR because I think it's exactly what I need: https://bitbucket.org/chromiumembedded/ ... w-in-views but I see it hasn't been merged into stable builds since 2019, are there problems I should know about?

Either way thanks for your help so far.

PS: I have been thinking of other ways I could do this, like simply embedding the website in an iframe within the overlay for example. But I am definitely going to need to open a transparent-background window for another part of this project and it would be nice to solve that problem at the same time.
Aaaaaaaa
Techie
 
Posts: 12
Joined: Wed Mar 15, 2023 2:36 pm

Re: Transparent overlay

Postby Aaaaaaaa » Mon Mar 27, 2023 12:13 am

The transparent views patch seems to work so far.
Aaaaaaaa
Techie
 
Posts: 12
Joined: Wed Mar 15, 2023 2:36 pm


Return to Support Forum

Who is online

Users browsing this forum: Google [Bot], yutou15 and 44 guests