Hi! I'm building a layout with 16 toggle midi-buttons that acts as mute buttons. They send a program change message (program numbers 1 to 16 on a fixed channel, same program number for both "on" and "off" values). Such messages are used by target software to toggle its mute buttons.
I want to add and ordinary HTML5 button to reset all toggle midi-buttons to its initial state (_pressed="false"). If I assign an ID attribute for each midi-button and iterate them by means of a Javascript's FOR loop, forcing _pressed attribute to "false", I get all midi-buttons unpressed, but no eventReleased is executed by none of the buttons and no program change message with off-value is sent. This ends with a clean midi-buttons state in the layout but with an unclean mute buttons state in the software controlled by layout. Then I've tried to send click, mousedown and touchstart events to midi-buttons with Javascript's MouseEvent() and dispatchEvent(): while midi-buttons apparently receive these events (adding an "onclick", "onmousedown" or "ontouchstart" listener and triggering an alert() for those events it's possible to see that events are been catched by midi-buttons) no eventReleased is executed by none of the buttons and again no program change message with off-vale is sent, and even the _pressed attribute remains all "true". I've tried the dispatchEvent() with "bubbles" value "true" and "false" and "composed" value "true" and "false" (recommendations on the web suggest composed="true" when dealing with events and shadow DOM) . Sure I'm missing something, my Javascript's knowledge is limited and I'm completely new to web components in general and Hybrids in particular.
Can someone help me with this? Is it necessary some change to button.js code to manage these events?
Congratulations for the useful, beautiful and hard work made with TouchMIDI, is very appreciated here!
Thanks in advance and best regards!
Hi! I'm building a layout with 16 toggle midi-buttons that acts as mute buttons. They send a program change message (program numbers 1 to 16 on a fixed channel, same program number for both "on" and "off" values). Such messages are used by target software to toggle its mute buttons. I want to add and ordinary HTML5 button to reset all toggle midi-buttons to its initial state (_pressed="false"). If I assign an ID attribute for each midi-button and iterate them by means of a Javascript's FOR loop, forcing _pressed attribute to "false", I get all midi-buttons unpressed, but no eventReleased is executed by none of the buttons and no program change message with off-value is sent. This ends with a clean midi-buttons state in the layout but with an unclean mute buttons state in the software controlled by layout. Then I've tried to send click, mousedown and touchstart events to midi-buttons with Javascript's MouseEvent() and dispatchEvent(): while midi-buttons apparently receive these events (adding an "onclick", "onmousedown" or "ontouchstart" listener and triggering an alert() for those events it's possible to see that events are been catched by midi-buttons) no eventReleased is executed by none of the buttons and again no program change message with off-vale is sent, and even the _pressed attribute remains all "true". I've tried the dispatchEvent() with "bubbles" value "true" and "false" and "composed" value "true" and "false" (recommendations on the web suggest composed="true" when dealing with events and shadow DOM) . Sure I'm missing something, my Javascript's knowledge is limited and I'm completely new to web components in general and Hybrids in particular. Can someone help me with this? Is it necessary some change to button.js code to manage these events? Congratulations for the useful, beautiful and hard work made with TouchMIDI, is very appreciated here! Thanks in advance and best regards!