WebView layering

[elemen8t]

Hey there,
I wanted a webview animation that is round and not square but that won't be possible, since you can't either use alpha blending or put something on top as a mask or even something behind for the UI.

I just want to show the round middle part on my plugin.

That`s what the doc says about that: The Webview is a native UI handle that is placed on top of the plugin interface. This means that you can't use any alpha blending or masking and put UI elements behind / infront of it.

Is there some way around it or do we just take the fact that It's that limited in terms of GUI integration if not your whole GUI is made in the webview?

(The alternative option would be glsl which allows these things but has many other issues to debug it for each hardwarey software and DAW)

[Christoph Hart]

@elemen8t yes, if you go webview you get a rectangle, not more not less. I‘m even not sure if JUCE components are shown correctly over the webview (eg a popup menu).

[elemen8t]

@Christoph-Hart well rip, thx for the reply tho ^^

[Straticah]

For me this works on mac to achieve a transparent webview.

html, body {
  background: transparent;
}

On windows it defaults to white i have not figured out why yet.

[Christoph Hart]

@Straticah yes but even if you manage to make it transparent across all platforms, you won't be able to click on anything outside the circle.

But I would just design the interface so that there is nothing interactive in the corner parts and then paint the background in the webview and hope that you don't notice the transition between JUCE / HISE UI and the webview.

[Straticah]

@Christoph-Hart yes rendering a bg image inside it makes sense.

Do you know if this win/mac transparency mismatch is JUCE or HISE related? I will try different approaches today but i am afraid i will run into issues.

Mac is behaving today when it comes to rendering transparency in webview (see screenshot)

same script on win: