Разработка графического сенсорного интерфейса
Статьи по теме

Драйвер интерфейса сенсорного дисплея для портативных устройств
Краткое описание и назначение графического сенсорного интерфейса
Идеи по разработке данной системы пришли в голову еще при предыдущих разработках различных систем управления в составе исследовательских и учебных стендов. Каждая следующая такая система предусматривала в своем составе интерфейс ввода-вывода данных. При каждой следующей роботе было желание усложнить данные интерфейс, сделать что-то новое и совершенное.
-> Украинская версия <-
Начиная с простейших семи сегментных индикаторов, со временем мои системы стали включать в себя жидкокристаллические символьные дисплеи с разным расширением по количеству строк и символов, на которых реализовывалось несложное срочное меню. Позже также был реализован свой программный драйвер для быстрого создания меню пользователя с различным количеством пунктов и подпунктов для срочных дисплеев с разнообразным расширением.
После этого было начато использование графических дисплеев – сначала монохромных, а затем и цветных с разнообразным расширением. На таких дисплеях уже реализовывалось не только срочное меню, но и различные варианты графического меню с иконками или комбинированного варианта. Также в данном типе дисплеев стало возможным выводить сообщение уже в виде различных графических изображений, например сообщение об ошибке, замечания, вопросы и т.д. Также часто требовалось реализовать возможность вывода текста нужного размера, а также отображение различных изображений, заставок, графиков и т.п.
Также всегда хотелось совершенствовать систему ввода данных, начиная от просто подключенных единичных кнопок. Со временем начал использовать матричное подключение клавиатур, дистанционное управление через инфракрасные приемопередатчики, а также сенсорные кнопки, реагирующие на прикосновение пальцев.
Следующая задача, которую захотелось реализовать и в полной мере разобраться в ее технологии – это использование сенсорного интерфейса в составе графических жидкокристаллических дисплеев с сенсорным экраном, что дало бы возможность разрабатывать более гибкие и компактные системы, включавшие бы систему ввода-вывода в одном элементе.
На сегодняшнее время есть готовые решения для реализации данной задачи, многие фирмы выпускают разнообразные отладочные платы, включающие в себя графический сенсорный дисплей с соответствующей поддержкой программным обеспечением. Также доступны отдельные GUI (Graphical User Interface) библиотеки для различных контроллеров, реализующих поставленную задачу.
После осмотра некоторых из готовых решений, учитывая то, что использовать какую-то готовую систему или программу не зная как она реализована – не всегда целесообразно, для реализации данной задачи было решено разработать полностью свой новый драйвер.
Задуманный программный драйвер должен предусматривать следующие возможности:
-
Возможность быстрого интегрирования его в новую программу;
-
Простым вызовом заранее известного набора функций создавать разнообразные графические элементы ввода-вывода информации с задачей для каждого из них функции обработчика событий;
-
Содержать достаточно широкий набор разнообразных графических элементов ввода-вывода, таких как кнопки, ползунки, индикаторы (цифровые и стрелочные), графики и т.д.;
-
Возможность создания нужного количества страниц или рабочих столов со своим набором графических элементов ввода-вывода;
Реализована система графического сенсорного интерфейса (далее интерфейс) включает в себя все вышеописанные возможности, изображена на рисунке 1.
Рисунок 1. Система графического сенсорного интерфейса
Описание конструкции и электрической части платы управления сенсорного дисплея
Для реализации данного интерфейса была использована отладочная плата STM32F4DISCOVERY, в основе которой лежит контролер STM32F407VGT6 от фирмы STMicroelectronics. Дисплей модели S95160 на основе контроллера SSD1289. Контроллер сенсорного экрана – XPT2046.
На несущей плате данного дисплея, со стороны противоположной от последнего, также присутствует сокета для SD карты, контакты которого подключены к общему джамперу на плате (рисунок 2).
Рисунок 2. Подключение сокеты для SD карты
Максимальная потребляемая мощность данного дисплея составляет 350 mW.
Краткое описание программного обеспечения графического сенсорного дисплея
Для распределения задач между программой пользователя и программой-драйвером интерфейса использовано операционную систему FreeRTOS. Данная операционная система реального времени позволяет создавать нужное количество задач в рабочей программе, задавать приоритет выполнения каждой задачи, создавать очереди, временные таймеры, мютексы, семафоры, производить обмен данными между отдельными задачами. Ее также можно использовать на разных контроллерах с различной архитектурой.
В связи с наличием сокеты SD карты, в разработанную библиотеку также был включен FAT драйвер. Последний дает возможность в полной мере осуществлять разнообразные функции работы с SD картою, такие как считывание, создание и запись текстовых файлов, прописывание атрибутов для файлов, считывания изображений и т.д.
Ниже приведен программный пример создания одной страницы интерфейса.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
PageControl_TypeDef* Swich1 = CreateTwoStateSwich_Func(0, TWO_STATE_SWITCH_OFF, SWITCH_3_WIDTH, SWITCH_3_HEIGHT, SwitchOn_3, SwitchOff_3, Swich1_Click, TRUE, TRUE); PageControl_TypeDef* Swich2 = CreateTwoStateSwich_Func(1, TWO_STATE_SWITCH_ON, SWITCH_3_WIDTH, SWITCH_3_HEIGHT, SwitchOn_3, SwitchOff_3, Swich2_Click, TRUE, TRUE); PageControl_TypeDef* ArrowUp1 = CreateArrowUpDown_Func(2, CONTROL_TYPE_ARROW_UP, ArrowUp1_Click, TRUE, TRUE); PageControl_TypeDef* ArrowDown1 = CreateArrowUpDown_Func(3, CONTROL_TYPE_ARROW_DOWN, ArrowDown1_Click, TRUE, TRUE); PageControl_TypeDef* RButton1 = CreateRButton_Func(4, RBUTTON_UNCHECKED, "RadioButton1", LCD_BLACK, &Font8x12_Bold, RadioButton1_Click, 1, TRUE, TRUE); PageControl_TypeDef* RButton2 = CreateRButton_Func(5, RBUTTON_CHECKED, "RadioButton2", LCD_BLACK, &Font8x12_Bold, RadioButton2_Click, 1, TRUE, TRUE); PageControl_TypeDef* Label1 = CreateLabel_Func(6, "Counter: 50 ", LCD_BLACK, &Font8x12_Bold, TRUE, LCD_WHITE, TRUE); PageControl_TypeDef* Button1 = CreateButton_Func(7, "NextPage", LCD_BLACK, &Font8x12_Bold, Button1_Click, TRUE, TRUE); PageControl_TypeDef* Button2 = CreateButton_Func(8, "ShowGrph", LCD_BLACK, &Font8x12_Bold, Button2_Click, TRUE, TRUE); PageControl_TypeDef* Termometer1 = CreateTermometer_Func(9, 198, 100, PressCounter, TRUE); if (CreatePage_Func(&Page1, "Page1", LCD_WHITE)) { AddPageControl_Func(20, 10, Swich1, &Page1); AddPageControl_Func(20, 45, Swich2, &Page1); AddPageControl_Func(20, 195, ArrowUp1, &Page1); AddPageControl_Func(20 + ARROW_UP_DOWN_WIDTH + 2, 195, ArrowDown1, &Page1); AddPageControl_Func(20, 224, RButton1, &Page1); AddPageControl_Func(20, 248, RButton2, &Page1); AddPageControl_Func(72, 200, Label1, &Page1); AddPageControl_Func(20, 275, Button1, &Page1); AddPageControl_Func(110, 275, Button2, &Page1); AddPageControl_Func(180, 20, Termometer1, &Page1); }; |
В зависимости от типа графического элемента нужно создать, количество параметров для его создания отличается. К общим параметрам можно отнести ID элемента, константа-тип элемента, функция-обработчик события прикосновения, можно задавать значения, отвечает за создание по умолчанию пассивного или активного, а также видимого или невидимого элемента. Для текстовых элементов дополнительно задается тип шрифта и цвет.
При добавлении графического элемента к нужной странице нужно указывать положение последнего на дисплее в допустимых пределах, адрес самого элемента и нужной страницы.
На рисунках 3-4 показаны примеры создания различных страниц интерфейса, на рисунке 5 – отображение графика с нанесением двух кривых.
Рисунок 3. Пример отображения страницы графического интерфейса
Рисунок 4. Пример отображения страницы графического интерфейса
Рисунок 5. Отображение графиков
Для визуализации нажатия кнопки или изменения отображения какого-либо из переключателей (состояние включен / выключен) используется два отдельных графических элемента, массивы кодов которых создаются отдельно. Для визуализации таких графических элементов, как циферблаты, ползунки, цифровые индикаторы, ручки используются комбинированный метод отображения по использованию, как готовых графических частей элементов, так и тех геометрических элементов, создаваемых динамически, в зависимости от нужного положения.
Для генерации массива для отображения графических элементов ранее была разработана специальная компьютерная программа, позволяющая генерировать данные для отображения заданной картинки разнообразных монохромных и цветных дисплеев. На рисунках 6-7 показан пример генерации массива кодов для изображения в формате RGB.
Рисунок 6. Внешний вид компьютерной программы для генерации массива кодов заданного изображения
Рисунок 7. Полученный массив кодов заданного изображения
Применение разработанной системы графического сенсорного интерфейса
К моменту написания данной статьи разработана система графического сенсорного интерфейса не была применена в составе законченных устройств или лабораторных стендов.
Возможные сферы применения – это различные приборы, стенды, нуждаются в системе ввода-вывода информации для управления разнообразными процессами, портативные устройства или пульты управления и т.д.
Автор: Сергей Корсун, ХНУ (2010 г. вып.), г. Хмельницк.
Романов А.Ю., МИЭМ НИУ ВШЭ, НТУУ “КПИ”.