User Interface Editor

Using the user interface editor

Let’s see how to use the user interface editor to tailor the interface to our needs.

• Go to the UI Designer tab.
• Click on the + button to add a User interface.

*Tip : You can now use the Wizard button to have a list of devices that can display Kinetic User Interface and it already has the proper resolution for each device.

Page 1 : General

• Rename the Page to General
• Drag & drop an image item from the Toolbox.
• In the Editor panel set the position to (0;0) and the size to 1920×1080.
• Drag & drop the media UI_1 from the UI folder in the Media list tab into the Source of the Image item.
• Drag & drop a Text item and change the text to General. Set the font size to 75 and set it at the top of the interface aligned with the middle.
• Drag & drop a Timeline item and in the Editor panel set the Timeline value to SHOW.
• Drag & drop a Task item to have the Tasks buttons available.

By default, the Task item displays all available tasks, you can filter them by assigning keywords to your Tasks in the Tasks tab and using those keywords in the UI Designer tab.

Page 2 : Rehearsal

• In the Hierarchy section of the UI Designer, copy & paste the first page (or drag & drop a Page item from the Toolbox section to start a fresh one).
• Change the Text item to display Rehearsal.
• In this interface we’ll just add the Tasks with the keyword rehearsal.
• Remove the Timeline item and center the Tasks item.
• In the Tasks tab, select all the tasks related to playing the jingles and loops and in the Editor panel insert rehearsal in the Keyword field.
• In the UI Designer tab, select the Task item and in the Editor panel set the value of Keyword to rehearsal as well.
• Set the Rows and Columns value to 2.

At the top of the UI Designer tab you can select Run to exit Edit mode and preview and test your interface.

Page 3 : Video Projectors

Now we’ll add a third control page for video projector options :

• In the Hierarchy section of the UI Designer, copy & paste the first page (or drag & drop a Page item from the Toolbox section to start a fresh one).
• Change the Text item to display Video Projectors
• Go to the Device tab and create 2 Barco video projectors.
• Go back to the UI Designer tab
• Drag & drop the two video projectors from the Device tab.

*Info : The Device tab contains useful control options for many device references used in the Professional AV market. This includes video projectors, cameras, sensors, etc.

Adding buttons to jump from one page to another

• Go to the GENERAL page and add three Buttons : GENERAL, REHEARSAL, VIDEO PROJECTORS
• Select the General button and go to the Actions tab in the Editor panel
• Click on edit : onClicked
• Go to the UI tab and drag & drop Go to page into the Execution list on the left
• Select the item that was created and set the Page to GENERAL.
• Repeat these steps for the two other Buttons.
• You can now copy/paste these buttons on the other two pages.

You have now seen how to create several interface pages and link them together using navigation buttons. Feel free to explore the many possibilities and create your own User Interfaces for your controllers, tailored to your liking and to your needs.