Графический контроллер FT800.
Программные средства разработки и отладки

Главной особенностью графических контроллеров FT800/801 является встроенный процессор, формирующий изображение и выводящий его на экран TFT-дисплея. Формирование изображения происходит на основе набора команд (дисплей-листа), который передается управляющим микроконтроллером в FT800/801. Например, для вывода ряда кнопок достаточно передать в графический контроллер одну команду (четыре 32‑разрядных слова), и FT800/801 самостоятельно создаст изображение этих кнопок на экране TFT-дисплея. Набор команд графических контроллеров FTDI содержит более 50 функций, с чьей помощью можно выводить различные изображения на экран дисплея с теми или иными эффектами. Изучение их свойств и порядка их вызова может занять продолжительное время при первом знакомстве с FT800/801. В целях сокращения времени на изучение функционала FT800/801 производитель предоставляет набор программных средств, которые помогут освоить работу с графическими контроллерами и максимально быстро подготовить шаблоны для собственных проектов. Кроме того, данные программные средства позволят протестировать работу этих шаблонов на ПК без необходимости приобретения аппаратных средств на этапе ознакомления и начального тестирования.

Компания FTDI предлагает три программных продукта: EVE Screen Designer, EVE Screen Editor и MSVC Emulator. Все указанные средства распространяются свободно и доступны на сайте производителя. EVE Screen Designer и EVE Screen Editor рассчитаны на работу в ОС Windows 7 или старше.

EVE Screen Designer (рис. 1) предназначен для предварительной проработки графического интерфейса, его внешнего вида и элементов. С помощью этой утилиты можно точно разместить все требуемые элементы относительно друг друга. Для таких целей служит координатная сетка, масштаб и шаг которой может меняться в широких пределах. Специальный набор команд утилиты позволяет передвигать графические элементы с одного слоя изображения на другой, группировать их и закреплять на заданном месте. Все доступные в FT800/801 графические элементы расположены в окне Widget Selection. Добавление графического элемента в проект осуществляется простым перетягиванием из окна Widget Selection в центральное окно приложения, имитирующее экран дисплея. При добавлении графического элемента автоматически добавляются все дополнительные функции, которые управляют цветами выбранного элемента. В окне Widget Properties доступны все возможные настройки выбранного элемента. Одновременно в окно Output Window EVE Screen Designer генерируется соответствующий выбранному элементу фрагмент кода. Этот код может быть скопирован и использован для дальнейшей работы в другой утилите FTDI — EVE Screen Editor. На текущий момент основным достоинством приложения Screen Designer является возможность быстрого знакомства с графическим функционалом FT800/801. Добавляя элемент на экран, мы сразу получаем полный список команд в окне с кодом, которые могут понадобиться для оформления определенного элемента. Хотя код может быть избыточен для создания рабочей программы микроконтроллера, для освоения он очень полезен. Утилита наглядно показывает, какие команды отвечают за настройку того или иного элемента графического объекта.

Рис. 1. EVE Screen Designer

Приложение EVE Screen Editor (рис. 2), в отличие от EVE Screen Designer, позволяет не только приблизительно определить внешний вид графического приложения, но и частично протестировать его работу, а затем экспортировать в проект на Visual Studio. Экспорт в Visual Studio дает практически готовый код, подходящий для переноса его на любой микроконтроллер, если для работы с FT800/801 используется библиотека FTDI [3, 4, 5]. Следующая полезная функция Screen Editor — автоматическое конвертирование пользовательских шрифтов и растровых картинок в форматы, поддерживаемые микросхемами FTDI. При этом можно сразу оценить, как будут выглядеть шрифты и изображения на экране дисплея в зависимости от выбранного формата. В правом нижнем углу основного окна Screen Editor отображается загрузка графической памяти RAM_G, рабочей памяти RAM_DL и количество свободных указателей графических объектов (Bitmap Handle). Самым важным из них является индикатор загрузки графической памяти RAM_G, при работе с пользовательскими шрифтами и изображениями он позволяет оценить и на основе полученных результатов подобрать подходящий формат итогового изображения шрифтов и картинок. Далее на конкретном примере мы рассмотрим работу с этой утилитой подробнее.

