Yellow and Red Card graphics

'

Caveat: You need to have Template Editor permissions. It may be sensible when naming new hooks, new templates or new template sets to add "TRAINING" as part of the name, to differentiate your work from ''live'' production work. Do consider any ''Delete'' actions carefully - is it your work you are deleting?

Single Card

An example of the completed graphic:

Prerequisites

Prior to beginning this article, the user should be familiar with selecting a schema and creating hooks. Also to have completed the following articles:

• Scoreline graphic Part 1
  

• Scoreline graphic Part 2
  

• Scoreline graphic Part 3
  

• Scoreline graphic Part 4
  

• Scoreline graphic Part 5
  

You should also have the 'Scorelines' image set.

Requirements

The requirements from the user side are to be able to simply choose from a drop-down list at what point during the timeline of the match to create an instance for. The list of options should include:

• An abbreviation of the team
  

• The time of the card
  

• The name of the player
  

• The penalty level of the card, i.e. Yellow, 2nd Yellow or Red
  

Creating the Hooks

Using Ignition Post Win Client as a Template Editor

1. Select the main tab DATA
   

2. Select the sub-tab SCHEMAS & HOOKS
   

3. Below SCHEMAS:
   

1. Data Provider: XMLTeam
   

2. Target: Production

3. Schema: soccer event-report
   

4. Sample Data: Southampton v Leicester City
   

4. Create a parent hook to the below node:
   

1. sports-content.sports-event.event-actions.event-actions-soccer.action-soccer-penalty
   

2. Rename: Single Card
   

5. Create sub-hooks to the following nodes:
   

1. action-soccer-penalty.minutes-elapsed
   

2. action-soccer-penalty.period-value
   

6. Click 'Add Composite Hook'
   

1. Rename: mepvsat
   

2. Add the following component hooks:
   

3. Minutes Elapsed
   

4. Period Value
   

5. Add '_' (i.e. underscore) in the 'Format' field
   

6. Change the sub-tab to Lookups
   

7. Click within the Lookup field and select: 'mepvsat' and select: Description'
   

7. Ensure 'Single Card' is selected, create sub-hook to the following node:
   

1. action-soccer-penalty.penalty-level
   

8. Create a second sub-hook to action-soccer-penalty.penalty-level
   

1. Rename: Penalty Level Adj
   

2. Add the following Transform Steps:
   

3. Replace X with Y, where X = 'yellow-card' and Y = 'Yellow'
   

4. Replace X with Y, where X = 'yellow-red-card' and Y = '2nd Y-Red'
   

5. Replace X with Y, where X = 'red-card' and Y = 'Red'
   

1. action-soccer-penalty.recipient-idref
   

2. Set 'Reference' to 'All Players' and click 'Create Hooks'
   

1. action-soccer-penalty.team-idref
   

2. Set 'Reference' to 'All Teams' and click 'Create Hooks'
   

1. Rename: Selector
   

2. Add the following component hooks:
   

3. Single Card.Team Idref.Full Team Abbr
   

4. mepvsat
   

5. Single Card.Penalty Level Adj
   

6. Single Card.Recipient Idref.Last
   

7. Change the 'Composite Mode' to: Format String
   

8. Enter the following in 'Format':
   

9. {0}-{1}'- {2} -{3}
   

Adding a scene

1. Select the main tab TEMPLATES
   

2. Ensure the template set 'TRAINING Match' is selected (above 'Search Templates')
   

3. Click 'Add new Template to TRAINING Match'

4. Rename: 'Single Card'
   

5. Click the 'Select' button adjacent to 'Scene'
   

Note you have a pane to the right-hand side:

BROWSE SCENES

With:
Renderer Domain
Graphics Hub

And a list of your available scenes below 'Search'

1. Ensure 'Renderer Domain: Viz
   

2. Ensure Graphics Hub: Post --- (Or the name of what is pointing at your available Viz Scenes)
   

3. Type the following into the 'Search' bar: PL14_L3_YELLOW_CARD
   


You may get more than one option of where a scene is available.



4. Select and expand: BBC-SPORTS_PL2014
   

5. Find the above scene: PL14_L3_YELLOW_CARD
   

1. Click 'Refresh Thumbnail and Scene Controls'
   

2. Click 'Click button to make this the current main scene'
   

6. Find the following scene: PL14_L3_RED_CARD
   

1. Click 'Refresh Thumbnail and Scene Controls'
   

