User Interface

The use of the user interface editor

In the previous exercise, we used the Modulo Wing application: This application is handy to view all playlists or to have a Task reminder interface. However, the layout of the Playlists and Tasks is fixed. We will learn how to use the user interface editor to create an interface that is perfectly adapted to our use.

We now go to the UI Designer tab. Click on the + button to add a user interface.

First of all, we will add an image in the background to dress the panel. The xxxx image must first be copied to the Ui sub-folder in the Transfer tab. Then go back to the UI Designer tab, “images” section and click on the refresh button. We then see the image appear, and we have drag&drop in the background.

We will now choose from the list of components, the Playlist icon and drag&drop it in the user interface. In the editor, we will select playlist 1.

We will then drag and drop the Tasks icon. We adjust the size of the buttons. All Tasks appear, but we want to display only the Monitoring Preset Reminder Tasks. We return to the Task tab, and we will then add the Keyword MONITORING to the Monitoring Preset Reminder Reminder Tasks.

We then go back to the user interface, select the Task box and add in the Keyword MONITORING editor. This Task box then displays only Tasks with this keyword. We will add a text above the buttons with the text “Monitoring preset”

We will now add a second control page for Projector Videos:

We add a second page and select it.

We go back to the Device tab and declare 2 Barco UDX video projectors. This device allows us to control a projector of the Barco brand UDX reference. Device’s list proposes to take control of most of the Video Projector brands used in the Pro AV market.

We go back to the UI Designer tab and go to the Device section. On drag&drop the two video projectors on page 2.

Then we add a button on this page. Choose “PAGE 1” in text, click on action, section Ui, and drag&drop the action go to page. Indicate 1 for the page number in the editor. This button will allow the user to return to page 1.

Page 1 is selected in the hierarchy and a button is created to point to page 2 and “PAGE 2” is selected in text.