Старая версия сайта

микроконтроллеры от ведущих мировых производителей

Графическая библиотека TouchGFX.

Сергей Долгушин, dsa@efo.ru

Цветные TFT-дисплеи получают все большее распространение в современных приборах различного назначения. Одной из основных их функций является интерфейс пользователя, который предназначен для отображения информации о работе прибора, а также обеспечивает управление всеми его функциями. Основными критериями оценки графического интерфейса пользователем являются удобство работы, интуитивное понимание его работы и оформление. Реализация этих требований с «нуля» является трудоемкой задачей. В этих случаях на помощь приходят готовые графические библиотеки. В настоящей статье мы хотим познакомить читателей с графической библиотекой TouchGFX компании Draupner Graphics A/S.

 

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

Рисунок 1. Пульт дистанционного управления компании Somfy, реализованный на базе TouchGFX

 

Выбор элементной базы является комплексной задачей и обычно начинается с выбора микроконтроллера и дисплея (его размера и диагонали). В общем виде требования к микроконтроллеру в зависимости от разрешения дисплея разработчики TouchGFX свели в следующую таблицу (рис. 2). Цвета в таблице расшифровываются следующим образом: зеленый – платформа подходит для любых графических задач; светло-зеленый – могут быть трудности в приложениях с полноформатной анимацией; желтый – ограниченное использование полноформатной анимации и текстур; оранжевый – анимация ограничена небольшим участком экрана (например, всплывающее меню); коричневый – простые приложения без использования эффектов. Это будет справедливо, если нагрузка на оперативную память и контроллер не превышает 50%. Под анимацией понимается не столько воспроизведение видео, сколько анимационные эффекты (всплывающие меню, переключение между экранами путем их сдвига и т.п.).

Рисунок 2. Выбор микроконтроллера в зависимости от разрешения экрана при использовании TouchGFX

 

Приведенная таблица выбора микроконтроллера в зависимости от требований к разрешению дисплея ориентируется на дисплеи без контроллеров. Если мы выбираем дисплей с контроллером, то требования к микроконтроллеру могут быть кардинально уменьшены. Например, это справедливо, если дисплей подключается к управляющему микроконтроллеру через графический контроллер FTDI FT8xx. Микросхемы FT8xx включают в себя полностью готовую графическую подсистему с аппаратной графической библиотекой, контроллер сенсорного экрана и аудиоконтроллер (с контроллерами FTDI FT8xx можно подробно познакомиться в серии наших статей).  C их помощью можно реализовать хорошее графическое приложение, удовлетворяющее всем современным требованиям. При этом, для управления связкой FT8xx + дисплей может хватить ресурсов 8-разрядного микроконтроллера (требования к ресурсам микроконтроллера опять же определяются теми эффектами, которые мы хотим видеть на экране). Это решение оптимально для модернизации старых проектов без смены элементной базы и/или замены монохромных дисплеев на цветные. Но одним из ограничений аппаратной реализации FT8xx является поддерживаемое разрешение (максимальное 800 х 600).

Кроме аппаратной реализации графической библиотеки разработчикам доступны бесплатные версии библиотеки EmWin комании Segger, предлагаемые в составе своих средств разработки, например, такими производителями, как Microchip и ST Microelectronics. На следующем рисунке показан внешний вид приложения Harmony Graphics Composer, входящего в состав среды разработки MPLAB Microchip.

 

Рисунок 3. Реализация графического приложения в Harmony Graphics Composer

Библиотека TouchGFX позиционируется производителем как альтернатива EmWin, которая более эффективно использует ресурсы управляющего микроконтроллера и позволяет создавать графический интерфейс не хуже того, что мы видим на современных смартфонах и планшетах. TouchGFX представляет собой программную библиотеку, которая включает в себя все необходимые функции для создания современного графического приложения с минимальными затратами времени. На текущий момент библиотека оптимизирована для использования с микроконтроллерами типа ARM Cortex M3 и старше таких производителей, как NXP, ST Microelectronics, Renesas. В течение 2018 года производитель планирует добавить поддержку микроконтроллеров Microchip нового семейства PIC32 MZ DA. TouchGFX обеспечивает качественную работу графического интерфейса пользователя с поддержкой анимационных эффектов (переключение между экранами, реакция графических элементов на события в системе, всплывающие меню и т.п.) с частотой вывода кадров 25 fps и более. Библиотека может работать с разрешениями экрана до 1024 х 600 точек, при этом нагрузка на микроконтроллер в обычных случаях не превышает 15%. Типовые требования для нормальной работы к ресурсам системы следующие:

