UI-Designer

UI-Designer — редактор интерфейсов управления. В нём вы рисуете то, что оператор потом видит на сенсорной панели или планшете в UI-Panel (страница, на которой оператор работает с интерфейсом): страницы с кнопками, подписями, ползунками и списками. Всё собирается мышью: выбрали элемент, протянули рамку на холсте, настроили свойства справа.

Редактор отвечает только за вид и за то, что происходит на экране без программы: переключение вкладок, открытие окон, подсветку выбранной кнопки. Действия с устройствами (включить экран, выставить громкость) задаёт программа в U-Logic (редактор программы управления). Связывает их имя элемента: оно служит ID, по которому U-Logic находит кнопку, ползунок или подпись. Поэтому имена придумывайте сразу и осмысленно (см. «Первый интерфейс»).

Как включить и открыть UI-Designer, чем он защищён и сколько действует вход — в разделе «Доступ к интерфейсам» и в «Начале работы». Коротко: UI-Designer включается на странице настроек в разделе «Операции» и открывается в разделе «Открыть». По умолчанию он выключен, открывается только по HTTPS, а логин и пароль у него те же, что у страницы настроек.

Из чего состоит экран

Окно редактора делится на пять областей. Под холстом есть ещё панель «Менеджер изображений» — хранилище картинок проекта; о ней — на странице «Оформление интерфейса».

Окно UI-Designer с проектом «Демо-зал»: 1 — верхняя панель, 2 — левая панель (дерево), 3 — панель инструментов холста, 4 — холст, 5 — правая панель «Свойства»

Если в проекте ещё ничего нет, вместо холста может быть стартовый экран «Давайте начнем» с кнопками «СОЗДАТЬ ИНТЕРФЕЙС» и «МЕНЕДЖЕР ИЗОБРАЖЕНИЙ».

Верхняя панель

В верхней панели слева — выбор языка, справа — три значка и строка состояния.

Верхняя панель: 1 — язык редактора, 2 — предпросмотр, 3 — опубликовать, 4 — сохранить

1. Список языка. Показывает «Eng» или «Рус», в самом списке — «Англ» и «Рус». Переключает язык редактора; на интерфейсы, которые вы рисуете, он не влияет.

2. Предпросмотр (клавиша 1). Выключает редактирование и подгоняет масштаб под окно, выделение при этом снимается: вы видите интерфейс таким, каким он будет. Чтобы вернуться к редактированию, нажмите значок ещё раз или клавишу Esc.

3. Опубликовать (Ctrl + P). Отправляет интерфейсы в UI-Panel.

4. Сохранить (Ctrl + S). Записывает проект в UI-Designer.

У значков нет подписей: название и сочетание клавиш появляются, когда вы наводите на значок курсор.

Слева от значков, пока идёт действие и ещё 3 секунды после него, показывается состояние:

Действие	Что вы увидите
Сохранение	«Подготовка… N%», затем «Сохранение…», затем «Сохранено ✓»
Публикация	«Публикация…», затем «Опубликовано ✓»
Ошибка	«Не удалось сохранить ✕» или «Не удалось опубликовать ✕»

Через 3 секунды надпись исчезает, поэтому дождитесь «✓», прежде чем закрывать вкладку. Редактор сам сохраняет проект каждые 5 минут. Публикации это не касается.

Сохранить и опубликовать — в чём разница

Это два разных действия, и оператор увидит только результат второго.

	Сохранить	Опубликовать
Что делает	записывает проект в UI-Designer	отправляет интерфейсы в UI-Panel
Что изменится на панели	ничего	интерфейсы обновятся
Когда нужно	постоянно: после каждого заметного шага	когда правки готовы к показу оператору

«Опубликовать» отправляет на панель последнюю сохранённую версию. Несохранённые правки на панель не попадут, предупреждения об этом нет. Поэтому порядок всегда один: «Сохранить», затем «Опубликовать». «Развернуть» в U-Logic (кнопка, которая запускает правки программы в работу) после публикации нажимать не нужно: панель покажет новое при следующей загрузке страницы.

Если вы поправили кнопку, а на панели она прежняя, сначала проверьте, что вы сохранили проект и нажали именно «Опубликовать». Затем обновите страницу панели.

