Adding an overlay with some text widgets to the Controller

Community Usage questions
1

Hi,

So I have this device which has 32 knobs, I am happy with it, he is happy with me.

image
image1922×1179 123 KB

The issue in here is that I want to keep track of which knob is whichone , in the physical controller that I have I just add little stickers such as 1 , 2 , 3, ... underneath each knob , but in here I want to make use of the huge gaps that the device has available.
So write labels in the middle of the knob , etc...
For that I have done the following.
Creating 2 Panels with the same Grid positioning , positioning them Absolute and z-indexing them , the Controller on top , with a little bit of faded opacity so I can see the overlay (in this case underlay) with the text widgets 1 , 2 , ... .

The first appreciation of this is that , even when it looks that the Encoders are empty in the inside , they are really not , and I explain myself.
I just wanted to lay the overlay on top or in the bottom, but if I do so without changing the Controllers Main Layer Opacity , it wont be seen , so as a side effect I need to decrease the opacity of this last layer in order to see the underlayer.

If the overlayer is placed on top then I wont be able to Control the controller as I will be touching text widgets instead of the actual encoders that now are diged underneath the overlay.

But the last and most weird effect is the following.

  • If I use the device with a certain view-port the underlay will dispaear , viceversa.

See for instance:

"Streched vertically viewport" I can see the underlay

image
image957×1133 28.2 KB

"Standard fullscreen wide viewport" I cannot see it

image
image1913×1178 122 KB

Attached the device so you can give it a go.

virtual-launchcontrolxl.js (1.3 KB)

Is there any way to solve this overlay? Or I shall just use one layer and just figure out how to tuck that text info? , it would be a pitty though cause there is such a huge "empty space" available to show info , and the device is meant to be used on Mobile Phones as well so the screen space is quite limited.

Thanks

2

I can't say for sure without the session file but it may be that a grid layout doesn't play well with absolutely positioned children. Have you considered using the knob's html property to insert the label instead of using an extra widget and a panel wrapper ? You'd only need some css to position it properly and make sure it doesn't catch touch events:

html

<div class="label">
1
</div>

css

.label {
  position: absolute;
  text-align: center;
  width: 100%;
  left: 0;
  top: 50%;
  line-height: 0;
  pointer-events: none;
}

example session
knob_label.json (2.4 KB)

1 Like