MLCG Editor: graphics workflow and SDK samples

Use MLCG Editor when you want to design broadcast graphics visually, publish them as HTML outputs and update their data or animation from your application. The SDK HTML5 Overlay plugin renders those outputs locally over video; MLCG.RestControl provides typed C# commands to the MLCG server.

MLCG is optional. You can also load your own HTML/CSS/JavaScript directly into the SDK plugin without using MLCG or its REST client. This article explains the MLCG integration path; the complete SDK samples are supporting reference implementations below.

Choose the responsibilities in your application

Component	Responsibility
MLCG browser editor	Design templates, configure animation and expose editable fields as data bindings; publish live sessions.
SDK HTML5 Overlay plugin	Render an HTML output URL on the SDK machine and composite it over your video. Your SDK application owns video playback and output.
MLCG.RestControl	Discover accessible sessions, update data and send animation commands. It does not decode video or render graphics.

A template is the design. A published session is the live instance your application controls. Its output URL is a read-only HTML view, not the editor page and not a REST control endpoint.

Integrate a published session

1. Design and bind. In MLCG Editor, open or create graphics and expose values such as headline, team or score with clear binding keys.
2. Publish. Publish the session through the editor's live controls. Saving a design in the Library does not, by itself, publish it.
3. Discover and select. Use an authorized REST token to list published sessions and their bindings. Choose a returned session ID, not a Library template ID.
4. Load the output. Copy the session's output URL in the editor, or create it with BuildOverlayUrl. Load that URL into the SDK HTML5 plugin on the video path that your receiver consumes.
5. Update and animate. Send changed binding values and named animation commands through the REST client. The output page receives those session changes; the SDK plugin renders the resulting graphics locally.

For design/publishing details, see the MLCG Editor documentation on GitBook and Editor Overview. For a runnable read-only C# example and typed control methods, see Control MLCG graphics from C# (REST client).

Account mode lists only published sessions visible to the token, not every Library template. Account/workspace permissions still apply. The hosted REST and HTML output addresses are normally both https://cg.medialooks.com; configure the appropriate hosts for an on-premises deployment.

Reference implementations: MLCG HTML REST samples

The two self-contained C# projects implement the integration above. Choose the edition matching your SDK: MPlatform uses connected source/plugin/preview objects; MFormats uses an application-owned frame loop. Both provide the same graphics controls.

For runtime, architecture, licensing and build requirements, see Before you start.

For SDK releases that include the compact MLCG HTML REST sample, the default executable and solution paths are:

MPlatform executable:
C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Basic\C#\MLCG HTML REST\bin\x64\Debug\MLCG HTML REST.exe

MPlatform solution:
C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Basic\C#\MLCG HTML REST\MLCG HTML REST.sln

MFormats executable:
C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\MLCG HTML REST\bin\x64\Debug\MLCG HTML REST.exe

MFormats solution:
C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\MLCG HTML REST\MLCG HTML REST.sln

Use your chosen installation folder if you changed the default. To build the solution yourself, choose Debug / x64 to produce the executable above; a Release build uses bin\x64\Release.

Cannot find it? Availability depends on the SDK release. The earlier MLCG Sample x64 is a different, playlist-oriented application and does not have the compact interface shown here. Its default executable locations are:

MPlatform legacy sample:
C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Basic\C#\MLCG Sample\bin\x64\Debug\MLCG Sample.exe

MFormats legacy sample:
C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\Sample MLCG\bin\x64\Debug\Sample MLCG.exe

If only that earlier sample is installed, contact support for the applicable updated sample or SDK release.

Explore the sample's Demo and account modes

Try demo creates a private temporary workspace with real server templates and no account token. Open video with File / URL → Open…, then select a template: the sample prepares it and starts it once over the video. Edit bindings with Apply data. If a template was selected before video was opened, use Show afterward.

Each demo launch has its own session copies, so its edits do not change another launch. The sample displays expiry, renews the lease while in use and releases control on close. For account mode, enter an authorized token and use Connect to list your published sessions instead. No shared user password is involved.

MPlatform edition

MPlatform connects its source and preview objects, with the HTML5 plugin attached to the video path. This compact sample uses one source and one selected graphics session, not a playlist scheduler.

MPlatform edition using a private Demo Workspace and the real “News Pro • Anchor Lower Third” template from cg.medialooks.com, with its original data.

MFormats edition

MFormats uses an application-owned frame loop: pull and convert a video frame, process it with HTML5 Overlay, then send the composite frame to preview. The sample releases its frames and SDK objects through a controlled ownership path.

