Adding a Background Image

This tutorial covers how to add a backfgound image (new in iRule Version 1.5) to a new interface.

1. Add New Page.
2. Backgrounds.
3. Browse Images.
4. Filter results.
5. Select & Import.
6. Expand Library.
7. Select Layer.
8. Drag and Drop.
9. Backgroud Folder.
10. Select All Layers.
11. Place Buttons.
12. Buttons Added.
13. Add Commands.
14. Functional Buttons.
15. Complete Buttons.
16. Open Backgrounds.
17. Select Background Layer.
18. Drag and Drop Background.
19. New Background.
20. All Layers.
21. Save.

Step One: Add New Page

In the Panels tree, right click on the portrait pages and select Add portrait page from the list.

Step Two: Backgrounds

Within the Page is a Backgrounds folder. Background images are in a layer seperate 

Step Three: Browse Images

Click on the Actions arrow in the Images tab and select Browse libraries.

Step Four: Filter results

You can filter the image libraries displayed by typing the word "backgrounds" into the filter area and press the show button. The filter will only display image libraries with the word backgrounds in the description or name.

Step Five: Select & Import

Select the library you wish to import by checking the box next to the name of the Device. Click on the Import button to import the image library into your Buider interface.

Step Six: Expand  Library

In the Images tab, you can now view the newly imported library. A background image that covers the entire Portrait page is 320 pixels wide by 396 pixels tall.

Step Seven: Select Layer

New in iRule Version 1.5 are layers. The background images are in the background layer while buttons, links and labels are in the forground layer. Select the background layer to enable the placement of background images. Any image placed in this layer will be a background image and can not have any device commands associated with it. Background images are for visual effect only.

Step Eight: Drag and Drop

Drag and drop a background image into the main intergace window. When a background image is placed, the word Background is displayed to indicate that it is a background and not a button.

Step Nine: Background Folder

In the Panels tree, you will now see the background image that was placed in the interface window.

Step Ten: Select All Layers

Select the all layers option to exit the backgrounds layer.

Step Eleven: Place Buttons

From the Images tab, drag and drop images to be used as buttons in the main interface.

Step Twelve: Buttons added

In the Panels tree, you can view the buttons added. Notice that the buttons are seperated from the background images and have a different icon.

Step Thirteen: Add Commands

From the Devices tab, drag and drop device codes to the buttons. This process is the same as any other button and will not be affected by a background image. 

Step Fourteen: Functional Button

After Device codes are added to a button it will no longer be grayed out and is a functional button. Repeat adding Device codes to the remaining buttons on the Page.

Step Fifteen: Complete Buttons

All of the buttons have a Device code associated with them and are now functional.

Step Sixteen: Open Backgrounds

Optional Step - In the Images tab, expand the Backgrounds folder to show the background images.

Step Seventeen: Select Background Layer

Select the background layer to enable the placement of background images.

Step Eighteen: Drag and Drop Background

Drag and drop a background image to replace the existing background with a different image.

Step Nineteen: New Background

After the new background image is placed, notice it replaced the existing background in the Panels tree adn in the main interface window.

Step Twenty: All Layers

Select the all layers to preview the complete interface with the new background.

Step Twenty One: Save

Save the Panel and sync to the iRule you new interface with a background image.