Графический интерфейс пользователя с применением микроконтроллеров Microchip

№ 11’2007
PDF версия
Графический интерфейс пользователя (Graphical User Interface, GUI) — это система средств для взаимодействия пользователя с устройством, основанная на представлении всех доступных пользователю системных объектов и функций в виде графических компонентов экрана (окон, кнопок, полос прокрутки и т. п.). При работе с интерфейсом GUI пользователь имеет произвольный доступ (с помощью клавиатуры или устройств координатного ввода, например, touch-screen) ко всем видимым экранным объектам. Впервые графический интерфейс пользователя был реализован в операционных системах персональных компьютеров, но сейчас элементы GUI стали неотъемлемой частью даже простых бытовых и медицинских приборов, сотовых телефонов, устройств промышленной автоматики и многих других. Поскольку графический интерфейс становится все более и более востребованным, то становится очевидным желание разработчиков интегрировать элементы интерфейса GUI в свои устройства. Естественно, что разработчики заинтересованы в снижении стоимости готового устройства, но для многих практическая реализация сложного графического интерфейса пользователя становится затруднительной задачей, так как требует много усилий и времени для создания собственной библиотеки или покупки готовых программных продуктов сторонних фирм.

Компания Microchip, ведущий производитель микроконтроллеров, известна своими решениями, позволяющими снизить затраты как на разработку, так и общую стоимость изделия, благодаря комплексному подходу к реализации проекта. Бесплатная графическая библиотека Microchip позволяет легко реализовать графический интерфейс пользователя с использованием 16-разрядных микроконтроллеров PIC24 и цветных QVGA-дисплеев.

 

Программный интерфейс приложения (API) графической библиотеки Microchip

Бесплатная графическая библиотека Microchip может обслуживать как монохромные индикаторы, так и многоцветные CSTN/TFT (16, 256 и 65 тыс. цветов) дисплеи, имеющие параллельный или последовательный (I2C или SPI) интерфейс связи с микроконтроллером. Применение индикатора с контроллером и графической памятью позволяет минимизировать требования по памяти, быстродействию и числу выводов управляющего микроконтроллера, поэтому графическим цветным TFT-модулем может управлять даже дешевый, например, 28-выводный контроллер PIC24FJ32GA002 с 32 кбайт Flash-памятью программ и 4 кбайт ОЗУ.

Библиотека разделена на три уровня: графические объекты (Graphics Objects Layer — GOL), графические примитивы (Graphics Primitive Layer) и драйверы устройств (Device Driver Layer). Уровень графических объектов содержит создание и управление сложными графическими объектами, которые, в свою очередь, создаются с помощью платформонезависимых графических примитивов, таких как линия, прямоугольник, окружность и т. п. Драйверы устройств специфичны для конкретного дисплея и предоставляют основные функции для более высоких уровней библиотеки.

Архитектура графической библиотеки Microchip приведена на рис. 1:

  1. Application Layer — пользовательская программа, которая использует графическую библиотеку.
  2. User Message Interface — этот уровень должен быть создан пользователем для предоставления сообщений библиотеке. Графическая библиотека поддерживает передачу сообщений с помощью клавиатуры или touch-панели индикатора.
  3. Graphics Object Layer — этот уровень отрисовывает такие элементы управления, как кнопки, слайдеры, окна и т. д.
  4. Graphics Primitives Layer — этот уровень реализует простейшие графические объекты (линии, прямоугольники, окружности и т. п.).
  5. Device Display Driver — этот уровень управляет индикатором и зависит от типа применяемого дисплея.
  6. Graphics Display Module — графический дисплей.
Архитектура графической библиотеки
Рис. 1. Архитектура графической библиотеки

Реализация графической библиотеки предоставляет две конфигурации — блокирующую и не блокирующую (Blocking и Non-Blocking). Для блокирующей конфигурации функции вывода графических объектов задерживают выполнение программы, пока графический объект не будет выведен полностью. Для не блокирующей конфигурации функции вывода графических объектов не ждут выполнения отрисовки и передают управление пользовательской программе. Различные конфигурации позволяют включать графическую библиотеку в программы на основе операционных систем реального времени (RTOS) и более эффективно использовать ресурсы микроконтроллера.

 

Уровень драйверов устройства

Каждый тип дисплея имеет свои характеристики (интерфейс связи, графический контроллер). Для связи библиотеки с дисплеем определен набор функций — драйвер дисплея. Текущая версия графической библиотеки поддерживает несколько типов графических контроллеров Samsung S6D0129/S6D0139, Renesas R61505U, Solomon Systech SSD1339, LG LGDP4531 и Densitron HIT1270. Однако возможна поддержка и других контроллеров, для этого из всей библиотеки нужно модифицировать лишь функции драйверов устройств. Доступность библиотеки в исходных кодах позволяет осуществить поддержку дисплеев с различными графическими контроллерами.

Программный интерфейс приложения уровня драйверов дисплея используется для сброса дисплея, определения размеров экрана, выделения области, установки текущего цвета и реализации аппаратно-зависимых функций для работы с дисплеем (табл. 1).

Таблица 1. Функции драйвера устройств
Функции драйвера устройств
 

Графические примитивы

Уровень графических примитивов содержит базовые графические функции и «общается» с индикатором с помощью драйверов устройств, поэтому функции графических примитивов становятся независимыми от типа применяемого дисплея. Функции создания графических примитивов могут быть реализованы в уровне драйверов устройства, если применяемый дисплей имеет графический ускоритель (табл. 2).

Таблица 2. Функции уровня графических примитивов
Функции уровня графических примитивов
 

Графические объекты (Graphics Objects Layer — GOL)

С точки зрения реализации графического интереса наибольший интерес представляют графические объекты. Графическая библиотека Microchip реализует 3D графические объекты, такие как кнопки, слайдеры и др. (табл. 3).

Таблица 3. Графические объекты, реализованные в библиотеке Microchip версии v1.0
Графические объекты, реализованные в библиотеке Microchip версии v1.0

Для графических объектов, предоставляемых библиотекой, возможна установка различных цветовых стилей. Для таких объектов, как кнопки, возможно задание разных текстовых меток и картинок для исходного и «нажатого» состояния.

Графическая библиотека Microchip поддерживает работу с пользовательскими шрифтами в 8-разрядной кодировке (ASCII), то есть поддерживает любые языки, в которых меньше 129 символов. Шрифты могут храниться как массивы в памяти программ в секции const, что ограничивает размер секции в 32 кбайт, либо во внешней памяти. Графическая библиотека использует представление символов шрифта как отдельные изображения. Высота каждого символа в одном шрифте одинакова, варьируется только его ширина. Таким образом, размер символа «1» меньше, чем символа «Щ». Задание первого и последнего символа используемого шрифта позволяет уменьшить размер памяти, требуемый для хранения знакогенератора. Например, если будут использоваться только заглавные английские буквы, то оригинальная ASCII таблица может быть уменьшена (табл. 4).

Таблица 4. Пример уменьшенной таблицы шрифтов
Пример уменьшенной таблицы шрифтов

Как результат, для такого знакогенератора потребуется выделение меньшего размера памяти. Если в используемом шрифте часть символов не будет использоваться, то размер кода также может быть уменьшен, если ширину неиспользуемых символов задать равной нулю.

Графическая библиотека может применять все шрифты Windows. Вместе с библиотекой Microchip предлагается программа, которая позволяет конвертировать растровые шрифты (файлы с расширением *.fnt) и true-type шрифты (файлы с расширением *.ttf или *.oft) в массивы данных для использования совместно с библиотекой (рис. 2).

Утилита для преобразования шрифтов и графических файлов в С-массивы данных
Рис. 2. Утилита для преобразования шрифтов и графических файлов в С-массивы данных

Как правило, шрифты защищены авторскими правами, поэтому необходимо убедиться, что вы имеете право использовать тот или иной шрифт. Существуют бесплатные, свободно распространяемые шрифты, часть из которых можно найти по ссылке http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=OFL_fonts. Для получения лучшего результата отображения шрифтов на выбранном дисплее, возможно, понадобится редактирование изображения шрифтов или создание собственного шрифта. Для этого можно использовать, например, бесплатный редактор растровых шрифтов Fony (рис. 3), доступный по ссылке http://hukka.furtopia.org.

Редактор шрифтов Fony
Рис. 3. Редактор шрифтов Fony

Графическая библиотека также поддерживает вывод пользовательских изображений. Они хранятся в памяти с расположением точек слева направо и сверху вниз. Цветовая палитра задается таким образом, что цвету с кодом 0 соответствует первая строка в таблице палитры и цвету с кодом 255 (если такой существует) соответствует 256-я строка палитры. Для изображений с более чем 256 цветами палитра цветов не требуется (табл. 5).

Таблица 5. Поддерживаемые форматы изображений
Поддерживаемые форматы изображений

Для преобразования изображений в массивы данных используется та же самая утилита, что и для конвертации шрифтов (рис. 3).

Библиотека поддерживает масштабирование изображений, и пользователь может изменить размер выводимого на экран изображения (рис. 4).

Масштабирование изображений
Рис. 4. Масштабирование изображений

Взаимодействие объектов графической библиотеки

Состояния объектов

Графические объекты могут иметь два типа статуса: статус состояния и статус отображения. Статус состояния определяет действия над объектом и его вид. Статус отображения показывает, что объект требует частичной или полной перерисовки или должен быть спрятан. Некоторые общие статусы объектов приведены в таблице 6 и показаны на рис. 5. Разные типы графических объектов имеют свои статусы, о которых можно узнать в документации на API графической библиотеки.

Демонстрация состояний объектов. Кнопка Disabled имеет статус OBJ_DISABLED, кнопка Focused — OBJ_FOCUSED
Рис. 5. Демонстрация состояний объектов. Кнопка Disabled имеет статус OBJ_DISABLED, кнопка Focused — OBJ_FOCUSED
Таблица 6. Состояния графических объектов
Состояния графических объектов

Поясним на примере, как изменяются статусы объектов при работе библиотеки совместно с индикатором с сенсорной панелью. Если (рис. 5) происходит касание сенсорного экрана на одной из кнопок, то эта кнопка получает статус состояния BTN_FOCUSED, BTN_PRESSED (признак того, что кнопка имеет нажатое состояние) и статус отображения BTN_DRAW_FOCUS. Полученные статусы сообщают библиотеке о том, что фокус перемещается на выбранную кнопку, эта кнопка нажата и должна быть перерисована в новом виде. После того как кнопка будет перерисована, ее статус отображения сбросится, и изображение кнопки останется в неизменном состоянии до тех пор, пока не будут произведены другие действия и не будет изменен ее статус отображения. Если используется клавиатурный ввод, то, как правило, одной из механических кнопок перемещается фокус между графическими объектами на экране дисплея (та или иная графическая кнопка получает статус BTN_FOCUSED и BTN_DRAW_FOCUS), а другой «фиксируется» нажатие выбранной графической кнопки, которая дополнительно получает статус BTN_PRESSED. Если какая-либо из кнопок имеет состояние BTN_DISABLED, то эта кнопка игнорирует все сообщения до тех пор, пока пользовательская программа не отменит этот статус.

Цветовые схемы

Все графические объекты используют цветовые схемы, которые определяют шрифт и цвета объекта. При создании объекта ему задается конкретная пользовательская цветовая схема. Если цветовая схема не задана, то используется цветовая схема по умолчанию. В таблице 7 собраны все компоненты цветовой схемы.

Таблица 7. Параметры цветовой схемы
Параметры цветовой схемы

На рис. 6 изображена цветовая схема графического объекта «кнопка» (button).

Цветовая схема графического объекта button
Рис. 6. Цветовая схема графического объекта button

Список активных объектов

При создании объектов графическая библиотека динамически группирует их в список, отображает их на текущем экране и получает сообщения для этих объектов. Сообщения графических объектов и функции их вывода работают с одним и тем же списком активных объектов. Допускается создание множества списков объектов, но только один из них может быть активным в данный момент времени. Для множественных списков объектов пользовательская программа должна управлять переключением между списками и тем самым отображать на экране те или иные графические объекты. Реализация описанной схемы приводит к легкому управлению отображения объектов, так как позволяет пользовательской программе рассматривать каждый список как выводимую на экран страницу со своими графическими объектами: на экран выводятся только те из них, которые присутствуют в списке активных объектов.

Отображение графических объектов

Для прорисовки графических объектов должна вызываться функция управления выводом на экран GOLDraw (). Эта функция анализирует состояние объектов в списке активных объектов и прорисовывает те из них, у которых установлен тот или иной статус отображения. После завершения работы функции GOLDraw () объекты с активным статусом отображения будут перерисованы, а соответствующий статус будет автоматически сброшен. Первый созданный объект будет прорисован первым.

Механизм передачи сообщений

Переносимость и мобильность является одной из ключевых особенностей графической библиотеки Microchip. Библиотека поддерживает ввод данных от различных устройств ввода, таких как сенсорный экран (touch-screen), клавиатура, мышь и т. п. Любое устройство ввода может послать сообщение графическому объекту. Сообщение имеет следующую структуру:

