Введение
Отображение информации и текстовом виде не всегда является оптимальным решением, очень часто необходимо проследить динамику изменения какого-либо параметра и в таком случае гораздо удобнее отображать информацию в виде графика. В этой статье разберем как можно начертить графики на дисплее DWIN.
Прошлые статьи:
DWIN. Подготовка дисплея к работе и загрузка демо-проекта
DWIN. Знакомство с программным обеспечением DWIN Graphic Utilized Software. Hello World
DWIN. Протокол Modbus. Slave и Master режимы.
DWIN. Связываем STM32 Nucleo и дисплей.
Распределение памяти
Обратимся к ранее освещенной таблице с распределением памяти, под графики выделена область памяти объемом 32KB.
32KB памяти разделены на 8 областей, каждая из которых соответствует своему графику. Для отображения данных на графике необходимо заполнить соответствующую область значениями.
Ячейки памяти с 0x1000 по 0x4FFF отведены под графики, если графики использовать не планируется, то в данные ячейки можно записать пользовательские данные.
Указатель на описание элемента - SP
Ранее в статье DWIN. Знакомство с программным обеспечением DWIN Graphic Utilized Software. Hello World, фигурировал параметр SP - указатель описания элемента, но его не затрагивали, настало время разобраться что это, и как с ним работать.
Для каждого элемента в документации имеется описание, рассмотрим описание для необходимого нам элемента Real Time Curve:
(Все параметры которые имеют SP Address можно изменять командами из контроллера)
Также для этого элемента, в программе DGUS, имеется окно настроек:
Параметры элемента хранятся в области памяти заданной в поле SP(0x), если в поле указано FFFF, то параметрами управлять будет нельзя.
Рассмотрим все параметры отдельно:
X - Координата X левого верхнего угла;
Y - Координата Y левого верхнего угла;
W - Ширина координатного поля;
H - Высота координатного поля;
Name - название графика;
SP(0x) - указать на область памяти описания графика;
Y_Central - Координата середины графика;
VD_Central - Среднее значение диапазона отображаемых величин, если максимальное значение на графике 1000, а минимальное 0, то среднее значение будет 500. Формула для расчёта значения:
VD_Central = (Vmax+Vmin)/2;
Curve Color(0x) - цвет отображаемой кривой, задаётся двумя байтами, 5 старших бит отводится под красный цвет, 5 младших под синий, а 6 бит в середине, под зеленый цвет;
MUL_Y - коэффициент вертикального масштабирования, рассчитывается по формуле:
MUL_Y = H*256/(Vmax-Vmin), например, при высоте графика 100, и амплитуде параметра 256, получаем 100*256/256 = 100.
Data Source channel - Область памяти, в которую записаны переменные для отображения, выбирается одна из 8 областей;
Space of Axis X - Масштабирование по X, изменяется в диапазоне от 1 до 255, и показывает сколько пикселей будет между соседними точками, если значение равно 10, то между соседними точками будет 10 пикселей соответственно, и при ширине графика в 200 пикселей возможно будет отобразить 20 точек единовременно.
Curve moving direction - метод отображения, слева направо, или справа налево;
Width of Curve - Толщина линии кривой графика.
Формирование фоновых изображений
Для формирования фона я использую программу Draw.io которую можно скачать тут. Она используется для формирования диаграмм и может экспортировать их в формате png, что позволяет очень быстро создать окна для дальнейших применений.
Редактировать будем проект, который уже был разработан ранее, и добавим к нему дополнительные страницы. На первой странице добавим кнопку CURVES, для перехода на страницу с выбором графиков.
На странице выбора графиков, сделаем возможность перехода на страницы с каждым графиком отдельно и страницу со всеми графиками одновременно.
Для отдельных графиков сделаем поле отображения графика, и кнопки для масштабирования, которые будут работать изменяет параметры графика через указатель SP.
Для страницы отображения всех графиков одновременно, сделаем 8 окон небольшого размера, на этой странице у графиков указателей SP не будет, поэтому кнопки масштабирования размешать не будем.
Создание проекта DGUS
Копируем проект из статьи Hello World, и начинаем модернизацию. Первым пунктом необходимо добавить новые фоновые изображения. Страница 0 и 1 заменяются на аналогичные с новыми кнопками.
Страница 2 остаётся без изменений.
Страница 3 выбор графиков.
Страница 4 одновременное отображения 8 графиков.
Страницы 5 - 12 индивидуальные графики.
Страница 13 измененные иконки при нажатии на кнопки страниц 3-12.
Генерируем файл 32.ICL.
На странице 0, добавляем кнопку (Basic Touch Module) перехода на страницу с выбором графиков:
На странице выбора графиков добавляем кнопки переходов на страницы 4-12 с помощью Basic Touch Module, а также добавляем кнопку BACK для перехода на страницу 0.
На странице 4 добавляем 8 графиков (Real Time Curve), необходимо выбрать область памяти (Data Source channe) соответствующую названию графика. На каждом графике сделаем разные толщины кривых. Графики 3, 4 и 5 сделаем с обратным направлением заполнения, справа налево. Также добавим кнопку BACK.
Создадим элементы для страницы индивидуального графика, для этого добавим:
Кнопку BACK;
Сам график - элемент Real Time Curve, и зададим адрес описания элемента 5510 - где вторая цифра будет изменяться с изменением номера страницы, для 6 будет 5610, для 7 5710 и т.д.
Текстовое поле (с адресом 5500) в которое запишем название графика, пусть будет CURVE 0.
Два поля для параметров масштабирования и элементы инкремента/декремента для них. Масштабирование по оси X будет иметь адрес 5519 Low Byte. Масштабирование по оси Y адрес 5518.
По аналогии делаем остальные страницы с 6 по 12, не забыв изменить параметры графика, адреса указателя SP и всех элементов управления для него.
Передача данных для построения графика
Обратимся к примерам из документации T5L_DGUSII Application Development Guide V1.6 20190524.
Как видно в примере(1) пакет имеет следующий вид:
5A A5 - уже знакомые стартовые байты;
0D - количество байт в пакете в hex формате;
82 - команда на запись;
03 10 - команда на старт запись в буфер графика;
5A A5 - стартовые байты для команды записи буфера графика;
01 00 - старший байт отвечает за количество заполняемых графиков, 01 означает заполнение одного графика, младший байт не используется;
00 02 - старший байт указывает на используемый канал заполнения данных для графика, в данном случае это канал 0. Младший байт указывает количество записываемых переменных разрядностью 2 байта;
00 00 - первая переменная с значением 0;
03 E8 - вторая переменная с значением 1000.
CubeIDE создаём функцию для черчения графика в пакетном режиме и режиме добавления одной точки
Все исходники, как всегда, можно скачать на GitHub.
Функция записи переменных в область памяти графиков
Исходя из вышеописанных данных напишем функцию, которая отправляет команду для записи переменных в область памяти графика:
Функция содержит аргумент выбора канала графика, длину записываемых 16 битных переменных и указатель на массив переменных.
Дисплей позволяет отправлять пакеты данных сразу на несколько графиков, напишем функцию для использования и этого функционала, для этого понадобится добавить дополнительную структуру, которая будет использоваться в функции, в структуру входят данные о включенном канале в который будет производится запись, длинна данных для каждого канала и сами передаваемые данные. Максимальное количество передаваемых данных на один канал было ограничено 64, это параметр можно изменять, но стоит следить за тем чтобы длинна всего пакета не превышала 255.
После того как структура объявлена приступаем к написанию функции. Первое что нужно сделать это проверить количество заполняемых графиков и не превышает ли длинна массива максимально допустимое значение, если проверка прошла, то на основе функции написанной для записи данных для одного графика, составляем функцию с заполнение произвольного количества графиков:
Для корректной работы с дисплеем, необходимо отправлять каждую последующую команду, после того как пришел ответ от дисплея, иначе команда может быть пропущена. Добавим такую функцию:
Объявляем функции в заголовочном файле:
Функции заполнения графиков
Добавим функции в файле DWIN_APP.c, первая функция - заполнение графика под номером 0, по одному значению от 0 до 180:
Вторая функция - заполнение всех графиков данными по одному значению в каждый, графики 0 и 3 заполняются инкрементирующим значением от 0 до 180, графики 1 и 4 функцией синуса, 2 и 5 функцией косинуса, 6 и 7 прямоугольным сигналом:
Третья функция аналогична второй, но за каждый вызов функции будет заполняться по 10 значений для каждого графика, т.е. отправляться будет 80 значений за один раз:
Объявим функции в заголовочном файле DWIN_APP.h:
В проекте ранее был добавлен таймер, запустим его и добавим счетчик в прерывание:
Таймер запущен с делителем 65 536, что при частоте тактирования 16 МГц даёт работу прерываний с частотой 244 Гц, или срабатывание раз в 4мс.
Добавим в главный цикл обнуление счетчика при достижении значения 25. При добавлении в данное условие функции, она будет срабатывать с частотой в 10 Гц или раз в 0.1 сек.
Проверка проекта
Загрузим проект DGUS на дисплей.
Во время отладки будем изменять функции отображения графиков, для этого меняем по очереди все три функции.
Первой будет функция curveOneProcessDWIN();
На дисплее должна отобразиться следующая картинка:
Только на графике 0 изменяется картинка, остальные графики не получают данных, поэтому их поля пусты.
Добавим функцию curveProcessDWIN();
Отображаемые графики для неё:
Все графики заполнены, первая и третья строка графиков идёт слева направо, вторая строка идёт справа налево.
Протестируем код функции curveProcessX10DWIN():
График данной функции отличается прямоугольным сигналом, его частота увеличилась в 10 раз, скорость обновления графиков также увеличивается:
Заключение
В данной статье описана работа с графиками. Продемонстрирован пример реализации функций записи данных в один график, пример записи в несколько графиков и пример пакетного заполнения значений графика.
Ссылка на GitHub: https://github.com/VB-Radchenko/DWIN-Project/
По вопросам закупок, технической поддержкой и общим вопросам обращайтесь на электронную почту: Info_dwin@mail.ru
Скидочный купон для официального магазина AliExpress - DWVLPRO
#dwin #hmi #dgus #iot #diy #сенсорная панель