Livestream Studio
Within an event, you can create one or more studios that work independently from each other. Studios are built using scenes and sources and can be operated in parallel by multiple users on different devices.
Scenes
Scenes are used to group sources together. When switching scenes, all sources from the previous scene are hidden and all sources from the new scene are shown. Scenes can be switched manually by clicking on them in the "Scenes" list.
It's recommended to create one scene for each race type. E.g. sprint, points, elimination, etc. Within each scene, you can then create sources for the different race types.
Sources
Sources within the current scene are listed in the "Sources" list. You can add new sources by clicking the "+ Add" button at the bottom of the list. Within the list, sources can be reordered by dragging and dropping them. The order of sources in the list defines their layering on the canvas (top = back, bottom = front).
Using the three-dot menu next to each source, you can copy, rename, and delete sources. When copying a source to another scene, you can optionally link the new source to the original source. Linked sources share all properties, so changing one will also change the other.
All sources share common properties that can be configured:
- Position: Sources can be positioned anywhere
- Size: Width and height can be adjusted
- Rotation: Sources can be rotated to any angle
- Origin: The anchor point for positioning and rotation can be set
- Visibility: Sources can be dynamically shown or hidden using condition trees and the available variables.
You can move sources with your mouse directly on the canvas. By clicking and dragging the corners or edges of a source, you can resize it.
Text
Text source display customizable text. You can configure the font, size, color, background, opacity, paddings and more.
You can use interpolation to dynamically change the text.
Image
To display an image, it must be uploaded to the event via the "Files" menu. Then, the image can be selected from the dropdown list. The image keeps its aspect ratio and is scaled to the maximum size within the given width and height.
The image is fetched from the server when the source becomes visible. The image is therefore not displayed instantly, but with a small delay depending on the internet connection.
Keep in mind that JPGs do not support transparency. Use PNGs instead.
Box
Boxes are colored rectangles that can be used as background or overlay. The color, opacity can be configured. On top, a border can be added with configurable color, style, thickness, and corner radius.
Table
You can select event values directly or use variables for table sources.
Age Group Results
TBD
Competition Results
TBD
Live Elimination
TBD
Live Points
TBD
Live Results
TBD
Live Start List
TBD
Live Time Trial
TBD
Qualification
TBD
Race Results
TBD
Race Start List
TBD
Variables
Variables let you reuse a value across text sources, visibility conditions, and tables. During a broadcast, change the value once in the Variables card to update every source that uses it.
Configure variables
- Open Variables → Configure.
- Choose Add and enter a Name, a unique Key, and a Type.
- Choose Save, then set the value in the Variables card.
The name identifies the variable in selectors. The key identifies it in text and conditions, using the prefix variables..
| Type | Value |
|---|---|
| String | Text |
| Number | A number |
| Athlete | An athlete |
| Age group | An age group |
| Competition | An age group and competition |
| Round | An age group, competition, and round, such as heats or final |
| Race | An age group, competition, and race |
Available variable types depend on the features enabled for your event. Already configured variables remain usable.
Text and conditions
Use interpolation to insert a variable into text. For example, a String variable with the key sponsor can be displayed using {{ variables.sponsor }}. An Athlete variable with the key selectedAthlete provides fields such as {{ variables.selectedAthlete.lastName }}.
Event variables provide the following objects, each with id and name fields:
| Type | Available objects |
|---|---|
| Age group | ageGroup |
| Competition | ageGroup, competition |
| Round | ageGroup, competition, round |
| Race | ageGroup, competition, round, race |
For a Race variable with the key currentRace, use {{ variables.currentRace.race.name }} for the race name or {{ variables.currentRace.ageGroup.name }} for its age group. If no valid value is selected, its text fields are empty.
Visibility conditions use the same paths without the surrounding {{ }}.
Renaming a variable keeps its references intact. If you change its key, update the paths in text and conditions manually. Table selections remain linked to the variable when you change its name or key.
Table sources
In a table source's Age group, Competition, or Race picker, open Variables and select a variable. The picker shows compatible variables alongside the configured event values. A selected variable is labelled Variables / Name. Choose None to clear the selection.
| Table source type | Compatible variable types |
|---|---|
| Age group: Results | Age group, Competition, Round, Race |
| Competition: Results | Competition, Round, Race |
| Race: Startlist | Race |
| Race: Results | Race |
A more specific variable also supplies its parent values. For example, one Race variable can drive a race startlist, competition results, and age group results together. Change its value in the Variables card instead of editing each table source.
If a variable has no value, is deleted, changes to an incompatible type, or refers to unavailable event data, the editor shows a warning and the table is hidden. Select a valid value or replace the selection to restore it. Changing the table source type clears its selection.
Qualification continues to use the studio-wide round selection.
Preview and live output
Variable changes appear in the preview first. Choose Update (Ctrl+Enter) to send the changes to the live displays. All tables linked to a variable then use its published value together.
Interpolation & Conditions
For interpolation and conditions the following built-in values are available in addition to your configured variables:
| Variable | Description |
|---|---|
event.name | The name of the event |
live.name | The name of the current race |
live.laps.current | The current lap of the current race |
live.laps.total | The total number of laps of the current race |
live.laps.remaining | The remaining number of laps of the current race |
live.laps.done | The number of completed laps of the current race |
live.time | The time of the current race |
live.isNeutralized | Whether the race is neutralized (only for condition tree) |
live.notification.line1 | First line of the notification from Race Log |
live.notification.line2 | Second line of the notification from Race Log |
live.notification.flagColor | The color of the flag of the |
dateTime.dateDmy | Current date in format d.MM.yyyy |
dateTime.dateMdy | Current date in format MM/dd/yyyy |
dateTime.timeHms | Current time in format H:mm:ss |
dateTime.timeHm | Current time in format H:mm |
countdown.time | Time remaining until the selected time. |
lowerThird.line1 | Lower third line 1 |
lowerThird.line2 | Lower third line 2 |
When using athlete.flag or live.notification.flagColor (in table sources), the national flag of the athlete or a single-colored flag is displayed.
Configure Displays
Known issues
- In key mode "Alpha-Channel": When two sources with semi-transparency and different colors are overlapping, the bottom source will override the color of the top source.
Legacy Studio
The legacy studio is the original version of the livestream inserts feature. There are a few key differences compared to the new livestream studio:
- Legacy studio stores all settings locally in the browser. It's not possible to share settings between different users or devices.
- Legacy studio does not allow linking source groups between scenes.
- For the legacy studio, you configure the output displays within the studio itself. In the new livestream studio, you configure all displays separately via the displays menu item.
The legacy studio will eventually be removed.