MLCG HTML5 Graphics Samples for MPlatform and MFormats SDKs

The MPlatform and MFormats SDKs include sample applications that demonstrate how to use the MLCG HTML5 Editor together with video sdk playback pipelines. These samples show how to load media, preview graphics templates, control template playback, update template variables through REST, and seek or restart HTML5 graphics animations.

What is MLCG Editor?

MLCG Editor is a browser-based HTML5 graphics editor for creating and controlling broadcast graphics such as lower thirds, tickers, fullscreen boards, scorebugs, titles, and other dynamic templates. Templates created in MLCG can be rendered as HTML5 graphics and used inside MediaLooks workflows through the HTML5 Plugin.

For more information, see the MLCG Editor documentation.

Included SDK samples

MPlatform sample

C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Basic\C#\MLCG Sample x64

The MPlatform sample demonstrates integration of MLCG graphics with an MPlatform playlist-style workflow. It allows users to work with playlist items, preview media, select MLCG templates, preview template graphics, configure REST connection settings, update template variables, and control template animation playback.

MFormats sample

C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\MLCG Sample x64

The MFormats sample demonstrates playlist emulation with MFormats SDK while using MLCG graphics under the hood. It shows how to build a playlist-like workflow manually with MFormats objects, while also providing MLCG template selection, preview, REST configuration, variable updates, animation seek, and playback control.

Main sample features

• Load and preview media files.
• Use MLCG HTML5 graphics templates inside MediaLooks SDK workflows.
• Display available MLCG templates from the configured REST service.
• Preview selected templates before putting them on output.
• Play selected templates once when selected.
• Update editable template variables through REST bindings.
• Control template timeline playback.
• Seek HTML5 animation timelines to a specific position.
• Configure MLCG REST connection settings from the sample UI.
• Use the HTML5 Plugin output as part of the playback/preview pipeline.

MLCG REST wrapper NuGet package

Both samples use the MLCG.RestControl NuGet package to communicate with the MLCG REST API from C# code.

<PackageReference Include="MLCG.RestControl" Version="1.0.0" />

The wrapper provides a typed C# client for common MLCG REST operations, including reading sessions, reading template bindings, updating variables, and controlling timeline playback.

Documentation for the C# REST wrapper is available here: MLCG C# REST Wrapper.

Git repository for the wrapper: https://github.com/Medialooks-LLC/mlcg-rest-wrapper.

How REST updates template variables

In MLCG, editable template fields are exposed as bindings. A binding represents a variable that can be controlled externally, for example a player name, score, team name, headline, ticker text, or any other dynamic value used by the HTML5 template.

The usual workflow is:

1. The sample connects to the configured MLCG REST endpoint.
2. The sample requests the list of active MLCG sessions.
3. The user selects a session or template preview.
4. The sample reads available bindings for the selected session.
5. The user changes a value in the sample UI.
6. The sample sends the changed value to MLCG through REST.
7. The MLCG output page receives the update and refreshes the corresponding variable in the HTML5 graphic.

Conceptually, a binding update is a REST request that says: “for this session, update this variable key with this new value.”

Example C# code using MLCG.RestControl:

using MLCG.RestControl;

using var client = new MlcgRestClient("https://cg.medialooks.com");

client.ApiToken = "mlcg_your_rest_token";

await client.UpdateBindingAsync(
    sessionId: "live-show-main",
    key: "player_name",
    value: "MARTA KOVACS");

Multiple variables can also be updated in one request:

await client.UpdateBindingsAsync(
    sessionId: "live-show-main",
    values: new Dictionary<string, string>
    {
        ["player_name"] = "MARTA KOVACS",
        ["team_name"] = "RIVER CITY FC",
        ["score"] = "2 - 1"
    });

This is useful when a template contains several related fields and they should be changed together, for example score, period, team names, or lower-third name and subtitle.

Reading available variables

Before updating values, the sample can request the list of bindings from the selected session. This allows the UI to display editable fields dynamically, without hardcoding the variable names.

var bindings = await client.GetBindingsAsync("live-show-main");

foreach (var binding in bindings)
{
    Console.WriteLine($"{binding.Key}: {binding.Value}");
}

Each binding contains the key used for REST updates and the current value used by the template.

How animation seek works

MLCG templates may contain timeline animations. The samples can control these animations through REST timeline commands. This allows the host application to play, pause, stop, restart, loop, or seek the HTML5 animation.

Seeking means moving the template animation timeline to a specific time position, usually in milliseconds. For example, seeking to 1500 means moving the animation to 1.5 seconds from the beginning.

Example C# code:

await client.SendTimelineCommandAsync(
    sessionId: "live-show-main",
    command: "seek",
    positionMs: 1500);

Common timeline commands include:

Example: restart the animation and disable loop mode:

await client.SendTimelineCommandAsync("live-show-main", "restart");

await client.SendTimelineCommandAsync(
    sessionId: "live-show-main",
    command: "set-loop",
    loop: false);

REST connection

The samples connect to MLCG through REST. Depending on the deployment type, the REST endpoint may point to the hosted MLCG service or to an on-premises/local MLCG installation.

Example hosted endpoint:

https://cg.medialooks.com

If authentication is required, configure the REST API token in the sample settings.

Typical workflow

1. Open the required SDK sample: MP_MLCGsample or MF_MLCGsample.
2. Configure the MLCG REST connection settings.
3. Load media or prepare the playlist/emulated playlist.
4. Select an MLCG template from the templates list.
5. Preview the selected template.
6. Read available template bindings.
7. Update variable values through REST.
8. Play, restart, pause, or seek the template animation.
9. Use the graphics together with the media output.

Related documentation

• MLCG Editor documentation
• MLCG C# REST Wrapper
• MLCG on-premises installation requirements
• MLCG REST wrapper Git repository