Radio Buttons Tab Controls || Tabs overlapping on INIT.

[Chazrox]

I have 5 buttons that are in a radio group that are each showing/hiding a different 'VIEW/MODE" panel. Sometimes when I recompile and click one of the buttons, the different layers are all showing and overlapping until I click on a couple of the buttons in the group then they start to follow the script - .showControl().

Here is my question:

Should I be setting one of these to value=1 in onInit so that when it initializes it sets them in order? I feel like either all/none of them are being set on onInit and thats whats causing the overlapping. If anybody has ran into this problem before, how did you fix it?

I tried to set a Default Preset in project settings but when I open the plugin in DAW the default preset opens but the ghost overlapping of the different tabs are still all showing at once.

Please help

Thanks!

[d.healey]

@Chazrox I wouldn't use radio group for this, I'd roll my own.

HiseSnippet 985.3ocsV0kaaaDDdWYSCS1lflhd.HReQtIvfTxRN.IFQwx1sBs1QnJ0n.MsAqHWJtvj6RPtzwBEtnmidD5YpO2m6MPcV9iHUrpbrfqdPfyOey7gYmclcXrvgljHhQXi2LMhhvep1noboeeeBiiFbDB+PsSIIRZrYtpCmFQRRntHLdiuVo.quIJ62+7xCIADtCsREBctf4P+NVHSVocXuukEDbBwk9FVXMu2q2.GAuuHPjB7YCMKTDw4BxD5YDkaMzPeCIwGg+JMRKaZK2Niau+9c7nVc5XQ6XuuEoqm0dtdOqam1iGa6R6hvacrKSJhGIIRZBDzCEtSG4KdOOOAmyRXiCnJAazHHy4pQ88YAtCKKNIHDdygUkpMxKUeg1oLW1b8UkrOKyfYEh5EMbiUQI66.kv0nzl4T5QZibhYQxJKJ97IZC3vInGANapSkbeQMrZn0W.dvk6FRtfdRLHLGQytVVO0D9ammaX.mOIRyHBmFjXdfYIpIT4qBB5KBiDbPNo4iGpb4su08wUnFmJkvGqD1gY9ThySDa17JSFuD6NF5WsaBUpBPrHnOIHXLzhzTvycnPOfU2fwCXbpoWJ2QxDbyOvmlNko8olWRBRo6X7qF5YYjATz54lLyWTl2cCn7IReP2SdBvAvQ8BK+D6mUD5bUDZVoy7fCLmm.EczyqYYtCm0kjXEHt135Zb+Lgj9ZdyLRZbsg4GZxyao1JxS.MdolU2+hWEvl7zvwz35kHkiP+1hMwa8w0D6jevWyQAe.mIecDsP9DQfqp4T88Ma4QEcNvW+vfiHRh5VPgNvuHZrjonC9H5kvbm76D5ZGQStPJh.ZNuWCTKyr9fxaLpyGDCR81ZYeaitZ9noe2q2zp4T+Ru2ybkvfHM7eAh9T1DeoR5OAIljFVNBSeKDZ1LzBZaUW8kkkI7FnZTa6agZstWn1ruboTqPM5NTpZeevmYnOeY7oT8+QoRKmZOrfZ4yOx3ltVtP14nFtEDiZD625kPtjNfOLlBWeu6QsUdT+662n1NOp+A91h5Mm7C6bDtoAD4hKhTqnKL.WrWX5uZBOOgImVeE9cX6j0J2N8wRwGoMjIc7WNGarDNBW4++fiE6zef1wddTGYEA2T6jebcWfeKo+6EoRFexoDYLScveVZ3Hnu2gBYmqVWnZFZntKlKaojUUfQTtalvL3WgQakLtvncoQTHwIV7Nm7w4pWMrclFfS7rWUoCOuCjMsQYi3qWmCgGw7NGmEC0M.1ZcA1dcAt25Bry5Br65Bb+0E3ytcfp2X9pToHL+ZCBc5viy1IhwGyIPGXV2J5eAh8vQrB

[Chazrox]

@d-healey ok. I'll probably do that. I'll check out your snippet and probably end up redoing this. Thanks!

Hope all is blessed!

[Chazrox]

@d-healey

What if I already have scripts for these buttons also? They arent just showing/hiding panels.

for instance, a couple of these radio buttons also set some devices to enabled.

Can I write a this code separately? If I just remove the radio group settings, can I have multiple callbacks (per button) (this would be second) to handle the panel switching?

