• iRidium studio 2019
• Переключение страниц и окон-попапов

Страницы и окна-попапы: назначение и особенности​

Страница - это базовый элемент интерфейса, его основа. Создавая новый интерфейс, вы получаете одну страницу для размещения графических элементов. Далее, вы можете добавить в интерфейс другие страницы и окна-попапы.
Особенности работы со страницей:

• Размер страницы равен разрешению, которое вы выбрали при создании интерфейса;
• Страница, образно, закрывает "пустое пространство", которое не содержит никакого интерфейса и не обрабатывает нажатия пользователя, поэтому:
• Страницы не могут появляться с эффектами анимации, не могут быть прозрачными и полупрозрачными;
• Страницу нельзя закрыть, её можно только сменить на другую;
• В каждый момент времени видна только одна страница;
• При смене страницы, все окна-попапы, которые были на ней открыты - закроются;
• Если выполнить команду "Previous page" ("Предыдущая страница"), то на странице откроются и окна, которые были скрыты при её смене;
• Можно создать вертикальную и горизонтальную страницу, и настроить их как "альтернативные". Тогда страницы будут сменять друг друга при повороте телефона/планшета. Открытие попапов при повороте экрана можно настроить только при помощи скриптов, поэтому "поворотные" интерфейсы обычно базируются только на одних страницах, с минимальным числом попапов, не зависящих от текущего положения экрана (которые открываются всегда в одном месте, например, в левом верхнем углу экрана).

Окно-попап (попап) - это окно с графическими элементами, которое можно открыть в любом месте страницы. Большинство проектов строится на единственной странице и множестве окон, т.к. окна обладают управляемым положением и прозрачностью, анимацией, можно открыть множество окон одновременно. Из минусов: невозможность работы с функцией авто-поворота страниц, т.к. окна не имеют вариантов внешнего вида для разной ориентации экрана.
Особенности работы с окном (popup):

• попап не может быть горизонтальным или вертикальным;
• попап автоматически закроется при авто-повороте страницы, при открытии другой страницы;
• попап может быть любого размера, прозрачности, его можно открыть в любом месте страницы;
• к попапу можно применить анимацию появления и закрытия;
• на одной странице можно открыть множество попапов;
• попапы "непрозрачны" для нажатия. Нельзя создать попап, сквозь который будут проникать нажатия пользователя на элементы страницы или попапа, расположенного слоем ниже;
• попапы можно объединять во "взаимоисключающие" Группы попапов: при открытии попапа из группы, происходит автоматическое закрытие попапа, который сейчас открыт и входит в эту же группу;
• По команде "Hide Group (name)" закроется любой открытый попап из Группы попапов.

Создать страницу. Создать окно-попап​

Инструменты создания страниц и попапов находятся в левом верхнем углу панели PROJECT:

• Создать страницу. Настройки:
• • Page name - имя страницы,
• • Orientation - положение на телефоне/планшете: горизонтальное или вертикальное (для ПК выбирайте горизонтальное),
• Создать окно-попап . Настройки:
• • Popup name - имя попапа,
• • Left, Top - положение на странице: отступ от верхнего-левого края страницы по Х (Left) и Y (Top),
• • Width, Heigth - ширина и высота попапа,
• • Draw - нарисовать папап курсором на странице (визуально определить размер и положение).

Основные настройки страниц и попапов (General)​

Основные настройки страниц и окон-попапов доступны на вкладке General окна Project :

Настройка страниц:

• Name - имя страницы,
• Orientation - ориентация страницы (альбомная, портретная),
• Alternate View - страница с противоположной ориентацией, которая автоматически появится вместо текущей при повороте панели (если панель оснащена датчиком положения). Подробное описание настройки в разделе Авто-поворот страницы.
  
  

Настройка окон-попапов:

• Name - имя окна-попапа,

• X/Y - расположение попапа на странице по оси X и Y,

• Width / Height - ширина / высота попапа,

• Lifetime - время (мс), в течении которого будет отображаться попап на странице,

• Drag - активация передвижения попапа на странице,

• Modal - блокировка нажатия на элементы вне попапа,

• Top - перерисовка окна попапа поверх всех остальных окон,

• Show Effect - создать / добавить эффект появления попапа,

• Hide Effect - создать / добавить эффект скрытия попапа.

• Подробнее о создании эффектов на появление и скрытие попапов описано здесь.

Организация интерфейса​

Варианты организации интерфейса:

1. Одна страница и окна-попапы
   Наиболее распространенный подход к разработке. Страница используется как "подложка", на которой размещены фоновое изображение и объекты, которые видны почти все время (называние проекта, статус подключения к оборудованию, дата и время и т.д.). Все управляющие объекты размещаются в окнах, которые сменяют друг друга по мере необходимости. Навигация за счет попапов делает поведение интерфейса предсказуемым, позволяет использовать прозрачность и анимацию появления/скрытия;
2. Несколько страниц и окна-попапы
   Отличие от предыдущего варианта только в том, что вы можете использовать дополнительную страницу как скринсейвер или меню, с которого можно вернуться, автоматически возвратив все ранее открытые попапы. Для этого используйте команду Previous page;
3. Только страницы
   Интерфейс без попапов позволяет использовать преимущества авто-поворота страниц - когда интерфейс автоматически переключается между вертикальным и горизонтальным видом при повороте устройства с i3 pro, но, на практике, используется крайне редко, т.к. вынуждает дублировать элементы, которые повторяются на многих страницах, а значит стоимость правок сильно растет.

На примере бесплатного интерфейса "iOS стиль: Умный дом" (iridi.com > Поддержка > Загрузки > Интерфейсы > iOS стиль: Умный дом), структура может выглядеть так:

1. Единственная страница интерфейса. Поверх нее открываются попапы;
2. Окна-попапы, образующие меню навигации по проекту. На них расположены кнопки, выполняющие команды открытия и закрытия попапов;
3. Попапы, на которых хранятся элементы управления оборудованием (активности). Они разбиты в папки по комнатам.

Стартовая страница проекта​

При запуске проекта iRidium откроется только 1 страница и любое количество всплывающих окон.

Выберите стартовую страницу в Project settings (вкладка Start):

• Start page – имя страницы, которая должна быть открыта при запуске проекта iRidium (только одна);
• Popups on the start page – список попапов, которые должны быть открыты при запуске проекта. Попапы будут открыты по порядку.

Переход между страницами и попапами​

Любой графический элемент, который обрабатывает нажатие, может переключать страницы и управлять попапами. Но чаще всего для переходов в интерфейсе используют Button и иногда Trigger Button.

Управление страницами и попапами производится с помощью "команд навигации" (Actions), которые нужно добавить на событие Press или Release в панели PROGRAMMING свойств графического элемента:

Команды перехода по интерфейсу:

• Show page [имя страницы] - показать страницу (взамен текущей). Все попапы закроются;
• Show previous page - показать предыдущую страницу. Если на ней были открыты попапы - они вернутся вместе со страницей;
• Show popup [имя попапа] - показать попап. Можно указать координаты Top и Left, где появится попап, или оставить их пустыми, тогда попап появится по исходным координатам;
• Hide popup [имя попапа] - cкрыть попап;
• Toggle popup [имя попапа] - переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить. Можно указать координаты Top и Left, где появится попап, или оставить их пустыми, тогда попап появится по исходным координатам;
• Hide group [имя группы] - если открыт попап, входящий в Группу, то скрыть его;
• Hide popups on page [имя страницы] - скрыть все попапы на указанной странице;
• Hide all popups - cкрыть все попапы, открытые в проекте. Если после этой команды использовать Show previous page , то попапы на "возвращенной" странице не восстановятся! Учитывайте это при организации интерфейса.

Авто-поворот страницы​

При создании страниц, вы можете выбрать страницу с противоположной ориентацией для авто-поворота проекта.

• Name - имя страницы,
  
  
• Orientation - ориентация страницы (альбомная, портретная),
  
  
• Alternate View - страница с противоположной ориентацией, которая автоматически появится вместо текущей при повороте панели (если панель оснащена датчиком положения).

Дизайн с авто-поворотом должен состоять из одних страниц. Эта рекомендация связана с тем, что при авто-повороте все открытые попапы закрываются. Чтобы при авто-повороте открывать нужные попапы, используйте JavaScript API.

Пред-просмотр попапа на странице​

Пред-просмотр попапа на странице позволяет отобразить конечное расположение попапов на выбранной странице и выровнять их относительно элементов страницы.

Настройте пред-просмотр попапа во вкладке PROJECT или по нажатию правой кнопки мыши по открытой области страницы или попапа:

Выберите попапы, которые хотите отобразить на странице для предпросмотра:

Popup Group​

В дереве страниц вы можете создавать Папки (Folders) для группировки страниц и попапов. Это не влияет на работу проекта. Но вы также можете создавать Группы попапов (Popup Group) по нажатию правой кнопкой мыши на проект или попап.

Popup Group - набор попапов, которые никогда не должны быть открыты одновременно. Попапы, добавленные в одну группу, становятся взаимоисключающими. Если один попап из группы уже открыт, то при вызове другого он закроется автоматчески.

Группы попапов полезны для упрощения системы навигации проекта. Они позволяют не следить за тем, что ненужные попапы действительно были закрыты, т.к. их закрытие происходит автоматически.

• Вы можете перемещать попапы между группами. Для группового перемещения попапов выделите необходимые попапы с помощью сочетания клавиш Ctrl + ЛКМ или Shift + ЛКМ и перетащите их в необходимую папку.

Команда Hide popup group служит для того, чтобы скрывать любой открытый попап группы:

• Скрыть группу попапов можно командой из скрипта: IR.HideGroup("Group")

Скринсейвер проекта​

Скринсейвер - это страница-заставка, которая будет появляться на экране панели управления после истечения указанного нами времени бездействия панели. К странице скринсейвера так же можно привязать скрипт на обработку пароля, анимацию на странице и др.

Применение темного фона для страницы скринсейвера позволяет продлить срок службы дисплея панели управления.

шаг 1. Создайте страницу-заставку.

шаг 2. Настройте кнопку "назад" для возврата к проекту, команда "Show previous page":

шаг 3. Выберите страницу-заставку проекта в Project settings.

Параметры настроек:

• Show screensaver - включить скринсейвер;
• Delay - время в секундах, по истечению которого, активируется скринсейвер, если оставить проект не тронутым;
• Show page - скринсейвер будет открывать указанную страницу (заставку);
• Landscape screensaver - выбор альбомной ориентации страницы для скринсейвера;
• Portrait screensaver - выбор портретной ориентации страницы для скринсейвера;
• Start script - запустить скриптовую функцию при активации скринсейвера.

загрузки

• Примеры скринсейверов >>

• Пример скринсейвера от JaHeLi media >>

• Можно настроить срабатывание скрипта при появлении скринсейвера. Например, уменьшать яркость дисплея устройства, при помощи метода [IR.SetVariable](/SWDL/dev-iridi/Tokens_API#irsetvariable).

загрузки

• Пример скринсейвера с запуском скрипта >>