Поле type определяет идентификатор устройства ввода. Поле event определяет тип действия. Поля type и event будут определять, как параметры param1 и param2 будут интерпретироваться графической библиотекой. Для некоторых случаев используется только параметр param1. Например, при использовании индикатора с сенсорным экраном поля структуры GOL_MSG будут иметь значения, определенные в таблице 8.

Таблица 8. Определение сообщений сенсорного экрана
Определение сообщений сенсорного экрана

После определения нажатия на сенсорный экран пользовательская программа должна заполнить структуру сообщения и передать ее в библиотеку с помощью функции GOLMsg (GOL_MSG* pMsg). Графический объект, который содержит координаты x и y, изменит свой статус, основываясь на своем текущем состоянии и переданном событии.

 

Практическая реализация графического интерфейса пользователя

Графическая библиотека Microchip написана для работы с 16-разрядными микроконтроллерами PIC24FJxxx и 32-разрядными PIC32 с интегрированным параллельным мастер-портом (Parallel Master Port — PMP). Наличие PMP позволяет осуществить быстрый обмен данными между микроконтроллером и дисплеем. Большой объем памяти микроконтроллеров (до 512 кбайт) и широкий набор периферии (по 2 USART, SPI, I2C, часы реального времени, модуль вычисления CRC) делают контроллеры PIC24 и PIC32 идеальными для широкого класса приложений.

В состав библиотеки входят подробные примеры использования. При использовании всех функций библиотеки требуется примерно 24 кбайт программной памяти. Каждый объект динамически выделяет от 2 до 24 байт ОЗУ, таким образом, графическим цветным TFT-индикатором может управлять даже дешевый 28-выводный контроллер PIC24FJ32GA002 с 32 кбайт Flash-памятью программ и 4 кбайт ОЗУ. При необходимости пользовательские шрифты и картинки могут храниться во внешней энергонезависимой памяти.

Библиотека разработана для легкой интеграции графического интерфейса в разрабатываемое устройство. Использование готовых графических объектов требует от программиста минимального количества строк кода. Библиотека содержит хорошо документированный API, применяя который, можно создавать и управлять работой графических объектов. Обычно поведение графического объекта управляется библиотекой. Управление поведением объекта облегчено реализацией механизма передачи сообщений, описанного ранее. Полученные сообщения обрабатываются, и состояние объекта изменяется на основании содержания сообщения. Библиотека автоматически меняет вид объекта и перерисовывает его на экране дисплея.

Рассмотрим пример применения графической библиотеки Microchip. На рис. 7 представлен простой алгоритм программы.

Алгоритм программы
Рис. 7. Алгоритм программы

Для начала использования библиотеки программисту требуется создать небольшой код. Во-первых, в программе должны быть подключены модули библиотеки и драйвер дисплея. Далее нужно выполнить инициализацию дисплея, вызвав функцию InitGraph (), в которой производится сброс дисплея, установка курсора в начало координат (положение 0, 0). Затем вызывается функция GOLCreateScheme (), с помощью которой задается текущая цветовая схема для используемых графических объектов. Если не предусматривается изменений в используемой цветовой схеме, то можно вместо вызовов функций InitGraph () и GOLCreateScheme () применить вызов только функции GOL_Init (). Если создается новая цветовая схема, то нужно вставить примерно такой код:

Следующий шаг — это создание графических объектов. Функции ObjCreate (,,) предоставляют возможность создания различных графических объектов. Это может быть одиночный вызов функции BtnCreate (,,), который создаст объект button, или вызов нескольких функций для создания нескольких объектов. Для примера создадим три графических объекта (две кнопки и один слайдер, рис. 8):

Графические объекты, созданные в примере программы
Рис. 8. Графические объекты, созданные в примере программы

Все эти вызовы функций отображены на рис. 7 как ObjCreate (), где Obj заменяется на Btn для кнопок и на Sld для слайдера. Каждый объект библиотеки имеет свою функцию ObjCreate (), которые возвращают указатель на новый созданный объект. Если объект успешно создан, то он автоматически добавляется в активный список объектов.

После того как графические объекты созданы, их нужно прорисовать на экране, для этого служит функция GOLDraw (). Эта функция анализирует состояние объектов. Если объект требует отрисовки, то этот объект будет перерисован. В приведенном примере задано состояние кнопок BTN_DRAW, а слайдера — SLD_DRAW, то есть данные объекты требуют прорисовки. После вызова функции GOLDraw () объекты будут отображены на дисплее, а запрос на прорисовку объектов будет сброшен. Состояние объекта может быть изменено программно или с помощью запросов от устройств ввода, таких как клавиатура, сенсорный экран и т. п. Для данного примера используем индикатор с сенсорным экраном.

