Welcome to the Atlona Help Center

Velocity - CUI - How to change button state color by button press in the custom user interface

 

This article will show you how to update button states by button press. 

Step One

2021-10-04_15h44_431.png

Create two buttons that you wish to use as a toggle. You can always expand and add as many as you would like.

 

 

Step Two - A

2021-10-05_07h29_11.png

We are now going to make a variable that we can use to let our buttons know what color they should be.

 

 

Step two - B

2021-10-05_07h33_12.png

After you opened your variables page you will want to add a room variable with the "+" button. This will bring up a text field for you to name your variable.

I named mine "Active Source" for this example. Click "OK" to save your variable. If it does not appear in your room variables refresh your page and double-check before trying to add another one.

 

 

Step two - C

2021-10-05_07h37_11.png

This is an example of where your variable will save. You can close out this window now but we will come back to this.

 

 

Step Three - A

2021-10-05_07h39_07.png

For this next step, we want to be able to tell the variable what its value is. For this example, we are going to make the button do that for us.

I like to keep variables in my projects in the "On Release Macro" of the button for organization purposes. This will work in the "On Press or Tap Macro" as well but you typically put your commands to your AV equipment in there as well and that can get messy.

 

 

 

Step Three - B

2021-10-05_07h45_21.png

 

This is the setup you would use to set a variable. I selected out "Active Source" that we made and also gave it a value of "1". This is saying when you select this button set the variable "Active Source" to a value of "1". You can now do this exact step to all of your buttons you would like to expand this on just make sure to change your value. Your value can be anything but I would keep it simple and short. For example, for my next button, it would be a value of "2".

This is done on firmware 2.4.3. If you are on older firmware you may have to select Velocity as your device and scroll to the variable section.

 

 

Step Four - A

2021-10-05_07h53_51.png

For this stage, we are going to take a moment to test our variable and macro. I have already finished making the macro for button two so I will hit the play button for the macro we just made. Now I will check our variables page to make sure that it is updated correctly.

 

 

Step Four - B

2021-10-05_07h57_04.png

You can now see that my variable for "Active Source" has a "Current Value" of "2" because I ran the macro for my "HDMI 2" button. Closeout the variables screen and do the same for "HDMI 1" to see if the "Current Value" changes to a value of "1".

If you are not getting the correct values I would go back and look over step three.

 

 

Step Five - A

2021-10-05_08h01_22.png

We have made a variable and made a macro to set the variable value. Now we need that value to set the state of our button color. We will do this with "Conditions". Select the button you would like to update its state. For this example, I am using "HDMI 1".

 

 

 

Step Five - B

2021-10-05_08h06_57.png

(1) Once you expand the "Conditions" drop-down you can hit the "+" sign to add a condition. Make sure to refresh your page if you do not see your condition at first to make sure you are not adding multiple.

(2) Select the variable we made in step two.

(3) The operator for this example is set to "==" which means it has to have the exact value to work.

(4) Set the value that the button looks for to see when it should change any of its aesthetics. I picked the value of 1 since that is what we have our macro set our value.

(5) For this selection you can change a few things on the button. These changes will only take place if the variable is equal to 1. In this case, I am changing the fill of the button to change to red when selected.

You can now go to your next button and do the same thing but change the value accordingly.

 

 

Step Six

2021-10-05_08h17_31.png

Our last step in our testing. You may need to go through your settings to make sure you can navigate to the page you just made. This will not go over those steps.

Launch your WebGUI VTP or use your physical VTP and navigate to the page with your variable buttons. Select each button and make sure they are switching colors or image styles. Mine is changing from blue to red when I click on the button.

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Contact Us