Sending color to a button

Community Usage questions
1

Hello, i’m trying to change the button color of OStageC with a string argument from my daw.
My push button address : /loop/0/01/rec
The arguments i’m recieving are : cleared, play, rec, willPlay, WillRec

in the css section of the button i tryed this code
colorBg: #{@{“colors”:{“cleared”: “#222222”, “play”: “#00FF00”,“rec”: “#FF0000”,“willPlay”: “#004400”,“willRec”: “#440000”}} [@{/loop/1/01/rec}]}

I tried hard to find the good way but nothing happened…
Can you help please?
Thanks

1 Like
2

Hi, there are multiple issues here:

  • the button’s address is meant to receive either its on or its off value, not arbitrary string values. What you need to use is the osc listener syntax which is slightly different than the inheritance syntax (ie @{widget_id.property_name}).
  • your javascript code inside the #{} is not valid: @{} blocks only work if written according to the rules defined in the documentation, it looks like you wrote a mix of javascript object notatation and OSC’s inheritance syntax.

Here is a working snippet:

JS{{
var buttonState = OSC{/loop/0/01/rec};
var colors = {"cleared": "#222222", "play": "#00FF00", "rec": "#FF0000", "willPlay": "#004400", "willRec": "#440000"}

return colors[buttonState] || "auto"
}}

Note that colorBg has been removed from non-container widgets in v1.5.0, but you can still use the code in colorWidget for example, or use it to change the widget’s background color with css:

JS{{
var buttonState = OSC{/loop/0/01/rec};
var colors = {"cleared": "#222222", "play": "#00FF00", "rec": "#FF0000", "willPlay": "#004400", "willRec": "#440000"}

return "background-color:" + (colors[buttonState] || "auto") +';'
}}
3 Likes
3

Thank you so much, it run’s well!
What i was tring to do is to define the colors in parent variable to use directly the same code in each button and change only the id.
But your snippet run well so maybe i’m gona let it that way and learn a bit further the rules of advanced syntaxe