Fully Transparent Background (client background-color control)

Community Usage questions
1

Hello!

I'm wondering if it's possible to add a separate control/property to set the very base background transparency of the layout/session to be fully transparent? Or at least have direct control of the very base background color/transparency of the layout?

I'm using O-S-C in a rather unusual/creative way - using a canvas widget to generate and control some simple graphics for a media server that is then composited on top of some other video media files within the media server. The media server uses a WebKit-based browser, and it will utilize the transparency of the CSS property "background-color" to properly composite on top of other media (i.e. alpha channel will properly blend with other layers of media/graphics in the media server). So in my case, I want the canvas widget graphics I'm generating to be on top of a fully transparent background (i.e. background-color:rgba(0,0,0,0)

I was able to make a sort of hack workaround by changing several css variable colors:

:root {
  --color-background: rgba(0,0,0, 0);
  --color-ui-background: rgba(0,0,0, 0);
  --color-ui-foreground: rgba(0,0,0, 0);
}

But it only seems to work if I change all three, and this has the unfortunate negative effect of changing the color/transparency of the editor panels as well, making it pretty unuseable.

Does this seem like it would be a simple enough possibility? Or is there another way I'm missing of trying to accomplish this? Let me know what you think. Thanks!

2

Try

body,
osc-workspace,
osc-panel-container#main,
osc-panel-container#main osc-panel-container.center,
.root-container {
  background-color: transparent!important;
}

then if needed you can change the colorBg property on container widgets.

1 Like
3

Hmmm, this doesn't seem to work... I placed this code in the CSS of the root widget. Should I be placing it somewhere else??

4

I forgot to mention this goes in a theme file loaded with the server's theme option, it's the only way to target elements outside of the root widget (which is needed here since the whole client app is supposed to lay on top of something else if I understand correctly ).

5

A fully transparant root background makes me imagine an OSC layer on top of a DAW, with only some permanent widgets placed at bare/unused parts of the DAW. Touching a widget will be handled by OSC while touching next to them will be handled by the DAW. So apart from visual transparancy also 'tactile transparacy'.

I guess that's far too complicated to implement due to standard windows handling of operating systems. It's merely a fantasy, not a request :slight_smile:

6

Ahhh, I see! Thanks for the pointer towards the theme file.

I tried your initial css suggestion, which still didn't work... but this gave me a good starting point and I played around with it more and was able to make it work successfully by adding a few more css selectors: html, osc-panel-inner#osc-container (I don't think this has broken anything else... haha)

html, 
body,
osc-workspace,
osc-panel-container#main,
osc-panel-container#main osc-panel-container.center,
osc-panel-inner#osc-container,
.root-container {
  background-color: transparent!important;
}

thanks for your help!!