Change color depending on state of loop toggle?

General
1

In Canvas, I dropped in a loop toggle button. But it’s only one color whether the loop is active or not. I’d like it to behave more like the Play/Stop button and change color depending upon whether the loop is off or on.

Can someone tell how to accomplish this?

Thanks!

2

Hey @BeSharp,

What happens is that /loop/toggle just flips the state.

If you want Play/Stop-style behavior (where the color reflects the actual loop state), you need explicit ON and OFFcommands, and read the loop state dynamically.

I’ve attached a ready-to-use button here for you to try:
Loop Button.json (879 Bytes)

But here’s the code as well, in case anyone else finds it useful:

You can achieve this by changing the button type to Script, and using the following:

Button → Script (On Press)

const on = !!osc("/setlist/loopEnabled");
sendOsc(on ? "/loop/escape" : "/loop/enable");

Set Background Color to Dynamic and paste:

${osc("/setlist/loopEnabled") ? "yellow-600" : "yellow-800"}
// adjust colors to taste

Hope that helps!

3

Perfect. This did the trick! Thanks so much

1 Like
4

Is there a way to on the label also change the name of the Label when loop is on “Loop ON” when loop is off “Loop OFF” thanks for the help!

5

Hey @Stephen_Estrada,

Yes, absolutely.

You can make the label dynamic the same way as the background color — just read the loop state and return different text.

Paste this on the button’s Label field:

${osc("/setlist/loopEnabled") ? "Loop ON" : "Loop OFF"}

The button will display:

  • “Loop ON” when looping is enabled
  • “Loop OFF” when looping is disabled

Hope that helps!