JCEF Transparent Window in OSR mode

[ramyakrishnan]

Hi ,

I am trying to create a transparent browser such that when I create a html , which is transparent, I would be able to see the underlying element. I am very new to java and this is first time trying to do JCEF . I have gotten the off screen rendering mode and the transparent arguments turned on. I have written a transparent html page and loaded it on the browser . But I still see a blue->red gradient background on my browser. I am not sure how to make it fully transparent. Has anyone come across this issue ? Can you help me solve this ?

Thanks

[ramyakrishnan]

Can I get any pointers for this question ? Pls ? I checked thru a lot of cef pages but I could not understand any of the solution in Java perspective.

[ramyakrishnan]

I found a place where we can do CefSettings and there was a option called background_color in it.. Is this the correct option ? I tried setting it but still nothing happened . anyone who can help me?


UPDATE: this option gave me only opaque and colored window.It doesnt pic up the alpha value I provide for the ColorType. Is there a different route that I should take to achieve this.

[magreenblatt]

Off-screen rendering provides a ByteBuffer via CefRenderHandler.onPaint. When transparency is enabled the bytes will include an alpha component. The gradient you see is rendered as the background via CefRenderer. At a minimum you will need to modify CefRenderer and related classes so that it composites the browser output with whatever is in the background instead of using a gradient.

[ramyakrishnan]

Thanks Marshall! I will try this and post my update here for everyone who is trying this now or in near future once I get it to work ..

[ramyakrishnan]

Hi Marshal,

Sorry to ask too many questions But I dont seem to still get a transparent background working . I tried playing around with renderer class and the Osr class where the canvas is getting created , and at one point I tried to do away with the Cef Renderer class to see if nothing comes up but I still get this black canvas but I have no idea y .. [ i also set the composite graphics on my canvas like below ]

Code: Select all

Composite urComposite = g2.getComposite();
        g2.setComposite(AlphaComposite.getInstance(
            AlphaComposite.SRC_OVER, 0));
        g2.fillRect(0,0,browser_rect_.width , browser_rect_.height);
        g2.setComposite(urComposite);

I also tried setting gl2.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); but the alpha from here doesnt really do anything , so if I put gl2.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); or gl2.glClearColor(0.0f, 0.0f, 0.0f, 1.0f) ; I still get the same output... [ at this point i dint paint anything on the canvas]

So even if i remove the painting , I get this black screen in my application which I had no idea to get off.


Do u have any pointers ? I am completely lost at this point Once again sorry to ask too many questions.


UPDATE :I exploited the GLJPanel inplace of a Canvas and also tried GLJPanel.setOpaque(false) and still end up with the same result.

[magreenblatt]

At this point you are in uncharted territory and will need to figure it out for yourself. Perhaps you can find an example of non-opaque GLJPanel and work backwards from there.

[ramyakrishnan]

Hey MArshall!
Thanks for the advice ! I got this to work using the GLJPanel.

Update : For everyone looking to do this now or in near future, GLCanvas cannot give transparent background because it is a heavy weight element so it obscures everything behind it . Therefore transparency could be achieved by using the GLJPanel. You might have to play around a bit with the Rendering as well to get what you are looking for . A good place to start would be to look at the JGear demo for the GLJPanel. Happy coding!

[rwehner]

Hello ramyakrishnan,
Will you please be more specific (or provide example code) for the changes you made to GLPanel? Will you provide a link to the JGear demo for GLJpanel?
Thanks

[ramyakrishnan]

A pull request has been put for this on the main JCEF repo on bitbucket : https://bitbucket.org/chromiumembedded/ ... r-fix/diff