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;
}
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](https://canada1.discourse-cdn.com/free1/uploads/openstagecontrol/original/2X/b/bfb4370a26888b3ba3ee049d02f8e23ec39d027c.png)
2.
![image](https://canada1.discourse-cdn.com/free1/uploads/openstagecontrol/original/2X/c/c16a78eb39ae51867cf8791b8a711d32275872a0.png)
3.
![image](https://canada1.discourse-cdn.com/free1/uploads/openstagecontrol/original/2X/4/4d6c88a58f4ff219b0f8f6ba0c2b9fdc871601d0.png)
Does this work and what you were looking for?
Cheers!
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 inversionVa
l 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
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