The Graphics Editor allows you to build your HTML5 Graphics, lower third, or full screen for integration on a TV broadcast or live streaming.
In this article, we will introduce you to the Graphics Editor areas/sections.
Main menu: In this area, you will find the Graphics' name and their current state. Graphics can have three different states:
Unpublished
Published
Published with Changes
Elements Tree: The Elements tree consists of Regions, Building Blocks, Data Providers, and Widgets. It represents the logical visualization of all the elements in a scene. To learn how to add an Elements tree to the Graphics Editor, click here.
Building Blocks: These are the most basic elements you need to use to build your graphics and widgets. To see all our listed Building Blocks, click here.
Data Providers: This kind of element allows you to connect data from an internal or external source. We support accessing APIs that expose data in JSON format, also we support data coming from Google Spreadsheets, and also users can build graphics connected to Mechanics or Collections provided by Flowics.
Widgets: These are a set of predefined elements that will help you quickly and easily build your Graphics. You just need to customize them with your look and feel.
Scenes Navigator: Shows all the scenes you have built. You can add a new scene from this area.
Canvas: The preview of the scene you are working on. It shows where the elements are and allows you to select them to change their position, size, and other properties.
Inspector: Shows the properties for the selected element. These properties allow you to:
Assign Collections
Bind elements to an upper Data Provider
Add a background to the element
Adjust position and size
Adjust format and typography
Etc.
Settings: In this section, you can:
Publish changes
Open Remote Control
Change the screen resolution
Undo