const panels = Content.getAllComponents("Panel\\d");

const buttons = Content.getAllComponents("Button\\d");

for (x in buttons)
	x.setControlCallback(onbuttonControl);
	
inline function onbuttonControl(component, value)
{
	for (i = 0; i < buttons.length; i++)
	{
		buttons[i].setValue(buttons[i] == component);
		panels[i].showControl(buttons[i] == component);
	}
}

[d.healey]

@Chazrox 1 callback per button.

Put the panel switching stuff into a function and call it from each button's callback, passing in the component.

Like this:

HiseSnippet 1044.3ocsW8uaaaCDlxNpHxasXcXO.Bc+iyZQfjbrSA5BlabR1L1RpwbWv.V6JnknrHhDofDcxLFxvdT1ixdjFvd.7NpeXQmZGuZ35+HP7t66ie7H4wKCR3tjzTdBRqwqmFSPZep9voLQPu.Lkg5eBR6Q5miSEjDybSGOMFmlR7PZZ0+VoAMicPY+9mu4XbHl4RpLgPWxotjefFQEUVGz86oggmg8HulFoD8Ac66xY83g7IfdpqaghwtWgGSt.KCqlN56voAHsuRG6XSb7ZOp0gG11mX0tsEos8gV3N9VG34+7NsaMZjsGoCR6Am5QE7jgBrfjhz14Xt2zgA7aX4SvkzT5nPhbfMZHLy4lOiG5IWhRqndAzPuAkIpTDvxfpzV87z1WneN0iN2dU56yxbXVgPMApUaQ4UeA4YqJOKE4sDIooHocxkzi0G5lPiEUdj54Sz6yfcSeLrOoJk7XQ0925583PDLw9Q3qHmk.ClinYGKqmYB+YuWznArWkJLiwLRXp4QlknFSDuLLrGOJlyfwoMex.YHu4MdOoB0nIBA7w8B63rXVDWtM6EwMGTIFaIhhO2OUF.SjvC6gCCGAmnZxYENKbbW9cVC+NU76be76rB9asF9aUweq6i+VU7azfxBoLho+DlqfxYl2cQ1zsbZdl403vIj8Z76MLRugJbCx1gpB.361FqjPmsMgs1VDpFZ9IrLF74IlMoPN25ElTyut7v29gD1XQ.X6oOcuFFPfFEd9E5ako8KkZnYkMyiNp.qLgajexOKV3Fa4ZXUgeaiaUV3WvEjWwZlIOXkXdWW99K0WwjDRRVpaY4zj6CXS1jnQjD0zqLPnjwh0gzWccH0xjt4mgUBjy5ynhWESXqp3Ip3fO70O0+Dr.KKdUXChKljHnRIncB4Z3oi7RYF5mPRuRvigB5yusfz1Uj48gkE5jaHHJTNaW8rusQ+17WW9S+tSqdp4W6dC0SDT48ptAD53fpWo5R5REjnxWiLd.BMalzQkUGUyHEcYrFc4rU00rubo5pv70kacZ0+PjXqsoDmg97kIwRyqPh54R7QERLuVQlFMzKJsoHRTeUQ9GcSwWS5yFjPfKxe3LqtC82gaSlUSr+0z0v76+nNzNA2aRHVrXOFxNwJb.W3W3gc4i2rTpXpZmZasFO9+JwGqOPVad4Zr1RzHTV3igFKZW6g5m56SbEUBbG8y94ON8lg9Q9DAkM9brHgBa95WLIZHbGvk.yNS9FBXSqlrDR9XK4XYFXHg4kMXF7qvosbrVgS6RmnHraB+ct4k4kMDtalEPSrrlmMft3gwl1nrR+p44Hn+z245tHUuGPmMEXqME3AaJv1aJvNaJvC2TfOe8.k+6CubhfGkesAgNevoYuapocJCCm.yNsh9OfzvwNm

A fancier solution is to use a broadcaster, but probably more complicated.

[Chazrox]

@d-healey Thanks! Yeah I havent learned broadcasters yet. When Im done with this one im gonna do a deep dive on some new methods.

[Chazrox]

@d-healey if I type the panels and buttons list manually, is this correct?

//! SWITCH PANEL CONTROLS 

const var switchPanelsList = [


"pnlFeatureStrum"
, "pnlFeaturePluck", 
"pnlFeatureArp", 
"pnlEditMode"
];
const var switchButtonList = ["btnStrumEnable", "btnPluckEnable", "btnArpEnable", "btnNormal"];


