Dynamically Change Button Color using Scripted Variables

This tutorial is specific to our newest product, Hudl Sportscode. If you’re on Sportscode v11, use these resources instead or upgrade today.

Example Used

In this example we want to use a ‘traffic light’ color system to show % success ratio of Goal Scoring Opportunities (GS OPP) vs Attacking 3rd Entries (ATT 3rd ENTRY).


Commands Used

  • $this_button
  • Count Instances
  • Show Round
  • Button Color
  • If (Statements)

How-to:

  1. Create two code buttons so that the output is visible and add a button id:

    • Code button 1: titled "ATT 3rd ENTRY" with a button ID 'subject01'.
    • Code button 2: titled "GS OPP" with a button ID 'subject02'.
  2. Select one of the code buttons and open the inspector. Navigate to the script tab and add the following script:

    SHOW COUNT INSTANCES WHERE ROW = ($this_button)

    Repeat for second code button.

    Using the ‘this_button’ command allows us to reuse this script in other buttons to count instances, regardless of the name of the button.

  3. Create four inactive buttons and name each of the buttons Color 1, Color 2, Color 3, and Color 4. Add a button ID to each.

    The button name and the button ID should be the same, except the button ID should not have any spaces. For example, the button named 'Color 1' will have a button ID of 'color1'.

    Use the appearance options in each button's inspector to set the color of each button as shown above. Buttons 1 to 3 will act as the "traffic lights" and button 4 is set to transparent (allowing the button to show no color when the if statements are neutral).

  4. Create the final inactive button. In the button's inspector on the appearance tab, check Show Output.

    This button will display the % number of times a team creates a Goal Scoring Opportunity when it enters the Attacking 3rd of the field.

  5. The script for the button you created in step 4 will refer to the following button IDs:

    Code Button 1 (Att 3rd Entry): Button ID = #’subject01’
    Code Button 2 (GS OPP): Button ID = #’subject02’

    Color Palette Buttons:

    Color 1: Button ID = #’color1’
    Color 2: Button ID = #’color2’
    Color 3: Button ID = #’color3’
    Color 4: Button ID = #’color4’

    Script Used:

    button color #'color4'

    $var1 = count instances where row = #'subject01'
    $var2 = count instances where row = #'subject02'

    $result = $var2/$var1 *100

    show round ($result,0) + "%"

    if($result >= 80, button color #'color1')
    if($result >= 60 and $result < 79, button color #'color2')
    if($result < 60, button color #'color3')
    if($var1 = 0 and $var2 = 0, button color #'color4')


Script Explanation

button color #'color4'
This command sets the button color to that used by button color 4 (transparent).

$var1 = count instances where row = #'subject01'
if($result >= 60 and $result < 79, button color #'color2')
This script will change the button color to ‘Yellow’ if the output of this button is between 60% and 79%.


if($result >= 80, button color #'color1')
This script will change the button color to ‘Green’ if the output of this button is 80% or higher.


$var2 = count instances where row = #'subject02'
These two rows count the number of instances in code buttons 1 & 2.


$result = $var2/$var1 *100
This script creates a result for code button 2 / code button 1 x 100.


show round ($result,0) + "%"
This script rounds the result of the row 6 calculation, to show zero decimal places. It also adds the ‘%’ symbol after the result number.


if($result < 60, button color #'color3')
This script will change the button color to ‘Red' if the output of this button is below 60%.


if($var1 = 0 and $var2 = 0, button color #'color4')
This script will change the button color to ‘Transparent’ if there are no instances in either the ‘ATT 3rd Entry’ or the ‘GS OPP’ rows.