Кнопки и состояния

Кнопка открывает вкладку, включает устройство, выбирает источник. Ниже описано, как устроена кнопка в UI-Designer, как её назвать, чтобы программа в U-Logic (редактор программы управления) её нашла, как оформить состояния и как сделать из кнопок переключатель или набор «выбирается одна из». Примеры взяты из учебного проекта «Демо-зал» (см. «UI-Designer»); как создать интерфейс, фон и первые кнопки, показано в «Первом интерфейсе».

Какие бывают кнопки

В меню «Создать Виджет» один пункт «Создать Кнопку»: кнопка всегда одна и та же. Разные «виды» — разные настройки в «Свойствах кнопки»:

Что нужно	Как настроить
Кнопка-команда: нажали — программа выполнила действие	оставить всё по умолчанию
Вкладка: нажали — во фрейме открылась другая подстраница	«Перенаправить на» → «Оверлей» (см. «Первый интерфейс»)
Переключатель «включено / выключено»	флажок «Отметить как toggle»
Выбор одной кнопки из набора (источник, режим, вкладка)	сгруппировать кнопки и включить «Interlock»
Открыть или закрыть всплывающее окно	«Открыть Фрейм», «Скрыть Фрейм» (см. «Фрейм и Pop Up»)
Действие, пока кнопку держат (двигать камеру)	ничего настраивать не нужно: программа получает и «нажали», и «отпустили» (см. ниже «Что кнопка отправляет в программу»)
Индикатор: показывает состояние, вид задаёт программа	«Тип обратной связи» → «Triggered»

Примечание

В старых проектах может встретиться «обычная» кнопка с четырьмя картинками по состояниям (поля «Изображение Default», «Изображение Selected», «Изображение Pressed», «Изображение Disabled»). В новых интерфейсах такая кнопка не создаётся: пункт меню создаёт кнопку, у которой каждое состояние оформляется отдельно (ниже).

Имя кнопки — её ID

Все соглашения об именах, блоках программы и копиях проекта собраны на странице «Соглашения».

Имя кнопки — поле «Имя» в «Основные свойства». Программа в U-Logic находит кнопку по этому имени: оно связывает то, что нарисовано, с тем, что должно происходить. Поэтому:

• Регистр важен: Nav_Home_b и nav_home_b для программы — разные кнопки.

• Пишите латиницей и без пробелов. UI-Designer не проверяет имя при вводе: ошибка видна, только когда программа не находит кнопку.

• Следите за уникальностью: редактор разрешает дать одинаковое имя нескольким кнопкам. Тогда состояние, которое пришлёт программа, получат все такие кнопки. Иногда так делают намеренно, но по умолчанию давайте каждой кнопке своё имя.

• Не переименовывайте кнопку после того, как программа готова: программа ищет старое имя и больше не находит кнопку.

В «Демо-зале» принято соглашение Группа_Объект_тип (подробно — в «Первом интерфейсе»). Для кнопок оно работает так:

Имя	Что означает
Nav_Home_b	вкладка «Главная» (Nav — навигация)
Src_Cam1_b	источник «Камера 1» (Src — источники)
Mic_01_b	место 1 за столом на экране «Микрофоны»
Hdr_Screen_b	кнопка «Экран» в шапке
Pop_Yes_b	кнопка «Выключить» в окне подтверждения

Общий префикс нужен, чтобы программа могла обработать всю группу одним правилом (например, все кнопки Src_*). Группы кнопок, которые выбираются по одной, в «Демо-зале» получили суффикс grp: Nav_grp, Src_grp, Lay_grp, Cam_grp, VcsMode_grp.

Состояния кнопки

У кнопки четыре состояния, и у каждого свой вид.

Состояние	Когда кнопка в нём	Кто его включает
DEFAULT	покой; у переключателя — «выключено»	по умолчанию
PRESSED	пока кнопку держат нажатой; у переключателя — «включено»	нажатие на панели или программа
SELECTED	кнопка выбрана в группе	группа с флажком «Interlock» или программа
DISABLED	кнопка недоступна: не реагирует на нажатия, пока состояние не снимут	программа

Как задать вид каждого состояния:

1. Выберите кнопку на холсте. В правой панели над разделами свойств — ряд вкладок DEFAULT, SELECTED, PRESSED, DISABLED и флажок «Применить ко всем состояниям».

2. Снимите флажок «Применить ко всем состояниям». Пока он включён (по умолчанию), любая правка внешнего вида (цвет, текст, значок) применяется ко всем четырём состояниям сразу. Тогда нажатие на панели не меняет вид кнопки.

3. Нажмите вкладку состояния и задайте его оформление: «Цвет фона» в «Свойства фона и изображения», цвет и текст в «Свойства текста», «Свойства границы» и другие разделы.

4. Повторите для остальных вкладок.

Состояния кнопки: 1 — вкладки DEFAULT, SELECTED, PRESSED, DISABLED, 2 — «Применить ко всем состояниям». Последняя вкладка частично скрыта — ряд прокручивается вбок

Что вы увидите: на холсте кнопка показывает оформление выбранной вкладки; на панели кнопка меняет вид, когда переходит из состояния в состояние.

