Basic text dynamically updating based on Fader CC

Hi OSC community,

I must apologize for the basic questions as I'm still new to OSC and JavaScript in general.

I have a simple fader (id is fader_1) whose PreArgs are set to [1,11] to control Expression.

I have a simple text widget (using as label) that I want to dynamically update based on the CC channel of the fader (in this case 11).

In the text widget "value" I put this:

CC @{fader_1.preArgs[1]}

I want it to get the "11" to read "CC11" but this returns undefined. Isn't preArgs an array so how come the indexing won't work? What's the simplest way to get the text "label" to properly read the CC channel from the fader? Am I even approaching this in the proper and most simple way?

Cheers

Hello,

You're close! :slight_smile:
In order to use javascript in a prop, you must use JS{} or #{} javascript blocks.
The difference between them is explained here Advanced syntaxes - Open Stage Control
I think in this case, it's easier to use #{}.
So, the resulting line would be:

CC #{@{fader_1.preArgs}[1]}
1 Like

Excellent! Thank you so much for the quick response.

One other quick question. How do I easily copy/paste or duplicate widgets in a neat row? For example if I duplicate this text widget many times to place under a row of multiple faders.

CTRL + SHIFT + D seems to put it in a random spot.

Or if I wanted to make a simple row of faders side by side across a panel.

I think the best way of doing it is to create a container with a layout set to horizontal.
Then, when you use the shortcut to duplicate it, it auto aligns horizontally inside the panel.

Yes, but then it seems I can't adjust the height of the widgets. I want to be able to put a text label underneath each one in the same panel.

Manually setting up each fader and text widget.

Using Horizontal Panel, doesn't allow me to change the height of the faders. I would set the height to 90% of panel and text label to 10%.

You can have a composite of panels:
Main container: containing the faders and labels containers;
Faders container: containing the faders and height of 90%;
Labels container: containing the labels and height of 10%.

The Main container can be set to Vertical layout.
Faders and Labels containers set to horizontal.

Then add a fader and set its geometry expand to true (to make sure all the empty space will be covered). Same with text labels.

You can get rid of the Faders and Labels containers' borders by setting lineWidth to zero.

1 Like

Great, that's awesome now I'm getting how it all works. Thanks again!

I have a fader made up of 3 panels.

The first label references the ID of the fader as follows:
image

If I duplicate the fader and change its CC message, I want the new label to update...however I have to go in and change the ID being referenced in the text label to the new duplicated fader.

Is there a way to reference the fader without using a specific ID? Using parent just references the panel that the text is in rather than the fader.

image

Again, apologies for the basic questions, still figuring stuff out.

Hello,

I built an example of a simpler structure (got rid of the inner panels) by making a single panel set to Vertical.
Then all the inner widgets follow the panel's id name (check the fader and text widgets' ids for the syntax).
With this scheme, when you duplicate the panel, it auto gets the faders preArgs.
The CC name is using the panel's id.
Maybe you need some tweaks to fit this approach to your session.
It's quite tricky to come up with this idea, but with time our programming mind gets more comfortable with it (but not always :sweat_smile:)
fader_composite.json (5.7 KB)

2 Likes

Thank you very much, learned a lot from your example. You are right, far simpler. I need to study up on more basic JS. But very much appreciate all of your help.

Cheers

1 Like