Первый проект по шагам

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

Каждый проект на контроллере состоит из двух частей:

  • интерфейс — то, что видит оператор: страницы и кнопки. Его рисуют в UI-Designer (редактор интерфейсов), показывает UI-Panel (страница, на которой оператор работает с интерфейсом);

  • программа — то, что происходит по нажатию: команды устройствам, переходы, надписи. Её собирают в U-Logic (редактор программы управления).

Сам интерфейс умеет немногое: переходить по ссылкам между страницами и подсвечивать нажатую кнопку в группе. Команды устройствам и надписи по их ответам — дело программы. Интерфейс присылает ей события («нажали кнопку»), а она решает, что сделать, и может поменять вид интерфейса.

Что нужно

  • Контроллер UVATRON в одной сети с компьютером и браузер на компьютере.

  • Два файла учебного проекта:

    • demo-hall.zip — интерфейсы «Демо-зал», «Рецепты» и «Первая программа»;

    • demo-hall-project.zip — программа: вкладки (рабочие листы программы) «Демо-зал» и «Первая программа» и четыре драйвера (описания протоколов устройств).

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

Оба файла загружаются через «Загрузить проект», и он заменяет проект на контроллере целиком. Используйте учебный контроллер или сначала скачайте свои проекты кнопками «Скачать проект»: об этом напоминают шаги 2 и 3 ниже.

Шаг 1. Войдите на страницу настроек

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

_images/login.png

Форма входа: 1 — поле «Логин», 2 — поле «Пароль», 3 — кнопка «Авторизоваться»

Что вы увидите: страницу настроек с разделами «Открыть», «Настроить», «Операции» и значками слева.

_images/main-full.png

Главная страница: 1 — левая колонка значков, 2 — заголовок «Панель управления» и разделы под ним, 3 — журнал (на снимке закрашен)

Шаг 2. Загрузите интерфейсы

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

  2. Если на контроллере есть свои интерфейсы, раскройте «Скачать проект» и сохраните копию.

  3. Раскройте «Загрузить проект», перетащите в рамку файл demo-hall.zip и нажмите кнопку «Загрузить проект».

_images/files-menu.png

Страница «Работа с файлами»: 1 — «Скачать проект», 2 — «Загрузить проект», 3 — «Объединить проект», 4 — «Загрузить прошивку»

Что вы увидите: в журнале справа — «Успешно: Проект загружен». Подробнее, с картинкой, — в разделе Загрузить проект интерфейсов.

Шаг 3. Загрузите программу

  1. На странице настроек в разделе «Открыть» нажмите «Открыть U-Logic».

  2. Откройте меню справа сверху → «Вид» → «Редактор драйверов».

  3. Если на контроллере есть своя программа, нажмите «Скачать проект» и сохраните копию.

  4. Нажмите «Загрузить проект» и выберите файл demo-hall-project.zip.

  5. Дождитесь сообщения «Проект успешно загружен, перезагрузите страницу» и обновите страницу U-Logic.

_images/dd-menu.png

Меню U-Logic: 1 — «Вид», 2 — «Редактор драйверов»

_images/dd-project-buttons.png

«Редактор драйверов»: 1 — «Режим», 2 — «Драйвер», 3 — «Скачать проект», 4 — «Загрузить проект»

Что вы увидите: в U-Logic две вкладки — «Демо-зал» и «Первая программа». Подробнее, с картинками, — в разделе Загрузить проект программы.

Адреса устройств в программе — заглушки, поэтому узлы устройств (блоки программы) будут пытаться подключиться и показывать «Отключено». Для этого урока устройства не нужны.

Шаг 4. Откройте интерфейс на панели

  1. Вернитесь на страницу настроек и в разделе «Открыть» нажмите «Открыть UI-Panel». Можно открыть её и на планшете: адрес http://<IP контроллера>:5001.

  2. В селекторе «Интерфейсы» слева выберите «Первая программа».

_images/selector-and-area.png

UI-Panel с выбранным интерфейсом «Демо-зал»: 1 — селектор «Интерфейсы» (вам нужен «Первая программа»), 2 — кнопка скрытия селектора, 3 — название интерфейса, 4 — кнопка режима без селектора, 5 — область интерфейса

Что вы увидите: главную страницу интерфейса «Первая программа» с четырьмя секциями. Если вместо интерфейса пусто или просят пароль — см. страницу «UI-Panel».

_images/fp-panel.png

Интерфейс «Первая программа» на панели: 1 — секция «Наглядно» (кнопки HDMI 1–3 и подпись «Экран»), 2 — секция «Компактно» (кнопки HDMI 1–3 и подпись «Экран председателя»), 3 — две кнопки-переключателя микрофона, 4 — кнопка «Открыть подсказку»

Шаг 5. Нажмите кнопку — ответит программа

  1. В секции «Переход» нажмите «Открыть подсказку».

  2. На открывшейся странице нажмите «Закрыть».

Что вы увидите: по нажатию «Открыть подсказку» вместо главной страницы открылась страница «Подсказка» с надписью «Эту страницу открыла программа», а «Закрыть» вернула главную.

_images/fp-help-page.png

Страница «Подсказка», которую открывает программа: 1 — надпись «Эту страницу открыла программа», 2 — кнопка «Закрыть» (ссылка на главную страницу, сделана в UI-Designer)

Здесь работают обе части проекта:

  • «Открыть подсказку» — обычная кнопка без ссылки. Страницу открыла программа: она получила событие о нажатии Fp_Open_b и отправила на панель команду открыть страницу «Подсказка». Если программы на контроллере нет, кнопка ничего не сделает.

  • «Закрыть» — кнопка со ссылкой на главную страницу, настроенной в UI-Designer. Её обрабатывает сам интерфейс, программа для этого не нужна.

Кнопки «HDMI 1»–«HDMI 3» в секции «Наглядно» подсвечиваются при нажатии сами: так работает группа «Interlock» в интерфейсе. Подпись «Экран» рядом меняет программа по ответу матрицы, поэтому без матрицы там остаётся «—».

Шаг 6. Посмотрите, как это устроено

  1. В U-Logic откройте вкладку «Первая программа» и найдите блок перехода: цепочку UI - Panel in → ui - switch «Открыть подсказку» → api - helper - 2 «Перейти: Подсказка» → UI - Panel out.

_images/fp-g-navigation.png

Окно узла api - helper - 2 «Перейти: Подсказка»: 1 — «Интерфейс (UI)», 2 — «Тип сообщения» navigation, 3 — «Страница:» «Подсказка»

  1. Включите UI-Designer: на странице настроек в разделе «Операции» выберите «UI-Designer» и нажмите «Включить UI-Designer» (по умолчанию он выключен). Затем в разделе «Открыть» нажмите «Открыть UI-Designer».

  2. Выберите интерфейс «Первая программа» и нажмите на кнопку «Открыть подсказку». В правой панели, в «Основные свойства», поле «Имя» — Fp_Open_b: по этому имени программа и узнала кнопку.

  3. Закончив, выключите UI-Designer: «Операции» → «UI-Designer» → «Выключить UI-Designer» (зачем — в разделе «Когда выключать UI-Designer» страницы «Доступ к интерфейсам»). Интерфейсы на панели продолжат работать.

Имя элемента в UI-Designer — это его ID. Программа находит элементы только по именам, поэтому имя должно совпадать буква в букву. Как устроена цепочка блока G — в разделе «Блок G. Переход из программы» страницы «Первая программа по шагам».

Что дальше

Вы хотите

Куда идти

Пройти обучение по порядку, от простого к сложному

«Учебный путь»

Разобрать остальные блоки учебной программы: команда устройству, ответ, надписи, ползунок, список

«Первая программа по шагам»

Нарисовать свой интерфейс

«Первый интерфейс»

Понять, какие события присылает панель и как программа меняет её вид

«Связь интерфейса с программой»

Подключить своё устройство и отправить ему команду

«Узлы Dynamic Driver», раздел «По шагам»

Написать драйвер для устройства

«Dynamic Driver: драйверы устройств»

Перенести свой проект на другой контроллер

«Проекты: загрузить и скачать»