Фрейм и Pop Up

Оверлей и фрейм избавляют от отдельной страницы на каждую вкладку и каждое окно. Ниже описано, как устроена пара «оверлей — фрейм», как сделать вкладки (как в «Демо-зале») и как сделать всплывающее окно подтверждения «Выключить всё?» с затемнением и плавным появлением. Вкладки подробно разобраны в «Первом интерфейсе», здесь они даны кратко. Основное внимание — окну Pop Up. О кнопках, которые всё это открывают, — в «Кнопки и состояния».

Оверлей и фрейм

Оверлей — отдельная «подстраница» со своим холстом: на нём лежат элементы, но сам по себе он на экране не виден. Создаётся кнопкой «Создать Оверлей» в левой панели и лежит в ветке «Оверлеи» дерева.
Фрейм — прямоугольная область на странице, в которой показан оверлей. Это «окно» в оверлей. Фрейм создаётся пунктом «Создать Фрейм» (протягиванием рамки) и показывает оверлей, выбранный в «Свойства фрейма» → «Оверлей».

Один оверлей можно показывать в нескольких фреймах на разных страницах. Фрейм можно положить и в оверлей.

Фрейм бывает двух типов — свойство «Тип» в «Свойства фрейма»:

Тип	Что делает	Когда выбрать
«Фрейм» (по умолчанию)	показывает оверлей всегда	область содержимого, в которой вкладки меняют оверлей
«Pop Up»	скрыт; открывается и закрывается кнопками	окно подтверждения, всплывающая панель

Pop Up — не отдельный элемент, а фрейм с типом «Pop Up».

Свойства фрейма — раздел «Свойства фрейма»:

Свойство	Значения	Зачем
«Оверлей»	«Нет оверлея» и оверлеи интерфейса	какой оверлей показывает фрейм
«Отображение оверлея»	«Растянуть» (по умолчанию), «Прокручиваемый»	«Растянуть» подгоняет оверлей под размер фрейма; «Прокручиваемый» показывает оверлей в своём размере с прокруткой
«Тип»	«Фрейм» (по умолчанию), «Pop Up»	см. выше
«Тип перехода»	«Нет» (по умолчанию), «Проявление», «Выезд сверху», «Выезд снизу», «Выезд слева», «Выезд справа»	как окно появляется и исчезает
«Длительность перехода (мс)»	число, по умолчанию 0	сколько длится переход
«Цвет подложки»	цвет с прозрачностью, по умолчанию прозрачный	затемнение, которое закрывает всё за окном

Размеры оверлея и фрейма лучше делать одинаковыми: тогда при «Растянуть» содержимое занимает окно без искажения. Если оверлей больше фрейма, выберите «Прокручиваемый».

Вкладки во фрейме

Вкладки — самый частый способ использования фрейма. В «Демо-зале» на странице «Основа» лежит фрейм Main_Content_fr (тип «Фрейм», 1920 × 1008), а внизу шесть кнопок-вкладок: «Главная», «Экран», «ВКС», «Микрофоны», «Звук», «Камеры». Каждая вкладка — оверлей. Нажатие на кнопку подставляет во фрейм свой оверлей.

Как собрать (подробные шаги со снимками — в «Первом интерфейсе»):

Создайте по оверлею на каждую вкладку и задайте им размер фрейма.
Создайте на странице фрейм (тип «Фрейм») и выберите в списке «Оверлей» первую вкладку.
У каждой кнопки-вкладки нажмите поле «Перенаправить на».
В окне «Присвоить ссылку кнопке» выберите «Тип цели ссылки» → «Оверлей», затем фрейм и оверлей.
Чтобы нажатая вкладка подсвечивалась, соберите кнопки вкладок в группу с «Interlock» (см. «Кнопки и состояния»).

Для вкладок нужна именно ссылка через «Перенаправить на». Поля «Открыть Фрейм» и «Скрыть Фрейм» к вкладкам не подходят: они показывают и прячут целый фрейм, но не выбирают, какой оверлей в нём виден.

Окно подтверждения «Выключить всё?»

Окно подтверждения защищает от случайного нажатия: оператор нажимает «Выключить всё», и перед действием панель спрашивает «Выключить всё?». В «Демо-зале» это окно — Pop Up.

Окно состоит из трёх частей: оверлей с содержимым (подпись и две кнопки), фрейм типа «Pop Up», который показывает этот оверлей, и кнопки, которые окно открывают и закрывают.

Шаг 1. Нарисуйте содержимое окна

В левой панели нажмите «Создать Оверлей».
Назовите оверлей Выключить всё.
В «Свойства» оверлея задайте размер окна, например «Ширина» 800 и «Высота» 440, и нажмите «Подтвердить».
Нарисуйте на оверлее фон Pop_bg с белым цветом, подпись Pop_Title_lb с текстом Выключить всё? и пояснение Pop_Text_lb.
Создайте две кнопки: Pop_Yes_b с текстом Выключить и Pop_No_b с текстом Отмена.

