Creating browser with transparent background

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.

Creating browser with transparent background

Postby efranco23 » Tue Mar 05, 2013 5:11 pm

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);
Last edited by efranco23 on Thu Mar 07, 2013 1:39 pm, edited 1 time in total.
Eder Franco
Manaus, AM - Brazil
efranco23
Newbie
 
Posts: 9
Joined: Mon Feb 25, 2013 2:52 pm

Re: Creating browser with transparent background

Postby magreenblatt » Tue Mar 05, 2013 5:22 pm

magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Creating browser with transparent background

Postby efranco23 » Wed Mar 06, 2013 2:05 pm

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?
Eder Franco
Manaus, AM - Brazil
efranco23
Newbie
 
Posts: 9
Joined: Mon Feb 25, 2013 2:52 pm

Re: Creating browser with transparent background

Postby efranco23 » Thu Mar 07, 2013 1:43 pm

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).
Eder Franco
Manaus, AM - Brazil
efranco23
Newbie
 
Posts: 9
Joined: Mon Feb 25, 2013 2:52 pm

Re: Creating browser with transparent background

Postby fddima » Thu Mar 07, 2013 2:03 pm

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. :)
fddima
Master
 
Posts: 788
Joined: Tue Dec 07, 2010 6:10 am

Re: Creating browser with transparent background

Postby efranco23 » Thu Mar 07, 2013 3:22 pm

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.
Eder Franco
Manaus, AM - Brazil
efranco23
Newbie
 
Posts: 9
Joined: Mon Feb 25, 2013 2:52 pm

Re: Creating browser with transparent background

Postby fddima » Fri Mar 08, 2013 5:58 am

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.
fddima
Master
 
Posts: 788
Joined: Tue Dec 07, 2010 6:10 am

Re: Creating browser with transparent background

Postby Gil » Tue May 21, 2013 2:39 pm

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
Gil
Newbie
 
Posts: 1
Joined: Tue May 21, 2013 2:33 pm

Re: Creating browser with transparent background

Postby badboy55 » Mon Mar 17, 2014 4:51 pm

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
badboy55
Newbie
 
Posts: 3
Joined: Wed Jan 29, 2014 7:02 pm

Re: Creating browser with transparent background

Postby yosoymin » Tue Sep 08, 2020 7:18 am

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
yosoymin
Techie
 
Posts: 11
Joined: Mon Mar 02, 2020 1:28 am


Return to Support Forum

Who is online

Users browsing this forum: No registered users and 18 guests