Справочник элементов

Кроме кнопок и фреймов, в UI-Designer десять элементов: лейбл, слайдер, список, фон, дата, время, инпут, клавиатура, спидометр и Web URL. Эта страница отвечает на два вопроса: какой элемент выбрать для задачи и какие у него свойства, которых нет у остальных. Примеры взяты из учебного проекта «Демо-зал» (см. «UI-Designer»). О кнопках — в «Кнопки и состояния», о фреймах и окнах Pop Up — в «Фрейм и Pop Up».

Как создать элемент и где его свойства

1. Откройте нужную страницу или оверлей (подстраницу).

2. На панели инструментов над холстом нажмите «Создать Виджет» и выберите пункт: «Создать Лейбл», «Создать Слайдер», «Создать Список», «Создать Фон», «Создать Инпут», «Создать Клавиатуру», «Создать Спидометр», «Создать Web URL», «Создать Объект «Дата»», «Создать Объект «Время»».

3. Протяните на холсте рамку нужного размера.

4. В правой панели «Свойства» задайте имя в «Основные свойства» и настройте разделы элемента.

Что вы увидите: в верхней строке правой панели написан тип элемента («Лейбл», «Слайдер», Объект «Дата», Объект «Время» и т. д.), под ним — сворачиваемые разделы. Раздел без содержимого панель не показывает. Если нужное свойство не видно, введите его название в поле «Поиск свойств…» над списком.

У любого элемента есть два общих раздела, ниже они не повторяются:

• «Основные свойства» — «Имя», положение X и Y, «Ширина» и «Высота», «Поворот», флажок «Скрыть»;

• «Свойства тени».

«Свойства границы» (рамка и скругление) есть у большинства элементов, но не у всех: у слайдера, например, их нет.

Имя элемента — ключ, по которому программа в U-Logic (редактор программы управления) находит его, поэтому оно должно быть понятным и уникальным (подробнее — в «Кнопки и состояния»). В «Демо-зале» тип записан в конце имени: _lb — лейбл, _sl — слайдер, _ls — список, _bg — фон, _tm — время, _fr — фрейм, _b — кнопка.

Какие разделы бывают у каждого элемента:

Элемент	Свои разделы	Общие разделы оформления
Лейбл	—	фон и изображение, текст, иконка, внутреннее изображение, граница
Слайдер	«Свойства слайдера»	— (фона и границы нет)
Список	«Свойства списка» и три раздела текста	фон и изображение, граница
Фон	«Свойства фона и изображения»	текст, граница
Дата	«Свойства даты»	фон (только цвет), текст, граница
Время	«Свойства времени»	фон (только цвет), текст, граница
Инпут	«Свойства инпута»	фон и изображение, текст, иконка, внутреннее изображение, граница
Клавиатура	«Свойства Клавиатуры»	граница
Спидометр	«Свойства спидометра»	— (фона и границы нет)
Web URL	«Свойства Web URL»	— (границы нет)

Как оформлять цвета, градиенты, значки и изображения — в «Оформлении».

Лейбл

Когда применять. Лейбл — надпись или плашка: заголовок, подпись под значением, карточка-подложка, значок, картинка. Если по элементу нужно нажимать — берите кнопку.

В «Демо-зале»: заголовок шапки Hdr_Title_lb («Демо-зал»), подписи и карточки на всех вкладках (Home_Screen_cap_lb, Home_Screen_card_lb). Значения, которые показывает программа, тоже лейблы: Home_Screen_val_lb («На экране: Камера 1»), Vcs_State_val_lb («Нет звонка» / «Идёт разговор»).

Свойства лейбла: 1 — тип «Лейбл», 2 — «Свойства фона и изображения», 3 — «Свойства текста», 4 — «Свойства иконки», 5 — «Свойства внутреннего изображения», 6 — «Свойства границы»

У лейбла нет собственного раздела: он собирается из общих. Фон (цвет, картинка), текст, иконку, внутреннее изображение и границу с тенью настраивайте в соответствующих разделах.

Связь с программой. В «Демо-зале» лейблы только показывают текст; нажатия обрабатывают кнопки. Программа может изменить у лейбла текст и цвет фона: так сделаны «Идёт разговор» на зелёном фоне и «Говорят: 4, 9».

Слайдер

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

В «Демо-зале»: Snd_Hall_vol_sl и Snd_Vcs_vol_sl — вертикальные фейдеры громкости на вкладке «Звук» (подписаны лейблами Snd_Hall_val_lb и Snd_Vcs_val_lb, под ними — кнопки + и −).

Свойства слайдера: 1 — «Ориентация», 2 — «Отправлять команды после», 3 — «Шаги», 4 — «Цвет заполненной полоски», 5 — «Цвет ручки», 6 — «Ширина ручки»

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

Группа	Поля
Общие	«Ориентация» (вертикальная или горизонтальная), «Отступы» (и «Редактировать все отступы»), «Шаги» (число, минимум 1, по умолчанию 100), «Показать Шаги в Лейбле»
Когда отправлять	«Отправлять команды после»: «Отпускание» или «Перетаскивание»
Полоска	«Толщина полоски», «Скругление углов полоски», «Цвет пустой полоски», «Цвет заполненной полоски», «Цвет полоски» и «Использовать один цвет для полоски»
Ручка	«Цвет ручки», «Изображение ручки», «Ширина ручки», «Высота ручки», «Радиус ручки», «Скругление углов ручки», «Круглая ручка», «Поворот ручки»