inline function switchPanel(button)
{
	for (i = 0; i < switchButtonList.length; i++)
	{
		switchButtonList[i].setValue(switchButtonList[i] == button);
		switchPanelsList[i].showControl(switchPanelsList[i] == button);
	}
}

//! EDIT MODE ENABLE BUTTON CONTROLS
inline function onbtnNormalControl(component, value)
{
//	if (value)
//	{
//		pnlEditMode.showControl(true);		
//	}
//	 else
//	{
//		pnlEditMode.showControl(false);
//	}

	switchPanel(component);

};
Content.getComponent("btnNormal").setControlCallback(onbtnNormalControl);



//! PLUCK ENABLE BUTTON CONTROLS;
inline function onbtnPluckEnableControl(component, value)
{	
//	if (value)
//	{
//		PnlFeaturePluck.showControl(true);
//	}
//	else
//	{
//		PnlFeaturePluck.showControl(false);
//	}

	switchPanel(component);
};

Content.getComponent("btnPluckEnable").setControlCallback(onbtnPluckEnableControl);

const var pnlFeatureStrum = Content.getComponent("pnlFeatureStrum");
//! STRUM ENABLE BUTTON CONTROLS
inline function onbtnStrumEnableControl(component, value)
{
//		if (value)
//		{
//			//btnStrumNatural.setValue(1);
//			//btnStrumNatural.changed();
//		//	btnStrumNatural.set("enabled", 1);
//			//btnStrumReleaseMode.set("enabled", 1);
//			pnlFeatureStrum.showControl(true);
//		}
//
//		else
//		{
//			//btnStrumNatural.setValue(0);
//			//btnStrumNatural.changed();
//			//btnStrumNatural.set("enabled", 0);
//			//btnStrumReleaseMode.set("enabled", 0);
//			
//		//	pnlFeatureStrum.showControl(false);
//		}

	switchPanel(component);
};

Content.getComponent("btnStrumEnable").setControlCallback(onbtnStrumEnableControl);

//! ARP ENABLE BUTTON CONTROLS
inline function onbtnArpEnableControl(component, value)
{
	if (value)
	{
		Arpeggiator1.setBypassed(false);
	//	pnlFeatureArp.showControl(true);
		knbStepRepeat.changed();
		SliderPack1.sendRepaintMessage();
		SliderPack3.sendRepaintMessage();
		
	}
	else
	{
		Arpeggiator1.setBypassed(true);
		
		//cmbArpType.setValue(1);
		cmbArpType.changed();
	//	pnlFeatureArp.showControl(false);
	}
	
	switchPanel(component);
};

Content.getComponent("btnArpEnable").setControlCallback(onbtnArpEnableControl);

if im passing 'button' in the switchPanel function, is it conflicting that the button callbacks are sending 'component'?

Im getting no action.

[d.healey]

@Chazrox said in Radio Buttons Tab Controls || Tabs overlapping on INIT.:

if I type the panels and buttons list manually

Yeah, but it's better to name them in a way so you don't have to do that.

@Chazrox said in Radio Buttons Tab Controls || Tabs overlapping on INIT.:

if im passing 'button'

button is the name of the variable that the function uses, it doesn't matter that the variable in the callback is called component.

[Chazrox]

@d-healey said in Radio Buttons Tab Controls || Tabs overlapping on INIT.:

Yeah, but it's better to name them in a way so you don't have to do that.

What do you suggest since I cant change that now?

[d.healey]

@Chazrox said in Radio Buttons Tab Controls || Tabs overlapping on INIT.:

I cant change that now?

Why not?

[Chazrox]

@d-healey too many things watching the states of these buttons. I'd have to chase down every mention of these.

They dont have functions in callbacks but I have features with if statements watching these like...

if (btnArpEnable)....

if (btnStrumEnable)....

and all of that works fine so I dont want to change it. Im already done with the project. this is the last stupid bug I have to fix. panels overlapping.

[d.healey]

@Chazrox said in Radio Buttons Tab Controls || Tabs overlapping on INIT.:

I'd have to chase down every mention of these.

Find/replace can do this.

But it's not going to hurt your project to do it manually as you are, it's just more work, and harder to maintain in the future - or as you've found out, right now ;)

[Chazrox]

@d-healey idk how to use FindReplace in that way. I tried something like that before but it didnt go well.

