Appearance
Data events
Events are on of the main building blocks of Ease Live applications. They control what is displayed on the screen and when. Usually events are triggered either if something should happen in the UI (e.g. an operator triggers a Quiz event) or if some data point changes (e.g. triggered automatically by an integration with a stats API for a sporting event). Events can be triggered in our Cockpit production tool, or by using our APIs.
An event consists of the following properties:
- Name - The name of the event, e.g.
ScoreBug
. Usually there is a UI widget with the same name. - Action - Controls the visibility of the event, e.g.
show
orhide
. - Timestamp - When the event is to be triggered.
- Metadata - Any associated data. This will be available when rendering the UI widget.
Consider this simple scorebug UI widget.
When creating new interactive on-air graphics elements into Ease Live, they need to be aware of the content that is to be displayed, and when to display it. Event content, in most cases, is not a visual representation of the graphics, but rather the textual information or other necessary contextual differences. Examples are team colours, team logos etc, that might differ from game to game.
To be able to provide the above widget with the necessary data, our event metadata could look something like this:
Key | Value | Type |
---|---|---|
home | hometeam | object |
home.score | goals scored | integer |
home.name | team name | string |
home.shortname | abbrevated team name | string |
home.colors.shirts | primary team color | string |
home.colors.shorts | secondary team color | string |
away | awayteam, same as home | object |
This is the complete event object for the above screenshot:
javascript
{
"event": "ScoreBug#show",
"timestamp": "2016-10-06 15:17:13.491",
"metadata": {
"home": {
"name": "Vålerenga",
"shortname": "VIF",
"colors": {
"shirts": "#002A52",
"shorts": "#ffffff"
},
"score": 1
},
"away": {
"name": "Lillestrøm",
"shortname": "LSK",
"colors": {
"shirts": "#ffdd00",
"shorts": "#000000"
},
"score": 2
}
}
}
Timecodes
Ease Live UI components are synchronized with the video stream based on timecodes. These timecodes can be embedded in the stream using either ID3 tags (preferred) or in the manifests. Every event stored in Ease Live is also marked with a timecode. For every frame of the video stream Ease Live will check if there are any events that should be triggered at that exact point. This means that the client won't actually trigger received events until the related timecode is reached in the video stream. Since the video stream controls the timecodes, VOD and scrubbing works seamlessly.
When an event is triggered, its visibility and metadata is automatically reflected in any UI components that are subscribed/connected to this event type.
Consider a simple scorebug event for a soccer application. At the start of the game (timecode 0), the scorebug is initialized with a ScoreBug#show event, setting the score to 0-0. After two minutes (timecode 120000), the home team scores and the scorebug is updated to 1-0. Then after four minutes (timecode 240000) the away team equalizes and the score is 1-1. These updates has been automatically triggered in the scorebug UI component that is responsible for visualizing the event data on the screen.
Each update is a new separate event, we don't change/mutate the existing scorebug event when the score changes. This means that at the current point in the video there are three scorebug events stored in Ease Live. This is important, otherwise VOD playback or scrubbing wouldn't work as expected.
Note: that in a real application timecodes generally would have UTC unixtime values (in milliseconds) instead of zero-based ones.