Рис. 2. EVE Screen Editor

MSVC Emulator — программное средство, которое представляет собой специализированную графическую библиотеку для Microsoft Visual Studio (рис. 3). Эта библиотека эмулирует на экране ПК работу всех графических функций микросхем FT800/801, а также работу сенсорного экрана (за исключением функции одновременного детектирования нескольких касаний, поддерживаемой FT801 в случае емкостного сенсорного экрана). Проект для MS Visual Studio со встроенным эмулятором генерируется автоматически с помощью утилиты EVE Screen Editor при экспорте проекта. Работа эмулятора также будет рассмотрена ниже.

Рис. 3. Пример работы эмулятора MSVC Emulator

Описанные программные средства позволяют разработать графическое приложение для микросхем FT800/801 и протестировать его работу. При этом не требуется никаких дополнительных ресурсов, кроме ПК и установленной среды разработки Visual Studio. Для работы с эмулятором FT800/801 необходима версия Visual Studio Express 2012, которая распространяется бесплатно (нужна только регистрация на сайте Microsoft). Версия Visual Studio должна быть именно такая, поскольку библиотеки эмулятора скомпилированы под нее. После программной отладки полученный код можно использовать без изменений в рабочей программе для целевого микроконтроллера. Это справедливо в случае, если применяются библиотеки FTDI, как описано в [3, 4, 5]. Использование программных средств для разработки и отладки приложений позволит быстрее понять принципы работы графических контроллеров и освоить методику работы с ними.

Рассмотрим работу с утилитой EVE Screen Editor и эмулятором на следующем примере. Реализуем простое приложение, которое будет выполнять смену двух изображений на экране TFT-дисплея по нажатию кнопки.

Запускаем приложение EVE Screen Editor, при этом автоматически создается новый проект. Начнем оформление первого из состояний нашего приложения.

Зададим требуемый фон, перетащив из вкладки Toolbox в центральное окно, имитирующее экран дисплея, функцию CLEAR_COLOR_RGB. В нижнем окне во вкладке Coprocessor автоматически добавляется код, требуемый для вызова этой функции. Мышью выберем строку с новой функцией, и в крайнем правом окне во вкладке Properties появится описание функции и ее параметры (рис. 4). Для функции CLEAR_COLOR_RGB доступен один параметр — цвет. Для его изменения надо щелкнуть мышью по полю с цветом и выбрать новый с помощью стандартной палитры Windows. Редактирование параметров функций также можно выполнять в окне Coprocessor, внося соответствующие изменения в сгенерированный код.

Рис. 4. Добавление функции в проект

Установив требуемый фон, добавляем на экран кнопку CMD_BUTTON. Для изменения цветовой схемы кнопки предусмотрены две команды: Foreground Color (CMD_FGCOLOR) и Gradient Color (CMD_GRADCOLOR). CMD_FGCOLOR задает основной цвет графического элемента, CMD_GRADCOLOR задает цвет яркой области, если используется объемное изображение графического элемента. Цвет шрифта определяет команда Color RGB (COLOR_RGB) (рис. 5). Указанные команды добавляются в проект тем же перетаскиванием из меню Toolbox в центральное окно.

Рис. 5. Оформление кнопки

