top of page

TV Graphics Design

Introduction

On this page I will describe the design to enable Live Scoring to be used as graphics that can be cut out and placed on a live TV broadcast.

 

I will first explain how I achieved this on the WAGT app, and then describe in detail each component of the graphic. 

WAGT App

On the existing WAGT App, after selecting a Tournament, this is the first page before viewing the TV graphics: 

image.png

On this screen I can set:

1) The round that I would like to view the scores for

2) The group of players that are currently on the Live Stream

3) The colour of the background and the colour of the text

Once I have set these values I can then see the TV graphics. These are cut out and inserted on to the Live Stream as follows:

In the next sections I will describe each of these graphics.

1: Leaderboard

image.png

The Leaderboard contains the following information:

  • Rank - This is a player's current position in the Tournament. It is calculated using the average number of strokes a player has taken on each lane, assuming they will take 2 strokes for all lanes they haven't played yet. Note - in the case where there is a Final Round for a top number of players, those players that have qualified for the Final Round will always have a better ranking than those players who did not qualify.

  • Name (full name)

  • Category

  • Thru - The total number of lanes each player has register a score for

  • Total - The total number of strokes registered for each player

  • Par - A measure of how the player's total score compares to the par score for the lanes they have played. In this example all players were over par, in the case where a player is 2 strokes under par "-2" would be displayed for example

Two notes:

  • The Leadberboard does not have any blank white space meaning the width of each column is the size of the maximum entry in that column

  • You can scroll down the Leaderboard. For example it might be interesting to view which players are close to 18th position just before the Final Round.

2: Large Scores

This graphic is played at the bottom of the screen during a live broadcast:

image.png

On this graphic, of which there is one version for each player in the selected group, you can see the following:

  • Player's full name

  • For the selected round, the scores that the player has registered for each lane. Note an ace will be displayed in green, and scores over 2 will be displayed in red

  • The total score for the round, compared against par, here displayed under "R". So in this example Cameron Couper had a score of 2 under par for the entire Round. So this is displayed in green as "-2"

  • The player's overall score for the Tournament, again compared against par. In this example Cameron Couper had a score of 8 over par for the entire Tournament. So this is played as "+8" in red

3: Small Scores

This graphic is played at the top right of the screen during a live broadcast:

image.png

On this graphic, of which there is one version for each player in the selected group, you can see the following:

  • Player's name. In the format of their first initial, and their last name

  • Player's score for the selected round, compared against par. In this example C. Couper had a score of 2 under par for the round, this is displayed as "-2"

  • The player's average score for the next lane they are going to play. So C. Couper in this example was going to play Lane 1 next, so you can see his average score for Lane 1 which was 1.88.

  • The ace percentage for the next lane the player will play. In this case it was 14.4%. This means 14.4% of the time any player attempted Lane 1, they scored an ace. It is a way to express how easy or difficult it is to score an ace on each Lane

  • The player's overall score for the Tournament, again compared against par. In this example Cameron Couper had a score of 8 over par for the entire Tournament. So this is played as "+8" in red

bottom of page