Overide CSS script

Community Usage questions
1

How do I access the args[0] of a button widget locally in the css field?

I have some script in the css box of a button widget, which changes the colour of the button from the custom module based on the value of chordInversion (which comes from a switch widget) but the difficulty I have is then trying to show the the button is pressed as the css overides it. I can probably send the args[0] round the custom module and use a listener but that would mean I would need a unique listener address for each button - and I have a lot of buttons!

Is there a way that I can just do it locally with getVar or something so I can copy the same solution into each button or the css script.

JS{
var css = "";
var chordInversion = OSC{/inversionVal/value, , false};

// if this button pressed
//then use this css [css to change to a button press style]
// else:

if (chordInversion === 1) {
css += "inner {background: linear-gradient(to bottom, #ffa07a 0%,#ff6735 17%,#ff4500 33%,#ff4500 59%,#ff4500 68%,#3d1a00 100%);color: black; font-size: 18px;}";
} else if (chordInversion === 2) {
  css += "inner {background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); color: black; font-size: 18px;}";
} else if (chordInversion === 3) {
   css += "inner { background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 12%,#0a77d5 33%,#00509e 66%,#002349 87%,#002349 87%);color: black; font-size: 18px;}";
}

return css;
}
2

Hi @Sub3OneDay,

I'm not sure I'm understanding exactly your setup. But could you just replace var chordInversion = OSC{/inversionVal/value, , false}; with var chordInversion = @{this.value};?

I created a basic switch with 3 values. And just used your script with the slight alteration:

JS{
var css = "";
var chordInversion = @{this.value};

// if this button pressed
//then use this css [css to change to a button press style]
// else:

if (chordInversion === 1) {
css += "inner {background: linear-gradient(to bottom, #ffa07a 0%,#ff6735 17%,#ff4500 33%,#ff4500 59%,#ff4500 68%,#3d1a00 100%);color: black; font-size: 18px;}";
} else if (chordInversion === 2) {
  css += "inner {background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); color: black; font-size: 18px;}";
} else if (chordInversion === 3) {
   css += "inner { background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 12%,#0a77d5 33%,#00509e 66%,#002349 87%,#002349 87%);color: black; font-size: 18px;}";
}

return css;
}

Then each time the value switches, it changes colors.
1.
image
2.
image
3.
image

Does this work and what you were looking for?

Cheers!

3

Thanks! Its not quite the functionality that I Need but I will try to work it out.

The inversionVal comes from a separate switch and changes the CSS on all the other switches together - so they are all orange, or all blue etc.

But I then want to be able to get the css to change just on one of the orange buttons to show that it is pressed.

So basically if the inversionVal is = 1 then all the buttons change to orange - this works in my code, but then now that all the buttons are orange I need the one that is touched to turn to a new colour when it is pressed, and then back to orange when it is released.

1 Like
4

Fixed it - very easy in the end!

JS{
var css = "";
var chordInversion = OSC{/inversionVal/value, , false}; // Assuming this fetches the inversion value correctly
var btnPress = @{this.value};
console.log("btnPress = " + btnPress);

if (btnPress > 0) {
  // Additional styling to simulate the button being pressed
  css += "inner {box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); transform: translateY(2px);}";
} else if (chordInversion === 1) {
  css += "inner {background: linear-gradient(to bottom, #ffa07a 0%, #ff6735 17%, #ff4500 33%, #ff4500 59%, #ff4500 68%, #3d1a00 100%); color: black; font-size: 18px;}";
} else if (chordInversion === 2) {
  css += "inner {background: linear-gradient(to bottom, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); color: black; font-size: 18px;}";
} else if (chordInversion === 3) {
  css += "inner { background: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 12%, #0a77d5 33%, #00509e 66%, #002349 87%, #002349 87%); color: black; font-size: 18px;}";
}

return css;

}
1 Like