Начиная с версии EasyHMI 0.1.3b, появилась возможность добавлять иконки в виджет и проект. Но для добавления иконки в проект требуется изображения преобразовать и сжать, что накладывает некоторые ограничения. На данный момент я протестировал загрузку иконок до 128х128 px, но для загрузки сделал ограничение 50х50 px. Также не все иконки данного размера можно загрузить: всё зависит от исходного изображения и от того, получается ли упаковать его нормально. О чём вас предупредит программа. В более новых версиях EasyHMI данное ограничение я уберу.
Иконки хранятся в коллекции. На данный момент доступна всего одна коллекция по умолчанию — «0_default».
В дальнейшем можно будет создавать свои коллекции, чтобы делать свои шрифты для чисел, наборы иконок для анимации и пр. Функционал заложен, осталось только дописать работу с коллекциями.
Загружать желательно чёрные иконки на белом фоне в формате: PNG, JPEG, GIF, BMP. Для этого можно воспользоваться сайтом icons8.ru. Здесь много бесплатных иконок разрешением до 512х512 px и есть возможность изменить размер иконки вручную перед сохранением.
Заходим на сайт, в поиске пишем название иконки, например «Закрыть», и выставляем цвет — чёрный. Получаем набор иконок, которые можно сохранять. Выбираем понравившуюся.
Откроется окно. Здесь нажимаем «Скачать».
В сплывающем окне выбираем: PNG и необходимый размер иконки.
Мне нужно добавить иконку на кнопку размером 30х30 px, поэтому стандартный размер не подойдёт. Указываю свой размер — 26х26 — и нажимаю «Сохранить».
Открываем программу EasyHMI 0.1.3b или более новую версию и переходим на вкладку «Иконки».
Нажимаем на кнопку «Выбрать изображение». В сплывающем окне выбираем сохранённую ранее иконку и нажимаем «Открыть». Пишем название иконки «Закрыть» и нажимаем «Добавить».
Иконка появится в коллекции с ID, для текущей — 37.
Поздравляю, иконка добавлена!
Можно добавить не только одноцветные иконки, но и изображения в тёмных оттенках и с неразмытыми контурами. Например, добавим мой логотип.
Для этого подберём оптимальный размер, используя любой редактор изображений. Я использовал бесплатный Pinta.
И по аналогии добавляем изображение в коллекцию. Теперь можно добавлять логотип в проект.
Внимание! Не добавляйте иконки с размытыми краями, с фоном в виде градиента и с серыми элементами. Это может привести к «рваным» краям и появлению на иконке элементов, к которым нельзя применить изменение цвета.
Например, здесь видно, что фон не прозрачный, а серого цвета.
Инструмент «Иконки» располагается на странице управления «Виджет».
Данный инструмент включает в себя следующие параметры:
| Параметр | Описание |
|---|---|
| id | Порядковый номер текущего элемента. Создаётся автоматически при создании несложных виджетов. В виджетах со сложными зависимостями элементов, id нужно прописывать самостоятельно.
|
| id родителя | id элемента, в который вложен данный блок. Создаётся автоматически. В виджетах со сложными зависимостями id родителя нужно прописывать самостоятельно.
|
| id иконки | id элемента в коллекции иконок (указан в левой колонке). Указываем id иконки, которую нужно добавить в виджет.
|
| X, Y | Координаты расположения элемента в пикселях относительно левого верхнего угла (X — по горизонтали, Y — по вертикали). Не действуют, если выбрано «Центрировать». |
| Цвет | Установить цвет иконки для отображения на дисплее. |
| Центрировать | Позволяет центрировать иконку относительно родительского окна. Если иконку поместить на экран без родительского элемента, она будет отцентрована по центру экрана (координаты X, Y при этом не действуют). |
| Примечание | Необязательное поле. Позволяет написать примечание к элементу, которое выводится в дереве элементов, что упрощает навигацию при редактировании. |
Давайте добавим иконку, которую мы ранее поместили в коллекцию. Для этого откроем виджет «Всплывающее меню», который рассматривался в прошлом уроке.
Добавим иконку: id не меняем, id родителя — указываем id элемента, внутри которого нужно её вывести (это у нас кнопка с id = 8). Указываем id иконки в коллекции — мы помним, что это 37. Координаты X, Y не меняем, так как будем использовать центрирование. Выбираем чёрный цвет и нажимаем кнопку «Добавить». Иконка добавлена в виджет «Всплывающее меню»!
Сейчас мы можем отредактировать иконку: изменить цвет и/или ID, выбрав другую иконку. Вот что получается.
Виджет из примера можно скачать внизу страницы в разделе «Файлы для скачивания»
Я добавил иконку, у которой был серый фон при добавлении в коллекцию.
Фон полупрозрачный, и на жёлтом фоне видно, что иконка внутри более тёмного цвета. Это можно использовать для создания более интересных элементов.
На один элемент (кнопку или плашку) можно добавить несколько иконок.
Например, в данном примере используется 2 иконки: одна для смысловой нагрузки, а вторая — для фона числовой плашки. Так как иконки не блокируют сенсор на кнопке, можно использовать любое их количество (в пределах разумного, конечно).
Виджет из примера можно скачать внизу страницы в разделе «Файлы для скачивания»
Чтобы сделать виджет более динамичным, можно добавить на одну иконку другую. Например, чтобы показать, есть соединение по Wi-Fi или нет, как в примере ниже.
В целом, вложенность можно сделать более сложной, но увлекаться не стоит, так как иконка — более сложный элемент интерфейса, чем линия, фигура или текст.
Особенности добавления иконок в виджет.
Иконки в проект самостоятельно добавлять не нужно. Достаточно просто подгрузить виджет, и все иконки будут перемещены в проект.
Внимание! Иконки с одним и тем же ID будут храниться в одном экземпляре. Если вы в виджетах использовали разные иконки под одним ID, то в проекте будет храниться только одна иконка с этим ID. Это сделано для экономии памяти микроконтроллера и ускорения загрузки.
Давайте создадим проект «Тест_иконок» и добавим пару виджетов с иконками.
Для этого нажимаем на кнопку «Добавить виджет» и выбираем нужный.
Я добавил 2 кнопки с иконками и всплывающее окно. Как видим, наши элементы добавлены, и я уже изменил цвет иконок одной кнопки. Давайте изменим цвет иконки во всплывающем меню.
Как видим, мы можем внести изменения для иконки, но не можем поменять саму иконку. Это нужно делать в виджете перед добавлением в проект.
Вот так проект выглядит на дисплее.
Важно! Easy HMI предназначена в первую очередь для дисплеев AT HMI, но также поддерживает и некоторые дисплеи сторонних производителей.
Последняя версия Easy HMI и Datasheet на дисплеи AT HMI.
Поддержать проект и присоединиться к общению в нашем закрытом сообществе вы можете на Boosty.
Для добавления иконок нужно:
Несмотря на то, что процесс добавления иконок в проект может показаться немного сложным и на первый взгляд не совсем простым, на самом деле это делается буквально в несколько кликов и даёт гибкий выбор в настройках.
Понравился Урок Добавляем иконки в EasyHMI? Не забудь поделиться с друзьями в соц. сетях.
А также подписаться на наш канал на VK Видео, вступить в группу Вконтакте.
Спасибо за внимание!
Технологии начинаются с простого!
Фотографии к статье
Файлы для скачивания
 |
Тест иконок проект.zip | 16 Kb | 35 | Скачать |
|
Всплывающее меню.zip | 6 Kb | 32 | Скачать |
|
Кнопка с 3 иконками.zip | 9 Kb | 36 | Скачать |
Уроки Easy HMI для дисплеев AT HMI
1 сентября , 2025
Комментариев:0
Файлов для скачивания:3
Фото:8
Понравилась статья? Нажми
Читайте также
Мы в соц сетях
Комментарии