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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb1.png| title=|Step One :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture1.png{/rokbox}

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

 

Step Two: Backgrounds

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb2.png| title=|Step Two :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture2.png{/rokbox}

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

 

Step Three: Browse Images

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb3.png| title=|Step Three :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture3.png{/rokbox}

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

 

Step Four: Filter results

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb4.png| title=|Step Four :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture4.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb5.png| title=|Step Five :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture5.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb6.png| title=|Step Six :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture6.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb7.png| title=|Step Seven :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture7.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb8.png| title=|Step Eight :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture8.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb9.png| title=|Step Nine :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture9.png{/rokbox}

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

 

Step Ten: Select All Layers

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb10.png| title=|Step Ten :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture10.png{/rokbox}

Select the all layers option to exit the backgrounds layer.

 

Step Eleven: Place Buttons

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb11.png| title=|Step Eleven :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture11.png{/rokbox}

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

 

Step Twelve: Buttons added

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb12.png| title=|Step Twelve :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture12.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb13.png| title=|Step Thirteen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture13.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb14.png| title=|Step Fourteen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture14.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb15.png| title=|Step Fifteen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture15.png{/rokbox}

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

 

Step Sixteen: Open Backgrounds

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb16.png| title=|Step Sixteen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture16.png{/rokbox}

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

 

Step Seventeen: Select Background Layer

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb17.png| title=|Step Seventeen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture17.png{/rokbox}

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

 

Step Eighteen: Drag and Drop Background

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb18.png| title=|Step Eighteen:: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture18.png{/rokbox}

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

 

Step Nineteen: New Background

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb19.png| title=|Step Nineteen :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture19.png{/rokbox}

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

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb20.png| title=|Step Twenty :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture20.png{/rokbox}

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

 

Step Twenty One: Save

{rokbox thumb=|http://video.iruleathome.com/docs/background/thumb21.png| title=|Step Twenty One :: Image Title| album=|tutorial|}http://video.iruleathome.com/docs/background/picture21.png{/rokbox}

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

 

Get iRule

You'll need a Builder account to try or to use iRule. Once you have a Builder account, download the app to your iOS or Android device.

badge-app store white 180x60

badge-play

badge-amazon

Follow Us

icon-facebookicon-twittericon-youtube

 

Professional
Affiliations

icon-facebook