Надпись на кнопке задается в поле Text, а используемый шрифт — в поле Font вкладки Properties (рис. 6). Для использования кириллицы нам потребуется сконвертировать и загрузить в графический контроллер свой шрифт. Утилита Screen Editor позволяет сделать это следующим образом. Откроем вкладку Content и, нажав кнопку add, добавим требуемый шрифт (рис. 7) (в примере будет использован стандартный шрифт Times New Roman). Новый шрифт добавляется в проект перетаскиванием его в центральное окно программы. После этого в окне Coprocessor появится код, необходимый для инициализации шрифта (рис. 8). Параметры шрифта задаются во вкладке Properties (рис. 9). Свойства шрифта, определяемые этими параметрами, функции загрузки и вызова были подробно описаны в [3], в настоящей статье останавливаться на этом не будем. Утилита Screen Editor позволяет сразу оценить требуемые ресурсы для шрифта с выбранными параметрами. В поле Information вкладки Properties приводятся размер шрифта в сжатом виде (сколько памяти потребуется в управляющем микроконтроллере для хранения шрифта) и оригинальный размер (сколько графической памяти RAM_G FT800/801 будет занято этим шрифтом в процессе работы). Поле Charset этой же вкладки определяет набор символов, которые будут включены в шрифт. Напомним, что максимальное количество элементов одного шрифта ограничено 127 [3]. По умолчанию, после добавления шрифта в программу набор символов содержит стандартные элементы ASCII.

Рис. 6. Свойства кнопки

Рис. 7. Добавление шрифта в программу

Рис. 8. Код инициализации шрифта в проекте

Рис. 9. Свойства шрифта

В нашем примере будут использоваться две надписи на кнопках: «Старт» и «Назад». Для простоты ввода этих надписей в поле Charset заменим только символы «0123456789» символами «СтартНазад» (рис. 9). Это облегчит нам задачу ввода надписи на русском языке в примере. Чтобы на кнопке отобразилась надпись, выполненная новым шрифтом, надо заменить параметр Font на параметр, заданный в функции BITMAP_HANDLE(x), — в примере это «1». В результате надпись на кнопке «01234» трансформируется в «Старт», поскольку с соответствующими кодами в новом шрифте согласуются символы на кириллице (рис. 10).

Рис. 10. Результат замены шрифта на выбранный элемент

Добавим в проект растровое изображение — это будет логотип компании FTDI. Утилита Screen Editor позволяет работать с изображениями в форматах JPG, PNG или BMP. После того как изображения добавлены в программу, они автоматически конвертируются во внутренний формат FT800/801. Добавление картинок осуществляется аналогично загрузке шрифта. Во вкладке Content нажимаем кнопку add и выбираем требуемое изображение. Перетащив его из вкладки Content в центральное окно, добавляем изображение в наш проект (рис. 11). В свойствах изображения Properties можно выбрать формат вывода на экран. Заданный формат определяет качество представления картинки на экране, количество цветов и, соответственно, размер картинки. Утилита Screen Editor позволяет сразу увидеть изменения картинки на экране в зависимости от выбранного формата и оценить требуемый объем памяти. В поле Address задается начальный адрес размещения изображения в памяти RAM_G графических контроллеров FT800/801. В примере начальный адрес равен 7804, то есть изображение загружается после шрифта. Адрес может быть рассчитан утилитой автоматически или задан самостоятельно.

Рис. 11. Добавление изображения в проект

Итак, мы подготовили первый набор графических элементов, которые будут отображаться на экране нашего дисплея. Рассмотрим процесс его экспорта в Visual Studio, данная операция выполняется через меню Scripts — Export HAL(FTDI) Project. В результате будет создан полностью готовый проект для Visual Studio, в который будут включены две версии исполняемого кода — с эмулятором и без него (рис. 12). Версия с эмулятором предназначена для тестирования приложения на экране ПК. Версия без эмулятора может быть использована для тестирования приложения на модулях VM800B и VM800C FTDI [7]. Откроем в Visual Studio проект с эмулятором и запустим отладку. В результате работы эмулятора мы должны увидеть окно, имитирующее экран дисплея с заданными нами изображением логотипа и кнопки (рис. 13).

Рис. 12. Результат экспорта проекта в VS

Рис. 13. Результат выполнения проекта в VS