Предупреждение

Панель показывает интерфейсы, только если в программе U-Logic развёрнут узел UI - Panel in. Без него вы опубликуете интерфейс, а на панели будут только синие точки загрузки, без селектора и надписей. Как добавить узел — в разделе «Подготовьте U-Logic» страницы «Первый интерфейс».

Примечание

Кнопка «Скачать проект» на странице настроек отдаёт опубликованное состояние, а не последние неопубликованные правки. Чтобы резервная копия содержала всё сделанное, сначала опубликуйте проект.

Левая панель: дерево проекта

Слева — четыре кнопки и под ними дерево.

Левая панель: 1 — «Создать Интерфейс», 2 — «Создать страницу», 3 — «Создать Оверлей», 4 — «Удалить», 5 — дерево проекта

1. Создать Интерфейс — открывает окно с названием и размером нового интерфейса. Интерфейс — это один экран панели; в проекте их может быть несколько, и оператор выбирает нужный в селекторе UI-Panel.

2. Создать страницу — добавляет страницу в текущий интерфейс. Кнопка неактивна, пока интерфейса нет.

3. Создать Оверлей — добавляет оверлей. Оверлей — это отдельная «подстраница» со своим холстом; её показывает фрейм на странице (так делаются вкладки и всплывающие окна). Кнопка неактивна, пока интерфейса нет.

4. Удалить — удаляет то, что выбрано в дереве или на холсте. Неактивна, если ничего не выбрано.

5. Дерево. Верхний уровень — интерфейс, в нём ветки «Страницы» и «Оверлеи». Внутри страницы элементы разложены по группам «Клавиатуры», «Фреймы», «Передний план» и «Фон», дальше идут сами элементы и группы элементов.

В дереве двойной щелчок по имени переименовывает, перетаскивание мышью переставляет элемент. Правая кнопка по элементу (в дереве или на холсте) открывает меню с пунктами «Копировать», «Дублировать», «Удалить», «Переключить блокировку», «Переключить видимость». Когда выбран один элемент, в меню появляются ещё «Переместить на передний план», «Переместить на задний план», «Расположить выше всех» и «Расположить ниже всех». Они меняют порядок наложения.

Холст

В центре — холст: на нём вы размещаете и двигаете элементы. Над холстом написано, что открыто: «Страница : имя» или «Оверлей : имя». Над ним же — панель инструментов.

Панель инструментов холста: 1 — «Импортировать Элемент», 2 — «Создать Виджет», 3 — «Выделение (F)», 4 — масштаб, 5 — «Группировать Элементы (G)», 6 — «Показывать имена элементов»

Кнопки слева направо (названия показываются при наведении):

• «Импортировать Элемент» (Ctrl + I) — вставка элемента из JSON;

• «Конвертировать элемент» — активна, если выделен ровно один элемент типа кнопка или лейбл;

• «Создать Виджет» — открывает меню выбора элемента (ниже);

• «Выделение (F)» — обычный режим выбора мышью;

• «Приблизить (+)», «Отдалить (-)», «Исходный масштаб (0)» — масштаб холста;

• «Инструменты выравнивания» и «Инструменты распределения» — активны, когда выделено больше одного элемента;

• «Группировать Элементы (G)» и «Разгруппировать Элементы (Shift + G)»;

• «Показывать имена элементов» — рисует имена прямо на холсте, это помогает, когда элементов много;

• «Изменить название» — окно переименования.

Нажатие «Создать Виджет» открывает меню:

Меню «Создать Виджет»: 1 — «Создать Кнопку», 2 — «Создать Лейбл», 3 — «Создать Фрейм», 4 — «Создать Фон»

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

Примечание

Элемент создаётся не щелчком, а протягиванием рамки. Выберите пункт меню, затем зажмите кнопку мыши на холсте и протяните рамку нужного размера. Если просто щёлкнуть по холсту, ничего не появится.

Правая панель: свойства

Заголовок правой панели — «Свойства». Что в ней показано, зависит от выбранного в дереве или на холсте: интерфейс, страница, оверлей или элемент. Если ничего не выбрано, панель пуста.