2. Click 'Click button to make this a variant scene'
   

7. Find the following scene: PL14_L3_2ND_YELLOW_CARD
   

1. Click 'Refresh Thumbnail and Scene Controls'
   

2. Click 'Click button to make this a variant scene'
   

1. Rename the Label: 'Match'

2. Select the Schema: 'soccer event-report'
   

1. Choose the 'Schedule Condition Hooks.Event Name Abbr' hook
   

2. Click the greyed out 'title' on the control -- it turns 'green'
   

1. Using a behaviour control bind as follows: Scene Override
   

2. Hook = 'Single Card.Penalty Level'
   

3. Change Data Selector to: 'Selector'  

4. TICK 'Show To User'
   

5. Change the 'Label' to: Scene Override
   

6. Add the following Transform Rules:
   

7. Replace X with Y, where X = 'yellow-card' and Y = 'PL14_L3_YELLOW_CARD'
   

8. Replace X with Y, where X = 'yellow-red-card' and Y = 'PL14_L3_2ND_YELLOW_CARD'
   

9. Replace X with Y, where X = 'red-card' and Y = 'PL14_L3_RED_CARD'
   

N.B. When you bind a Viz Control to a template control the template control will automatically be renamed to the Viz Control - but it's always good practice to give it a more meaningful name.

This will change the scene, i.e. it will override the main scene and select an alternate scene.

