This tutorial covers how to add a backfgound image (new in iRule Version 1.5) to a new interface.
In the Panels tree, right click on the portrait pages and select Add portrait page from the list.
Within the Page is a Backgrounds folder. Background images are in a layer seperate
Click on the Actions arrow in the Images tab and select Browse libraries.
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.
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.
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.
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.
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.
In the Panels tree, you will now see the background image that was placed in the interface window.
Select the all layers option to exit the backgrounds layer.
From the Images tab, drag and drop images to be used as buttons in the main interface.
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.
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.
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.
All of the buttons have a Device code associated with them and are now functional.
Optional Step - In the Images tab, expand the Backgrounds folder to show the background images.
Select the background layer to enable the placement of background images.
Drag and drop a background image to replace the existing background with a different image.
After the new background image is placed, notice it replaced the existing background in the Panels tree adn in the main interface window.
Select the all layers to preview the complete interface with the new background.
Save the Panel and sync to the iRule you new interface with a background image.
This page remains here only in case of bookmarking. If you're looking for iRule video tutorials, please visit the Support Center for our full set of step-by-step tutorials, all with text and graphics, some with downloadble PDF and embedded video.
If you know exactly what you're looking for, you can also visit the iRule YouTube channel for tutorials and more.
The following tutorial categories cover everything from basic iRule concepts to getting started building your remote and advanced subjects such as feedback and learning infrared commands.
Subscribe to our newsletter to receive updates on the iRule Universal Remote Control App
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.
iRule for DIY EnthusiastsiRule for Professional InstallersiRule for Home Users
Busting the MythsCompatible DevicesDealer LocatorSupport PortalSupport Community