Menu behavior questions

Community Usage questions
1

I have most of my template ready and I managed to find almost every answer I needed from the forum and documentation. There are just a few menu widgets’ behaviors I need help with.

  1. Whenever I load OSC I don’t see any text on the manus themselves. I have to first select an item for them to show the last value selected.
    Is there a way to have a default item/text shown on the widget when I load my template?

  2. I have one menu that selects items that already have buttons that correspond to the same midi message. So whenever I select a menu item I see the button trigger as well (that’s perfect).
    Can also I have it work the other way around? i.e. whenever I push a button it will be represented on the menu widget?

  3. On my second menu widget, I have followed this topic to have different colors for different menu items.
    Can I have the widget change its color based on the menu item’s selection?

I hope everything makes sense. I’m can provide screenshots/videos if it’ll help.

Thanks!!

2

You can use the default property.

whenever I push a button it will be represented on the menu widget

Using the button's script property should do the job, something like: set("menu_id", value)

Can I have the widget change its color based on the menu item’s selection?

You can use the menu's own value to define its properties, for example:

JS{{

var val = @{this}
if (val == 1) return "blue"
else if (val == 2) return "red"
// etc

}}

References:

3

Dude!! You’re the best!!

Had to edit the whole original message.

I managed to use your script you gave me to change the colors, however, for some odd reason this script won’t work on coloBg.
It works like a charm on all of the rest of the style parameters (colorWidget, colorText etc.)
Is this a bug or am I missing something?

I’m specifically trying to have the colorBg change based on the selected value.
Is this possible? If so, how?

Thanks!

EDIT:
So I finally was able to change the colorBg going to the css line and writing background:script
So it seems there is some kind of bug that won’t let the script be written in the colorBg line bet will accept it in the css line.

Thank again everything!

4

Ok, new problem.
Now if I have background:JS{{... script and it works fine.
But when I try to put
.item:nth-child(1) {background: #116649; font-size:200%; }
right after and it cancels the backround script.

I’m basically trying to have each menu item to have a different background much like in this topic, and when I select a menu item, the menu widget’s background changes to the color of the item I selected.

Right now it seems I can have it either or. But not have the two functions together.

Is this possible?

Thanks!

5

It is possible to write JS{{}} in any property (colorBg included), but you need to make sure the result is valid once everything is compiled, you can see a property’s actual value by clicking on its label in the inspector. 2 examples for css (where the result must be a valid css code):

/* JS inside css, hard to read with bigger scripts */
:host {
  background: JS{{return @{this} == 1 ? "red" : "blue"}};
}

/* heading JS to declare local variables, and inline #{} to use them in css */
JS{{

if (@{this} == 1) locals.color = "red"
if (@{this} == 2) locals.color = "blue"
// etc
// if nothing is returned, this block won't appear in the css result, perfect !

}}
:host {
  background: #{locals.color};
}
/* note: #{locals.color} is like JS{{ return locals.color }} */
6

Ok.
This is much better!
I can’t figure out how to configure the first example to have more than one 1 variable. (Or more than 2 colors).
I did manage to get it working with the second example, but it seems that I need to select the menu item twice in order for it to change color.
Or to be more accurate, it takes two menu selection to update. So if I choose menu item 1, and then menu item 2, only then will it change the color to blue (in your scripts example).

Any ideas why?

7

Check this out Conditional (ternary) operator - JavaScript | MDN

it takes two menu selection to update. […] Any ideas why?

Yes, it’s a subtle bug in o-s-c: JS{{}} blocks are compiled after #{} blocks, I’m fixing this in next version.

8

That did the trick!
Works perfectly in the current version.

I bet could get it the other way to work once the next version is out.

Thank you so much for everything!