Способ отображения информации в числовом виде не всегда является самым оптимальным и привычным, например, спидометр и тахометр мы чаще привыкли наблюдать в виде поворотной стрелки (аналоговый вид), также и механические часы легко воспринимаются стрелкой на циферблате. Дисплеи DWIN обладают функционалом для отображения информации в таком виде.
Прошлые статьи:
DWIN. Подготовка дисплея к работе и загрузка демо-проекта.
DWIN. Знакомство с программным обеспечением DWIN Graphic Utilized Software. Hello World.
DWIN DGUS. Unicode и русские символы.
DWIN. Связываем STM32 Nucleo и дисплей.
DWIN. Элемент Real-Time Curves, чертим графики.
DWIN DGUS. Элемент Artistic Variables. Отображаем цифры иконками.
Для реализации проекта будет использован дисплей COF серии DMG80480F070_01WTR. Обладающий TN матрицей с разрешением 800х480, резистивной сенсорной панелью, напряжением питания 5В, интерфейсом UART TTL, а также множеством GPIO. Особенностью данного дисплея является его малая толщина, всего 5.1мм. А также уменьшенное количество внешней Flash памяти.
Так как памяти в данном дисплее меньше, чем было ранее, то обратимся ещё раз к документации, в которой было описано распределение памяти для файлов дисплея:
Распределение памяти указано для 16MB FLASH и составляет 64 ячейки, а так как памяти в два раза меньше .т.е 8 MB, то и ячеек остаётся 32 с 0 по 31.
В файле закреплены ячейки памяти 0-11 под нулевой шрифт, 12,13, 14 и 22 под служебные файлы DGUS. Для нашего использования остаются ячейки 15-21, и 23-31.
DGUS проект
Сформируем два фоновых изображения, на которых разместим циферблат часов и датчик давления. Выведем поля для отображения значений переменных, которые будут управлять стрелками, а также добавим кнопки для изменения значений.
Добавим фоновые изображения в проект DGUS (файлы 23.ICL исходя из вышесказанного про распределение памяти) и получим окно без элементов следующего вида:
Определим адреса памяти, в которых будут располагаться переменные для наших значений. Для реализации необходимо три переменные: часы, минуты и показатель давления. Разместим их по адресам 2000, 2001 и 2002 соответственно. Добавим уже знакомые элементы Data variables и Incremental Adjustment для отображения числовых данных и изменения их значений.
Добавим три стрелки в виде иконок, две стрелки для часов, и одну стрелку для датчика давления и сгенерируем файл с именем 25.icl.
Далее необходимо обратиться к документации (T5L_DGUSII Application Development Guide 20210929 - пункт 7.3.5 Icon Rotation) чтобы понять, как работает элемент Icon Rotation.
Рассмотрим поля, которые имеются в данном элементе:
X, Y, W, H - уже знакомые координаты верхнего левого угла элемента и его геометрические размеры;
Name Definition - наименование элемента;
Description pionter - указатель на адрес хранения описания элемента;
Variable address - указатель на адрес хранения переменной;
Icon file - наименование файла сохранения иконок(в нашем случае 25.ICL);
Icon ID - номер иконки в фале в Icon file;
Icon rotation center - координаты центра, относительно которого будет происходить вращение элемента;
Variable value of initial rotation angle - минимальное значение переменной соответствующее начальному заданному углу;
End rotation angle variable value - максимальное значение переменной соответствующее конечному заданному углу;
Starting angle of rotation - начальный заданный угол;
End rotation angle - конечный заданный угол;
Display mode - тип прозрачности;
VP_Mode - тип переменной;
Initial value - начальное значение переменной;
Угол задаётся в 0.5 градусов на значение, т.е. на один оборот приходится не 360 градусов, а 720.
Добавим стрелку для датчика давления, и заполним поля:
Start variable - 0;
End variable - 60 (6 секторов, по 10 значений на сектор);
Start angle - 540;
End angle - 320;
Вращение происходит через точку Icon rotation center, которая отсчитывается от левого верхнего угла. Изначально установлено значение 0,0 что соответствует левому верхнему углу. Изменим значение X на 10, а Y на значение 44.
Можем наблюдать, что стрелка изменила своё расположение, и теперь сращение будет происходить через необходимую точку.
Аналогичным способом располагаем часовую и минутную стрелку для часов.
Заполняем поля для минутной стрелки:
X - 203, Y - 221;
Icon rotation center: X - 11, Y -134 ;
Start variable - 0;
End variable - 60;
Start angle - 0;
End angle - 720;
Заполняем поля для часовой стрелки:
X - 202, Y - 221;
Icon rotation center: X - 13, Y - 104;
Start variable - 0;
End variable - 12;
Start angle - 0;
End angle - 720;
Следующим элементом, который понадобится для демонстрации функций, будет элемент Rotation adjustment. Посмотрим его описание в документации(T5L_DGUSII Application Development Guide 20210929 - пункт 7.2.8 Rotation Adjustment).
Рассмотрим поля, которые данном элементе нам будут необходимы:
X, Y, W, H - координаты верхнего левого угла элемента и его геометрические размеры;
Name Definition - наименование элемента;
Variable address - указатель на адрес хранения переменной;
Center coordinates - центр координат относительно которого будет построено кольцо рабочей области.
R0 (area inner diameter) - внутренний диаметр рабочей области;
R1 (outer diameter of area) - внешний диаметр рабочей области;
A0 (starting angle) - начальное значений угла;
Corresponding return value - значение переменной для начального значения угла;
A1 (end angle) - конечный заданный угол;
Corresponding return value - значение переменной для конечного значения угла;
Заполняем поля для данного элемента:
X - 435, Y - 78, W - 308, H -273;
VP - 2002;
Center coordinare = 599,218;
R0 - 50;
R1 -150;
A0 - 540;
Return value - 0;
A1 - 320;
Return value - 60;
Финальный вид проекта должен получиться как на изображении выше.
Сохраняем проект, генерируем выходные файлы и с помощью uSD карты загружаем папку DWIN_SET на дисплей. Все элементы инкремента и декремента можно удалить и использовать стандартные команды для передачи значений с контроллера на дисплей для отображения.
Видео работы демонстрационного проекта:
Заключение
В данной статье описана работа с элементами Rotation Adjustment и Icon Rotation. Продемонстрирован пример проекта с реализацией часов и датчика давления с аналоговым представлением значений.
Ссылка на GitHub: https://github.com/VB-Radchenko/DWIN-Project/
По вопросам оптовых закупок, персональных скидок, технической поддержки и общим вопросам обращайтесь на электронную почту: Info_dwin@mail.ru
Сообщество VK https://vk.com/public208909284
Скидочный купон на 5$ для официального магазина AliExpress - DWVLPRO
#dwin #hmi #dgus #iot #diy #сенсорная панель