MFormats edition using a private Demo Workspace and the real “News Pro • Breaking Banner + Crawl” template from cg.medialooks.com, with its original data.

Video shown in the screenshots: Big Buck Bunny, Blender Foundation, CC BY 3.0.

Choose a video source

The Source dropdown contains File / URL, followed by currently discovered SDK mp:// senders.

• File / URL: click Open… to browse a local/network file or enter an HTTP(S) video URL. A URL must return media supported by the SDK, not a web-player page.
• Discovered sender: select mp://Sender Name to open it immediately. An MSink/MFSink or other SDK sender must already be publishing on the same computer. Sender names with spaces are preserved.
• Refresh: open the dropdown or click refresh to rescan without reopening the active source or restarting graphics. A disappeared selected sender is marked unavailable; the sample does not silently switch sources.

Live input displays LIVE and disables file Pause: the sending application owns playback. MPlatform excludes its own source to avoid an accidental self-link.

Output size: the sample fits sources to 1920 × 1080 before HTML composition, preserving aspect ratio with letterboxing where needed. It retains the source frame rate; it does not force 60 fps. This is in-memory playback conversion, not file transcoding. Use graphics designed for this canvas, or adapt the sample's conversion and HTML sizing together for another output format.

Edit data and control graphics

• Show prepares the selected output and starts its animation from the beginning.
• Hide hides only this sample's local overlay, without a REST command. A visible prepared overlay can still be hidden after demo control expires.
• Apply data sends only changed binding values. Reload discards unsent field edits.
• Restart starts the selected scene again from zero. Play/Pause controls graphics independently of video playback.
• Seek sends one pause-at-position command when you release the slider. Video can continue while graphics stay at that position.
• Loop controls scene animation, not video-file looping. A ticker's intrinsic scrolling or a layer's own repeat may continue independently.

The sample loads a new output hidden with autoplay disabled, waits for scene/fonts/images to become ready, sends one Restart and then reveals it. This avoids a visible autoplay start followed by a second restart. HTTP completion is not confirmation that an exact video frame has been painted.

The graphics playhead is a local estimate of commands issued by this sample. Processed FPS measures the SDK processing path, not browser paint rate or monitor presentation FPS. These REST samples do not provide frame-accurate synchronization between animation and source-video pause/seek.

Local preview: mute and fullscreen

The speaker and fullscreen buttons are in the Video + graphics header, separate from the graphics animation transport.

• Mute / Unmute: control this preview's audio monitoring. The preference survives video pause/resume, source changes and fullscreen transitions during the same sample run.
• Fullscreen / F11: move the existing preview into a borderless window. The same SDK source and preview continue; no template is loaded again and animation is not restarted.
• Return: press Esc or F11, or click Exit fullscreen. The fullscreen toolbar also has a local Mute / Unmute control.

Muting does not pause video or graphics, edit the source media, mute another receiver or send a REST command. Fullscreen changes display placement, not the design resolution or animation timing.

Fullscreen uses the same running video-and-graphics preview. Use Esc, F11 or Exit fullscreen to return to the main sample window.

Activity and troubleshooting

Activity… opens a sanitized diagnostic log in a separate, nonmodal window. Keep it open while operating the sample; it does not shrink the main preview, and closing it does not stop playback.

• No sessions: check the selected account, token permissions and publishing status, or start a private demo.
• Demo expired: start a new demo for further REST edits. Local video/source controls and Hide remain separate from the lease.
• Graphics not ready: inspect the page-ready state and Activity log. REST connection success does not establish browser readiness.
• Unexpected performance: check Processed FPS and source properties. This number alone cannot establish browser paint rate, audible audio or frame-accurate output.

Use the public REST client in your application

The samples use public MLCG.RestControl 1.0.2 from NuGet.org. No private feed or wrapper source-project reference is required for Demo Workspaces, named animation commands, timing metadata or seeking.

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

For code examples, see Control MLCG graphics from C# (REST client). These examples use the standard SDK HTML5 Overlay plugin and the public REST client package.

Keep control credentials separate from output links

Store REST tokens in secure application configuration, not source code, screenshots or logs. Never add one to an HTML output URL. A read-only output link does not grant REST editing, but anyone with a usable link may be able to view its displayed data. Share it only with intended viewers. Independent operators or independent output data should use separate sessions.

Related documentation

• Control MLCG graphics from C# (REST client)
• Public MLCG REST Client GitHub repository
• MLCG.RestControl 1.0.2 release
• MLCG Editor documentation on GitBook
• C# REST Wrapper reference on GitBook
• HTML5 Overlay overview and quick start

Explore the MLCG template gallery for real default designs, animated previews and editable-content examples.