Встроенная RAM:

10-20 KБ требуется для работы библиотеки

1-15 КБ требуется для графических элементов

Встроенная ROM:

20 KБ для библиотеки.

1-100 KБ для описаний экранов и логики работы графического интерфейса.

Внешняя RAM:

              В зависимости от разрешения экрана и количества видеобуферов требования к внешней памяти могут быть следующие:

              Дисплей 320×240 QVGA с 2-мя видеобуферами = 307 KB.

              Дисплей 480×272 WQVGA с 2-мя видеобуферами = 522 KB.

              Дисплей 800×480 WVGA с 2-мя видеобуферами = 1.5 MB.

Внешняя Flash-память:

              Зависит от количества и размера графических элементов, используемых в приложении, типовые размеры составляют 1-8 MБ.

 

Требования к операционной системе – библиотека может работать как в приложениях без ОС, так и в приложениях с ОС. В последнем случае для работы требуется организация отдельной задачи и выделение двух семафоров.

Более подробное описание требований к аппаратной платформе и типов поддерживаемых микроконтроллеров можно найти на официальном сайте TouchGFX.com.

В комплект поставки входит сама графическая библиотека TouchGFX и графическая утилита TouchGFX Designer.  В программный пакет включены конвертеры шрифтов и растровых изображений (BMP и PNG 24-бит с поддержкой прозрачности). Для отладки приложения на ПК имеется симулятор (для Windows и Linux). Для создания целевого приложения могут использоваться компиляторы IAR, Keil и GCC. Библиотека TouchGFX является платным продуктом, лицензия дает право на ее использование на ограниченном числе устройств, по времени ограничений нет. Базовая лицензия, например, стоит 5000 евро и ограничена 3000 шт конечных изделий, дает право на обновления в течение года и техническую поддержку производителя. Для знакомства и освоения предлагается оценочная версия библиотеки TouchGFX, предоставляемая в полноценном варианте, без ограничения по времени. Отличием оценочной версии от лицензионной версии является логотип производителя, который периодически появляется на экране.

Графическое приложение на базе TouchGFX представляет собой набор “экранов”. Под экраном в TouchGFX понимается набор графических элементов и связанная с ними логика работы. Экран содержит в себе два класса: класс View, в котором определены все графические элементы, отображаемые при вызове этого экрана; класс Presenter обеспечивает взаимосвязь между экраном и внешними событиями (рис.4). Выделение памяти для приложения осуществляется на основе самого ресурсоемкого экрана. Одновременно приложение работает только с одним экраном. Соответственно, классы View и Presenter хранят информацию только для одного экрана, при переходе на другой экран эта информация теряется. Для взаимодействия между экранами и внешними событиями (это и периферия микроконтроллера, и внешние устройства) предназначен класс Model.

Рисунок 4. Архитектура TouchGFX

 

Базовые возможности библиотеки TouchGFX покажем на примере создания небольшого графическго приложения. Самый простой путь понять принципы работы с TouchGFX – это использовать графическую утилиту TouchGFX Designer. Утилита помогает в создании шаблона нашего будущего графического приложения, что мы и покажем далее.

После запуска утилиты нам будет предложено окно выбора уже существующего проекта или создание нового (рис.5).

Рисунок 5. Выбор параметров проекта в TouchGFX Designer 

В двух центральных окнах предлагается сделать выбор целевой платформы и шаблона приложения. В качестве шаблона может служить один из примеров производителя или пустая заготовка проекта. В окне выбора аппаратной платформы можно выбрать одну из предложенных отладочных плат (рис.6) или проект на базе симулятора на ПК. 

Рисунок 6. Выбор целевой платформы

 

Для нашего примера выберем отладочный набор STM32F429I-Disco и пустой шаблон. Нажатием кнопки «Create» создается заготовка проекта с настройками под выбранную отладочную плату и открывается основное рабочее окно TouchGFX Designer (рис. 7).

Рисунок 7. Основное рабочее окно TouchGFX Designer

 

