switching views with CSegmentButton and UIViewSwitchContainer

I am trying to build a tab-view where different views are shown depending on a parameter value.
In have built a little test plug-in with a CKnob, a COptionMenu and CSegmentButton. All controls are set to the same control-tag and this is the only parameter at all in the plug-in.

Below the controls there is a UIViewSwitchContainer holding 3 CViewContainer with different background colors to recognize a view change. This is also set to the control-tag.

Here’s how the gui looks like. It is twice opened in VST3PlugInTestHost:


What I would expect now is that no matter which control I use to switch between the views in the UIViewSwitchContainer, the views should change and all other controls should show the new parameter value. I guess this should synchronize in both editors but unfortunately it does not.

The upper CSegmentButton switches the views in it’ own editor but not in the other one.
The lower CSegmentButton does not change the UIViewSwitchContainer at all.
Both CSegmentButton do not change when the COptionMenu or the CKnob ist changed.
Only the CKnob and the COptionMenu send and receive all parameter changes no matter in what editor the change happens.

I don’t know what I am missing here to synchronize all controls in the right way.
Why does the synchronization work well for CKnob and COptionoMenu but not for CSegmentButton and UIViewSwitchContainer?


The (one and only) parameter:

auto* indexParam = new StringListParameter (USTRING ("Index"), 42, nullptr, 0, 0, nullptr);
indexParam->appendString (USTRING ("Tab 1"));
indexParam->appendString (USTRING ("Tab 2"));
indexParam->appendString (USTRING ("Tab 3"));
parameters.addParameter (indexParam);

The uidesc:

<?xml version="1.0" encoding="UTF-8"?>
<vstgui-ui-description version="1">
	<fonts>
	</fonts>
	<colors>
		<color name="Background" rgba="#1e2129ff"/>
	</colors>
	<template background-color="Background" background-color-draw-style="filled and stroked" class="CViewContainer" mouse-enabled="true" name="Editor" opacity="1" origin="0, 0" size="360, 300" transparent="false" wants-focus="false">
		<view class="CSegmentButton" control-tag="Index" default-value="0" font="~ NormalFont" frame-color="~ GreyCColor" frame-width="1" icon-text-margin="0" max-value="2" min-value="0" mouse-enabled="true" opacity="1" origin="20, 20" round-radius="3" segment-names="Tab 1, Tab 2, Tab 3" selection-mode="Single" size="200, 30" style="horizontal" text-alignment="center" text-color="~ GreyCColor" text-color-highlighted="~ YellowCColor" transparent="false" wants-focus="true" wheel-inc-value="0.1"/>
		<view class="CSegmentButton" control-tag="Index" default-value="0" font="~ NormalFont" frame-color="~ GreyCColor" frame-width="1" icon-text-margin="0" max-value="2" min-value="0" mouse-enabled="true" opacity="1" origin="20, 90" round-radius="3" segment-names="Step 1, Step 2, Step 3" selection-mode="Single" size="200, 30" style="horizontal" text-alignment="center" text-color="~ GreyCColor" text-color-highlighted="~ GreenCColor" transparent="false" wants-focus="true" wheel-inc-value="0.1"/>
		<view back-color="Background" background-offset="0, 0" class="COptionMenu" control-tag="Index" default-value="0" font="~ NormalFont" font-antialias="true" font-color="~ YellowCColor" frame-color="~ GreyCColor" frame-width="1" max-value="2" menu-check-style="true" menu-popup-style="true" min-value="0" mouse-enabled="true" opacity="1" origin="240, 20" round-rect-radius="3" shadow-color="~ RedCColor" size="100, 30" style-3D-in="false" style-3D-out="false" style-no-draw="false" style-no-frame="false" style-no-text="false" style-round-rect="false" style-shadow-text="false" text-alignment="center" text-inset="0, 0" text-rotation="0" text-shadow-offset="1, 1" transparent="false" value-precision="2" wants-focus="true" wheel-inc-value="0.1"/>
		<view angle-range="360" angle-start="90" circle-drawing="false" class="CKnob" control-tag="Index" corona-color="~ CyanCColor" corona-dash-dot="false" corona-dash-dot-lengths="1.26,0.1" corona-drawing="true" corona-from-center="false" corona-inset="12" corona-inverted="false" corona-line-cap-butt="true" corona-outline="true" corona-outline-width-add="2" default-value="0" handle-color="~ WhiteCColor" handle-line-width="8" handle-shadow-color="~ GreyCColor" max-value="2" min-value="0" mouse-enabled="true" opacity="1" origin="250, 70" size="70, 70" skip-handle-drawing="true" transparent="false" value-inset="3" wants-focus="true" wheel-inc-value="0.1" zoom-factor="1.5"/>
		<view animation-style="fade" animation-time="200" animation-timing-function="linear" background-color="~ GreyCColor" background-color-draw-style="filled and stroked" class="UIViewSwitchContainer" mouse-enabled="true" opacity="1" origin="20, 160" size="320, 120" template-names="Tab1,Tab2,Tab3" template-switch-control="Index" transparent="false" wants-focus="false"/>
	</template>
	<custom>
		<attributes name="FocusDrawing"/>
		<attributes Path="/DEV/audio/TabTest/resource/my.uidesc" name="VST3Editor"/>
		<attributes Grids="1x 1,5x 5,10x 10,12x 12,15x 15" name="UIGridController"/>
		<attributes SelectedTemplate="Tab3" name="UITemplateController"/>
		<attributes EditViewScale="1" EditorSize="0, 0, 1110, 1084" SplitViewSize_0_0="0.5482041587901701484852878820674959570169" SplitViewSize_0_1="0.4328922495274102333340238146774936467409" SplitViewSize_1_0="0.8024574669187145570248276271740905940533" SplitViewSize_1_1="0.1928166351606805384300002970121568068862" SplitViewSize_2_0="0.4171171171171171310199099480087170377374" SplitViewSize_2_1="0.5783783783783783549736767781723756343126" TabSwitchValue="0" Version="1" name="UIEditController"/>
		<attributes name="UIAttributesController"/>
		<attributes SelectedRow="31" name="UIViewCreatorDataSource"/>
		<attributes SelectedRow="-1" name="UITagsDataSource"/>
		<attributes SelectedRow="0" name="UIColorsDataSource"/>
	</custom>
	<bitmaps/>
	<control-tags>
		<control-tag name="Index" tag="42"/>
	</control-tags>
	<gradients/>
	<template background-color="~ GreenCColor" background-color-draw-style="filled and stroked" class="CViewContainer" mouse-enabled="true" name="Tab1" opacity="1" origin="0, 0" size="320, 120" transparent="false" wants-focus="false"/>
	<template background-color="~ YellowCColor" background-color-draw-style="filled and stroked" class="CViewContainer" mouse-enabled="true" name="Tab2" opacity="1" origin="0, 0" size="320, 120" transparent="false" wants-focus="false"/>
	<template background-color="~ CyanCColor" background-color-draw-style="filled and stroked" class="CViewContainer" mouse-enabled="true" name="Tab3" opacity="0.42" origin="0, 0" size="320, 120" transparent="false" wants-focus="false"/>
</vstgui-ui-description>

Hi,
I’m sorry, but the UIViewSwitchContainer currently only supports one control for switching views.

Cheers,
Arne

Hi Arne,

ok, thanks for this information!

But what about the CSegmentButton? How can I make it listen to parameter value changes?
When I close and reopen the editor, the CSegmentButton shows the right value, but it does not change when another control changes the value.

Thanks,
Bernd

If you are interested in looking at Jamba, it handles this https://jamba.dev/views/switchviewcontainer/ “naturally”: you define a view for each tab and then you attach the SwitchViewContainer to a parameter (not a control like the SDK) that way it is always in sync, even if the RT changes the value of the parameter.

Yan