Tutorial Summary

This lesson covers how to create a more complex GUI using the iRule Builder.

Topics Covered In This Tutorial

• Adding another device from the DB
  • How to search the database for a device
  • How to import a device or multiple devices
• Creating a second portrait Page
• Adding a landscape page
• Import an existing library
• Creating a new image library
• Adding personal images
• Tool tips

Transcript

Welcome to the iRule tutorial video. Lesson 5, GUI Design Part 2. In this lesson, we will continue the interface design from Lesson 1 in order to build a more complex interface.

In the iRule Builder, click on the Devices tab. Click on the drop down arrow next to Actions and select Browse Devices. In the Browse interface, you can search for the Device you want to import. Type the Vendor name and select the type of device from the list. Click on the Search button and the Database will be searched for matching Devices. In this tutorial we will add a Sherwood receiver. Once the search is complete, you will see the matching devices appear in the Browse Devices window. To import the Device, select the corresponding checkbox in the device name and press the Import button. When you have completed importing Devices, click the Close button.

We will pause the video to create some additional buttons and assign the commands to complete the TV Page. Welcome back.

To create a second Portrait Page, navigate to the Lesson 1 Panel, right click on the portrait pages and select add portrait page. You can rename the new Page in the properties window. Name the Page "DVR control". As in Lesson 1, you can add the images and assign the corresponding commands.

To create a Landscape Page, right click on the Landscape pages and select Add Landscape Page from the list. Notice that the Landscape page can have a different Grid than the portrait page. By default the Landscape Page has a grid of 6 by 6.

To import a new image library, click on the Actions drop down and select Browse Image Libraries from the list. The Browse image library window appears and is populated by the shared libraries. To import a library, check the corresponding checkbox next to the name. You can import multiple libraries and filter  the results based on the search filter. You can also preview a library before you import it by clicking on the Eye icon. In this example we will add Channel icons for the Landscape page but we will assign the commands in a later video as a macro.

You can add your own images by clicking on the Actions drop down arrow and selecting Add images. The images will be imported into the selected library. When the Upload Images window appears, press the Choose file Button and browse your computer for the image you want to upload. We recommend PNG files with transparency. After the files are selected, press the upload button.

When you hover above an image, a tool-tip will appear with detailed information about the object. This can be useful to quickly determining what commands are mapped to a given button without the need to navigate the Panel tree.