В центре этого окна белое поле представляет экран дисплея с заданными ранее размерами (в нашем случае размеры экрана жестко привязаны к отладочной плате), одновременно отображается только один экран. Во вкладке «Screens» отображается список всех экранов, входящих в проект. Добавление нового экрана производится кнопок «+» вкладки «Screens» (поз.1, рис.7). Свойства экранов и графических элементов задаются на вкладке «Properties» (поз. 2, рис.7). Для экрана здесь можно задать имя и назначить выбранный экран стартовым, т.е. тем, который будет отображаться на дисплее при начале работы приложения. Здесь же, во второй вкладке «Interactions» могут быть описаны логические взаимосвязи между экранами, реакции на нажатие кнопок и некоторые другие действия. В поле (поз. 3, рис.7) расположены вкладки с виджетами (графическими объектами) и пользовательскими изображениями, добавленными в проект.

Текущая версия утилиты TouchGFX Designer не включает в себя все возможности библиотеки TouchGFX, а пока лишь небольшую их часть. Но данная утилита удобна для создания всех экранов-состояний нашего проекта, организации взаимосвязи и переходов между ними. Сложные графические элементы, такие как всплывающие меню, аналоговые часы и шкалы, создаются уже на программном уровне, как и взаимодействие с внешними устройствами.

Наше приложение будет состоять из трех экранов: Main, ScreenButton и ScreenImage (рис.8). Main – это главный экран приложения, на который можно вернуться из любого другого экрана. ScreenButton – на этом экране покажем взаимодействие между аппаратной кнопкой на отладочной плате и отображением иконки на экране. Переход с этого экрана может быть осуществлен на любой из оставшихся двух экранов нажатием одной из двух экранных кнопок. При переходе на экран ScreenImage на нем отображается картинка в течение заданного времени, а затем происходит переход на экран Main.

Рисунок 8. Внешний вид экранов примера

 

Экраны Main и ScreenButton имеют однотонный фон, который создается графическим элементом «Box» из вкладки виджетов (рис.9). Свойства этого элемента состоят из следующих параметров: размеры и координаты задают его расположение на экране и область, которую этот элемент занимает на экране; его цвет задается через стандартную палитру Windows. Кроме этого элемент имеет свойство прозрачности, значение которого задается параметром Alfa, где 0 – элемент полностью прозрачен, а 255 – полностью непрозрачен.

Рисунок 9. Добавление фона

 

Следующие элементы, которые будут присутствовать на экранах Main и ScreenButton – это кнопки. В библиотеке TouchGFX доступны три вида кнопок: кнопка с надписью (Button with label), кнопка с иконкой (Button with image) и простая кнопка без надписи и иконки. В основе всех этих кнопок лежат готовые графические примитивы, идущие в составе библиотеки. На экране Main используем кнопку с надписью, внешний вид и ее свойства приведены на следующем рисунке (рис.10). 

Рисунок 10. Свойства кнопки с надписью

 

Свойства этой кнопки включают в себя параметры надписи и параметры самой кнопки. Параметры надписи состоят из текста надписи, шрифта, угла поворота, цвета надписи в обычном и нажатом состоянии. По умолчанию в проект добавлен шрифт Verdana. Добавление своего шрифта осуществляется копированием файла выбранного шрифта в папку проекта fonts, которая расположена в следующем месте …FirstApp\Project\TouchGFX\assets\... Кроме физического добавления файла, пользовательский шрифт должен быть прописан в шаблоне Excel texts.xlsx, находящемся в папке texts и располагающемся в том же месте, где и папка fonts. Добавление шрифта, выбор его размера и т.д. можно производить и в TouchGFX Designer (рис.11). 

Рисунок 11. Добавление и назначение шрифтов 

 

После этих действий новый шрифт может быть использован в TouchGFX Designer. На следующем рисунке (рис. 12) показаны примеры использования шрифта Verdana и Arial. На первых трех кнопках используется Verdana с размерами 40, 20 и 10 px соответственно, на четвертой кнопке используется шрифт Arial с размером 20 px. Соответственно, если добавляемый шрифт имеет русские символы, то они будут доступны в приложении.

Рисунок 12. Использование шрифтов

 

