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
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
Interpolation & Conditions
For interpolation and conditions the following variables are available:
| 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.