Закончим работу с первым состоянием экрана, добавив функцию TAG для кнопки «Старт». Эта функция назначает метку графическому элементу, перед которым происходит ее вызов. Использование метки упрощает обработку событий сенсорного экрана. При касании экрана в любой области графического элемента с назначенной меткой в регистр REG_TOUCH_TAG записывается значение этой метки, которое может быть прочитано. Это гораздо удобнее, чем использование координат для определения области касания сенсорного экрана. Назначение кнопке метки происходит путем перетаскивания функции TAG из вкладки Tools — Graphics State. В центральном окне метка не отображается визуально, добавляется только код, который можно посмотреть в окне Coprocessor. Проконтролировать работу функции TAG можно следующим образом. Откроем в нижней части основного окна Screen Editor вкладку Inspector. В ее правой части отображается окно RAM_REG. Нас интересует регистр RAM_TOUCH_REG, значение которого сейчас равно «0». В меню выберем инструмент Touch, при этом курсор становится эмулятором сенсорного экрана (рис. 14), наведем курсор на любую область кнопки «Старт» и нажмем левую кнопку мыши — регистр REG_TOUCH_TAG изменит свое значение на то, которое указано в функции TAG.

Рис. 14. Выбор инструмента Touch

Теперь добавим в проект второй набор элементов, который будет отображаться на экране дисплея после нажатия кнопки «Старт». Текущая версия Screen Editor позволяет работать только с одним состоянием экрана, поэтому мы расположим новые элементы поверх старых. В нашем примере количество графических элементов невелико, поэтому мы можем упростить себе задачу таким образом. При большом количестве элементов разумнее создать новый проект для нового состояния экрана.

Теперь завершим наш пример, добавив в него вторую картинку и кнопку «Назад». Вторая картинка добавляется аналогично тому, как было описано ранее. А добавление кнопки проще всего выполнить копированием кода в окне Coprocessor. Обе кнопки в нашем примере располагаются в одном и том же месте экрана дисплея. Они отличаются надписью и меткой TAG. По окончании копирования код будет выглядеть следующим образом:

// кнопка 1
CMD_FGCOLOR(101, 255, 204)
CMD_GRADCOLOR(14, 38, 255)
COLOR_RGB(16, 52, 255)
TAG(1) // метка 1
CMD_BUTTON(152, 212, 153, 43, 1, 0, "01234") // надпись “Старт”

// кнопка 2
CMD_FGCOLOR(101, 255, 204)
CMD_GRADCOLOR(14, 38, 255)
COLOR_RGB(16, 52, 255)
TAG(2) // метка 2
CMD_BUTTON(152, 212, 153, 43, 1, 0, "56789") надпись “Назад”

В результате наше приложение в Screen Editor будет выглядеть так (рис. 15). Чтобы проверить, что в результате добавления новых элементов мы не внесли ошибок, можно проконтролировать работу всех функций по шагам. Во вкладке Controls в правой части окна Screen Editor выберем пункт Сoprocessor. C помощью текстового поля напротив этого пункта стрелками «вверх/вниз» осуществляется пошаговое выполнение кода. При этом текущая выполняемая функция в нижнем окне Coprocessor подсвечивается желтым цветом (рис. 16).

Рис. 15. Итоговый вид приложения

Рис. 16. Пошаговое выполнение кода

После прогона приложения по шагам, убедившись, что все элементы отображаются на экране, экспортируем итоговый проект в Visual Studio. В результате мы получаем готовый проект. Поскольку текущая версия Screen Editor не может работать с несколькими состояниями экрана дисплея, то наш экспортированный проект будет содержать только один дисплей-лист, где происходит вызов всех графических элементов. Логику работы нашего примера предстоит окончательно реализовать уже в Visual Studio.

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

void main()

