B4J Question Transparent anchor pane?

bdunkleysmith

Active Member
Licensed User
Longtime User
I have an app which displays a sports scoreboard data like this:

Scoreboard.png


Using desktop capture this scoreboard is superimposed onto the game video.

I can control the colour and transparency of the background, which is a rectangle and as you can see, I can also apply a gradient to the colour of that background rectangle.

However even though I can adjust the transparency of that rectangle, I cannot "see through" it when I superimpose it in the video, I presume that is because the anchor pane on which the UI is built is not transparent. But if I make the anchor pane transparent then all of the elements on the anchor pane become transparent.

Is there a solution to this so the required elements will be displayed over a transparent background?
 

bdunkleysmith

Active Member
Licensed User
Longtime User
Well I have achieved the transparency I desired with the code:

B4X:
    MainForm.SetFormStyle("TRANSPARENT")
    MainForm.BackColor = fx.Colors.Transparent
    MainForm.RootPane.Style = $"-fx-background-color:transparent;"$

but realise I should use CSSUtils to set that background color to transparent and so thought if I set the form anchorpane id to MainPanel that the appropriate code would be:

B4X:
CSSUtils.SetStyleProperty(MainPanel,"-fx-background-color", "transparent")

however that doesn't work.

What is the correct syntax?

I also understand that I can't have a transparent form which still shows the form icon and controls (minimise, maximise & close) showing. I'd prefer still to have those form controls even though the form is transparent.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
True but you can achieve the same effect:
That is not t Form that is translucid but the rootpane.
The rootpane can always be transparent if wanted to, but not the Form, which holds the rootpane.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
If you look closely the video, the topbar, where the decorations are, is NEVER translucide mot transparent, only the rootpane, the pane where you can add stuff to, as opposed to the topbar, where you have very limited action possibilities.
 
Upvote 0

bdunkleysmith

Active Member
Licensed User
Longtime User
Thanks everyone for your input and I've achieved the desired transparency of the desktop app, however having done that, I've now found that the desktop capture feature of the video mixing software I'm using can't "see" it!

So it's been an interesting technical exercise, but at this stage I can't use my app in the transparent mode. I now need to explore the available options in the video mixing software.
 
Upvote 0

keirS

Well-Known Member
Licensed User
Longtime User
If you look closely the video, the topbar, where the decorations are, is NEVER translucide mot transparent, only the rootpane, the pane where you can add stuff to, as opposed to the topbar, where you have very limited action possibilities.

That's just because the developer has chosen to have the decorations opaque. It's perfectly possible to have them semi transparent.

Untitled.png
Untitled.png
 
Upvote 0

bdunkleysmith

Active Member
Licensed User
Longtime User
KeirS you've got me interested in trying the Touch theme to achieve what I want in terms of transparency for my app, but my knowledge doesn't extend to how I incorporate that theme in my B4J project. Are you able to point me in the right direction to give me a kick start please?
 
Upvote 0
Top