Параметры кнопки задают ее внешний вид и реакции на нажатие. Внешний вид кнопки определяется готовым графическим элементом, одним или двумя. В первом случае внешний вид кнопки не меняется при нажатии, во втором - можно выбрать изображение для кнопки в нажатом и отпущенном состоянии. Все изображения, которые используются в приложении, находятся в папке …FirstApp\Project\TouchGFX\assets\images... Изображения кнопок, выбранные для нашего приложения, располагаются в папке FirstApp\Project\TouchGFX\assets\images\__designer\. При желании их внешний вид можно отредактировать в каком-либо графическом редакторе для получения кнопки требуемого цвета и вида. Некоторые из предлагаемых в библиотеке шаблонов кнопок приведены на следующем рисунке (рис. 13).

Рисунок 13. Варианты готовых шаблонов кнопок, предлагаемых в TouchGFX

 

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

Утилита TouchGFX Designer не предназначена для создания полнофункционального приложения. Но она упрощает задачу формирования скелета будущего графического приложения. В ней можно создать заготовки всех экранов приложения, а также прописать базовые переходы между ними и создать заготовки функций для обработки различных событий. Для создания переходов служит вкладка «Interactions», в которой мы можем определить необходимые реакции. На следующем рисунке (рис. 14) задана реакция на нажатие кнопки «Старт», при ее нажатии произойдет переход на экран ScreenButton.

Рисунок 14. Описание перехода при нажатии экранной кнопки

 

Первым шагом создания реакции является выбор события «Trigger», при наступлении которого будет запущена реакция. На рисунке 14 триггером служит нажатие кнопки, на рисунке 15 – активация экрана и срабатывание таймера. В зависимости от логики работы можно задать одну или несколько реакций на одно или несколько событий. На экране ScreenImage (рис. 15) заданы две реакции. Первая запускает таймер на заданное время, а вторая реакция происходит по окончании работы таймера. Базовыми действиями «Actions» реакций являются изменение состояний одного из графических объектов экрана, вызов функции, запуск таймера или переход на другой экран. В данном списке доступных действий особый интерес вызывает вызов функции. При выборе этого действия в проекте будет создана функция, в теле которой можно реализовать любую реакцию, например, прием или передачу данных. Это описание осуществляется на уровне С-кода во внешнем редакторе (MSVS, Keil или IAR).

Рисунок 15. Описание реакций на активацию экрана и таймер

 

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

Чтобы создать обработчик аппаратной кнопки проект надо открыть, например, в MS Visual Studio. Код проекта в TouchGFX Designer генерируется при запуске программного симулятора «Run simulator», загрузке кода в отладочную плату “Run Target” или при нажатии соответствующей кнопки «Generate code». Файл проекта Visual Studio находится в папке: FirstApp\Project\TouchGFX\simulator\msvs\, структура проекта приведена на следующем рисунке (рис.16). В нем можно выделить два раздела: gui_generated и gui. Первый содержит код, описывающий все, что нами было создано в TouchGFX Designer (экраны, переходы, реакции и т.д.). Каждый раз, когда мы вносим какие-либо изменения в проекте в графической утилите, все файлы в данной папке проекта автоматически обновляются. Раздел gui содержит пользовательские файлы проекта. Все функции и переменные, которые мы вносим в проект, должны размещаться здесь, чтобы при изменениях в проекте на уровне TouchGFX Designer они не потерялись.

Рисунок 16. Структура проекта TouchGFX

 

Файлы, отвечающие за каждый из экранов проекта, сгруппированы в соответствующих папках. Например, файлы описывающие состояния экрана ScreenButton, подчеркнуты красным цветом на следующем рисунке (рис.17).

Рисунок 17. Структура проекта TouchGFX и файлы, отвечающие за работу с конкретным экраном

 

Файлы ScreenButtonView.cpp и ScreenButtonViewBase.cpp отвечают за внешний вид экрана и события, которые происходят с элементами на данном экране. Эти два файла дополняют друг друга. Например, в файле ScreenButtonViewBase.cpp (рис. 17) в двух функциях описаны все графические элементы и реакции на нажатие кнопок экрана ScreenButton, которые мы определили в TouchGFX Designer. В файле ScreenButtonViewBase.cpp описаны те элементы, которые мы размещаем на экране ScreenButton в графической утилите, а также события, которые мы добавляем во вкладке «Interaction». В файле ScreenButtonView.cpp мы можем добавлять элементы с помощью соответствующих функций графической библиотеки.