#endif
{
 ft_uint8_t status=0;
 ft_uint8_t ReadWord;

// инициализация дисплея и SPI
    Ft_Gpu_Hal_Init(&halinit);
    host.hal_config.spi_clockrate_khz = 15000; //in KHz;
    Ft_Gpu_Hal_Open(phost);
    Ft_App_BootupConfig();

    // загрузка и установка параметров для шрифта
    Ft_Gpu_CoCmd_Dlstart(phost);
    Ft_Gpu_Hal_WrCmd32(phost,CMD_INFLATE);
    Ft_Gpu_Hal_WrCmd32(phost,RAM_TIMES);
    Ft_Gpu_Hal_WrCmdBuf(phost,TIMES, sizeof(TIMES));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_HANDLE(1));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SOURCE(148));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_LAYOUT(L1, 4, 33));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SIZE(NEAREST, BORDER, BORDER, 32, 33));
    Ft_Gpu_CoCmd_SetFont(phost,1, 0);

    // загрузка и установка параметров для первого логотипа
    Ft_Gpu_Hal_WrCmd32(phost,CMD_INFLATE);
    Ft_Gpu_Hal_WrCmd32(phost,RAM_FTDI_LOGO);
    Ft_Gpu_Hal_WrCmdBuf(phost,FTDI_logo, sizeof(FTDI_logo));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_HANDLE(2));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SOURCE(7804));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_LAYOUT(RGB565, 274, 64));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SIZE(NEAREST, BORDER, BORDER, 137, 64));

    // загрузка и установка параметров для второго логотипа
    Ft_Gpu_Hal_WrCmd32(phost,CMD_INFLATE);
    Ft_Gpu_Hal_WrCmd32(phost,RAM_EFO_LOGO);
    Ft_Gpu_Hal_WrCmdBuf(phost,efo_logo, sizeof(efo_logo));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_HANDLE(3));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SOURCE(25340));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_LAYOUT(RGB565, 236, 122));
    Ft_App_WrCoCmd_Buffer(phost,BITMAP_SIZE(NEAREST, BORDER, BORDER, 118, 122));

    Ft_App_WrCoCmd_Buffer(phost,CLEAR_COLOR_RGB(255, 255, 255));
    Ft_App_WrCoCmd_Buffer(phost,CLEAR(1, 1, 1));

    Ft_App_WrCoCmd_Buffer(phost,DISPLAY());
    Ft_Gpu_CoCmd_Swap(phost);
    Ft_App_Flush_Co_Buffer(phost);

while(1){…}
}

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

