Данная версия Easy HMI 0.1.0 Beta – это полностью переписанная с нуля программа, которая уже является полноценным инструментом для создания интерфейсов. По сути, это конструктор, позволяющий собирать интерфейсы для AT HMI дисплеев из готовых виджетов. Виджеты можно скачать на сайте в разделе "Виджеты" или создать свои собственные.
Программа разработана без использования сторонних расширений и библиотек, за исключением модуля для работы с базами данных, в которых хранятся виджеты и проекты. Даже вспомогательные функции для работы с базами данных написаны специально для этого проекта. В предыдущих версиях Easy HMI использовалась структура для хранения данных в бинарном формате. Однако, для упрощения отладки и повышения эффективности хранения данных, было принято решение перейти к более структурированному подходу. В результате, проекты из старых версий (до Easy HMI 0.0.6 включительно) несовместимы с данной версией.
Прошивка для дисплея также полностью переработана. Теперь дисплей работает быстрее, при этом код стал компактнее, а потребление оперативной памяти снизилось. Это позволяет создавать более сложные проекты.
Последняя версия Easy HMI и Datasheet на дисплеи AT HMI.
Концепция программы кардинально изменилась. Теперь это готовый конструктор интерфейсов с библиотекой виджетов, которая будет постоянно пополняться. Это принципиальное отличие от предыдущей версии и от всех других HMI дисплеев на рынке.
Начнем с интерфейса программы. Он полностью переработан и выполнен в виде многостраничного приложения.
Навигация реализована с помощью иконок с подсказками, а меню можно развернуть, чтобы названия пунктов отображались постоянно. Также данная версия поддерживает возможность развернуть программу на весь экран, что упрощает работу с большими проектами.
Помимо улучшенного интерфейса, добавлена возможность изменять тему оформления. В планах реализовать светлую тему для программы Easy HMI, а также возможность выбора цвета основных элементов управления (сейчас они синего цвета).
В программе появился новый инструмент – "Виджеты". Что это такое и как создавать свои виджеты?
Виджет – это элемент интерфейса, который можно собрать из различных элементов (кнопки, текст, фигуры, линии) и получить самостоятельный компонент, который можно использовать в проекте неограниченное количество раз с минимальными правками.
Другими словами, вы можете создать, например, кнопку с нужным оформлением для проекта и затем использовать её в разных местах проекта, что значительно упрощает процесс разработки. Нет необходимости создавать одинаковые элементы заново.
Созданный виджет можно сохранить, а также сохранить его предварительный просмотр (превью) и передать другим пользователям. Готовые виджеты можно скачать в соответствующем разделе сайта.
Важно! В одном виджете может быть только один основной родительский объект. Например, если вы планируете сделать виджет с двумя кнопками "+" и "-" и между ними вывести цифры, то такой виджет можно создать только на фигуре, разместив на ней нужные элементы.
В дальнейшем будет создан отдельный урок о том, как правильно создавать виджеты.
В программе предусмотрен эмулятор виджетов. При создании виджета вы можете посмотреть, как он будет выглядеть. Для этого нужно нажать на кнопку "Посмотреть виджет". Эмулятор имеет некоторые отличия от реального отображения на дисплее. Основное отличие – цветопередача. Все мониторы имеют разные матрицы и настройки яркости/контрастности, поэтому один и тот же виджет на разных компьютерах будет выглядеть в разных оттенках. Также на компьютере мы выбираем цвет в формате RGB888, а на дисплее он отображается в формате RGB565. Поэтому на дисплее диапазон оттенков гораздо меньше.
Также есть ограничения по линиям. У линий в эмуляторе нет скруглений краев, и могут быть небольшие визуальные неточности в расположении (в несколько пикселей).
Если вы параллельно тестируете проект на дисплее, просмотр виджета никак не повлияет на него. Однако перед финальной загрузкой проекта на дисплей желательно полностью очистить дисплей, нажав на кнопку "Очистить дисплей".
Для создания нового проекта достаточно указать его название и автора. После создания проект автоматически откроется для редактирования. Он будет пустым, и в него нужно будет добавить виджеты.
Виджет можно создать самостоятельно или скачать готовый с сайта из раздела "Виджеты".
Если вы скачали виджет с сайта, то:
Для добавления виджетов на другие страницы проекта достаточно переключиться на нужную страницу и повторить описанные действия.
После добавления виджета в проект нужно изменить его расположение. Также часто требуется изменить текст или цвет линии.
Чтобы переместить виджет по странице проекта, выберите его родительский элемент. Он находится сразу после названия виджета. Как было описано выше, родительский элемент при перемещении перемещается вместе со всеми вложенными элементами. Поэтому, изменив координаты родительского объекта, вы сможете переместить весь виджет.
Для изменения текста или параметров линии нужно выбрать соответствующий вложенный элемент и изменить текст, цвет линии или другие параметры. Экспериментируйте с изменением параметров и наблюдайте за результатом в эмуляторе. После получения оптимального варианта загрузите страницу проекта на дисплей.
После того, как страница проекта создана и добавлены все необходимые виджеты, можно посмотреть, как она будет выглядеть на дисплее:
Важно! Загружается только текущая страница. Другие страницы загружаются отдельно аналогичным образом. Также при просмотре страницы на дисплее отрисовывается только текущая. Остальные страницы пустые, и при переходе на них они будут отображаться пустыми. Чтобы проверить все страницы проекта после их загрузки на дисплей, нажмите в программе кнопку "Обновить на дисплее".
Принцип работы остался таким же, как и в предыдущей версии, только изменился ID элемента. Теперь он состоит из 3 цифр в шестнадцатеричной системе счисления (например, A0F). Первая цифра означает страницу, на которой расположен элемент:
При нажатии на кнопку на главной странице мы получим в порт следующую команду:BtA06=1
Управление элементами на дисплее по UART будет описано в следующей статье, так как там появилось гораздо больше возможностей.
Важно! Easy HMI работает исключительно с дисплеями AT HMI.
В настоящее время ведется разработка конструкторов, которые позволят создавать готовые устройства с AT HMI дисплеями без написания кода. О том, какие конструкторы будут реализованы, можно узнать тут.
Планировалось также описать, что появится в программе в ближайшее время и что будет реализовано в перспективе. Однако статья получилась достаточно объемной, поэтому об этом будет рассказано в следующий раз.
По все вопросам вы можете написать мне в соц. сетях:
Понравилась статья Обновленная версия программы Новая версия Easy HMI 0.1.0 Beta? Не забудь поделиться с друзьями в соц. сетях.
А также подписаться на наш канал на YouTube, вступить в группу Вконтакте, в Telegram.
Спасибо за внимание!
Технологии начинаются с простого!
Фотографии к статье
Виджеты для Easy HMI
Читайте также
Мы в соц сетях
Комментарии