На следующем шаге мы реализуем взаимодействие приложения с внешними событиями, т.е. в нашем примере это будет обработка нажатия кнопки на отладочной плате.  

В окне ScreenButton будет происходить смена иконок при нажатии кнопки. В файл ScreenButtonView.cpp поместим следующий код:

void ScreenButtonView::toggleLight()

{

       //make invisible is visible and vice versa. Invalidate to redraw

       peare_gul1.setVisible(!peare_gul1.isVisible()); // peare_gul1 - переменная, указывающая на файл иконки peare_gul.png 

       peare_gul1.invalidate();

}

При вызове данной функции будет меняться состояние иконки с желтой лампочкой с видимого на невидимое и обратно. Здесь используются следующие методы графической библиотеки: setVisible отвечает за отображение; isVisible – возвращает текущее состояние графического элемента; invalidate – говорит о том, что изображение должно быть перерисовано на экране.

Взаимодействие с внешними устройствами экрана происходит при помощи класса Presenter, уникального для каждого экрана. Для экрана ScreenButton этот класс описан в файле ScreenButtonPresenter.cpp. Через методы данного класса осуществляется вызов тех или иных функций экрана. Для нашего примера добавим в ScreenButtonPresenter.cpp вызов функции ScreenButtonView::toggleLight(), что будет выглядеть следующим образом:

void ScreenButtonPresenter::toggleLight()

{

       view.toggleLight();

}

  Взаимодействие приложения с внешним миром происходит при помощи методов, описанных в файле Model.cpp. В классе Model предусмотрена функция tick(), которая вызывается с частотой обновления экрана. В эту функцию мы можем добавлять обработчики событий. Результат действия обработчиков передается через указатель ModelListener в активный класс Presenter, и через него вызывается требуемая функция на активном экране. Добавим обработчик нажатия кнопки в Model.cpp:

#ifndef SIMULATOR  //не компилируется в MSVS и в режиме симулятора в TouchGFX Designer

extern "C"

{

#include "stm32f4xx.h"

#include "stm32f429i_discovery.h"

}

#endif

Model::Model() : modelListener(0), buttonState(0)

{

}

void Model::tick()

{

#ifndef SIMULATOR

       uint32_t button_sample = STM_EVAL_PB_GetState(BUTTON_KEY); // STM_EVAL_PB_GetState(BUTTON_KEY) - определны в файле stm32f429i_discovery.h

       if (button_sample != buttonState)

       {

             buttonState = button_sample;

             //toggle on button up

             if (button_sample == 0)

             {

                    modelListener->toggleLight();

             }

       }

#endif

}

C точки зрения обработки нажатия кнопки приведенный выше код не требует особых комментариев. А вот вызов функции смены состояния иконки происходит следующим образом. При наступлении события button_sample == 0 через указатель modelListener обращаемся к методу ScreenButtonPresenter::toggleLight() класса Presenter нашего активного окна. И через него вызываем функцию ScreenButtonView::toggleLight(), которая отображает или скрывает нужную иконку. Каждое новое нажатие кнопки на плате меняет текущее состояние иконки на противоположное.

Проверить работу приложения с кнопкой в симуляторе не получится по естественным причинам. Чтобы не было ошибки при компиляции, вся часть кода, связанная с аппаратной платформой, закоменнтирована для режима симуляции. Проверить работоспособность мы можем, загрузив наше приложение в микроконтроллер. Самый простой путь – это загрузка через TouchGFX Designer, для чего предусмотрена кнопка «Run Target» в правом верхнем углу окна утилиты (рис.7). Будет сформирован загрузочный файл intflash.hex, который будет загружен в микроконтроллер. При необходимости, этот файл может быть загружен и через стандартную утилиту STM32 ST-Link. Архив с проектом описанного примера доступен по ссылке. 

Графический интерфейс – это то, что пользователь сразу видит при выборе устройства и с чем постоянно сталкивается в процессе работы с этим устройством. Графический интерфейс определяет и внешний вид, и удобство работы. Графические библиотеки, аппаратные или программные, снимают с разработчика вопросы реализации стандартных элементов интерфейса. В зависимости от возможностей библиотек в них могут быть заложены те или иные эффекты, которые используются в современных графических приложениях. В данной статье мы познакомили с одной из таких библиотек – TouchGFX, богатый функционал которой заслуживает, как минимум, знакомства с ним.