Introduction

Erizos Studio comes with a built-in interface editor "UI Builder". UI Builder is a drag and drop interface builder that allows you to quickly and easily create, either auto-generated basic interfaces, or fully customized templates using a rich set of components.

Script Editor

In addition to the available components, UI Builder also has a script editor that allows you to add custom logic to any of your interfaces. These scripts can add basic functionality, such as toggling UI components based on specific criteria, or more complicated login, such as fetching data from external sources and using the data to populate the interface.

There are two types of templates that can be created with UI Builder:

Template UIs

A template UI is linked to a specific template, the UI is presented to the graphics operator when a page of the template is selected in the playlist in Erizos Studio, or to the journalist when the template or page is selected in the MOS plugin of the News Room System.

Show UIs

A Show UI is linked to a specific show, and allows you to customize a section of the main Erizos Studio interface when the specific show is opened. Unlike the template UIs, that are available when the specific template or page is selected in the playlist, the show UI is always visible while the show is open. Show UIs are useful when you need to provide global control to operators, for example, a clock and score control interface would be more suitable as a Show UI than a Template UI, as it needs to be readily available to the operator at any point in time.

Components

Components can be used to create and store common UI designs that are being used in multiple UIs. This saves the user time by eliminating the process of tediously creating multiple duplicate of the same UI design. This customized UIs can be attached to multiple UIs at the same time, as well as updated at the same time when the component is modified. For example, users can create a UI design that can read the Pages that are available in your Playlist. Users can then attach this Component to any UI and it will all have the functionality they need and will save users time of tediously designing it in every UI that uses it.

Library

Libraries are useful for creating snippets of codes that are being used in multiple UIs at the same time. These snippets of code can be called and updated anytime.