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

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

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

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

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

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

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

Кроме аппаратной реализации графической библиотеки, специалистам доступны бесплатные версии библиотеки EmWin компании Segger, предлагаемые в составе своих средств разработки, например, такими производителями, как Microchip и ST Microelectronics.

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

• Встроенная RAM:
  • 10–20 кбайт для работы библиотеки;
  • 1–15 кбайт для графических элементов.
• Встроенная ROM:
  • 20 кбайт для библиотеки;
  • 1–100 кбайт для описаний экранов и логики работы графического интерфейса.
• Внешняя RAM — в зависимости от разрешения экрана и количества видеобуферов требования к внешней памяти могут быть следующие:
  • дисплей 320×240 QVGA с двумя видеобуферами = 307 кбайт;
  • дисплей 480×272 WQVGA с двумя видеобуферами = 522 кбайт;
  • дисплей 800×480 WVGA с двумя видеобуферами = 1,5 Mбайт.
• Внешняя Flash:
  • зависит от количества и размера графических элементов, используемых в приложении, типовые размеры составляют 1–8 Mбайт.

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

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

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

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

Рис. 2. Архитектура TouchGFX

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

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

После запуска утилиты будет предложено окно выбора уже существующего проекта или формирование нового (рис. 3). В двух центральных окнах можно выбрать целевую платформу и шаблон приложения. В качестве шаблона служит один из примеров производителя или пустая заготовка проекта. В окне выбора аппаратной платформы можно выбрать одну из предложенных отладочных плат (рис. 4) или проект на базе симулятора на ПК. Для нашего примера выберем отладочный набор STM32F429I-Disco и пустой шаблон.

Рис. 4. Выбор целевой платформы

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

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

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

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

Рис. 6. Внешний вид экранов примера:
а) экран Main;
б) экран ScreenButton;
в) экран ScreenImage

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

Рис. 7. Добавление фона

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

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

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

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

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

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

При желании их внешний вид можно отредактировать в каком-либо графическом редакторе для получения кнопки требуемого цвета и вида. Некоторые из предлагаемых в библиотеке шаблонов кнопок приведены на рис. 11.

Рис. 11. Варианты кнопок

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

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

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

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

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

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

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

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

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

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

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

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

void ScreenButtonView::toggleLight()

{

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

      peare_gul1.setVisible(!peare_gul1.isVisible());

      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);
  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 в правом верхнем углу окна утилиты (рис. 5). Будет сформирован загрузочный файл intflash.hex, который загрузится в микроконтроллер. При необходимости этот файл можно загрузить и через стандартную утилиту STM32 ST-Link. Архив с проектом описанного примера доступен по ссылке [4].

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