Сенсорный экран заполняет структуру сообщений, если произошло касание экрана (рис. 7, шаг 5). Это сообщение будет обработано библиотекой при вызове функции GOLMsg (), в которой происходит анализ того, какой из объектов создал сообщение. Состояние объекта будет изменено в соответствии с сообщением, и при следующем вызове функции GOLDraw () этот объект будет перерисован на экране. Кнопка будет отображена нажатой при касании экрана в ее области, а движок слайдера будет перемещен при «перетаскивании» его по экрану (рис. 9).

Изменение состояния кнопки при касании сенсорного экрана
Рис. 9. Изменение состояния кнопки при касании сенсорного экрана

В приведенном примере выполнены стандартные функции, присущие созданным графическим объектам: с помощью сенсорного экрана можно нажать на кнопки и передвинуть движок слайдера. Попробуем изменить стандартное поведение. Пусть нажатие на кнопку LEFT или RIGHT будет сдвигать положение движка слайдера соответственно влево или вправо.

Для добавления пользовательских действий над объектами используется функция GOLMsgCallback (). Она вызывается в функции GOLMsg () каждый раз, когда графический объект получает новое сообщение.

Для реализации управления положением движка слайдера с помощью кнопок добавим код в функцию GOLMsgCallback ():

Приведенный код изменяет положение движка слайдера при касании сенсорного экрана в области одной из графических кнопок. Кнопка LEFT сдвигает движок влево, кнопка RIGHT — вправо. Функция GOLMsgCallback () должна возвращать 1 для разрешения действий графических объектов, присущих им по умолчанию, то есть кнопки будут прорисовываться в нажатом или нормальном состоянии, а движок слайдера будет иметь возможность передвигаться с помощью сенсорного экрана.

Как видим, нам потребовалось написать минимум кода для создания трех графических объектов и осуществления взаимодействия между ними с помощью сенсорного экрана дисплея.

Графическая библиотека Microchip предоставляет широкое поле деятельности для разработчика и позволяет осуществлять различные действия с целыми графическими объектами или с дисплеем на уровне драйверов. Так, например, иллюстрации отображаемых графических объектов в этой статье созданы путем получения цвета отдельных пикселей, формирования bmp-файла и передачи копии экрана дисплея через COM-порт в компьютер.

Для начала работы с графической библиотекой компания Microchip предлагает дочернюю плату Graphics PICtail™ Plus (номер для заказа — AC164127). Graphics PICtail™ Plus — это демонстрационная плата для изучения графической библиотеки и освоения работы с цветными ЖКИ-дисплеями. Плата содержит графический (65 К цветов) QVGA модуль с разрешением 320×240 точек и с резистивной touch-панелью. Модуль поддерживает портретную и ландшафтную ориентацию, содержит встроенную 4-Мбит Flash-память для возможности хранения графических элементов, звуковой излучатель и разъем для подключения к плате Explorer 16. Дочерняя плата подключается к демонстрационной плате Explorer 16.

Дочерняя плата Graphics PICtail™ Plus
Рис. 10. Дочерняя плата Graphics PICtail™ Plus

Демонстрационная плата Explorer 16 (номер для заказа — DM240001) — это дешевое средство отладки для ознакомления и начала работы с высокопроизводительными семействами 16-разрядных микроконтроллеров Microchip PIC24 и контроллерами цифровой обработки сигналов dsPIC33F. Плата имеет возможность работы с внутрисхемным отладчиком ICD-2 и внутрисхемным эмулятором REAL-ICE для быстрой отладки приложений. Комплект содержит 2 дочерние платы с контроллерами PIC24FJ128GA010 и dsPIC33FJ256GP710, возможно подключение процессорных модулей с 32-разрядным контроллером PIC32. Предусмотрено подключение к плате дополнительных интерфейсных модулей расширения, таких как модули IrDA, Ethernet интерфейсов, SD и MMC карт памяти, плат для работы со звуком, и, конечно же, платы с графическим индикатором.

Литература
  1. www.microchip.com/GRAPHICS
  2. Microchip Graphics Library API
  3. AN1136. How to Use Widgets in Microchip Graphics Library
  4. http://ru.wikipedia.org/wiki/BMP

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *