How can I handle this complex interaction between several widgets?

#1

Hello,

I have a switch widget with several buttons. When any button is pressed, it selects a matching tab within a panel. Now, I want the panel to appear only when a button is pressed and I want it to disappear as soon as another switch within the displayed tab is pressed. Buf if another switch is on, the panel must remain displayed until this latest swich is off.

Making the widget appear and disappear is not the issue. Using the z-layering or resizing should do the trick and there’s also a topic about such a matter in the FAQ and Tips (documentation draft).

What I do not see is how to combine all these widgets into the control of the display because I have many widgets involved: one “main” switch making the panel appear, 9 “inner” switches making it disappear and an additional “side” switch preventing disappearance. Also, the linkId of the main switch is already used to select a tab within the panel.

Here’s a gif showing what I want to achieve (sketch made in Max).

O-S-C%20project

Any help would be highly appreciated.

#2

One relative question: is there any kind of global variable?

#3

I think I’ll give a try to OSC listeners…

#4

You could use a modal as container, put the tab container (panel) in it and control the visibility by setting the modal’s value with one of the following methods.

1 Using 2 script widgets, one for opening, one for closing

JS{{
// script property
// the script widget must be linked to the main switch
set("modal_id", 1) // open the modal
}}
JS{{
// script property
// the script widget must be linked to the inner switches
if (!@{sidetoggle}) {
  set("modal_id", 0) // close the modal
}
}}

Note: you can set multiple linkIds for a single widget by writing an array: ["linkId_1", "linkId_2]

2 Using a custom module, something like this (needs adjustments to work with your setup of course):

// keep track of the sidetoggle's value
var sidetoggle = 0

module.exports = {
    
    oscOutFilter: function(data){

        var {host, port, address, args} = data

        if (address === '/sidetoggle') {
            // update sidetoggle
            sidetoggle = args[0].value
            
        }

        else if (address.includes('/inner_switch')) {
            // close the modal when an inner switch changes if sidetoggle is on
            // adjust the condition to match all inner switces
            
            if (sidetoggle) receive('/modal', 0)
            
        } 

        else if (address === '/main_switch') {
            // open the modal the the main switch updates
            
            if (!sidetoggle) receive('/modal', 1)
            
        }

        return data

    }
  
}
1 Like
#5

The best way to keep a global variable is in a custom module (like the sidetoggle variable in solution n°2).

Javascript formulas (JS{{}}) also share a global object named global, you can use it to store a variable in a formula and use it in another. However the custom module solution is cleaner and easier to maintain.

1 Like
#6

Some valuable information! Thanks a lot Jean-Emmanuel!