Buttons matrix behave like a switch?

Community Usage questions
#1

Hi,

I’m looking for a way to trigger midi program changes (to quickly select a MIDI instrument on my Android phone). I found [an Android app that does exactly that but unfortunately I wasn’t able to use it to communicate with my PC for some reason.

The need:

  • have many buttons exposed in a matrix
  • when I click on a button, the button is pushed
  • previously pushed button is released
    => it can be one and only one pushed button at a time, so I can easily see what is the current program being used

I’m trying with Open Stage Control; as I already used it for a while. I created a matrix of buttons but more than one button can be “on” at a time.
In need a switch that can be presented as a matrix.

Is there a way to make this without doing a custom widget ?

Thanks a lot
ps: if you have any clue of other ways of achieving it, I’m super interested as I need it for a live show next week !

Working solution

In fact there’s a Gighub bug for this (sorry @jean-emmanuel, I didn’t ckecked ! Shame on me).

Here’s the solution (waiting for the feature to be added to OpenStageControl)

#2

The matrix widget doesn’t work this way, you can turn the switch widget into a grid with this trick : https://github.com/jean-emmanuel/open-stage-control/issues/152#issuecomment-474299111. In next version, the switch widget (among others) will have built-in support for grid layout.

1 Like
#3

I have exactly the same problem, that is stopping me of adding any matrix.
Do you mean using this is the CSS section of Style? I added it, and also changed the widge type in the matrix section to push (to avoid leaving on visually the buttons ON permanently) But this yet works only the first button that you use and then stop working.
.switch {
display:grid;
/* replace “3” with the number of columns */
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.value {
margin:0;
border:0;
}

#4

Do you mean using this is the CSS section of Style

yes

This is not meant to work with a matrix but with a switch.

#5

Well, not sure if you refer to use a switch widget with that css as matrix or to set the matrix as switch and then add the css code.
Tried both, I cannot get working any of those
I mean, I can not get any matrix functionality as a push set of buttons, that is what I was looking for, and I guess the initial poster.

#6

Here, a switch widget with the aforementionned css pasted as is : grid-switch.json (1.5 KB)

#7

The OP seeks a way to make a matrix behave like a switch, that is with only one button activated at a time. As I said, that’s not what the matrix widget is for, as it’s just a way to create multiple widgets of the same type in a row. On the other hand the switch widget, as suggested by the OP, is suited for this usage and can be hacked into a grid. If the above example doesn’t work then your browser is not compatible or you’re using iOS 9.3 which unfortunately doesn’t support css grid layouts.

#8

Thank you ! It worked for me.

To help @PeterJared and for future reference:

  • OpenStageControl version 0.49.4
  • add a Switch widget
  • add some values (at least 4 to see 2 rows)
  • in Style -> css, put the CSS class given in this post

This should do the trick :fireworks:

image

Bonus: make it send MIDI program changes

My need was to make the widget send MIDI program changes. To do this:

  • address: /program
  • pre-args: 1 (midi channel 1)
  • target: "midi:openstage" (replace openstage with the value you gave to --midi in command line (in my case: -m openstage:virtual)

Thanks a lot @jean-emmanuel

#9

Can you send me your json example?

#10

@PeterJared here it is (2.0 KB)
I didn’t look to Jean-Emmanuel example, but it shouldn’t be really different.

UPDATE: this file is using a switcher, and not a switch. See Jean Emmanuel post for a working example

#11

@brunetton it seems you’re using a switcher widget instead of a switch, it looks the same but it’s very different…

#12

I can not get any of them working. Basically what I need to to emulate what Touch OSC would do sending a OSC push signal in a matrix
image
then I have done this but wont have the same effect (or any at all)

image
image604×1759 52.8 KB

#13

Indeed :sweat: I totally messed up, too much stress to be prepared for the live performance !
I edited corrected my posts to correct this (hopefully you choose this excellent forum !)
Sorry for this

#14

Follow up : Is possible to do a group of separate buttons act as a swtich?

#15

Hi,
Answering to this old post, still no way to get matrix button act like switch ?
(If one is pressed, others are off)

Happy New Year !!!

#16

I’m pretty sure I wrote something like that already but anyway:

props:

{
  "script": "if (value) set('matrix_id/*', 0)"
}

EDIT: found it ! $ use in matrix script field

1 Like
#17

great !
glad to undersand what is the “matrix_id/*”
Is “(value)” implemented in javascript or html ? it detects any input value that’s it ?

#18

value is a variable exposed in scripts, the parenthesis are here for the if/else syntax.

1 Like
#19

sorry for this but i don’t get this working, i have a matrix of buttons, and just want to highlight the last pressed one (all others should be off). Is this doable just by css ?

thanks

#20

anyone could help here out ?