Как оформлены состояния в «Демо-зале»: DEFAULT — белая клавиша, SELECTED — синяя, PRESSED у переключателей — зелёная («включено»), DISABLED — серая. Оформите каждое состояние, которое оператор может увидеть: если у кнопки есть выбор или переключатель, понадобятся SELECTED или PRESSED.

Ещё два свойства состояний:

• «Состояние кнопки» в «Свойства кнопки» — выпадающий список «Default», «Selected», «Pressed», «Disabled»: в каком состоянии кнопка показывается при открытии интерфейса. В «Демо-зале» так сделана вкладка «Главная»: при открытии она сразу синяя (Selected). В закрытом поле значение состояния показано прописными (DEFAULT, SELECTED…), в открытом списке — Default, Selected, Pressed, Disabled. Не путайте этот список с вкладками над свойствами: вкладки показывают, какое оформление вы сейчас редактируете.

• «Длительность перехода (мс)» в разделе «Переход» — плавная смена вида между состояниями. 0 — мгновенно.

Примечание

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

Тип обратной связи

Поле «Тип обратной связи» в «Свойства кнопки» отвечает на два вопроса: реагирует ли кнопка на нажатие внешним видом и слушается ли она программу. Значения в списке английские и не переводятся.

Значение	Нажатие уходит в программу	Вид при нажатии	Вид задаёт программа	Когда выбрать
Momentary (по умолчанию)	да	на время нажатия — PRESSED	да: кнопка ждёт ответа программы и принимает его или возвращается к прежнему	обычная кнопка; переключатель; кнопка, подсветку которой может менять устройство
Triggered	да	не меняется (без флажка «Отметить как toggle»)	да, только программа	индикатор: нажатие учитывается, но вид кнопки меняет только программа
Momentary Passed	да	кратко меняется на панели	нет, ответы программы игнорируются	быстрая локальная кнопка, которой программа не управляет
None	нет	не меняется	нет	не кнопка, а украшение; для украшений лучше использовать лейбл

Что выбрать:

• Кнопка-команда («Начало совещания», «Позвонить») — «Momentary», то есть ничего менять не нужно.

• Кнопка, вид которой зависит от устройства (место за столом: микрофон может быть включён и не с этой панели) — «Momentary»: тогда программа сможет перевести кнопку в нужное состояние (pressed или default).

• Вкладка — «Momentary», как и у остальных кнопок. «None» не годится: кнопка перестаёт быть кнопкой.

• Индикатор состояния, у которого нельзя «щёлкнуть и увидеть реакцию» — «Triggered».

«Свойства кнопки»: 1 — «Состояние кнопки», 2 — «Тип обратной связи», 3 — «Отметить как toggle», 4 — «Скрыть Фрейм», 5 — «Открыть Фрейм», 6 — «Перенаправить на»

Рядом в «Свойства кнопки» есть поля «Повтор нажатия при удержании», «Частота повтора (сек)» и «Задержка удержания»: если кнопку держат, нажатие повторяется. Это нужно, например, для кнопок «+» и «−» громкости: их не придётся нажимать десять раз. «Частота повтора (сек)» задаётся в секундах; значение «Задержки удержания» подберите на панели.

Кнопка-переключатель

Переключатель нужен там, где у кнопки два устойчивых положения: экран включён или выключен, микрофон включён или выключен. Каждое нажатие меняет положение.

1. Выберите кнопку.

2. В «Свойства кнопки» включите флажок «Отметить как toggle». Тип обратной связи оставьте «Momentary».

3. Оформите кнопку так: PRESSED — «включено», DEFAULT — «выключено». Для этого снимите «Применить ко всем состояниям».

4. Задайте цвет на вкладках DEFAULT и PRESSED по-разному (в «Демо-зале» «включено» зелёное).

5. Сохраните и опубликуйте интерфейс.

Что вы увидите на панели: первое нажатие — кнопка зелёная (PRESSED), второе — снова обычная (DEFAULT). Это работает без программы: кнопка переключается сама.

Переключатели в шапке «Демо-зала» на UI-Panel: 1 — «Экран» выключен (DEFAULT), 2 — «Микрофоны» и 3 — «Звук в зале» включены (PRESSED)

Что нужно знать о переключателях:

• Панель запоминает положение. Каждое переключение уходит на сервер, и он хранит последнее положение по имени кнопки. Когда вы откроете панель заново, кнопка будет в том положении, в котором её оставили, а не в заданном в UI-Designer. Состояние из UI-Designer («Состояние кнопки») используется только как запасное, пока сервер ничего не помнит. Загрузка нового проекта сбрасывает запомненные положения.

• Флажок работает при «Momentary», «Momentary Passed» и «Triggered». При «Triggered» первое касание включает кнопку, и она остаётся включённой, второе выключает; положение запоминает сервер. При «None» кнопка на касание не отвечает, поэтому флажок не действует. При «Momentary Passed» переключатель чисто локальный: ответы программы игнорируются.

