Новая версия Easy HMI 0.1.0 Beta

Данная версия Easy HMI 0.1.0 Beta – это полностью переписанная с нуля программа, которая уже является полноценным инструментом для создания интерфейсов. По сути, это конструктор, позволяющий собирать интерфейсы для AT HMI дисплеев из готовых виджетов. Виджеты можно скачать на сайте в разделе "Виджеты" или создать свои собственные.

Данная версия Easy HMI 0.1.0 Beta – это полностью переписанная с нуля программа, которая уже является полноценным инструментом для создания интерфейсов.

Программа разработана без использования сторонних расширений и библиотек, за исключением модуля для работы с базами данных, в которых хранятся виджеты и проекты. Даже вспомогательные функции для работы с базами данных написаны специально для этого проекта. В предыдущих версиях Easy HMI использовалась структура для хранения данных в бинарном формате. Однако, для упрощения отладки и повышения эффективности хранения данных, было принято решение перейти к более структурированному подходу. В результате, проекты из старых версий (до Easy HMI 0.0.6 включительно) несовместимы с данной версией.

Прошивка для дисплея также полностью переработана. Теперь дисплей работает быстрее, при этом код стал компактнее, а потребление оперативной памяти снизилось. Это позволяет создавать более сложные проекты.

Что нового в Easy HMI 0.1?

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

Теперь это готовый конструктор интерфейсов с библиотекой виджетов

Начнем с интерфейса программы. Он полностью переработан и выполнен в виде многостраничного приложения.

Начнем с интерфейса программы

Навигация реализована с помощью иконок с подсказками, а меню можно развернуть, чтобы названия пунктов отображались постоянно. Также данная версия поддерживает возможность развернуть программу на весь экран, что упрощает работу с большими проектами.

Навигация реализована с помощью иконок с подсказками

Помимо улучшенного интерфейса, добавлена возможность изменять тему оформления. В планах реализовать светлую тему для программы Easy HMI, а также возможность выбора цвета основных элементов управления (сейчас они синего цвета).

Что такое виджеты?

В программе появился новый инструмент – "Виджеты". Что это такое и как создавать свои виджеты?

Виджет – это элемент интерфейса, который можно собрать из различных элементов

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

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

Другими словами, вы можете создать, например, кнопку с нужным оформлением для проекта и затем использовать её в разных местах проекта, что значительно упрощает процесс разработки. Нет необходимости создавать одинаковые элементы заново.

Созданный виджет можно сохранить

Созданный виджет можно сохранить, а также сохранить его предварительный просмотр (превью) и передать другим пользователям. Готовые виджеты можно скачать в соответствующем разделе сайта.

Отличия создания виджетов от предыдущей версии программы:

  1. Виджеты создаются в виде дерева. Должен быть родительский элемент (кнопка, фигура или линия). Текст не может быть родительским объектом.
  2. Подчиненные объекты позиционируются относительно родительского. Если сместить текст на кнопке на 10 пикселей, он смещается относительно левого верхнего угла кнопки, а не дисплея. Это позволяет легко перемещать весь виджет в проекте, достаточно изменить позицию родительского элемента.
  3. В родительском объекте могут быть другие объекты, у которых, в свою очередь, могут быть подчиненные объекты. Например, нарисовать на плашке круг и в нем написать цифру. Если сделать так, чтобы цифра была подчиненным объектом для круга, то центровать текст будет по размерам круга. И перемещая круг внутри плашки, текст будет перемещаться вместе с ним.

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

Важно! В одном виджете может быть только один основной родительский объект. Например, если вы планируете сделать виджет с двумя кнопками "+" и "-" и между ними вывести цифры, то такой виджет можно создать только на фигуре, разместив на ней нужные элементы.

Например, если вы планируете сделать виджет с двумя кнопками

В дальнейшем будет создан отдельный урок о том, как правильно создавать виджеты.

Как протестировать виджет?

Как протестировать виджет?

В программе предусмотрен эмулятор виджетов. При создании виджета вы можете посмотреть, как он будет выглядеть. Для этого нужно нажать на кнопку "Посмотреть виджет". Эмулятор имеет некоторые отличия от реального отображения на дисплее. Основное отличие – цветопередача. Все мониторы имеют разные матрицы и настройки яркости/контрастности, поэтому один и тот же виджет на разных компьютерах будет выглядеть в разных оттенках. Также на компьютере мы выбираем цвет в формате RGB888, а на дисплее он отображается в формате RGB565. Поэтому на дисплее диапазон оттенков гораздо меньше.

Также есть ограничения по линиям. У линий в эмуляторе нет скруглений краев, и могут быть небольшие визуальные неточности в расположении (в несколько пикселей).

У линий в эмуляторе нет скруглений краев

