Урок 2. Знакомство с интерфейсом программы Easy HMI. Создание первого виджета.

В предыдущем уроке я рассказал, где можно скачать программу Easy HMI. В этом уроке мы рассмотрим интерфейс программы, создадим свой первый виджет, познакомимся с эмулятором и узнаем, как отобразить созданный виджет на дисплее.

В этом уроке мы рассмотрим следующие вопросы:

• Страница «Проект».
• Страница «Виджеты».
• Страница «Настройки».
• Создание первого виджета в Easy HMI.

Страница «Проект».

При запуске программы Easy HMI открывается страница «Проект». Это основная рабочая область программы, предназначенная для создания проектов. Поскольку проект можно формировать из готовых виджетов, эта страница позволяет создать готовый интерфейс для дисплея AT HMI без использования дополнительных инструментов.

На странице «Проект» интерфейс разбит на несколько панелей.

В верхней части страницы расположены две панели:

1. Первая панель. Предназначена для установления соединения с дисплеем.
   Подключите дисплей AT HMI к компьютеру и выберите соответствующий порт. Для появления порта в программе необходимо установить драйвер (информация об установке драйвера приведена в предыдущем уроке).
   Нажмите кнопку "Подключиться". Она должна смениться на кнопку с надписью "Отключиться".
   Статус должен измениться на "Сопряжено", что свидетельствует об успешном подключении к дисплею.
2. Вторая панель. Содержит список страниц, доступных для использования в проекте: Главная, Страница1, Страница 2, Страница 3, Страница 4, Страница 5. Важно помнить, что при загрузке дисплея всегда загружается «Главная страница». Если мы создадим интерфейс на «Странице 1», при загрузке дисплея он отображаться не будет. Конечно, можно переключаться между страницами с помощью UART команды, но об этом поговорим в одном из следующих уроков.

Рассмотрим панели, расположенные ниже. Их три:

1. Левая панель. Содержит настройки элементов, добавленных в проект. Изначально эта область пуста. Необходимо выделить элемент, после чего в ней отобразятся его настройки. При выделении самого виджета в этой области ничего не отобразится, поскольку виджет является контейнером для элементов, а не элементом сам по себе.

Ниже, в левой панели, отображается имя открытого проекта (1).

Здесь же можно создать новый проект (2) и загрузить с ПК существующий проект (3).

2. Центральная панель. Содержит древовидную структуру проекта (1). Проект состоит из виджетов (2) и вложенных в них элементов (3). Данная панель наглядно демонстрирует иерархию проекта.

Необходимо понимать, что каждый элемент в проекте имеет уникальный ID номер. Для главной страницы он начинается с шестнадцатеричного числа A. Для первой – с 1, для второй – с 2 и так далее до 5. Вторая и третья цифры в ID элемента изменяются автоматически в порядке возрастания и могут достигать максимум FF, что соответствует 255 в десятичной системе счисления.

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

3. Правая панель. Позволяет загружать виджеты в проект (1). Один и тот же виджет можно загружать в проект несколько раз.

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

Просмотр на дисплее и в эмуляторе (2):

• «Синхронизировать» — позволяет загрузить проект на дисплей для визуального контроля. При этой синхронизации на дисплей загружается только редактируемая в данный момент страница. Остальные страницы не загружаются для ускорения процесса. Для просмотра всего проекта нажмите кнопку «Обновить дисплей».
• «Просмотреть страницу» — позволяет просмотреть страницу проекта в эмуляторе.

Работа с дисплеем (3) предоставляет следующие функции:

• «Обновить на дисплее» — полностью обновляет интерфейс на дисплее. Эта функция полезна для проверки работы всего проекта, а не только отдельной страницы, как при нажатии на кнопку «Синхронизировать».
• «Очистить дисплей» — позволяет полностью очистить содержимое дисплея, включая виджеты, проекты и сбросить настройки к значениям по умолчанию.

Страница «Виджеты».

Продолжим знакомство с программой Easy HMI. Для этого перейдем на страницу «Виджеты». В верхней части страницы расположены две панели:

1. Первая панель. Предназначена для установления соединения с дисплеем.
2. Вторая панель. Содержит элементы, которые можно добавлять в виджет: кнопки, фигуры, текст, линии и т.д.

Центральная часть страницы организована аналогично странице «Проект», но с некоторыми особенностями:

1. Левая панель. Позволяет добавлять и редактировать элементы виджета. Настройки для каждого элемента отличаются.

2. Центральная панель. Предназначена для отображения древовидной структуры добавленных элементов.

3. Правая панель. Содержит инструменты для создания виджетов (1).

Работы с существующими виджетами:

«Загрузить виджет» (2) — позволяет открыть ранее созданный виджет, хранящийся на ПК.

«Синхронизировать» (3) — позволяет загрузить виджет на дисплей для визуального контроля.

«Просмотр виджета» (4) — позволяет просмотреть виджет в эмуляторе.

«Работа с дисплеем» предоставляет следующие функции:«Обновить на дисплее» (5) — полностью обновляет интерфейс, отображаемый на дисплее.«Очистить дисплей» (6) — позволяет полностью очистить содержимое дисплея, включая виджеты и проекты.

Страница «Настройки».

Страница настроек для текущей версии программы Easy HMI 0.1.1 содержит только панель «Настройки дисплея».

Здесь можно изменить ориентацию дисплея, настроить звуковые уведомления при нажатии на активные элементы на дисплее (кнопки, слайдеры и т.д.) и изменить скорость работы для UART2, который предназначен для взаимодействия с внешним микроконтроллером.

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

Примечание: Описание написано для программы Easy HMI версии 0.1.1. В последующих версиях программы могут появиться новые инструменты и настройки. С информацией о них можно ознакомиться в описании к новой версии программы Easy HMI.

Создание первого виджета в Easy HMI.

Мы ознакомились с интерфейсом программы, теперь создадим виджет. Перейдем на соответствующую вкладку и создадим новый виджет. Для этого необходимо указать «ID виджета» (уникальное число, не должно повторяться), «Название» и «Автора». Затем нажимаем кнопку «Создать», и контейнер для виджета готов.

Однако, он пока пуст, его необходимо заполнить элементами.

Для предварительного просмотра результата откроем эмулятор. Нажимаем кнопку «Посмотреть виджет». Откроется окно эмулятора.

Здесь необходимо настроить разрешение экрана, выбрав его из выпадающего списка и нажав кнопку «Применить».

При необходимости можно настроить отображение ID элементов и сетки. Для этого установите или снимите соответствующие флажки и нажмите кнопку «Обновить». После этого отображение в эмуляторе обновится с учетом изменений.

Вернемся к созданию виджета и добавим круглый элемент «Фигура». Выбираем в меню данный элемент и приступаем к его созданию, заполнив соответствующие поля.

ID и ID родителя элементов можно не указывать. Для простых виджетов программа автоматически расставит их. Подробно о назначении этих полей поговорим при создании более сложных виджетов в следующих уроках. Установим координаты левой верхней точки элемента, задав значения x = 10 и y = 10. Поскольку фигура будет круглая, ширина и высота должны быть равны. Зададим значение 90 px.

Выберем цвет градиента «Цвет 1» и «Цвет 2» и нажмем кнопку «Добавить».

В эмуляторе мы увидим квадрат со стороной 90 px. Добавим скругления больше половины длины стороны (46 px), и получим круглую фигуру. Добавим остальные параметры, как показано на рисунке ниже. Не беспокойтесь, если назначение некоторых настроек пока непонятно.

Подробно о создании плашек поговорим в следующих уроках.

Теперь добавим текст на фигуру. Для этого перейдем к добавлению элемента «Текст».

Аналогично, пропускаем ID и ID родителя. Указываем только размер текста и цвет, устанавливаем центрирование и вводим текст, например, «03». Нажимаем кнопку «Добавить».

В результате, появилась надпись по центру фигуры. Текст немного мелкий, я изменил его размер на 32 px и отключил в эмуляторе отображение ID для текста, чтобы надпись была лучше видна.

Таким образом, мы получили готовую плашку. Подключите дисплей к компьютеру и проверьте результат на дисплее, нажав кнопку «Синхронизировать». Виджет готов и может быть использован в проекте. Подробнее об этом поговорим в следующем уроке.

Важно! Easy HMI работает исключительно с дисплеями AT HMI.

Файл с созданным виджетом доступен для скачивания в конце урока.

На этом урок завершен. В следующем уроке мы создадим виджет и добавим его в проект.

Понравился Урок Знакомство с интерфейсом программы Easy HMI. Создание первого виджета? Не забудь поделиться с друзьями в соц. сетях.

А также подписаться на наш канал наYouTube, вступить в группу Вконтакте, в Telegram.

Спасибо за внимание!

Технологии начинаются с простого!

Фотографии к статье

 

 

 

 

 

Файлы для скачивания

57_Плашка круглая.zip

7 Kb

31

Скачать Вы можете скачать файл.