So are you saying theres no other way to just write an array manually with my buttons and panels with their unique names?

i REALLY dont want to change their names.

[d.healey]

@Chazrox Yeah with the names you're using you'll need to write them manually, but the code you posted above looks fine.

[Chazrox]

@d-healey ok. I got them scripted, only two of them are working properly and the others are giving '.setValue' errors. They are declared above so they should be seen. Can you look at this please.

Excuse my comments, im not deleting anything until I get this working.

//! SWITCH PANEL CONTROLS 
const var pnlFeatureStrum = Content.getComponent("pnlFeatureStrum");


const var switchPanelsList = [

pnlFeatureStrum, 
PnlFeaturePluck, 
pnlFeatureArp, 
pnlEditMode
];

const var switchButtonsList = [
btnStrumEnable, 
btnPluckEnable, 
btnArpEnable, 
btnNormal
];



inline function switchPanel(button)
{
	for (sb = 0; sb < switchButtonsList.length; sb++)
	{
		switchButtonsList[sb].setValue(switchButtonsList[sb] == button);
		switchPanelsList[sb].showControl(switchButtonsList[sb] == button);
	}
}

//! EDIT MODE ENABLE BUTTON CONTROLS
inline function onbtnNormalControl(component, value)
{
//	if (value)
//	{
//		pnlEditMode.showControl(true);		
//	}
//	 else
//	{
//		pnlEditMode.showControl(false);
//	}
	//Console.print(switchPanelsList[1] + "PANEL LIST");
	
	switchPanel(component);

};
Content.getComponent("btnNormal").setControlCallback(onbtnNormalControl);



//! PLUCK ENABLE BUTTON CONTROLS;
inline function onbtnPluckEnableControl(component, value)
{	
//	if (value)
//	{
//		PnlFeaturePluck.showControl(true);
//	}
//	else
//	{
//		PnlFeaturePluck.showControl(false);
//	}

	switchPanel(component);
};

Content.getComponent("btnPluckEnable").setControlCallback(onbtnPluckEnableControl);


//! STRUM ENABLE BUTTON CONTROLS
inline function onbtnStrumEnableControl(component, value)
{
//		if (value)
//		{
//			//btnStrumNatural.setValue(1);
//			//btnStrumNatural.changed();
//		//	btnStrumNatural.set("enabled", 1);
//			//btnStrumReleaseMode.set("enabled", 1);
//			pnlFeatureStrum.showControl(true);
//		}
//
//		else
//		{
//			//btnStrumNatural.setValue(0);
//			//btnStrumNatural.changed();
//			//btnStrumNatural.set("enabled", 0);
//			//btnStrumReleaseMode.set("enabled", 0);
//			
//		//	pnlFeatureStrum.showControl(false);
//		}

	switchPanel(component);
};

Content.getComponent("btnStrumEnable").setControlCallback(onbtnStrumEnableControl);

//! ARP ENABLE BUTTON CONTROLS
inline function onbtnArpEnableControl(component, value)
{
	switchPanel(component);


	if (value)
	{
		Arpeggiator1.setBypassed(false);
	//	pnlFeatureArp.showControl(true);
		knbStepRepeat.changed();
		SliderPack1.sendRepaintMessage();
		SliderPack3.sendRepaintMessage();

		
	}
	else
	{
		Arpeggiator1.setBypassed(true);
		
		//cmbArpType.setValue(1);
		cmbArpType.changed();
	//	pnlFeatureArp.showControl(false);
	}
	

};

Content.getComponent("btnArpEnable").setControlCallback(onbtnArpEnableControl);

[d.healey]

@Chazrox I don't know which lines those errors are referring to in the script you posted.

[Chazrox]

@d-healey

errors here @ .setValue

	for (sb = 0; sb < switchButtonsList.length; sb++)
	{
		switchButtonsList[sb].setValue(switchButtonsList[sb] == button);
		switchPanelsList[sb].showControl(switchButtonsList[sb] == button);
	}

The other paired error on each call is the swithPanel(); function in each button. No other errors showing.

[d.healey]

@Chazrox So that means one of the buttons in your array isn't actually a button

[Chazrox]

@d-healey

They definitely are tho...

They arent a knob or a slider for sure.

[d.healey]

@Chazrox It would work if they are knobs. That error is saying that it's not a valid component. Are you sure you have a reference to all of those buttons in your script?

You can Console.print(switchButtonsList[sb].getId()) within the loop and see at which point the error occurs.