Интерфейсу какой программы соответствует данное изображение

В данной статье поработаем с программным обеспечение DGUS (DWIN Graphic Utilized Software). Познакомимся с некоторыми элементами программы, ознакомимся с протоколом передачи данных с дисплея и создадим первый проект «HELLO WORLD».

Прошлые статьи:

Продолжаем работать с дисплеем DMG80480Y070_01NR с TN матрицей, разрешением экрана 800 на 480 точек и резистивной сенсорной панелью.

Дисплей DMG80480Y070_01NR вид спереди

Далее рассмотрим программу DGUS (сокращение от DWIN Graphic Utilized Software) и основные формируемые файлы для работы. Ниже представлена краткая диаграмма разработки ПО.

С системой на кристалле T5L можно работать напрямую, программируя ядро, например, через Keil и с помощью программы DGUS через визуальный интерфейс. В программу DGUS загружаются изображения, иконки, аудиофайлы, шрифты. Далее при работе формируются взаимодействия элементов дисплея, элементов сенсорной панели, размечается область памяти для переменных. После загрузки файлов на дисплей происходит взаимодействие через графический интерфейс и через асинхронный порт UART (TTL/RS232/RS485).

Введение в интерфейс программы CorelDRAW. Полезные инструменты.

Диаграмма разработки ПО

Для того чтобы понять как работать с программой напишем «Hello World». В него будет включена работа с переменными, элементами управления, формированием клавиатуры для ввода цифр, приемом и отправкой данных через UART на компьютер и выводом полученной информации на дисплее.

Для начала необходимо скачать саму программу DGUS, сделать это можно по ссылке на GitHub , далее во всех статьях будет по умолчанию использоваться расположение программы и проекта в директории «D:DWINDWIN-Project» программа DGUS будет располагаться по пути «D:DWINDWIN-ProjectDGUS_V7624».

Необходимо запустить программу DGUS, нажать на значок New, в появившемся окне выбрать разрешение экрана 800х480 и папку где будет храниться проект в данном случае «D:DWINDWIN-ProjectLesson 1».

Меню программы DGUS

Если интерфейс программы на китайском языке необходимо перейти в последнюю вкладу и поле «Language» выбрать «English».

Меню программы DGUS

Воспользуемся бесплатным стоком изображений freepik для поиска фона и иконок. Фоновое изображение сохраняем в папке DWIN_SET (фоновые изображения лучше сохранять с цифирным обозначением в начале названия, например, 0_fon.png), иконки в папке Icon.

Далее переходим во вкладку «Touch and display config» нажимаем на плюс, переходим в папку DWIN_SET и добавляем три фоновых изображения.

Формируем фоновый файл для дисплея, для этого переходим на вкладку «Welcome» и нажимаем на пункт DWIN ICL Generator.

Меню программы DGUS

Открывается окно формирования ICL файла.

1. Выбираем директорию где сохранены изображения в нашем случае DWIN_SET.
2. Выставляем качество изображения на 100%.
3. Выбираем пункт применить ко всем.
4. Проверяем чтобы на всех изображениях применились новые параметры.

Строение окна программы CorelDraw и предварительная настройка интерфейса

5. Генерируем файл ICL в папку DWIN_SET.
!ВАЖНО, файл фона должен начинаться с цифры 32(это связанно с архитектурой памяти). Можно оставить 32.ICL.

Генерация файла фоновых изображений
Разметка памяти дисплея

Точно также формируем файл иконок. Директория хранения изображений иконок будет Icon. Генерируемый файл сохраняем в папку DWIN_SET, но присваиваем имя 46.ICL.

Для формирования шрифта необходимо перейти на вкладку «Welcome» и в поле «DGUS config tool» нажать «0# word bank generating».

Включение генерации шрифтов

Откроется окно генерации шрифта. Нажатием на кнопку «Font» выбираем подходящий шрифт и выставляем параметры так, чтобы все буквы не были срезаны, отследить это можно в левой половине окна. Далее нажатием на кнопку «Create 0_DWIN_ASC.HZK» формируем файл шрифта. Файл генерируется в корневой папке программы DGUS(DWIN-ProjectDGUS_V7624), его необходимо перенести в папку Lesson1DWIN_SET.

Окно генерации шрифта

Откроем вкладку «Touch and display config», в верхнем выберем пункт «Text Display». В правой стороне появится окно редактирования элемента. В первых двух строчках устанавливается положение верхней левой точки, и размер окна.

Добавление элемента «text display»

Устанавливаем значение на X = 200, Y = 21, W =400, H = 64.

Читайте также:

Как работает программа шаги

Далее идут такие элементы как:
«Name» название элемента;
«SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP» адрес памяти начала элемента (адреса с 0x0000 по 0x0FFF используются системой, 0x1000-0x4FFF используется для вывода графиков, 0x5000-0xFFFF отведено для пользователя);

Адресное пространство переменных

«Encoding Mode» режим декодирования, выставляем 0x01 для правильного отображения информации;
«Automatic character spacing adjustment» ставим галочку для автоматического выравнивания межсимвольного расстояния;
«Text Length» количество символов надписи. Надпись будет состоять из 11 символов «HELLO WORLD», что и указываем в этом поле.
FONT0_ID выбор банка шрифтов, оставляем 0;
Следующие два поля отвечают за размер букв, стоит соблюдать отношение 1:2.
Далее идут поля отвечающие за горизонтальный и вертикальный интервалы между букв, так как мы выставили галочку на автоматическое выравнивание, то эти поля не задействуются.
И наконец в последнем поле вводится сама надпись «HELLO WORLD».

FONTДобавление элементов «Data variables display»

Добавим поля отображения переменных. Переменных будет 4, для них на фоновом изображении отведены места и указаны области памяти в которые мы и будем их записывать. Переменные обозначим типом INT(16 бит) который занимает по 2 байта информации. Поэтому адреса переменных будут 5000, 5002, 5004 и 5006.

Для добавления элемента в верхнем меню выбираем иконку «Data variables» и размещаем на отведенных областях фона. Окно редактирования элемента содержит поля:
«Name» название элемента;
SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP» адрес памяти для переменной;
«Show Colour» для выбора цвета цифры;
«Word Bank ID» выбор шрифта, это поле оставляем 0;
«Font size» установка размера шрифта;
«Alignment» выравнивание, можно установить по левому краю, по правому краю и по центру;
«Automatic character spacing adjustment» автоматическое выставления межсимвольного расстояния;
«Display invalid zero» показывает незначащие нули;
«Variable type» позволяет выбрать несколько вариантов типов переменных, если переменные будут не 2 байта необходимо учесть это в разметки памяти. В данной случае тип остаётся int (2 bytes);
«Integer digits» количество цифр;
«Decimal digit» количество цифр после запятой;
«Variable unit length» длина названия единиц изменения;
«Show unit» названия единиц измерения;
«Initial value» начальное значение переменной.

Установим «Initial value» для переменной по адресу 5000 — 0, 5002 — 100, 5004 — 100, 5006 — 50.

Добавление элемента «variables Icon»

Раз уже сформировали файл иконок то добавим и их. Для добавления в меню сверху выбираем «variables Icon». Рассмотрим какие параметры у этого элемента:
«Name» название элемента;
«SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP»адрес памяти для переменной относительно которой будет изменяться иконка;
«Icon file» файл в котором находятся изображения иконок, был создан файл 46.icl, его и указываем;
«Minimum» минимальное значение переменной;
«Icon ID» ID иконки отображаемой при достижении минимального значения переменной;
«Maximum» максимальное значение переменной;
«Icon ID» ID иконки отображаемой при достижении максимального значения переменной;
«Display mode» режим отображения, прозрачный фон или фон изображения;
«Filter Set» Значение фильтра в режиме прозрачности;
«Initial value»начальное значение переменной;
«Background transparent Mode» режим прозрачности.

Выставим адрес переменной VP 5006, поле Minimum — 50, Maximum — 101,Initial value 50, Icon ID минимального значения выставим 0, максимального 1. В файле иконок присутствует только одна иконка с номером 0, она и будет отображаться на дисплее.

Добавление элемента «Incremental Adjustment»

Добавим два элемент «Incremental Adjustment» для изменения переменной. Для этого в верхнем меню переходим на вкладку «Touch Control» выбираем соответствующий элемент.

Настройка элемента содержит:
Позицию элемента и его геометрические размеры;
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» если установить галочку активируется возможность воспроизведения звука при касании;
«Name» название элемента;
«Data auto-uploading» автоматическая отправка данных при нажатии;
«Button effect» действие при нажатии;
«VP»адрес памяти для переменной над которой будет произведена операция;
Выбор типа переменной;
«Adjust method» приращение или уменьшение переменной;
«Over limith Operation» действие при достижении лимита. Два варианта: остановиться (STOP) или продолжать действие циклически(Cycle);
«Adjusting step length» шаг операции;
«Lower limit» нижний лимит;
«Upper limit» верхний лимит;
«Touch effect» эффект при прикосновении, два варианта: Constant постоянное приращение или вычитание и Disposable одноразовое приращение или вычитание;

Один из созданных элементов будет осуществлять приращение переменной 5006, второй элемент будет уменьшать переменную. Выставим пределы изменения переменной 0 и 100, шаг приращения 1, тип приращения Constant и остановку при достижении лимита. Также выставим действие при нажатии на смену фонового изображения на 1 и включим воспроизведение аудио №2. Установим расположение элементов на кнопке «-» и «+» соответственно.

Благодаря добавленным элементам можно изменять переменные на дисплее, но этого мало, и нужно вывести эти данные во внешний мир, сделаем это с помощью элемента «Synchrodata return» который позволяет отправлять данные через асинхронный порт. Добавить его можно через верхнее меню и вкладку «Touch Control» выбрав соответствующий элемент.

Добавление элемента «Synchrodata return»

Настройка элемента содержит:
Позицию элемента и его геометрические размеры.
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» активация аудиофайла. Если установить галочку появится возможность воспроизведения звука при касании;
«Name» название элемента;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
Далее идёт три настройки «First press» первое нажатие, «Continuous pressing» продолжительное нажатие и «Loosen pressing» завершение нажатия. Настройки содержат пункты:
«Mode» режим, 0x00 не задействуется, 0x01 активирован, остальные режимы не задействованы.
«VP*S» адрес считывания данных;
«VP*T» адрес записи данных;
«Data length» длинна переменной в байтах.

