Page 1 of 1

Creating browser with transparent background

PostPosted: Tue Mar 05, 2013 5:11 pm
by efranco23
Hi, guys!

I´ve been working with CEF3 for Windows, to replace an old application based on IE. Untill this point, CEF is working great to our purposes, and I´m really impressed with his resources :)

Here is the situation I have:

1 - There´s a transparent window created to be the parent window handle for CefBrowserHost::CreateBrowser;
2 - I have an HTML page with full transparent BG and a circle shaped div with my div´s content (my goal is to create a rounded window with CEF browser inside);
3- The backgorund of the browser is white, and I need to change to full transparent.

Here is my code (modified from cefclient application):

Code: Select all
      
g_handler = new ClientHandler();
 g_handler->SetMainHwnd(hWnd);

RECT rect;
int x = 0;

GetClientRect(hWnd, &rect);

 rect.top += 0;

CefWindowInfo info;
CefBrowserSettings settings;

 rect.top = topvalue;
rect.bottom = bottomvalue;
 rect.left = leftvalue;
rect.right = rightvalue;
       
info.SetTransparentPainting(TRUE);

info.SetAsChild(hWnd, rect);
      
CefString newURL = "http://localhost/console/teste.html";
      
CefBrowserHost::CreateBrowser(info,static_cast<CefRefPtr<CefClient> >(g_handler),newURL, settings);

Re: Creating browser with transparent background

PostPosted: Tue Mar 05, 2013 5:22 pm
by magreenblatt

Re: Creating browser with transparent background

PostPosted: Wed Mar 06, 2013 2:05 pm
by efranco23
In CEF1 we have a transparent pop-up example wich is almost what I´m looking for.

I think I´m missing something or misunderstanding the usage of SetAsOffScreen in CEF3.

When I set info.SetTransparentPainting(TRUE) using info.SetAsChild(hWnd,rect) or even info.SetAsPopup(hWnd, "MyWindow"), nothing happens.

If I set info.SetAsOffScreen(hWnd), the window just desapear with the browser.

Is there any example of this in CEF3´s cefclient?

Re: Creating browser with transparent background

PostPosted: Thu Mar 07, 2013 1:43 pm
by efranco23
Just to register feedback, I have done this with sucess.

Just need to set:

Code: Select all
info.SetTransparentPainting(TRUE);
info.SetAsChild(hWnd,rect);


The whole issue was not in CEF3, but in the creation of the main window, wich I have done with CreateWindowEx() using WS_EX_LAYERED style and SetWindowLong() and SetLayeredWindowAttributes(). Also needed to set up Aero glass, using DwmExtendFrameIntoClientArea() (MSDN´s default example worked great).

Re: Creating browser with transparent background

PostPosted: Thu Mar 07, 2013 2:03 pm
by fddima
efranco23 wrote:Just to register feedback, I have done this with sucess.

Just need to set:

Code: Select all
info.SetTransparentPainting(TRUE);
info.SetAsChild(hWnd,rect);


The whole issue was not in CEF3, but in the creation of the main window, wich I have done with CreateWindowEx() using WS_EX_LAYERED style and SetWindowLong() and SetLayeredWindowAttributes(). Also needed to set up Aero glass, using DwmExtendFrameIntoClientArea() (MSDN´s default example worked great).


Can you describe more precise and probably provide screenshot of your's work? Looks like we are speaking about different transparency. :)

Re: Creating browser with transparent background

PostPosted: Thu Mar 07, 2013 3:22 pm
by efranco23
Yes, I just found it out :)

I´m creating the window with CreateWindowEx, to use as handler to the cef browser. Then, in the WM_CREATE message i´m setting SetLayeredWindowAttributes, before calling CefBrowserHost::CreateBrowser, to remove window brackground, like this:

Code: Select all
SetLayeredWindowAttributes(hWnd, RGB(0xff, 0xff, 0xff), 0xff, LWA_COLORKEY);


This is enough to make my window transparent and clickable trought the areas with transparent background in HTML.

However, I´m just removing white color from the window. With this, another issues occur, but ATM this works to our purposes in here.

What I really wanted to do is completely remove browser background rendering, without afect the colors in the HTML page.

Re: Creating browser with transparent background

PostPosted: Fri Mar 08, 2013 5:58 am
by fddima
efranco23 wrote:
Code: Select all
SetLayeredWindowAttributes(hWnd, RGB(0xff, 0xff, 0xff), 0xff, LWA_COLORKEY);


Thanks. Huh. :)

Just for clarification:
It is definitely doesn't transparent background, just color replacing.
By transparent background usually means that body { background-color: transparent; } and html engines draw it with true transparency.
CEF inside doesn't do it for windowing mode (but can? like in OSR?). But more complex question it is composite vs layered window, first available vista+ with dwm enabled, second - available on XP. But current chromium's window arch can't use them easily. More deeply explain's Trevor Linton on their posts.

Re: Creating browser with transparent background

PostPosted: Tue May 21, 2013 2:39 pm
by Gil
hi,
I created the CEF1 sample main windows with a transparent background,
using SetLayeredWindowAttributes as described here.
It works on Windows 7 and Vista, but remains opaque in Windows XP.

I note these points:

- The function SetLayeredWindowAttributes returns success
- It does work on XP with LWA_ALPHA (it makes the whole window semi-transparent), but not with LWA_COLORKEY
- When I connect to the XP through Remote Desktop, I do see the transparency as expected!

Can someone help and explain why it is rendered as opaque on Windows XP?

Thanks

Re: Creating browser with transparent background

PostPosted: Mon Mar 17, 2014 4:51 pm
by badboy55
I also run into the same issue that Gil run into. Transparency will work only after changing the Window Display settings from 32bit to 16bit on XP. Is there a way to get it to work on 32bit windows. This is when using SetLayeredWindowAttributes with LWA_COLORKEY. Using CEF 3.1547.1597.0

Thanks

Re: Creating browser with transparent background

PostPosted: Tue Sep 08, 2020 7:18 am
by yosoymin
I've found a way this is possible using views framework and a simple modification in CEF code. This is working in Windows and Linux. More info in this thread: https://www.magpcss.org/ceforum/viewtop ... =8&t=17421