Variables and Conditions

To understand better how menus other logic can be created in reactor we need to understand reactor's variables and conditions.

Variables

A Variable is like many other things an element in the tree. (See tree elements). Variables are a concept used in programming and mathematics to store information. In reactor they can be used to store values like:

• the current page of a menu
• the currently selected Device ID
• if the engineering menu is open
• and much more...

Types of Variables

Reactor variables can have 2 main types:

• Optionlist: a list of options, each options can also have a label. Option values can be numbers or strings
• Range: A numeric range with a minimum and a maximum and a default (or center) value.

When a variable gets set in the system the system will check if the value that is set matches the possible values defined. If not it will not set the variable, unless the option Accept any value is checked under show more

Basic usage of variables

Variables can be created on Layers. The quickest way to do so is to select the base layer of your current config and add a variable

When a variable is created its value defaults to the first value unless otherwise specified. From that point on you can now use your variables in all Parameter or Condition fields in any layer or behavior. Keep in mind that variables are available only to the layer they are defined on and it's child layers. This follows Tree Inheritance.

Example:

The components on the layer MyCustomOverlay (1) and INLINE10-Custom-2 (2) can use the variable ShowCustomButtons (3). Components on the layer QuickBar-Custom-1 (4) can NOT use the variable, as they do not inherit it's definition.

To create variables that can be accessed by all layers they need to be created on the main root layer of the project (5). The variable MyGlobalVariable (6) is accessible to all layers and controllers.

Setting and checking variable using the configurator

In the configurator you can always see the current values of variables in the tree

In the inspector you can also set different options active using the blue flag icon next to them

Finally you can use the bottom of the form to force set a variable, or even set more than 1 value

One Variable, multiple values

Any variable in reactor can be seen as an array of values. Wile this array will only contain one element in most cases it can also be empty, or contain multiple elements. To add or remove values from a variable you can use the SetMode in the EventHandler config:

Here are the relevant ones explained:

• Add To Array: Adds a new value to the current value array
• Remove From Array: Removes a specified value from an array
• Clear: Clears all values of a variable, resetting it to an empty array
• Toggle Add Remove: adds a value to the array or removes it in case it is already in

Example: In a setup with multiple cameras you want to have one button controlling gain on several cameras at once. You can setup buttons to add more than 1 ID to the DeviceIndex to make this possible. ParameterReferences that already reference the Var:DeviceIndex will now control all Devices in the array.

Conditions

Conditions are a structure used in many places in reactor. They are a text string that combine multiple Parameters into a condition that can ultimately evaluate to be either "true" or "false".

Some example places where they are used are:

• Active-If Condition on Layers: determine if a layer is shown (rendered) or not
• Active-If Conditions on FeedBackHandlers Layers: determine if a certain FeedBack (eg: Text, Color, ...) is shown or not
• Active-If Conditions on EventHandlers: determine if a certain interaction (eg: left edge press) is active or not
• Conditions on VirtualTriggers: determine if a VirtualTrigger simulates an active button press (See text)
• and several other places...

The Condition Helper Window

When you see a condition in reactor you can simply click it once and open the condition helper window.

The helper window can make it quick to create the condition you need. You can:

1. select ParameterReferences by clicking the yellow pencil icons or just start typing values into the text field
2. change the comparison operator in the middle to check
3. add logical branches to your conditions
4. change how your conditions are combined (AND or OR)
5. edit the raw string value of your condition
6. evaluate the current result of the condition in reactor by clicking the button. If true you will see a green check ✅, else a red mark ❌

Basic Format

The basic format of a Condition looks like so:

<Value or ParameterReference> <comparison operator> <Value or ParameterReference>

Comparison Operators

the basic operators for comparing values are:

• == equals
• != is not equal
• <= smaller than (only for numeric values)
• >= bigger than (only for numeric values)

Combining different Conditions into one

You can also combine several different conditions using the logical combination operators:

• && AND
• || OR

Additionally you can use brackets ( ) to group parts together and specify the order in which the individual parts of a combined condition are evaluated.

Example: Var:MyVariable == true && (DC:bmd-atem/1/programInputVideoSource/1 == 5 || DC:bmd-atem/1/programInputVideoSource/1 == 8) will evaluate to true if the variable MyVariable is set to true and the Program Parameter of the atem device 1 (on ME1) is either 5 or 8

Checking against empty or zero values

When checking if a value is empty one needs to remember that there are different possibilities here:

• A value can be completely undefined: in this case we can check against an empty array [] or ['']
• A value can be an empty string: in this case we can check against ''

Inside of the condition helper window you will get these values recommended in a dropdown.

Example Usages of Variables and Conditions

The simplest usecase for variables and conditions is to switch a layer on and off. To do so simply create a Variable, we use "ShowCustomButtons" as the name for this example

In the variable settings set it to "Options" (1), click add option (2) and add a true and false option (3). We can add labels (4) to these options as well, lets type in "Show" and "Hide" for the example.

The next step is to add our custom layer.

(If the tree is not open yet click the green arrow in the left top corner (1))

We can click the config layer (2) of our controllers config and click the add child layer button (3).

Lets add 2 Behaviors on our buttons. To do this we click the layer (1), select the two components by dragging (2), right click them and choose Create Behaviors (3). By default reactor will create dummy behaviors that show their button name and layer path.

We also need to map one of the encoder of our controller to the variable we just created. Simply click the component, choose System->Change Variable from the sidebar and select the Variable ShowCustomButtons

Finally we need to add an Active-If condition on our layer. Therefore click the layer, and select Add Active-If Condition in the inspector.

On the left side we will click the yellow pen and select our variable (ShowCustomButtons). On the right side we can just type out true.

Click submit and we are done.

To check the result activate simulation mode (ctrl/cmd+e) and change the variable using th encoder, it should look like so: