Введение
Для отображения численных данных ранее использовался элемент Data variables, для которого формировался шрифт. Однако такой подход не позволяет использовать авторские изображения для отображения цифр. Для решения данной задачи существует элемент Artistic Variables который мы разберем в данной статье.
Прошлые статьи:
DWIN. Подготовка дисплея к работе и загрузка демо-проекта
DWIN. Знакомство с программным обеспечением DWIN Graphic Utilized Software. Hello World
DWIN. Протокол Modbus. Slave и Master режимы.
DWIN. Связываем STM32 Nucleo и дисплей.
DWIN. Элемент Real-Time Curves, чертим графики.
Для реализации проекта будет использован дисплей DMG48480F050_01WTCZ01. Обладающий IPS матрицей с разрешением 480х480, емкостной сенсорной панелью. Дисплей имеет разъем 50PIN, на котором размещены контакты питания (3.6-5.5В), порты ввода вывода процессора T5L0, порты ADC, PWM, UART, CAN и контакты для uSD карты.
Для обновления прошивки дисплея и подключение его к USB разъему компьютера используется плата HDL662S. На данной плате размещен разъем uSD карты, разъем USB и контакты выведенные с 50 контактного шлейфа.
Формирование фоновых изображений и изображений цифр
Для формирования изображений воспользуемся приложением DRAW.IO которое уже использовалось ранее.
В прошлых проектах фигурировали дисплеи и разрешением 800х480, теперь же необходимо создать поле размером 480х480.
Сделаем три поля для вывода цифр, а также две кнопки для изменения значения отображаемой переменной.
Далее необходимо создать изображения для отображения цифровых значений. Изображения будем генерировать с помощью шрифтов, но никто не мешает по аналогии добавить любые другие изображения.
После формирования, нумеруем изображения от 0 до 9 по возрастанию, каждый новый шрифт должен начинаться с значения кратного 10 т.е. с числа 10, 20, 30, 40 и начинаться с нуля.
DWIN DGUS создаём проект
Создаём папку для проекта, назовём её Artistic Variables. Открываем программу DGUS V7624, нажимаем NEW, указываем путь, где будет расположен проект.
Выбирая разрешения из выпадающего списка, замечаем что разрешение 480х480 отсутствует. При попытке вбить значение в поле руками, программа вылетает. Выбираем разрешение 800x480 или любое другое и идём в папку с проектом. Находим файл DWprj.hmi, и предварительно закрыв программу DGUS, открываем файл с помощью блокнота и изменяем строчку 5 SCREENDSIZE на необходимое разрешение 480x480, строка будет выглядеть:
SCREENDSIZE=480X480
В папку проекта переносим сформированные ранее изображения, фоновые в папку DWIN_SET (Предварительно необходимо задать правильное имя, которое должно начинаться с цифры), цифры переносим в папку ICON.
Запускаем программу DGUS V7624 и формируем ICL файлы. Для этого в программе DGUS открываем вкладку Welcome и выбираем инструмент DWIN ICL Generator.
Формируем ICL файл, для этого нажимаем выбор директории (Select Directory), и выбираем папку в которую разместили фоновые изображения, в нашем случае это папка DWIN_SET. Нажимаем кнопку сгенерировать файл ICL(Generate ICL). Сохраняем файл в папку DWIN_SET с названием 32.ICL. Если файл сгенерируется успешно появится зеленая полоса и окно с надписью Compression finished!
Далее необходимо добавить изображения для цифрового отображения. Для этого выбираем директорию ICON и генерируем файл в папку DWIN_SET с именем 40.ICL.
Теперь необходимо в проект добавить фоновые изображения. В главном окне DGUS переходим в вкладку Touch and display config, в левой стороне окна добавляем фоновые изображения нажатием на иноку +.
Добавляем поле Artistic Variables. Для этого в верхнем меню переходим на вкладку Display Control, и выбираем элемент Artistic Variables.
Размещаем окно в отведенное поле, изменяем параметры:
VP: адрес переменной, устанавливаем 5000;
Icon file: выбираем 40.icl;
Start icon: для первого поля выбираем значение 0, для второго 10, для третьего 20;
Integer digits: выставляем на 3 знака;
Initial value: устанавливаем на значение 100:
Background Transparent Mode: выставляем в режим Overlay Mode 1, в противном случае вокруг цифр может быть белый ареол.
Для изменения значения полей переходи в верхнем меню на вкладку Touch Control, и выбираем элемент Incremental adjustment. Настроим данный элемент:
Button effect: установим на отображения области поля со страницы 1, это позволит изменять фон на фон страницы 2, что позволяет изменять цвет при нажатии;
VP: адрес переменной установим на значение 5000;
Adjust method: для элемента на знаке "+" установим ++, для элемента размещенного на знаке "-" установим значение --;
Lower limit: оставляем 0;
Upper limit: устанавливаем на значение 999;
Проект готов, генерируем выходные файлы, для этого в верхнем меню переходим на вкладку File, нажимаем на кнопку Save, а после на кнопку Generate. После этого в папке проекта DWIN_SET в дополнение к файлам ICL появятся файлы:
13TouchFile.bin
14ShowFile.bin
22_Config.bin
Копируем папку DWIN_SET на uSD карту и устанавливаем карту в подключенную к дисплею плату HDL662S.
После обновления прошивки на дисплее, увидим следующую картину:
Видео версия создания проекта:
Рассмотренный в статье элемент позволяет использовать авторские шрифты для отображения цифровых значений.
Ссылка на GitHub: https://github.com/VB-Radchenko/DWIN-Project/
По вопросам закупок, технической поддержки и общим вопросам обращайтесь на электронную почту: Info_dwin@mail.ru
Сообщество VK https://vk.com/public208909284
Скидочный купон для официального магазина AliExpress - DWVLPRO
#dwin #hmi #dgus #iot #diy #сенсорная панель