• Программа узнаёт новое положение: при «Momentary» и «Triggered» она получает событие со значением нового состояния при каждом переключении (см. ниже «Что кнопка отправляет в программу»).

• Начальное положение лучше оставлять DEFAULT («выключено»). Чтобы переключатель при первом запуске был включён (как «Звук» в «Демо-зале»), выберите «Состояние кнопки» → «Pressed». После первого переключения сервер уже помнит своё положение.

Группы и Interlock

Если из набора кнопок должна быть выбрана ровно одна (вкладки, источник сигнала, раскладка, режим), в UI-Designer делают группу и включают у неё Interlock. Группа с Interlock сама подсвечивает нажатую кнопку и снимает подсветку с остальных — программа для этого не нужна. Повторное нажатие уже выбранной кнопки оставляет её выбранной.

Как создать такую группу:

1. В дереве выделите кнопки набора: щёлкните по первой, затем Ctrl + щелчок по остальным.

2. Над холстом нажмите «Группировать Элементы (G)» или клавишу G. В дереве появится группа «Group 1», в которой лежат ваши кнопки.

3. Дважды щёлкните по имени группы в дереве и введите имя, например Nav_grp. Оно нужно только вам, чтобы не путаться в дереве.

4. Выберите группу. В «Основные свойства» включите флажок «Interlock».

5. Если при открытии интерфейса одна из кнопок должна быть уже выбрана, выберите её. В «Свойства кнопки» в списке «Состояние кнопки» выберите «Selected».

6. Задайте оформление состояния SELECTED у каждой кнопки группы (вкладка SELECTED при снятом «Применить ко всем состояниям»): иначе выбранная кнопка не отличается от остальных.

Группа в дереве: 1 — группа Nav_grp с кнопками вкладок, 2 — одна из кнопок группы

Свойства группы: 1 — «Имя», 2 — «Interlock»

Что вы увидите на панели: нажали кнопку — она перешла в SELECTED, а выбранная до неё вернулась в DEFAULT.

Нижняя панель вкладок «Демо-зала» на UI-Panel: 1 — выбранная вкладка «Главная» (SELECTED), 2 — вкладка «Экран» (DEFAULT)

Что нужно знать:

• Interlock — свойство группы, не кнопки. Если флажка нет, вы выбрали кнопку, а не группу.

• В группу нельзя включить фон, фрейм и клавиатуру: значок группировки при таком выделении недоступен.

• В «Демо-зале» пять таких групп: Nav_grp (вкладки), Src_grp (источники), Lay_grp (раскладка), Cam_grp (камеры), VcsMode_grp («Контакты» и «История»).

Когда хватает Interlock, а когда нужна программа

Interlock подсвечивает то, что нажато на этой панели. Для вкладок, режимов и выбора камеры этого достаточно: программа вообще не участвует. Но иногда подсветку должна менять программа: например, кнопка «Убрать источник» должна снять выбор со всей группы или выбор пришёл от самого устройства. Тогда нужен узел (блок программы U-Logic) interlock-2 в U-Logic, он описан на странице «Переключатели и группы». Как программа принимает нажатия кнопок и меняет их состояния — в разделе «Связь интерфейса с программой».

Что кнопка отправляет в программу

Каждое нажатие на кнопку панель передаёт в программу U-Logic как событие. Какое событие нужно, решаете вы:

Событие	Когда приходит	Для чего
push	кнопку нажали	обычная команда; начало действия «пока держат»
release	кнопку отпустили	конец действия «пока держат» (камера: push — двигать, release — стоп)
tap	касание	то же, если нужно реагировать на касание целиком
value_changed	только у переключателя: он сменил положение	узнать новое состояние кнопки (например, pressed)

Один «клик» даёт push, release и tap. Поэтому в программе выберите одно событие, обычно push, иначе действие может выполниться несколько раз. Программа находит кнопку по имени, поэтому в событии приходит её «Имя».

Если «Тип обратной связи» — «None», кнопка ничего не отправляет.

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

Общий маршрут проверки по цепочке «панель → программа → устройство → панель» — на странице «Не работает: где смотреть».

• Кнопка на панели прозрачна. Цвет фона кнопки не задан. Задайте «Цвет фона» в «Свойства фона и изображения» для каждого состояния.

• Нажатие не меняет вид кнопки. Включён «Применить ко всем состояниям», и все состояния выглядят одинаково. Снимите флажок и оформите состояния по отдельности.

• Выбранная кнопка группы не подсвечена. Не задан вид состояния SELECTED, или кнопки не собраны в группу, или у группы не включён «Interlock».

• Переключатель на панели включён, хотя в UI-Designer выключен. Сервер помнит положение с прошлого сеанса. Положение сбрасывается загрузкой нового проекта.

• Флажок «Отметить как toggle» включён, а кнопка не переключается. Проверьте «Тип обратной связи»: при «None» кнопка на касание не отвечает, и флажок не действует.

• Программа не видит кнопку. Имя в UI-Designer и имя в программе различаются регистром или кнопку переименовали после настройки программы.

• Правки не видны на панели. Вы нажали «Сохранить», но не «Опубликовать» (см. «UI-Designer»).