Создадим элемент с отображением 1 фона при нажатии, включим воспроизведение аудио №2, считыванием данных с переменной 5006 при первом касании и зададим расположение на кнопке «SEND».

Для переменной по адресу 5000 сделаем ввод значения с клавиатуры. Чтобы это сделать необходимо создать клавиатуру. Для неё выделен отдельный фон под номером 2. Перейдём на него в меню слева.

Добавление клавиатуры

Каждой кнопке необходимо задать действие, в нашем случае это ввод цифры соответствующей цифре на изображении. Для этого в верхнем меню переходим на вкладку «Touch Control» и выбираем элемент «Basic touch module». Рассмотрим настройки этого модуля:
В первых строках настраивается положение модуля и его размеры, размеры кнопки равны 50х50, поэтому выставим данные параметры в поля W и H. Расположение кнопки выставим поверх соответствующего изображения;
«Name» название элемента;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
«key value» значение передаваемое кнопкой при нажатии;
«Hold Time» время удержания необходимого для срабатывания.

В примечании ниже указано какие значения кнопок стоит выставлять для присвоения им действий.
значения 0x0030-0x0039 соответствуют цифрам от 0 до 9;
0x002E точка;
0x002D +/-;
0x00F0 отмена;
0x00F1 ввод;
0x00F2 стереть символ;
Соответственно этому примечанию заполняем полня Key Value.
Цифры от 0 до 9 значениями 0x0030-0x0039;
C 0x00F2;
OK 0x00F1.

Клавиатура готова, теперь нужно научиться её вызывать. Сделать это можно используя элемент «Variable data Input» найти его можно в верхнем меню в вкладке «Touch Control» нажав на элемент «Variable Input»;

Настройки модуля:
Расположение и размер элемента;
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» активация аудиофайла;
«Name» название элемента;
«Data auto-uploading» автоматическая отправка данных в порт;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
«VP» адрес переменной в которую будет производиться запись;»
Variable type» позволяет выбрать несколько вариантов типов переменных; В данной случае тип Int соответствующий тип полю «Data variables» установленному ранее для переменной по адресу 5000;
«Integer digits» количество цифр;
«Decimal digit» количество цифр после запятой;
«Show location» область клавиатуры в которую будет совершаться ввод данных;
«Show Colour» для выбора цвета цифры;
«Font ID» выбор шрифта, это поле оставляем 0;
«Font size» установка размера шрифта;
«Cursor color» цвет курсора при вводе, есть два варианта «White»(белый) и «Black»(черный);
«Display Method» режим отображения вводимой информации «Show *» ввод звездочками или «Direct display» ввод цифр;
«Keyboard location» расположение клавиатуры на данном фоне «Current page» или на другой странице «Other page»;
«Keyboard setting» настройка клавиатуры, после нажатия на кнопку откроется меню (изображения есть выше в галереи Настройка элемента «Variable data Input») в котором необходимо выбрать страницу с клавиатурой и выбрать второй фон, после чего нажать на кнопку «OK» откроется следующее меню в котором необходимы выделить область клавиатуры. Должны получиться координаты (значения могут +/- отличаться) x1 = 352, y1 = 121, x2 = 571, y2 = 461, после чего нажать «OK»;
«Current page» номер выбранной страницы с клавиатурой;
«Keyboard area» область выбранной клавиатуры;
«Show location» область отображения клавиатуры на текущей странице, устанавливаем значения x = 350, y = 130;
«Background transparency» прозрачность фона, выставляем 0;
«Enabling limits» область ввода значений с клавиатуры, устанавливаем от 0 до 999;
«Loading data when input» при установке галочки происходит ввод данных из переменной;
«Data address» адрес переменной для отображения при включении клавиатуры;
«Download data» установка цвета кодом в десятичном формате, не используем оставляем 0.
Область «Show location» заполняется после установки клавиатуры через настройку «Keyboard setting». При нажатии на кнопку «Set» возле пункта «Show location» в появившемся окне ставим галочку возле пункта «Displayed Keyboard» и ставим точку в правой точке поля где должен совершаться ввод(последнее изображение в галерее Настройка элемента «Variable data Input»).

Окно какой программы показано на рисунке ниже?

Главное окно программы показано на рисунке. В чем назначение данного приложения?

Как называется и в чем назначение программы, окно которой изображено на рисунке ниже?

Для чего служит окно, приведенное на рисунке ниже?

Интерфейс какой из программ приведен на рисунке ниже?

Для чего предназначено окно, изображенное на рисунке?

Что изображено на рисунке ниже?

Какой фильтр следует использовать, для исправления дефекта, показанного на рисунке ниже?

В какой из программ можно выполнить трансформацию изображений, показанную на рисунке ниже?

В чем назначение стрелки на рисунке ниже?

Поясните, что изображено на рисунке ниже?

Источник: bazaintuit.ru