Сегодня в уроке рассмотрим создание фигур, иногда я их называю плашками. Если в тексте урока встретится слово «плашки», знайте, что я имею в виду инструмент «Фигуры» в меню элементов в разделе «Виджеты».
Несмотря на то, что фигуры являются пассивным элементом, то есть не выполняют никаких действий при нажатии на сенсор в отличие от кнопок, они являются одним из основных элементов. Фигуры можно использовать в крайне неочевидном ключе. Например, для того чтобы скрыть часть интерфейса или сделать всплывающее окно. Да даже просто сделать декор для кнопки, но тут есть свои ограничения, о чем расскажу в данном уроке.
Инструмент «Фигуры» располагается на странице управления «Виджет». Данный инструмент включает в себя:
| Параметр | Описание |
|---|---|
| id | Порядковый номер текущего элемента. (Создается автоматически при создании несложных виджетов. В виджетах, где есть сложные зависимости элементов, id нужно прописывать самостоятельно). |
| id родителя | ID элемента, в который вложен данный блок. (Создается автоматически при создании несложных виджетов. В виджетах, где есть сложные зависимости элементов, id родителя нужно прописывать самостоятельно). |
| X, Y | Координаты в пикселях расположения элемента относительно левого верхнего угла: по горизонтали — X, по вертикали — Y (не действуют, если выбрано «Центрировать»). |
| Ширина | Ширина фигуры в пикселях. |
| Высота | Высота фигуры в пикселях. |
| Радиус скругления | Скругление углов фигуры. (Для создания круглого объекта нужно создать квадратный объект и задать скругление больше половины или равное половине длины стороны). |
| Цвет1 - градиент и Цвет2 - градиент | Первый и второй цвет градиента заполнения фигуры. (Выберите одинаковый цвет, если фигура должна быть одного цвета без градиента). Примечание: Обратите внимание, что некоторые дисплеи не очень качественно поддерживают переход из одного цвета в другой, и могут быть видны полоски вместо красивого перехода. |
| Направление градиента | Отвечает за направление градиента и может быть: • Горизонт. — горизонтальный градиент. • Вертикально — вертикальный градиент. |
| Обводка | Ширина обводки фигуры в пикселях. Если 0, то обводки нет. |
| Цвет обводки | Выбор цвета обводки (неприменимо, если обводка выставлена в 0). |
| Центрировать | Позволяет центрировать фигуру относительно родительского окна. Если фигуру поместить на экран без родительского элемента в виде другой фигуры, то данная фигура автоматически будет отцентрована по центру экрана. (При выборе центрирования значения координат X, Y не действуют). |
| Примечание | Это необязательное поле позволяет написать примечание к элементу, которое выводится в дереве элементов, что позволяет проще ориентироваться при редактировании и/или удалении элементов. |
Чтобы задать фон для дисплеев под управлением EasyHMI с использованием инструмента «Фигуры», достаточно создать прямоугольник по разрешению дисплея. Например, 320х240 px или 480х320 px для горизонтального расположения дисплея и 240х320 px или 320х480 px соответственно, задав цвет с градиентом или без.
Также можно создать сложный фон, например, поверх прямоугольника фона наложить еще прямоугольники и тем самым разделить интерфейс на группы. Также можно на фон добавлять линии, иконки и даже текст. Можно создать очень интересные фоны. Все зависит от вашей фантазии.
Отступление от темы: На данный момент разрабатывается вывод фона в виде изображений. Но это будет совсем другой инструмент.
Для создания заголовка страницы достаточно создать фигуру прямоугольной формы со скруглением углов или без, с обводкой или без обводки. И для декорирования добавить на фигуру иконку, текст, линии и другие фигуры. Все зависит от вашей фантазии.
Пример заголовка страницы:
Для декорирования кнопки фигурами достаточно добавить в нужном месте фигуру, как в примере ниже.
Важно! Нужно помнить, что на кнопку нельзя размещать элементы большего размера, блокирующие сенсор, иначе активная область сенсора закроется неактивным элементом — плашкой, и кнопка будет работать нестабильно.
Да, плашка может перекрыть кнопку, и она не будет работать. Это можно использовать для блокировки кнопок и создания всплывающих панелей со своим набором кнопок, о чем расскажу ниже.
Чем заменить фигуру при декорировании кнопки? Для этих целей отлично подойдут линии, текст и иконки. Они не блокируют активную область у кнопки.
Для создания всплывающего меню достаточно на фигуру добавить нужные кнопки и прочие элементы. После этого разместить в проекте созданный виджет с координатами больше, чем высота или ширина дисплея. Таким образом, окно будет храниться за пределами видимой области. При необходимости нужно менять координаты фигуры, чтобы она появилась на экране. После выполнения нужных манипуляций со всплывающим меню его снова можно скрыть. Для этого можно добавить кнопку закрытия окна, как показано на примере ниже.
Важно! Виджет со всплывающим меню должен располагаться последним в проекте, чтобы он был на переднем плане и располагался поверх всех элементов проекта.
Пример создания всплывающего окна:
Важно! Easy HMI предназначена в первую очередь для дисплеев AT HMI, но также поддерживает и некоторые дисплеи сторонних производителей.
Последняя версия Easy HMI и Datasheet на дисплеи AT HMI.
Поддержать проект и присоединиться к общению в нашем закрытом сообществе вы можете на Boosty.
Фигура является одним из самых функциональных элементов и может выполнять не только декорирование, но и нести функциональную нагрузку в проекте.
Понравился Урок Осваиваем инструмент "Фигуры" в Easy HMI – От декора до функционала? Не забудь поделиться с друзьями в соц. сетях.
А также подписаться на наш канал на VK Видео, вступить в группу Вконтакте.
Спасибо за внимание!
Технологии начинаются с простого!
Фотографии к статье
Файлы для скачивания
 |
Всплывающее меню.zip | 6 Kb | 39 | Скачать |
Уроки Easy HMI для дисплеев AT HMI
27 августа , 2025
Комментариев:0
Файлов для скачивания:1
Фото:7
Понравилась статья? Нажми
Читайте также
Мы в соц сетях
Комментарии