Что уходит в программу. Ползунок присылает события slide_begin (взяли), value_changed (значение изменилось) и slide_end (отпустили) вместе со значением от 0 до 1. Поле «Отправлять команды после» выбирает, когда программа получает команды: «Отпускание» — после того, как вы отпустили ползунок, «Перетаскивание» — по ходу движения. В «Демо-зале» стоит «Отпускание», и программа реагирует на slide_end: пересчитывает долю в децибелы и отправляет команду аудиопроцессору.

Программа может и сама выставить положение ползунка: в «Демо-зале» так работают кнопки + и −, а второй фейдер подстраивается под сценарий.

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

• Ждёте от слайдера значение 0…100. Он присылает 0…1; проценты и единицы устройства программа считает сама.

• Ручка шире дорожки видна на панели целиком. Срезать её может только граница элемента, и то если ручка больше элемента поперёк движения. Делайте элемент поперёк движения (высоту горизонтального слайдера, ширину вертикального) не меньше ручки и проверяйте вид на панели, а не только на холсте.

• Значение при открытии панели — 0, пока программа не пришлёт актуальное; подпись рядом со слайдером — обычный текст и сама не обновится.

Список

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

В «Демо-зале»: Vcs_List_ls на вкладке «ВКС» — контакты и история вызовов, заголовок «Список ВКС».

Свойства списка: 1 — «Высота заголовка», 2 — «Высота элемента», 3 — «Расстояние между ключом и значением», 4 — «Толщина разделителя», 5 — «Цвет разделителя»

Свойства — раздел «Свойства списка»:

Поле	Зачем
«Отступ контента» (и «Редактировать все отступы»)	отступы строк от краёв списка
«Высота заголовка», «Цвет заголовка», «Заголовок прокручивается»	строка заголовка и её поведение при прокрутке
«Высота элемента»	высота одной строки
«Расстояние между ключом и значением»	зазор между двумя половинами строки (ключ слева, значение справа)
«Толщина разделителя», «Цвет разделителя»	линия между строками

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

Что уходит в программу. Выбор строки приходит событием item_selected, а в поле значения — ключ выбранной строки. В «Демо-зале» ключ — имя контакта: оно появляется в поле «Кому звоним», и по нему программа определяет, кому звонить.

Откуда берутся строки. В редакторе список пуст: строки присылает программа в виде [{"ключ":"значение"}, …]. В «Демо-зале» кнопки «Контакты» и «История» подставляют в один список разные строки.

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

• Список пуст на панели. Строки задаёт программа; пока она их не прислала, виден только заголовок.

• Ждёте в программе значение строки. Приходит ключ, поэтому в ключ кладите то, что программа должна получить.

Фон

Когда применять. Подложка страницы или оверлея: цвет, градиент или картинка.

В «Демо-зале»: Root_bg на странице «Основа» и по одному фону на каждом оверлее (Home_bg, Snd_bg и другие). Как создать фон и включить «Во весь экран» — в «Первом интерфейсе».

Свойства фона: 1 — «Во весь экран», 2 — «Цвет фона», 3 — «Изображение»

В разделе «Свойства фона и изображения» только у фона есть «Во весь экран». Остальные поля раздела — «Цвет фона», «Изображение» (перетащите картинку в поле) и «Размер изображения» — есть и у других элементов, например у лейбла. Текст и границу задают разделы «Свойства текста» и «Свойства границы».

Дата и время

Когда применять. Часы и календарь на панели: оператору не нужно спрашивать у программы, который час. Значение вводить не нужно: элементы сами показывают текущие дату и время.

В «Демо-зале»: часы в шапке Hdr_Clock_tm — элемент «Время». Даты в учебном примере нет.

Свойства времени (Hdr_Clock_tm): 1 — «Формат часа», 2 — «Формат минут», 3 — «Формат секунд», 4 — «12-часовой формат», 5 — «Показывать секунды»

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

Поле	Значения
«Формат часа», «Формат минут», «Формат секунд»	«Числовой» или «2-цифры»
«12-часовой формат»	по умолчанию выключен
«Показывать секунды»	по умолчанию секунды показываются; у часов «Демо-зала» они скрыты

Свойства даты: 1 — «Локаль», 2 — «Формат дня», 3 — «Формат месяца», 4 — «Формат года»

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

Поле	Значения
«Локаль»	«Русский» (по умолчанию), «Английский (США)», «Китайский (упрощённый)», «Французский», «Немецкий»
«Формат дня»	«Числовой» или «2-цифры»
«Формат месяца»	«Числовой», «2-цифры», «Полный», «Краткий», «Узкий»
«Формат года»	«Числовой» (по умолчанию) или «2-цифры»

У времени поля «Локаль» нет. Шрифт, цвет и границу настраивают общие разделы «Свойства текста» и «Свойства границы». Программе оба элемента ничего не отправляют.

