Перейти к основному содержимому

Установка фонового изображения

По нажатию кнопки конечный пользователь может самостоятельно изменить устаревшее фоновое изображение на странице проекта в приложении i3 Pro.

документация обновлена 01.01.2024

Подсказка

Пример: Панельный проект

Замена и установка фонового изображения​

Для замены или установки фонового изображения в i3 Pro необходимо:

  1. Запустить, приведенный выше, пример проекта;
  2. Нажать на кнопку Set Background Image и выбрать необходимое изображение в галереи панели.

SetBackgroundImage1.png SetBackgroundImage2.png

Подсказка

Желательно выбирать изображение в соответствии с параметрами страницы проекта (разрешение, ориентация). Установка фонового изображения с небольшим разрешением может привести к снижению качества изображения.

Адаптация и перенос проекта​

Адаптация и перенос примера в свой проект проходит в несколько этапов:

  1. Создайте кнопку по нажатию на которую будет открываться галерея для выбора фонового изображения;
  2. Создайте токен проекта для хранения пути к выбранному изображению;
  3. В свойствах страницы (вкладка Project > States ) укажите формат отображения изображения (параметр Image Stretch ):
  • Proportional - отобразит изображение пропорционально странице;
  • Full Size - отобразит изображение с растягиванием на всю страницу.
примечание
  • При выборе параметра Proportional , если изображение имеет формат, отличный от формата страницы, то с изображением будут так же отображаться поля страницы. Для более корректного отображения изображений нестандратного формата, рекомендуем черную заливку фона страницы.
Важно
  • По умолчанию значение параметра страницы Image Stretch - None . Это означает, что если не изменить значение параметра, то изображение будет отображаться в изначальном размере (может быть гораздо меньше размера страницы или выходить за её рамки).
  1. Скопируйте и перенесите Script 1 в свой проект и замените токен и графические элементы на те, которые присутствуют в вашем проекте.

SetBackgroundImage3.png

Принцип работы​

Установка/ замена фонового изображения в проекте происходит с помощью функций в Script editor:

  1. По запуску приложения, функция передает свойству страницы Image значение токена проекта SaveImagePath . На экране отобразится изображение, путь к которому указан в значении токена;
  2. По нажатию на кнопку Set Background Image , срабатывает функция IR.OpenPhotoGallery() и открывает галлерею панели для выбора изображения;
  3. Вызванное событие IR.EVENT_RECEIVE_PHOTO_FROM_GALLERY заменяет значение токена Set Background Image на путь к выбранному изображению и устанавливает новое фоновое изображение (см. пункт 1).

Пример:

IR.AddListener(IR.EVENT_START, 0, function ()
{
    IR.AddListener(IR.EVENT_RECEIVE_PHOTO_FROM_GALLERY, 0, function(filename, filepath) { 
         IR.SetVariable("Tokens.SaveImagePath", filepath); <translate><!--T:16-->
//записать в токен путь к выбранному изображению</translate>
         SetBackground(filepath); <translate><!--T:17-->
//вызвать функцию SetBackground()</translate>
    });
    SetBackground(IR.GetVariable("Tokens.SaveImagePath")); <translate><!--T:18-->
//получить значение токена</translate>
});

IR.AddListener(IR.EVENT_ITEM_RELEASE, IR.GetItem("Page 1").GetItem("Item 1"), function ()
{
    IR.OpenPhotoGallery();  <translate><!--T:19-->
//открыть галерею по накжатию на кнопку</translate>
});

function SetBackground(BG){         
   IR.GetItem("Page 1").GetState(0).Image = BG; <translate><!--T:20-->
//установить новое фоновое изображение страницы</translate>
}
В этой статье: