A button with two different colorWidgets , rendered depending on pressing a modifier Button

Community Usage questions
1

Hi there,

So I have got a row of buttons that behave on the same way, to simplify lets just think that they are 2 buttons.

buttonOne
modButton

buttonOne sends different MIDI messages depending if modButton is hold pressed or not (that is already achieved).

"type": "button",
(...)
"id": "buttonOne",
(...)
"colorFill": "JS{{
// colorWidget property
var c = globals.midmixLedColors1(OSC{/note} || [0 , 87]);
return 'hsl(' + c[0] + ',100%,' + c[1] + '%)';
}}",
(...)
"on": 127,
"off": 0,
"mode": "tap",
"doubleTap": false,
(...)
"address": "/note",
"preArgs": [
  1,
  4
],
(...)
"target": "midi:virtual-midimix",
"ignoreDefaults": false,
"bypass": false,
"script": "if((get('modButton') == 1)) {
   send('midi:virtual-midimix', '/note', 1 , 5 , 127);
} else {
   send('midi:virtual-midimix', '/note', 1 , 4 , 127);
}"

And the modifier button is achieved like this

"type": "button",
(...)
"id": "modButton",
(...)
"on": 1,
"off": 0,
"mode": "push",
"doubleTap": false,
(...)
"address": "/note",
"preArgs": [
  1,
  27
],
(...)
"target": "virtual-midimix",

The issue is that , I want upon holding press the modButton , to alter the colorWidget of buttonOne straightaway , according to the veloctiy it has received in the other note that is sending (in this case note num 5)
I have thought on creating a variable Widget , with its address , preArgs and target setted to listen to those alternative noteins events such as

"type": "variable",
"id": "solo01",
(...)
"address": "/note",
"preArgs": [
  1,
  5
],
(...)
"target": "midi:virtual-midimix",

Then re-write the colorWidget property of buttonOne with the following syntax

(...)
"colorFill": "JS{{
// colorWidget property
if((get('soloButton') == 1)) {
var c = globals.midmixLedColors1(get('solo01') || [0 , 87]);
} else {
var c = globals.midmixLedColors1(OSC{/note} || [0 , 87]);
}
return 'hsl(' + c[0] + ',100%,' + c[1] + '%)';
}}",

It looks to be not working for probably obvious reasons. Do you figure out a way to achieve this?

Thank you

2

Check the console (ctrl+k), you should see a "get is not defined" message. get() only works in scripts.

1 Like
3

Yeah , obviously that previous syntax was wrong I was just testing concepts, that's why.

I thought in the line of creating two actual rows of buttons that overlay one to another in different z-index layers , so upon holding clicked the modButton , buttonTwo layer would come up.

jsfiddle overlayed button rows

That is the actual behaviour desired , the issue now is to take this to o-s-c

Trying a similar workaround to the one for the LED flashing , creating a variable that is setted by the modButton scripting which alters the z-index of the buttonTwo row to come in front of buttonOne row , but so far I haven't been able to play properly with z-index and position css properties in here.

overlaying-button-rows.json (11.0 KB)

I will let you know if I do some advantages . Thanks

4

Well @freddieventura , you should have seen the widget's property visible and set it to a variable.
This variable is in turned toggled by a button which sets the variable accordingly with the Script Property.
In this case you can create two variables to hide one while showing the other, see the example amended.

overlaying-button-rows.json (11.3 KB)