Частые ошибки. Пытаетесь набрать дату или время в поле «Текст»: оба элемента показывают текущее значение сами, текст в них не вводится.

Инпут

Когда применять. Оператору нужно ввести текст: имя, номер, поиск.

В «Демо-зале» нет. Элемент показан на новом интерфейсе «Демо».

Свойства инпута: 1 — «Клавиатура», 2 — «Кнопка отправки», 3 — «Кнопка очистки значения», 4 — «Заголовок», 5 — «Отправлять символы при изменении»

Свойства — раздел «Свойства инпута»:

Поле	Зачем
«Клавиатура»	какая клавиатура связана с полем: элемент «Клавиатура» или «Нет клавиатуры»
«Кнопка отправки», «Кнопка очистки значения»	кнопка интерфейса или «Нет кнопки»
«Многострочный ввод»	разрешает несколько строк
«Показать заголовок», «Заголовок», «Цвет заголовка»	подсказка в пустом поле (цвет по умолчанию #000000)
«Отправлять символы при изменении»	отправлять символы в программу по мере ввода

Фон, картинку, текст, иконку и границу задают общие разделы.

Клавиатуру нужно создать заранее, иначе в списке будет только «Нет клавиатуры». Элемент «Клавиатура» описан ниже.

Клавиатура

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

В «Демо-зале» нет. Элемент показан на новом интерфейсе «Демо».

Свойства клавиатуры: 1 — «Базовый инпут», 2 — «Язык клавиатуры», 3 — «Вид клавиатуры», 4 — «Тип», 5 — «Появляется при», 6 — «Тип перехода»

Свойства — раздел «Свойства Клавиатуры»:

Поле	Значения
«Базовый инпут»	инпут интерфейса или «Нет инпута»
«Появляется при»	«Базовый инпут» или «Любой инпут»
«Язык клавиатуры»	«Русский» или «Английский»
«Вид клавиатуры»	«Стандартный», «Компактный», «Мобильный», «Мобильный расширённый», «Почта», «Числовой», «Телефонный набор»
«Постфикс электронной почты»	текст, который показан на клавише электронной почты (вид «Почта»)
«Отправлять символы при нажатии»	отправлять символы в программу при нажатии на клавишу
«Тип», «Тип перехода», «Длительность перехода (мс)»	показ как у фрейма: «Pop Up» или «Фрейм», «Проявление», «Нет», «Выезд сверху/снизу/слева/справа» (подробнее — в «Фрейм и Pop Up»)

Внешний вид клавиатуры собран из полей: цвет фона клавиатуры; цвета, шрифт, границы и тени кнопок; «Расстояние между кнопками», «Расстояние между строками», «Внутренний отступ клавиатуры» и «Внутренний отступ кнопки»; «Выравнивание символа»; «Цвет фона нажатой кнопки» и «Цвет текста нажатой кнопки». Поля «Перевести Shift / 123 в нажатое состояние» переключают слой клавиатуры на холсте (верхний регистр или «123»), а «Перевести кнопки в нажатое состояние» показывает все клавиши в цветах нажатой клавиши.

Спидометр

Когда применять. Круговой или дуговой индикатор значения: уровень, температура, нагрузка.

В «Демо-зале» нет. Элемент показан на новом интерфейсе «Демо».

Свойства спидометра: 1 — «Толщина», 2 — «Угол выреза», 3 — «Индикатор», 4 — «Деления», 5 — «Шаги», 6 — «Сегменты»

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

Группа	Поля
Форма	«Угол выреза» (0…360; 0 — полный круг), «Толщина», «Скруглённые концы», «Внутренний отступ»
Сегменты	«Добавить сегмент»; у каждого сегмента «Цвет» и «Размер» (в процентах от суммы), минимум один сегмент
Трек	«Цвет пустого трека», «Без пустого трека»
Индикатор	«Индикатор»: «Нет», «Стрелка» (цвет, длина, ширина, обводка, скругление, «Прямоугольная стрелка») или «Ручка» (ширина, высота, цвет, граница, скругление)
Деления	флажок «Деления»; после его включения появляются поля: количество (минимум 1), длина, толщина, цвет, удалённость от центра, скругление
Значения	«Шаги» (по умолчанию 100), «Отправлять команды после»: «Отпускание» или «Перетаскивание»

Web URL

Когда применять. Показать на панели веб-страницу или видео: камеру, регистратор, сайт. Как составить адрес для видео с камеры по RTSP — в «Просмотр RTSP-потока».

В «Демо-зале» нет. Элемент показан на новом интерфейсе «Демо».

Свойства Web URL: 1 — раздел «Свойства Web URL» с полем адреса «Web URL»

Адрес вводится в поле «Web URL» раздела «Свойства Web URL».

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

• Элемент не найден программой. Имя изменили в UI-Designer, но не в узле U-Logic: имя — это ключ (см. «Кнопки и состояния»).

• Нужного свойства не видно. Раздел без содержимого панель не показывает, а у слайдера, спидометра и Web URL нет некоторых общих разделов (фона, границы). Введите название в «Поиск свойств…».