Draggable and clickable toggle switch

[alhug]

Hi, I'm working on a virtual instrument with a reverb. I'm trying to make this toggle switch both draggable and clickable. Right now I use a filmstrip on a slider which works perfectly. I thought of putting three invisible buttons in the spots, where the switch lands for the respective reverb, but unfortunately, that blocks the mouse from being able to control the slider/knob.

Any ideas on how to make this work?

Thanks

[d.healey]

Use a panel

[Dan Korneff]

I'm using a knob and broadcaster. Code looks something like this:

// Create a broadcaster for the switch
const var switchClick = Engine.createBroadcaster({
    "id": "Switch_Click",
    "args": ["component", "event"]
});

// Attach broadcaster to the component for specific mouse events
switchClick.attachToComponentMouseEvents("mySwitch", "Clicks, Hover & Dragging", "watch switch click");

// Listener function for the "MouseClicked" event
switchClick.addListener("MouseClicked", "listens for mouse click", function(component, event) {
    if (!event.clicked && event.mouseUp && !event.isDragOnly) {
        // Increment the component's value by 1
        component.setValue(component.getValue() + 1);
        // If the value exceeds 1, set it back to 0
        if (component.getValue() > 1) {
            component.setValue(0);
        }
    }

    // Set the paint routine for knob based on the value of mySwitch
    mySwitchImage.setPaintRoutine(function(g) {
        g.drawImage("myImg", [0, 0, this.getWidth(), this.getHeight()], 0, mySwitch.getValue() * (this.getHeight() * 2));
    });

    // run your switch function here

});

[Dan Korneff]

@Dominik-Mayer I'm seeing a formatting error in my post.
The text I wrote was:
// Create a broadcaster for the switch
const var switchClick =

and it's being formatted as :
// Create a broadcaster for the switchconstvar switchClick =

[Dominik Mayer]

@Dan-Korneff
got it :)

[ustk]

@Dan-Korneff If you use a modulo operator you save 2 lines:

component.setValue((component.getValue() + 1) % 3);

The less if statement I have, the better I sleep

[Dan Korneff]

@ustk good call. I usually throw down my ideas in primitive form and then go back and optimize. I should really get into this mindset first so I don't have to do things twice.

[alhug]

@d-healey took me a minute to figure it out using a panel, but watching your tutorial on how to create an XY pad really helped.

This is what I came up with

Content.makeFrontInterface(600, 600);

const var Panel1 = Content.getComponent("Panel1");
const var Knob1 = Content.getComponent("Knob1");


Panel1.setMouseCallback(function(event)
{
    if(event.clicked || event.drag)
	{
  	var xpos =  Math.range(event.x / this.getWidth(), 0, 1);
  	Console.print(xpos);
  	
  	if (xpos <= 0.33)
  	Knob1.setValue(0);
  	
  	if (xpos > 0.33 & xpos < 0.66)
  	Knob1.setValue(1);
  	
  	if (xpos >= 0.66)
  	Knob1.setValue(2);
  	
	};
    
});

@Dan-Korneff thanks for the suggestion, I haven't yet looked into broadcasters at all as I'm still very new to all this.

[ulrik]

@guhla I would do it using a panel and have the callback also in the panel with saveInPreset enabled

HiseSnippet 1216.3ocsVstSiaDE1Fvnlztsck5Cvz7iUNKgrIjTZk1dAH.sntvFkPosBgVMXOIYDSlIxdbBQUH02IdS5iPeAZ+Y+G8bFaG6kMjxFoFsZMy4524LmKS6.kGKLTEXYW3zoiXV1ejS2oR8fVCnbo0Q6aY+wNMHSnSIWFo0Jo0dSGQCCY9V11q98nL1EVyx76u+t8nBpzikQxx5LE2i8J9PtNiZ6c9QtPbH0mcJeXNoatyQdJYKkPEA3YUmZVindWQ6yNghhshik85G3y0pftZplEBxrmxeZ2ApIxX4OiGxuTvvC0s5BFJlrUqAbge6zXMzxxds1YQ9pwQ9m4bL2mOidVF3SMLHYZjOGXuxhfT82CHYmCRqECom5z0KfORmwAwyG5bjTyB5QgTcdnDKq0J+wZNsTfDRc0gzqXGF.Glog610pUg.+W4WVrHjtC0jwz.Raof7MjT05yzsTCGojvA2R.uRnzv2pgLcaHun6nhzbIysWjzSyUR29kK9aEKflhBFROfGhV4UJOpXOUjzOzE8nQ.MHv4k9ApPTpBoTGkZH9ss.Rfkt.joO5kCUnq8Y8nQBMvud8xorhqPbS8gaoK6GSpT4XY5AkWcPmx76v7zTYeAykBQMxNFCS.LPOeqKdQCCodp.hKGnU6kDN4qIMfOarQ4hEfXp.umgWVTcFUDwbKCrM7ii5.FF3m2jrAwcxlaUl7bBuBYqJjIa1rB3qFWrYSL5J7.AAWyFFSbq33nvCFIfqpPZV9QYrLa4GPm7P1B.5hLmlcsddlaWAuuj4eJv1UeN+hJjym7bHpgJrIwwLPpjGTEEv7KYz7lhv+tIW4zwpnPVKnX3RnYOqdhMFzBqoHvO7FvPn5.0XVPYCwBF74S0zpiwKDH6OhFDxfR8Dgul7hY2Y+L2WOvEuUZ.N2n+8LMDP8IO6Yj6a1OeNW7nlvUO9wvKLk28TFC4YB4M.x4Le2D+mjFJxkBnShjF4DkDxLXmXfR35k1FVgDaPrKCXFpDrpiBfNQ2TGcCXrEz.GewZr5rrcdWgXIGFNQoYuV5Z7WwaJRtOqd8lKuDiIXAykMNvOXQJ5JiFdIKHezhBBSDe6wrq+3Fy5EmOxInRdjjqe8HVx4CUBeb7I92u6PYqjDJNdNAgfnZyv4mjNblJYBKNXCGGHcZYPNbv1rT6mNZenZHUevTf4GwBzbLJr2mMF1OFOrufy9rvqzpQFYSt7fExK1aWms+7W2YZ9CSvJ9YD9c5NCX79CxsG9a2ApCTSRqF.77IN6JDjLBoCVAcVuSmN2gZkMZAod6s2ZnlMg.o9m+0+XnFRGCsisCXPsGDUqjaFGJ11au8cwuH3c17A6bU9QvJg2dQL9hiDF768XDbCmLjqml+EIuGamqsvsyOVH9Tm1bs2f4iwUlCFgJi+OvXxaZdhyA85AC6y.3ZNG9KK6CX9Obe7aB5eLUGvgxRmShF1Etp8Xf2kPUaH1TrB1TEetVZSRWlz2b3N3WBy53Y6Dl0SYZMj5EndiWbqH9poOvPAvjz7HwBNGimI0m0F5TqZMqgvC3dimGF9aB84yWmsVBcZrD5zbIz4KVBc1dIz4KWBc9pEpC914cizpgwsC.g1GXFIZaefjBUVlpPq+ENjVfiB