Просмотр виджета на дисплее:

  1. Подключите дисплей AT HMI к компьютеру и выберите порт подключения.
  2. Нажмите на кнопку "Подключиться". Она должна измениться на кнопку с надписью "Отключиться".
  3. Статус должен измениться на "Сопряжено". Если статус не меняется, значит вы используете дисплей со старой прошивкой, которая не поддерживает виджеты. Информацию о том, как обновить прошивку дисплея, можно найти в статье "Как обновить прошивку на AT HMI дисплеях?".
  4. Нажмите на кнопку "Синхронизировать". Через пару секунд интерфейс отобразится на дисплее.

Просмотр виджета на дисплее:

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

Очистить дисплей

Создание проекта.

Для создания нового проекта достаточно указать его название и автора. После создания проект автоматически откроется для редактирования. Он будет пустым, и в него нужно будет добавить виджеты.

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

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

Виджет можно создать самостоятельно или скачать готовый с сайта из раздела "Виджеты".

Если вы скачали виджет с сайта, то:

  1. Содержимое архива нужно поместить в папку "Мои документы/Виджеты". Если папки нет, создайте её самостоятельно. Папка "Виджеты" создастся автоматически при первом добавлении виджета.Скачайте архив с сайта.
  2. Скопируйте файлы из архива в папку "Виджеты".Распакуйте содержимое архива в папку «Мои документы/Виджеты».
  3. Затем загрузите виджет в проект. При выборе виджета программа автоматически ищет их в папке "Мои документы/Виджеты".Затем загрузите виджет в проект.
  4. После выбора виджет появится в дереве элементов.
  5. Для просмотра в эмуляторе нажмите на кнопку "Посмотреть страницу". В эмуляторе вы увидите добавленный виджет.В эмуляторе вы увидите добавленный виджет.

Для добавления виджетов на другие страницы проекта достаточно переключиться на нужную страницу и повторить описанные действия.

Работа с виджетами в проекте.

После добавления виджета в проект нужно изменить его расположение. Также часто требуется изменить текст или цвет линии.

Также часто требуется изменить текст или цвет линии.

Чтобы переместить виджет по странице проекта, выберите его родительский элемент. Он находится сразу после названия виджета. Как было описано выше, родительский элемент при перемещении перемещается вместе со всеми вложенными элементами. Поэтому, изменив координаты родительского объекта, вы сможете переместить весь виджет.

Для изменения текста или параметров линии

Для изменения текста или параметров линии нужно выбрать соответствующий вложенный элемент и изменить текст, цвет линии или другие параметры. Экспериментируйте с изменением параметров и наблюдайте за результатом в эмуляторе. После получения оптимального варианта загрузите страницу проекта на дисплей.

Просмотр страницы проекта на дисплее.

После того, как страница проекта создана и добавлены все необходимые виджеты, можно посмотреть, как она будет выглядеть на дисплее:

Как проверить, как страница проекта будет выглядеть на дисплее?

  1. Подключите дисплей AT HMI к компьютеру и выберите порт подключения.
  2. Нажмите на кнопку "Подключиться". Она должна измениться на кнопку с надписью "Отключиться".
  3. Статус должен измениться на "Сопряжено". Если статус не меняется, значит вы используете дисплей со старой прошивкой, которая не поддерживает виджеты. Информацию о том, как обновить прошивку дисплея, можно найти в статье "Как обновить прошивку на AT HMI дисплеях?".
  4. Нажмите на кнопку "Синхронизировать". Через пару секунд интерфейс отобразится на дисплее.

Важно! Загружается только текущая страница. Другие страницы загружаются отдельно аналогичным образом. Также при просмотре страницы на дисплее отрисовывается только текущая. Остальные страницы пустые, и при переходе на них они будут отображаться пустыми. Чтобы проверить все страницы проекта после их загрузки на дисплей, нажмите в программе кнопку "Обновить на дисплее".

Обновить на дисплее

Взаимодействие с внешним микроконтроллером по UART.

Принцип работы остался таким же, как и в предыдущей версии, только изменился ID элемента. Теперь он состоит из 3 цифр в шестнадцатеричной системе счисления (например, A0F). Первая цифра означает страницу, на которой расположен элемент:

  • A – Главная страница
  • 1 – Первая страница
  • 2 – Вторая страница
  • 3 – Третья страница
  • 4 – Четвертая страница
  • 5 – Пятая страница

При нажатии на кнопку на главной странице мы получим в порт следующую команду:
BtA06=1

Взаимодействие с внешним микроконтроллером по UART.

Управление элементами на дисплее по UART будет описано в следующей статье, так как там появилось гораздо больше возможностей.


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

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

Планировалось также описать, что появится в программе в ближайшее время и что будет реализовано в перспективе. Однако статья получилась достаточно объемной, поэтому об этом будет рассказано в следующий раз.

По все вопросам вы можете написать мне в соц. сетях:

Понравилась статья Обновленная версия программы Новая версия Easy HMI 0.1.0 Beta? Не забудь поделиться с друзьями в соц. сетях.


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

Спасибо за внимание!
Технологии начинаются с простого!

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

Комментарии

Ваше Имя*


Разработка проектов