Now that we have the ability to select 2 sources out of 16, we want to be able to switch between them. As we can select the sources by clicking on them, we should use the same method to select the output. We add another Container COMP by the name of Select_A, 640×360 by size and jump into it. Here we connect a Panel CHOP to an Out CHOP. Set the Panel CHOPs Select parameter to select only. We want to know if this container has been clicked or not. We do not care where it has been clicked this time.
Further we add an In TOP, a Rectangle TOP and an Out TOP. For the Rectangle TOP set Resolution to 1280×720. Also set Size units to Pixel and Size to 1280×720, Fill Alpha to 0, Border Color to orange and Border Width to 10 Pixels.
We will use this orange frame later to highlite the source that is currently on Air. Right now we do not know yet, so we have should create on central place that knows which state our switcher is in. Move on level up and create a Constant CHOP called state.
Plug the output of switch_A into Select_A and set Select_As Background TOP parameter to ./out1
Add a Null CHOP and a Chop Execute DAT that monitors that Null. Off to On only.
Use this expression in the Chop Execute DAT:
op(‘state’).par.value0 = 0
Whenever Select_A gets selected, state becomes zero.
Lets duplicate that behaviour for Select_B, but so that state becomes one when Select_B is selected.
Now, when you activate the Select_A/B containers and click them,
you should see state jump between zero and one.
To use this to drive our crossfade, we add a Lag CHOP and a selective Null CHOP which we call x_fade.
Use this value to drive the cross1 TOP.
Next we want to implement the frame that shows us which source is currently on Air.
Let’s jump into the Select_A container and write the following expression into the Border Alpha parameter:
The frame will be visible when state is zero, which means, Select_A is live.
We repeat this for Select_B, but this time with this expression:
To finish up the interface we want to layout the different elements of the switcher. To that end we get an emptypanel component from the Palette Browser (UI/TUIK/Windowparts) and size it 1280×360.
On the Children page we set Align to Left to Right.
Then we connect Selector_A and Select_A into the emptypanel. The Selector should be on the left side. If they appear in the wrong order, go to the second container and on the first page set parameter Align Order to 1. This should make the containers switch order.
Repeat this Step for Selector_B and Select_B.
Move up one level and for the Switcher container, on the Children page set Align to Top to Bottom.