Calculate geometry with percentage of other widgets

Community Usage questions
1

Hey everyone! :smiley:

I'm new in this forum, but obsessed by the possibilities of OSC. Thank you so much for the good ressources and your help in this forum.

I work on my OSC template using manually assigned percentages and calculations instead of placing the widgets manually. E.g. having a variable that stores the number of rows in a container/panel and then placing small calculations like

#{100 / @{v_num_elements} * 9}%

I want a button (not a modal) to show and hide a panel that is placed in relation to the button. I thought it would be an easy task, but I think I'm stuck with the syntax.
Can I write something like:

left = @{button.left} + 30%
width = @{button.width} * 3

I tried several options using #{} , (), sum(), and other, but couldn't find a solution for quite some time now :tired_face: Is it because JS can not make use of "%" inside the script and the referred value of "button"? What's the workaround here?
Thank you for your help in advance! :four_leaf_clover:
Magnus

2

Is it because JS can not make use of "%" inside the script and the referred value of "button"?

Kind of, the percents only make sense when parsed by the browser to determine the layout, if @{button.left} returns a percentage, you could try something like that:

#{parseInt(@{button.left}) + 30}%

But an more straightforward solution would be to set the panel's left to @{button.left} and to offset its position using its css property:

margin-left: 30%;

width = @{button.width} * 3

If width is a plain number this should work.

#{@{button.width} * 3}
1 Like
3

That's what I was searching for! Perfect :ok_hand:

I now use a combination of both. Works like a charm :heart:

When using height and "margin-top" for the panel, I have problems, because it doesn't do the same as margin-left (works on paper and with the numbers, but not when applied (by me) :wink: ), but I'll look into it tomorrow and on another computer with the most recent version.

Thank you so far, Jean Emmanuel, and have a great evening :slight_smile:

4

In css percents in margin/padding are always based on the parent width, that's probably the cause of your issue.

1 Like
5

Looks like the best thing to do is using parseInt() to receive numbers for calculations.
And yes, you are right about margin/padding.
Thank you for helping out :slight_smile: