Introducing the Graphics Editor
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:
- 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 Elements tree to the Graphics Editor, click here.
Building Blocks: Are the most basic elements you need to use to build your own 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 a Google Spreadsheets, and also users can build graphics connected to Mechanics or Collections provided by Flowics.
Widgets: Are a set of predefined elements that will help you quickly and easily build your Graphics. You just need to customize them with your own 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
Settings: In this section, you are able to:
- Publish changes
- Open Remote Control
- Change the screen resolution