SKUs: Velocity platform, AT-VGW-250, AT-VGW-HW-3, AT-VGW-HW-10, AT-VGW-HW-20, AT-VGW-SW, AT-VTPG-1000VL

Summary: This tutorial will show you how to use variables and more advanced macros to create your custom user interface (CUI) drag-and-drop page.

Pre-requisite

DISCLAIMER: This is a tutorial on a generic drag-and-drop scenario. This may not fit your installation exactly, but you can adjust according.
- In this scenario, we will use four sources connected to a matrix sent out to two displays.
Before you begin, make sure to understand your hardware and its capabilities.
- An AT-VGW-HW-3 or AT-VTPG-1000VL may not have the hardware to run a CUI with many buttons or macros before becoming sluggish.
- An AT-VGW-20 or AT-VGW-SW may be better for running larger systems with more complex programming.
- All SKUs will be able to run this scenario.
Understanding of advanced programming items
- Variables
- IF statements
- Conditions
- Velocity Training: Macros, Event Macros, and Room Triggers with Variables Here is a brief video reviewing some of these if you need a refresher.

Note: We will be using firmware 2.5.2 for this article. Button locations may be different if you are on another firmware.

Step 1 - Making your variables

In this article, we will use Velocity to track the state of the display variables. If you know your device is connected to Velocity, you could use the feedback directly from the matrix, but we will not cover that in this scenario. We are using two displays, but yours may have more.

The red-outlined variables are to track the active source that is playing.

The blue-outlined variable is the active source you are trying to change.

Step 2 - Making your macros

For this tutorial, we have four sources with two displays. Each route will have to be a macro, giving us eight altogether.

The red-outlined macros are all the routing for display or output 1

The blue-outlined macros are all the routing for display or output 2

_________________________________________________________________________________________________

Each macro has two commands. Here is an example of 'route source 3 to output 1'

Command 1 sends an input switch command to the matrix to change input 3 to output 1.

Command 2 sets the variable 'Display 1 source' to Source 3. You can now use that value to update the UI to show what source is being sent to the display.

Tip - You can make one macro with your commands, then copy that macro to adjust it. This will save time when setting up a lot of macros.

Step 3 - CUI source button

In your CUI, you will want to have four buttons. We will be editing the 'On Drag Start Macro.' This means when the button is dragged, it will trigger the macro.

The red-outlined 'Can Drag' needs to be toggled on so the button will move on the screen.

The blue-outlined command sets the 'On-Drag Source' we made in step one. This will tell the system what source you are trying to select.

Step 4 - CUI display button

Start by making two buttons since we have two outputs/displays.

We will enter all the commands inside the 'On Drop Macro' outlined in red.

The blue-outlined area is a complete command for Source 1. There are four of these, one for each source.

The green-outlined area is the trigger. If the variable On-Drag Source equals Value: Source 2.

The pink-outlined area is the execution if the above statement is true. We want to recall the macro we made in step 2 to route the correct input to output. We do not need to change the variable, so you can leave Set Variable blank.

Step 5 - Variable options

You can use the variables we made in step 1 to change the look of your button to reflect the current source assigned. Below are only a couple of ways you could customize your display buttons.

Option 1:

Setting the Label on the button to the variable we made in step 1 will cause the text to update directly on the button.

Video demonstration below.

_________________________________________________________________________________________________

Option 2:

The red-outlined area is in your complete condition. Each source will get one if you want to make them look different.

The blue-outlined area is for your trigger if your variable 'Display 1 source' equals Value: Source 2.

The green-outlined area is what gets executed and what the button will look like when this condition is triggered.

You can always change the image to reflect the source as well.

I went ahead and added font colors. You can check out the video demonstration below.

Note: Italics