Урок 3. Создаем виджет Кнопка в Easy HMI.

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

Инструмент “Кнопка” в Easy HMI.

Инструмент «Кнопка» располагается на странице управления "Виджет".

Данный инструмент включает в себя:

• id - порядковый номер текущего элемента (создается автоматически и при создании несложных виджетов).
• id родителя — id элемента, в который вложен данный блок (создается автоматически и при создании несложных виджетов).
• X, Y – координаты в пикселях расположения элемента относительно левого верхнего угла: по горизонтали - X, по вертикали - Y (не действуют, если выбрано «Центрировать»).
• Ширина — ширина кнопки в пикселях.
• Высота — высота кнопки в пикселях.
• Радиус скругления — скругление углов кнопки (для создания круглого объекта нужно создать квадратный объект и задать скругление больше половины или равное половине длины стороны).
• Цвет1 - градиент и Цвет2 - градиент - первоначальный и второй цвет градиента заполнения кнопки (выберите одинаковый цвет, если кнопка должна быть одного цвета без градиента).
  • Примечание: Обратите внимание на тот факт, что некоторые дисплеи не очень качественно поддерживают переход из одного цвета в другой, и могут быть полоски вместо красивого перехода.
• Цвет1 актив. - градиент и Цвет2 актив. - градиент — цвета при нажатом состоянии кнопки или в активном состоянии у кнопки с фиксацией (выберите одинаковый цвет, если кнопка должна быть одного цвета при нажатии).
• Направление градиента — отвечает за направление градиента и может быть:
  • Горизонт. - горизонтальное изменение цвета в активном и пассивном состоянии кнопки.
  • Вертикально — вертикальное изменение цвета в активном и пассивном состоянии кнопки.
  • Смешано 1 — при пассивном состоянии градиент горизонтальный, а при активном - вертикальный.
  • Смешано 2 — при пассивном состоянии градиент вертикальный, а при активном - горизонтальный.
  • Примечание: При смешанных градиентах (1, 2) можно использовать одни цвета при активном и пассивном состоянии, и при нажатии создается эффект перетекания цвета из горизонтали в вертикальное состояние и наоборот, в зависимости от выбранного режима.
• Обводка — ширина обводки кнопки в пикселях. Если 0, то обводки нет.
• Цвет обводки — выбор цвета обводки (не применимо, если обводка выставлена 0).
• Анимация по X и Анимация по Y - изменения ширины или высоты кнопки в пикселях при нажатии на кнопку (эффект увеличения кнопки при нажатии; при значении 0 эффекта нет).
• С фиксацией:
  • Нет — кнопка при отпускании не фиксируется (обычная кнопка).
  • Да — кнопка фиксируется при нажатии и не возвращается в предыдущее состояние при отпускании (кнопка ведет себя как переключатель или кнопка с фиксацией).
• Центрировать — позволяет центровать кнопку относительно родительского окна. Если кнопку поместить на экран без родительского элемента в виде плашки, то кнопка автоматически будет центрована по центру экрана (при выборе центрирования значение координат X, Y не действуют).
• Заблокирована кнопка — позволяет заблокировать кнопку, и на неё нельзя нажать (разблокировать кнопку можно командой, отправленной по UART).
• Примечание — это необязательное поле, позволяет написать примечание к элементу, которое выводится в дереве элементов, что позволяет проще ориентироваться при редактировании и/или удалении элементов.

Создание виджета «Кнопка».

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

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

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

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

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

Сейчас пришло время добавить кнопку в наш виджет. На вкладке "Кнопка" указываем x = 10 и y = 10. Ширина = 120, Высота = 40. Цвет1 - градиент и Цвет2 — градиент выберем серый. Цвет1 актив. - градиент и Цвет2 актив. - градиент выберем более темный серый цвет.

Направление градиента: горизонтальный. Обводку сделаем черного цвета и 1 пиксель. Анимацию по оси X сделаем 2 пикселя.

Остальные параметры оставим без изменения и нажимаем кнопку «Добавить».

В наш виджет добавлена кнопка с id = 2. Данную кнопку можно увидеть в эмуляторе. Сейчас можно подключить дисплей и посмотреть, как кнопка выглядит на дисплее и как она срабатывает.

Как видим, при нажатии кнопка меняет цвет и немного увеличивается по оси X. Все работает, как настроили в программе.

Но чего-то не хватает! Кнопка не может быть без текста или иконки. Добавить текст - это самое простое. Давайте это и сделаем!

Перейдем на вкладку «Текст» и тут выберем: цвет - черный, размер текста - 20 px, центрирование - и напишем текст: "Кнопка". Нажмем кнопку «Добавить».

На нашей кнопке появился текст. Давайте посмотрим, как кнопка будет выглядеть на дисплее.

Отлично, кнопка создана, и теперь можно добавить её в проект.

Добавление кнопки в проект.

Переходим на вкладку «Проект», тут нужно создать наш проект, назовем его «Тест Кнопки» и укажем автора «Arduino-tex.ru».

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

В проекте появится данный виджет. Давайте посмотрим, как виджет отображается в эмуляторе.

Как видим, всё точно так же, как при создании виджета.

Для того чтобы изменить положение кнопки, нужно выбрать родительский элемент, в нашем случае это сама кнопка, и изменить координаты, например, переместить её ниже, укажем Y = 120. И добавим второй виджет.

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

Для того чтобы изменить текст на кнопке, выбираем текст в нужном виджете и меняем его, например, на «Свет» и нажимаем кнопку «Обновить». И текст на текущей кнопке поменяется.

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

Данные кнопки уже активны, отправляют команды для управления по UART. Кроме того, можно изменить свойство кнопок в проекте. Например, изменим у одной кнопки свойство на "заблокирована", а вторую сделаем с фиксацией, и получим вот такой результат.

Заключение.

Создавать проекты, используя готовые виджеты, достаточно быстро и просто. В следующих уроках рассмотрим подробнее, как работать с кнопками. Научимся управлять GPIO дисплея, отправлять и получать данные по UART. А также сделаем кнопку более красивой и добавим декорирующие элементы на кнопку.

Важно! Easy HMI предназначена в первую очередь для дисплеев AT HMI, но также поддерживает и некоторые дисплеи сторонних производителей.

Последняя версия Easy HMI и Datasheet на дисплеи AT HMI.

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

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

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

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

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

 

 

 

 

 

 

 

 

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

	Виджет урок 3.zip	4 Kb	41	Скачать Вы можете скачать файл.
	Проект урок 3.zip	9 Kb	38	Скачать Вы можете скачать файл.