For example, the Scene Variants (i.e. PL14_L3_RED_CARD & PL14_L3_2ND_YELLOW_CARD, vary only slightly to the main scene: PL14_L3_YELLOW_CARD. The options for this graphic are for it to be a yellow card, a second yellow becoming a red or a red card.

Because each of these modes represents different scenes, but they are so similar in functionality, they can be defined as Scene Variants. It is, therefore, possible to automate the selection of the appropriate scene to use from the Template by selecting the relevant Variant from a Control bound to Scene Override. When bound to a Control it will automatically populate the options with the list of Scene Variants specified for the Template.

The below image shows the three template controls so far:

Now to add the controls that map to the hooks you created.

1. Add a 'Data Item Selector' control
   

1. Change Label to: 'Selector'
   

2. Set the 'List Hook' as: 'Single Card'
   

3. Change 'Id (Value)' to: 'Index'
   

4. Change 'Display' to: 'Selector'
   

5. Click the greyed out 'title' on the control -- it turns 'green'
   


You should have an image set with the logo for each premier league football team. For the remainder of the tutorial, this will be referred to as the image set - 'Scorelines'.



2. Add a 'Data Item' control
   

1. Bind to: Image 0001 TEAM_PIC
   

2. Change Data Selector to: 'Selector'
   

3. Hook = 'Single Card.Team Idref.Team Key'
   

4. Image Set = 'Scorelines'
   

3. Add a 'Data Item' control
   

1. Bind to: Text 1001 NAME
   

2. Change Data Selector to: 'Selector'
   

3. Hook = 'Single Card.Recipient Idref.Last'
   

4. TICK 'Show To User'
   

5. Change the 'Label' to: Name
   

4. Add a 'Data Item' control
   

1. TICK 'Show To User'
   

2. Bind to: Text 1002 SUBTEXT
   

3. TICK 'Show To User'
   

4. Change the 'Label' to: Card Awarded
   

5. Change Data Selector to: 'Selector'
   

6. Hook = 'Single Card.Penalty Level'
   

7. Add the following Transform Rules:
   

8. Replace X with Y, where X = 'yellow-card' and Y = 'Yellow - Booked'
   

9. Replace X with Y, where X = 'yellow-red-card' and Y = '2nd Yellow (Red) - Sent Off'
   

10. Replace X with Y, where X = 'red-card' and Y = 'Red - Sent Off'
    

5. Change the 'Data Selector' of the Scene Override (Data Item') to ' Selector' (Not 'Match')
   

The below image shows the three template controls you just created:

'

Now to use the template to create a graphic.

Using the Web Client to view your new template. Remember to Login as a Template Editor, as the template is not yet published.

1. Login as a Template Editor (the template is not published)
   

2. Select the template set: TRAINING Match
   

3. Select the Sample Data:
   

1. SampleData - soccer event-report - Southampton v Leicester City.xml
   

4. Select the template: Single Card
   

The data goes to the first instance, in this case, a yellow card given to Højbjerg.

The ''Scene Override'' field is populated with the following (because it is a yellow card):

• PL14_L3_YELLOW_CARD
  

As per the image below:

1. Using the dropdown in the 'Selector' field, change the data instance (from the sample date) from "SOT-26'- Yellow -Højbjerg" to:
   

1. "SOT-77'- 2nd Y-Red -Højbjerg"

The 'Scene Override' field is populated with the following (because it is a second yellow card):

• PL14_L3_2ND_YELLOW_CARD
  

As per the image below:

You will need to switch to different sample data to see an instance of a 'straight' red card being issued and the resulting scene override.

1. Select the Sample Data:
   

1. SampleData - soccer event-report - Burnley v Manchester United.xml
   

2. Select the template: Single Card
   

The data goes to the first instance, in this case, a yellow card given to McNeil.

The 'Scene Override' field is populated with the following (because it is a yellow card):

• PL14_L3_YELLOW_CARD
  

1. Using the dropdown in the 'Selector' field, change the data instance (from the sample date) from "BUR-52'- Yellow -McNeil" to:
   

1. "MNU-71'- Red -Rashford"

The 'Scene Override' field is populated with the following (because it is a red card):

• PL14_L3_RED_CARD
  

As per the image below:

Now to use a different scene. Return to the Win Client.

1. Select the main tab TEMPLATES

2. Ensure 'Single Card' is highlighted
   

3. Below the TEMPLATE pane, rename 'Old Single Card'
   

4. Save
   

5. Click 'Clone Template'
   

6. Rename: 'New Single Card'
   

You will note from the above image you have a new scene and the pane below SCENE VARIANTS is empty.

1. Below BROWSE SCENES
   

1. Expand BBS-SPORT/SCENE/FOOTBALL/MOTD/IDONIX/2017
   

2. Ensure 'MOTD_P_S_L3_CARDS' is highlighted
   

3. Click 'Click button to make this the current main scene'
   

4. Highlight each of the following and then click 'Delete':
   

5. PL14_L3_RED_CARD

6. PL14_L3_2ND_YELLOW_CARD

The new scene control objects will need to Bind appropriately.

1. To the first 'Data Item' (i.e. the one with the 'Scene Override' Bind):
   

1. Bind to: CARDS 1-Y 2-R 3 DY
   

2. Replace the Y values in the three 'Replace X with Y' as follows: 'yellow card' = 1, 'yellow-red-card' = 3 & 'red-card' = 2
   

2. Replace TEAM_PIC with:
   

1. FLAG
   

3. Replace NAME with:
   

1. LINE1
   

4. Replace SUBTEXT with:
   

1. LINE2
   

5. Add two 'user Option' controls, Bind each as follows:
   

1. BBC_NO_BBC
   

2. BADGE_NO_BADGE
   

Using the Web Client (as a Template Editor).

1. Select the template set: TRAINING Match
   

2. Select the Sample Data:
   

1. SampleData - soccer event-report - Southampton v Leicester City.xml
   

3. Select the template: New Single Card
   

The data goes to the first instance, in this case, a yellow card given to Højbjerg.

The 'Card Awarded' field is populated with the following (because it is a yellow card):

• 'Yellow Booked'
  

1. Using the dropdown in the 'Selector' field, change the data instance (from the sample date) from "SOT-26'- Yellow -Højbjerg" to:
   

1. "SOT-77'- 2nd Y-Red -Højbjerg"
   

The 'Card Awarded' field is populated with the following (because it is a second yellow card):

• 2nd Yellow (Red) - Sent Off
  

You will need to switch to different sample data to see an instance of a 'straight' red card being issued.

1. Select the Sample Data:
   

1. SampleData - soccer event-report - Burnley v Manchester United.xml
   

2. Select the template: New Single Card
   

The data goes to the first instance, in this case, a yellow card given to McNeil.

The 'Card Awarded' field is populated with the following (because it is a yellow card):

• 'Yellow Booked'
  

1. Using the dropdown in the 'Selector' field, change the data instance (from the sample date) from "BUR-52'- Yellow -McNeil" to:
   

1. "MNU-71'- Red -Rashford"
   

The 'Card Awarded' field is populated with the following (because it is a red card):

• Red - Sent Off
  

You will notice the new viz scene simply deals with the different instances without the need for 'Variant Scenes' as used in the 'Single Card' template.

'

Have you tried the tutorial to produce a Single Substitution graphic, available at the link below:

Single Substitution graphic