Build an overlay
An overlay is a layout that you build once and then control live. To control an overlay during a match, see Drive an overlay live.
Overlays are available on Club and higher plans, and the Roster element needs the Pro plan. See Plans and limits.
Before you start
Create at least one canvas. An overlay attaches to a canvas and shows wherever the canvas shows, in the preview tile and on the live output. See Create a canvas.
You build an overlay in the pixels of its canvas, so the editor needs the canvas to exist before it can work.
If you delete the canvas of an overlay, the editor shows Its canvas is not in this show. Select Choose canvas to set a new canvas. The elements stay as they were and come back into view once you select a canvas.
Create it
Open Overlays from the top bar. A new overlay belongs to the active match, and the name of the match shows at the top of the overlay list. See Run several matches.
- Under Overlays, select +. Its tooltip is New overlay. For an empty overlay, keep Preset at Blank (no preset). Or select a preset.
- In Name, type a name.
- Set Target canvas.
- Set Visibility to Always on top or Auto-hide on takeover.
Each preset is a full-screen scoreboard for one sport: Handball, Volleyball, Ice hockey, Floorball, Indoor hockey, Basketball or Futsal. The preset names the overlay, for example Volleyball scoreboard, and you can edit all of its elements.
When you select Save with a preset:
- It sets the sport of the match to the sport of the preset. See Select the sport.
- It uses the first two teams of the match and adds teams until the match has two. A match with no teams gets Team 1 and Team 2. A match with one team gets Team 2.
- On the Pro plan, it adds a Penalties element for each team. On the Club plan, it shows the penalty clock of each team in the same position.
If the match uses a different sport, the form shows The show uses and the two sports. The same happens for a match with only custom stats. Save then changes the sport and resets the team stats. You cannot change the sport while an overlay is on air, so Save is not available then. Take every overlay off air first.
If you have no overlays, the page shows No overlays yet. Select New overlay, or select Import template… to start from a preset. If you have overlays but none is open, the page shows No overlay selected.
On a screen narrower than 1500 px, the overlay list hides while an overlay is open. Select the overlay name in the toolbar to open the list as a menu. From there, select an overlay to edit it, or select + New overlay at the end of the menu.
overlay-01-editor — the overlay editor with the layers pane, canvas and settings panel, showing a sport scoreboard preset. Tracked in website/SCREENSHOTS.md.
The toolbar
The toolbar above the editor applies to the open overlay:
| Control | Does |
|---|---|
| Status chip | Shows Edit mode, or On air when the overlay shows on its canvas. |
| Go on air / Take off air | Shows the overlay on its canvas, or removes it. |
| Pencil (Overlay settings) | Opens the name, target canvas, visibility and On air setting of the overlay. |
| Trash (Delete overlay) | Deletes the overlay. It asks you to confirm first. |
You can also delete an overlay from the overlay list: right-click its row and select Delete….
Order the overlays on a canvas
The overlay list groups the overlays by canvas, under the name and size of each canvas. No canvas holds the overlays whose canvas is not in the show.
When several overlays show on the same canvas, their order in the list decides which one is on top. An overlay higher in the list shows on top of the ones below it. To change the order, drag the grip of a row up or down within its canvas group. This works while overlays are on air too.
The editor on air
While an overlay is on air, you cannot change it. The editor shows Take it off air to edit, and the canvas shows Live output with a green outline. Select Take off air to edit the overlay again.
Field values do not change in the editor. Change them in the Live values panel. See Drive an overlay live.
Add elements
The editor has three panes. The left pane has the tabs Layers, Fields and Teams, the canvas is in the middle, and the settings panel is on the right. The settings panel shows the settings of the selected element or field. When nothing is selected, it shows No element selected on the Layers tab and No field selected on the Fields tab.
On the Layers tab, select + Add element. Then select the kind of element:
| Element | Is |
|---|---|
| Value | Bound to a field in the live-value store. It changes live. |
| Text | A fixed label. |
| Image | A logo or graphic from your library. |
| Box | A solid panel, usually behind text. |
| Roster | A list of players, one player, or the active penalties. See Add a roster. |
When you add an Image element, the media picker opens. To change the image later, open the picker again from the settings of the element. The picker shows Choose image and the chip Images only, with the images as tiles. Find the image with the search field, the folder list or Tags ▾, select the tile, and then select Choose.
To show the logo of a team, set Source to Team logo and select the team in Team. When the team gets a new logo, the element shows it. A team without a logo shows nothing on air, and the editor shows No logo for and the team name. To go back to an image from your library, set Source to Media.
Text and value elements have a Background, which fills the box of the element behind the text. New elements have no background. To remove a background, select None. A value element without a value shows no background, prefix or suffix.
To move an element, drag it on the canvas. To resize it, drag one of its eight handles. For exact values, use X, Y, W, H, font size, color, alignment and opacity in the settings panel.
A Value element also has a Prefix and a Suffix. For example, a field with
the value 12 and the prefix SHOTS shows SHOTS 12.
The settings panel also has Duplicate, Group and Remove…. Remove… asks you to confirm first. To remove an element from the Layers tab, right-click its row and select Remove….
Format a clock
A Value element that you bind to a timer field has a Format setting:
| Format | Shows |
|---|---|
| Auto | m:ss. From one hour, h:mm:ss. |
| h:mm:ss | Hours, minutes and seconds, always. |
| mm:ss | Minutes with two digits, and seconds. |
| m:ss | Minutes and seconds. |
| ss | The total number of seconds. |
The list shows each format at 7:42 and at 1:07:42.
To show tenths of a second near the end of a period, select Tenths under and type a
number of seconds. Below that time, the element shows s.t, for example 9.4, whatever
the format.
Set the font
Text, value and roster elements have a Font and a Weight. The default is Open Sans SemiBold, which is also the font for text elements from earlier versions of ArenaDirector.
The Font list has these groups:
| Group | Fonts |
|---|---|
| Added | The font files that you added to ArenaDirector. |
| Bundled | Open Sans, Chivo Mono, Bebas Neue, Barlow Condensed, Oswald, Roboto Condensed, Saira Condensed, Teko. Every computer with ArenaDirector has these fonts. |
| This computer | The fonts that are installed on this computer. |
To add a font file:
- Open the Font list.
- Select + Add font file….
- Select a
.ttfor.otffile.
ArenaDirector keeps a copy of the file in its data folder, but the show file does not contain the font. If you open the show on a computer that does not have the font, the element shows in Open Sans. The Layers list shows a warning icon on the element, and its settings show Not on this computer: drawn in Open Sans. To fix it, add the font file on that computer.
Show a count as pips
A Value element bound to a team stat with a maximum can show the count as pips, for example the timeouts that are left.
- Select the element.
- Set Show as to Pips.
- Set Shape to Dot or Bar.
- Set the colors Filled and Used.
If the stat has a limit, the pips switch to the At the limit color when the count reaches it. For team stats, see Manage teams and rosters.
Add a roster
A Roster element shows the players of a team from the Teams tab. To add players, see Manage teams and rosters.
- On the Layers tab, select + Add element, and then select Roster.
- Set Layout to List, Player or Penalties.
- Fill in the settings for that layout, as listed in the tables below.
List shows the players of one team in columns:
| Setting | Meaning |
|---|---|
| Title | The text of the header. Empty shows the team name in capitals. |
| Team | The team to show. |
| Columns | The data of each player, for example the number and the name. |
| Players | Whole squad, With stat or In squad. |
| Sort by | Number, Name or Stat. |
| Stat | The stat for With stat or for the sort. |
| Rows per column | The number of players in one column before a new column starts. |
| Header in team color | Shows the header in the color of the team. |
Player shows one player:
| Setting | Meaning |
|---|---|
| Player | Picked in Live values, or one fixed player. |
| Show | The data of the player. |
With Picked in Live values, the element shows whichever player you put in the spotlight during the match. See Record team stats live.
Penalties shows the active penalties:
| Setting | Meaning |
|---|---|
| Title | The text of the header. Empty shows PENALTIES. |
| Teams | The teams to show. |
| Rows | The maximum number of penalties. |
| Hide when empty | On: the element does not show on air when no penalty runs. Off: the empty element stays on screen. |
The penalty that ends first is at the bottom.
Go on air automatically
On the Pro plan, an overlay with a Roster element can go on and off air by itself.
- In the toolbar, select Overlay settings.
- Set On air to one of these modes:
| Mode | The overlay is on air |
|---|---|
| Manual | When you put it on air. |
| While penalties run | While a Penalties element of the overlay shows a penalty. An empty element that stays on screen does not count. |
| While a player is in the spotlight | While a Player element with Picked in Live values shows a player. |
On air lists only the modes that the elements of the overlay can use. The overlay goes on air when the condition starts and off air when it stops.
You can still take the overlay off air by hand. It then stays off air until the condition starts again, for example until penalties run again. Changing the mode does not change whether the overlay is on air right now. When your plan's overlay limit is reached, the overlay does not go on air.
Order the layers
The Layers list is in paint order: an element lower in the list shows on top of the elements above it. To change the order, drag a row up or down. An element moves only among the rows at its own level, either inside its group or among the elements that are not in a group.
Define the fields
Fields are the named values that overlays read. Open the Fields tab in the left pane to see all fields of the match.
To add a field:
- Select + Add field.
- In the settings panel, set the values in the table below.
- Select Add field.
| Setting | Meaning |
|---|---|
| Display name | The label in the Live values panel, for example Home score. |
| Kind | Number, Text, or Timer. |
| Default value | For a number or a text: the value before you make a change. |
| Counts | For a timer: Up or Down. |
| Starts at | For a timer: the start time, as mm:ss. |
| Key | The internal name, for example home_score. Bindings use this name. |
If the key is already in use, the panel tells you, and Add field is not available.
To edit a field, select it in the list. You can change every setting except the key. The key line shows how many elements use the field. Elements bind to keys, so you can rename a display name safely.
To remove a field, select it and then select Remove…. The confirmation shows how many elements in how many overlays show the field. You cannot remove a field while an overlay that uses it is on air, so take that overlay off air first.
The Fields tab also lists the stats of each team, under the name of the team. You bind an element to a team stat the same way as to a field. To add teams, see Manage teams and rosters.
Work with several elements
- To select an element, click it.
- To add or remove one element, hold Ctrl (Cmd on macOS) and click.
- To select a series of elements in the Layers list, hold Shift and click.
- To select all elements in an area, drag a box on an empty part of the canvas.
When you select more than one element:
- Dragging one element moves all selected elements together, and their relative positions stay the same.
- The settings panel shows the properties that the elements share. If a property differs, it shows Mixed. A value that you type applies to all elements.
- X and Y show the position of the whole selection and move all elements together. W and H apply to each element on its own, so the selection does not resize as one block.
- The resize handles are hidden. Resize one element at a time, or type a width and a height.
- Removing one element removes the whole selection.
Align and distribute
The toolbar of the canvas card has align buttons and distribute buttons.
With one element selected, align positions it on the canvas, so one click can center an element. With two or more selected, align positions them relative to each other.
Distribute puts equal spaces between three or more elements, and is not available for fewer than three.
Group elements
- Select two or more elements.
- Select Group below the Layers list, or in the settings panel.
The Layers list then shows the elements in a named folder.
- To select all elements of the group, select the group row.
- To rename the group, double-click the row.
- To collapse the group, use the chevron.
Selecting a group selects all its elements, so you can move a whole scorebug with one drag.
- When a group is selected, the button below the list changes to Ungroup. It removes the folder and keeps the elements. If your selection includes elements of several groups, Ungroup removes all of those groups.
- To delete a group and its elements, right-click the group row and select Delete group…. It asks you to confirm first.
When you group elements, the Layers list puts the members of the group next to each other, which can change the order in which elements stack. You cannot undo this, so check the canvas after you group elements.
Groups are for labels and selection only. A group has no position or size of its own, and you cannot put a group inside another group.
Snap to a grid
In the toolbar of the canvas card, turn Grid on. The canvas shows a grid, and an element snaps to it when you drag or resize it.
The spacing next to Grid is in canvas pixels. A spacing of 20 is a fine grid on a canvas 1920 wide, but not on an LED ring 12168 wide, so set the spacing to suit your canvas. Each overlay keeps its own grid.
If the spacing is too small to show clearly at preview size, the canvas hides the lines. Elements still snap to the grid.
The Anchor control is the 3×3 grid of squares. It sets the point of an element that the editor uses:
- The point that snaps when you drag the element.
- The corner that the X and Y values show.
- The point that stays in place when you type a new size.
When you drag a resize handle, the opposite corner always stays in place. Anchor is an editor preference and applies to all overlays.