All Collections
Viz Flowics
Before You Start
Introducing the Graphics Editor
Introducing the Graphics Editor
Updated over a week ago

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

Did this answer your question?