Шаг 2. Добавьте фрейм типа Pop Up

В дереве выберите страницу, поверх которой должно появляться окно (в «Демо-зале» — «Основа»).
«Создать Виджет» → «Создать Фрейм», протяните рамку.
В «Основные свойства» задайте имя Pop_AllOff_fr и размер, равный размеру оверлея: «Ширина» 800, «Высота» 440. Положение — по центру страницы: для экрана 1920 × 1200 это X 560 и Y 380.
В «Свойства фрейма» в списке «Оверлей» выберите Выключить всё.
В списке «Тип» выберите «Pop Up».
В «Цвет подложки» задайте полупрозрачный тёмный цвет, например #0F172A99: он затемнит экран за окном.
В «Тип перехода» выберите «Проявление».
В «Длительность перехода (мс)» введите 200: окно будет плавно появляться и исчезать.
По желанию в «Свойства границы» задайте «Радиус скругления углов» (в «Демо-зале» — 32), а в «Свойства тени» добавьте тень.

Что вы увидите: в дереве в группе «Фреймы» страницы появился Pop_AllOff_fr. Окно скрыто и откроется только по нажатию кнопки (шаг 3), поэтому на панели оно пока не видно.

Шаг 3. Откройте окно кнопкой

Выберите кнопку, которая открывает окно (в «Демо-зале» — «Выключить всё» на вкладке «Главная», Home_AllOff_b).
В «Свойства кнопки» в списке «Открыть Фрейм» выберите Pop_AllOff_fr.

В списках «Открыть Фрейм» и «Скрыть Фрейм» перечислены все фреймы интерфейса, в том числе из других страниц и оверлеев, и показаны они по имени фрейма. Поэтому давайте фреймам разные понятные имена (например, Pop_AllOff_fr, а не «Frame 1»).

Шаг 4. Закройте окно кнопками

Каждая кнопка окна, после нажатия на которую окно должно закрыться, получает «Скрыть Фрейм».

Откройте оверлей «Выключить всё» и выберите кнопку Pop_No_b («Отмена»).
В «Свойства кнопки» в списке «Скрыть Фрейм» выберите Pop_AllOff_fr.
То же сделайте для Pop_Yes_b («Выключить»).

Кнопка «Выключить» одновременно закрывает окно (через «Скрыть Фрейм») и отправляет нажатие в программу: сами команды выключения задаёт программа в U-Logic (редактор программы управления), а окно закрывается без неё.

Кроме кнопок, окно закрывается касанием по затемнённой подложке. Всё же оставляйте в окне кнопку закрытия: так оператору понятно, как выйти.

Шаг 5. Сохраните, опубликуйте, проверьте

Сохраните и опубликуйте интерфейс (см. «Первый интерфейс»).
Откройте интерфейс на UI-Panel (страница, на которой оператор работает с интерфейсом) и нажмите «Выключить всё».

Что вы увидите: за окном экран затемняется, а само окно появляется поверх страницы («Проявление» за 0,2 секунды). «Отмена» закрывает окно, и экран становится прежним.

Частые ошибки

Фрейм показывает пустое место. В списке «Оверлей» стоит «Нет оверлея»: оверлей не выбран или был удалён. Если удалить оверлей, у всех показывающих его фреймов ссылка сбрасывается в «Нет оверлея».
В списке «Оверлей» нет нужного оверлея. Список не предлагает оверлей, в котором лежит сам фрейм, и оверлеи, которые приведут к циклу (оверлей показывает фрейм, который показывает его самого).
Содержимое растянуто или обрезано. Оверлей и фрейм разного размера. Сделайте их одинаковыми или выберите «Прокручиваемый».
Вкладка не меняет содержимое фрейма. Кнопке задали «Открыть Фрейм» вместо «Перенаправить на» → «Оверлей». Для вкладок нужна ссылка «Перенаправить на».
Окно не открывается. У кнопки не выбран фрейм в «Открыть Фрейм» («Нет Фрейма»).
Окно видно сразу, без нажатия. У фрейма «Тип» остался «Фрейм»: выберите «Pop Up».
Окно не закрывается кнопкой. У кнопки не выбран «Скрыть Фрейм».
Нет затемнения. «Цвет подложки» по умолчанию прозрачный: задайте цвет с прозрачностью, например #0F172A99.
Фрейм не группируется. Фрейм нельзя включить в группу (вместе с фоном и клавиатурой): значок группировки при таком выделении недоступен.
На панели всё по-старому. Нажали «Сохранить», но не «Опубликовать» (см. «UI-Designer»).