User Interface

In Part 1 we used the Modulo Wing application which is handy to view all playlists or to recall Tasks.

However the layout of the Playlists and Tasks is fixed and cannot be customized.

We can create custom user interfaces in the UI Designer.

You can find more details on this tab in the UI Designer manual page.

First page

Open the UI Designer tab. Click on the button to create a new user interface.

Image

Start by adding an image in the background:

The image file must first be copied to the \userinterface\ sub-folder in the Transfer tab. Once the image is in the proper folder, go back to the UI Designer tab, and in the Images subtab click on the refresh button. Drag & drop the image in the UI.

Resize the image so that it fills the entire user interface.

Playlist

From the Components subtab on the right, drag & drop the Playlist item.

In the editor, select Playlist 1.

Tasks

From the Components subtab, drag & drop the Tasks item.

Adjust the size of the buttons. By default, all Tasks will appear, but we can filter tasks by using the Keywords field.

In the Tasks tab, add the keyword MONITORING to the three Montitoring tasks created previously and add this keyword in the Keywords field of the Tasks item in the UI Designer.

Text

From the Components subtab, drag & drop the Text item.

Fill in the Text field, resize the font and align it with the buttons.

Second page

From the Components subtab, drag & drop a Page item to add a second page for video projectors.

In the Device tab declare 2 Barco UDX video projectors.

Back in the UI Designer tab, open the Devices subtab. Drag & drop the two video projectors on page 2.

Add a button on the page. Set the text to PAGE 1.

In the Actions subtab, select edit:onPressed and in the UI tab drag & drop the Go to page action in the Execution list on the left. Set the page number to 1.

This button will allow the user to return to page 1.

In the first page, repeat this process to create a button to go to Page 2.