OGraf graphic

The OGraf graphic lets you import an EBU OGraf web graphic and run it inside H2R Graphics. OGraf is an open, broadcaster-led standard for web-based graphics, so any graphic that follows the spec can be dropped straight into your show.

An OGraf graphic is made up of two things:

• A manifest file (its name ends with .ograf.json) that describes the graphic and the data it accepts.
• A web component (the main entry point referenced by the manifest) that does the rendering and animation.

Importing an OGraf graphic

1. Add an OGraf graphic to your project.
2. Click Add OGraf graphic folder.
3. Select the graphic’s folder (not the individual files).

It’s important to choose the whole folder so the manifest, web component, and any assets like images and fonts keep their structure. If you pick individual files instead, you’ll be prompted to select the folder.

Once imported, the graphic’s name and description (read from the manifest) appear in the editor.

Replacing a graphic

To swap in an updated version, click Replace OGraf graphic folder and choose the new folder. This replaces the previous bundle.

Setting the graphic data

Any data fields the graphic exposes through its manifest are shown automatically in the editor. Depending on the field, you’ll see a text box, number input, checkbox, or dropdown. Fill these in to control what the graphic displays.

These values can also be driven by variables and data sources, so your OGraf graphic can update live just like the built-in graphics.

Good to know

• OGraf graphics handle their own on-screen animations, so H2R Graphics doesn’t add its own transition.
• The graphic renders on a standard 1920×1080 canvas.
• You can find OGraf graphics, and the full specification, at ograf.ebu.io.

Learn more

New to OGraf? Explore the tutorials and learn how OGraf templates are put together at ograf.dev/tutorials. It’s a great way to find templates to import and to understand what’s possible before building your own.