while(1){

 if (status == 0) // вызывается экран с первым логотипом
    {
    Ft_Gpu_CoCmd_Dlstart(phost);
    Ft_App_WrCoCmd_Buffer(phost,CLEAR_COLOR_RGB(255, 255, 255));
    Ft_App_WrCoCmd_Buffer(phost,CLEAR(1, 1, 1));

    // вызов первого логотипа
    Ft_App_WrCoCmd_Buffer(phost,BEGIN(BITMAPS));
    Ft_App_WrCoCmd_Buffer(phost,VERTEX2II(159, 67, 2, 0));
    Ft_App_WrCoCmd_Buffer(phost,END());

    // вызов кнопки с надписью "Старт"
    Ft_Gpu_CoCmd_FgColor(phost,6684620);
    Ft_Gpu_CoCmd_GradColor(phost,927487);
    Ft_App_WrCoCmd_Buffer(phost,COLOR_RGB(16, 52, 255));
    Ft_App_WrCoCmd_Buffer(phost,TAG(1));
    Ft_Gpu_CoCmd_Button(phost,152, 212, 153, 43, 1, 0, "01234");

    Ft_App_WrCoCmd_Buffer(phost,DISPLAY());
    Ft_Gpu_CoCmd_Swap(phost);
    Ft_App_Flush_Co_Buffer(phost);

    //проверка нажатия кнопки с помощью регистра меток
    ReadWord = Ft_Gpu_Hal_Rd8(phost, REG_TOUCH_TAG);
    if (ReadWord == 1){
    status = 1;
    Ft_Gpu_Hal_Sleep(200);
        }
    }

    if (status == 1) // вызывается экран со вторым логотипом
    {
    Ft_Gpu_CoCmd_Dlstart(phost);
    Ft_App_WrCoCmd_Buffer(phost,CLEAR_COLOR_RGB(255, 255, 255));
    Ft_App_WrCoCmd_Buffer(phost,CLEAR(1, 1, 1));

    // вызов второго логотипа
    Ft_App_WrCoCmd_Buffer(phost,BEGIN(BITMAPS));
    Ft_App_WrCoCmd_Buffer(phost,VERTEX2II(172, 49, 3, 0));
    Ft_App_WrCoCmd_Buffer(phost,END());

    // вызов кнопки с надписью "Назад"
    Ft_Gpu_CoCmd_FgColor(phost,6684620);
    Ft_Gpu_CoCmd_GradColor(phost,927487);
    Ft_App_WrCoCmd_Buffer(phost,COLOR_RGB(16, 52, 255));
    Ft_App_WrCoCmd_Buffer(phost,TAG(2));
    Ft_Gpu_CoCmd_Button(phost,152, 212, 153, 43, 1, 0, "56789");

    Ft_App_WrCoCmd_Buffer(phost,DISPLAY());
    Ft_Gpu_CoCmd_Swap(phost);
    Ft_App_Flush_Co_Buffer(phost);

    //проверка нажатия кнопки с помощью регистра меток
    ReadWord = Ft_Gpu_Hal_Rd8(phost, REG_TOUCH_TAG);
    if (ReadWord == 2){
    status = 0;
    Ft_Gpu_Hal_Sleep(200);
        }
    }
 }

Теперь пример полностью готов, и можно проверить его работу. В результате мы должны увидеть окно эмулятора с изображением логотипа FTDI и кнопки «Старт». Во второе состояние экран дисплея перейдет после того, как мы наведем курсор на кнопку и нажмем левую кнопку мыши. Проконтролировать работу обработчика сенсорного экрана можно с помощью текста в верхней части окна эмулятора. В квадратных скобках отображаются текущие координаты курсора и состояние регистра меток REG_TOUCH_TAG (рис. 17).

Рис. 17. Координаты курсора и состояние регистра меток

Приведенный выше код можно перенести на микроконтроллер без дополнительных изменений, если применяются библиотеки FTDI. Например, можно протестировать работу этой программы на микроконтроллере Atmel SAMD21, для которого процесс портирования и использования библиотек для FT800 был описан в [4, 5]. Готовый проект можно посмотреть по ссылке [8]. Результат работы описанного примера на микроконтроллере Atmel SAMD21 и TFT-дисплеях компании Riverdi приведен на рис. 18 и 19. Дисплеи этого производителя уже содержат графические контроллеры FT800 и FT801. Компания Riverdi является первым производителем, кто начал серийное производство TFT-модулей на базе микросхем FTDI.

Рис. 18. Изображение на экране дисплея RVT43ULFNWC0x

Рис. 19. Изображение на экране дисплея RVT4.3B480272CNWR00

В качестве заключения отметим, что обновленная утилита Screen Editor и эмулятор MSVC Emulator для Visual Studio открывают много новых возможностей для освоения и оценки графических контроллеров FT800/801. С помощью предлагаемого ПО можно заранее продумать расположение всех элементов графического интерфейса на экране дисплея, прикинуть цветовое оформление, подобрать шрифты и изображения. Screen Editor позволяет преобразовать подготовленный макет в код, а MSVC Emulator — проверить работоспособность создаваемого приложения на ПК. Данное ПО будет полезно и тем, кто только подбирает решение для новых проектов. С его помощью, без дополнительных затрат, можно заранее познакомиться с основным функционалом графических контроллеров FTDI и протестировать его возможности посредством эмулятора на ПК.