Свойства кнопки: 1 — «Поиск свойств…», 2 — «Тип Элемента», 3 — вкладки состояний и «Применить ко всем состояниям», 4 — раздел «Основные свойства»

У выбранного элемента сверху — поле «Поиск свойств…», которое оставляет только свойства с подходящей подписью, ниже — «Тип Элемента» («Кнопка», «Лейбл» и т. д.). Остальное разложено по сворачиваемым разделам: «Основные свойства» (имя, положение, размер, поворот, «Скрыть»), «Свойства фона и изображения», «Свойства текста», «Свойства кнопки», «Свойства фрейма», «Свойства границы», «Свойства тени» и другие. Раздел, в котором для этого элемента нечего настраивать, не показывается.

У кнопки над разделами есть ряд вкладок DEFAULT, SELECTED, PRESSED, DISABLED (это четыре состояния, у каждого свой вид) и флажок «Применить ко всем состояниям». Пока он включён, любая правка внешнего вида применяется ко всем четырём состояниям сразу.

У интерфейса в «Свойствах» — «Имя», «Ширина», «Высота» и ориентация.

Имена элементов

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

Учебный проект «Демо-зал»

Чтобы показать возможности редактора на настоящем интерфейсе, во всём разделе используется один проект — «Демо-зал»: экран управления залом совещаний 1920 × 1200 в светлом оформлении. В нём шесть вкладок («Главная», «Экран», «ВКС», «Микрофоны», «Звук», «Камеры»), кнопки-переключатели, ползунки громкости, список контактов и окно подтверждения «Выключить всё».

Вкладка «Главная» проекта «Демо-зал» в UI-Designer

Готовый проект можно скачать и открыть в редакторе: архив проекта «Демо-зал». Без программы U-Logic в нём работают вкладки, окно «Выключить всё», подсветка выбранных кнопок и переключатели; команды устройствам и значения в карточках («Говорят: 4, 9», громкость) без программы не меняются. В архиве три интерфейса: «Демо-зал», «Рецепты» и «Первая программа». «Рецепты» — примеры к страницам «Сложная графика» и «Клавиатура и поле ввода», «Первая программа» — учебный пример к странице «Первая программа по шагам».

Предупреждение

«Загрузить проект» заменяет весь проект UI-Designer на контроллере целиком: все интерфейсы, которые там есть сейчас, исчезнут, останутся только интерфейсы архива («Демо-зал», «Рецепты» и «Первая программа»). После загрузки программа U-Logic перезапускается, поэтому панель и устройства на время переподключатся. Загружайте архив на учебный контроллер или заранее сохраните свой проект кнопкой «Скачать проект» (она отдаёт опубликованное состояние, поэтому сначала опубликуйте свежие правки).

Чтобы загрузить архив (оба проекта контроллера — интерфейсов и программы — и где загружается каждый, описаны на странице «Проекты: загрузить и скачать»):

1. Откройте страницу настроек и нажмите значок папки — откроется раздел «Работа с файлами».

2. Если на контроллере есть нужный вам проект, раскройте «Скачать проект».

3. Нажмите кнопку «Скачать проект» и сохраните копию.

4. Раскройте «Загрузить проект».

5. Перетащите файл demo-hall.zip в рамку «Перетащите ZIP/UIDP-файл сюда или выберите его» или нажмите на рамку и выберите файл.

6. Нажмите кнопку «Загрузить проект» (пока файл не выбран, она серая и недоступна).

Что вы увидите: справа в журнале страницы настроек появятся записи «Успешно: Проект загружен» и «Успешная загрузка проекта». Если UI-Designer был открыт, откройте его заново: в дереве слева будут интерфейсы «Демо-зал», «Рецепты» и «Первая программа». Публиковать после загрузки не нужно: интерфейс сразу появится в селекторе UI-Panel.

Чтобы собрать часть проекта самостоятельно, переходите к странице «Первый интерфейс».

• Первый интерфейс
• Кнопки и состояния
• Фрейм и Pop Up
• Справочник элементов
• Оформление интерфейса
• Сложная графика: рецепты
• Клавиатура и поле ввода
• Просмотр RTSP-потока в интерфейсе
• Горячие клавиши