Эта страница является переводом страницы Set Background Image. Перевод выполнен на 100%.

---

Setting background image

An end-user can change an old image on a project page in i3 pro himself by pressing a button.

documentation was last updated on 20.2.2021

Example:

Panel project

Changing and Setting Background Image

To change or set a new background image in i3 pro it is required to do the following.

1 Launch the example of a project given above;

2 Press the Set Background Image image and choose a required image in the gallery of the panel.

We recommend to choose an image that correspinds to the parameters of a project (resolution, orientaion). Setting a background image in a low resolutions leads to poor image quality.

Adaptation and Merge of Projects

An example project is adapted and merged with your project in several steps:

1 Create a button that will open a gallery to choose a background image;

2 Create a project token to store a path to a selected image;

3 Enter the format to display image (Image Stretch parameter) in page properties (Project > States tab):

• Proportional - displays an image proportionally to the page;
• Full Size - displays an image with streching to full page.
  
  

При выборе параметра Proportional, if an image has a format that is different from the format of a page, page margins will be displayed with the image. For better display of images in a non-standard format, we recommend black filling of the page background.

The parameter of the page is by default Image Stretch - None. It means that if the value of the parameter is not changes, the image will be displayed in its initial size (it can be of a much smaller size, or it can exceed the limits of a page).

4 Copy and paste Script 1 to your project and replace the token and graphic items to the ones of your project.

Operation Principle

Setting/ changing the background image in a project is done with the help of functions in the Script editor:

1 When the app is launched, the function sends SaveImagePath project token to the Image property of the page. An image (a path to which is written in project token) will be displayed on the screen;

2 When the Set Background Image button is pressed, IR.OpenPhotoGallery() is called, it opens the panel gallery to choose an image;

3 IR.EVENT_RECEIVE_PHOTO_FROM_GALLERY called event substitutes tha value of the Set Background Image' token with a path to a chosen image and installs a new background image (see point 1).

Example:

IR.AddListener(IR.EVENT_START, 0, function ()
{
    IR.AddListener(IR.EVENT_RECEIVE_PHOTO_FROM_GALLERY, 0, function(filename, filepath) { 
         IR.SetVariable("Tokens.SaveImagePath", filepath); //write a path to a chosen image to token
         SetBackground(filepath); //call SetBackground() function
    });
    SetBackground(IR.GetVariable("Tokens.SaveImagePath")); //get token value
});
 
IR.AddListener(IR.EVENT_ITEM_RELEASE, IR.GetItem("Page 1").GetItem("Item 1"), function ()
{
    IR.OpenPhotoGallery();  //open a panel gallery when the button is pressed
});
 
function SetBackground(BG){         
   IR.GetItem("Page 1").GetState(0).Image = BG; //install a new background image of a page
}