Название урока, конечно, сильно преувеличено. На самом деле речь пойдет о рисовании графических объектов — геометрических примитивов и спрайтов на экране CyberSteak’а.
Экран конструктора TFT 1,44″ имеет разрешение 128х128 пикселей, количество цветов 262143, что означает 18 bit/pixel. Для экономии памяти микроконтроллера мы будем использовать в своих приложениях интерфейс RGB565, что означает 5 bit на красный, 6 bit на зеленый и 5 bit на синий компонент пикселя. Экран в таком формате отображает 65535 цветов, т.е. 16 bit/pixel, чего вполне достаточно для экрана с таким разрешением.
Микроконтроллер управляет экраном по протоколу spi. Сначала мы включим поддержку этого протокола, а затем подключим к проекту графическую библиотеку.
Откройте в STM32CubeMX проект из предыдущего урока. В меню File выберите Save Project As.. и задайте новое имя проекту.
Во вкладке Pinout разверните периферийный модуль SPI и выберите режим (Mode) Transmit Only Master. Этот режим поддерживает только передачу данных от контроллера устройству, в нашем случае — экрану. Считывать данные из регистров экрана мы не будем.
Установите выводы PA1, PA3, PA4, PA6 как выходы (режим GPIO_Output) и присвойте им названия, как показано на скриншоте:
Во вкладке Configuration выберите настройку GPIO — портов ввода-вывода. Выводы PA1, PA4, PA6 участвуют в передаче команд и данных экрану, присвоим им, согласно даташиту на контроллер экрана, низкое значение уровня, указав Low в поле GPIO output level для каждого вывода. PA3, он же — Backlight — служит для включения подсветки экрана, катод которого подключен к минусу, поэтому для анода присвоим высокое значение High.
Нажмите Ok и перейдите к настройке протокола SPI. Значения, выставленные по-умолчанию подходят нашему проекту. Единственное, что нужно изменить — это делитель частоты. В поле Prescaler установите значение 4 и нажмите Ok.
После этого, сохраните проект, сгенерируйте код и импортируйте его в среду разработки SW4STM32, следуя рекомендациям из предыдущего урока.
После компиляции проекта должна включиться подсветка экрана. Но это еще не значит, что мы его настроили. Необходимо подключить библиотеку для работы с экраном. В репозитории находятся две библиотеки для скачивания. Одна для экранов на контроллере st7735, а другая — для экранов на контроллере ili9163. Отличить экраны между собой можно по внешнему виду гибкого шлейфа, если отсутствует иная информация:
Скачайте необходимую библиотеку, разархивируйте и скопируйте файл с расширением *.с в папку Src, а с расширением *.h в папку Inc, которые находятся в папке с проектом. После этого зайдите в SW4STM32 и выполните команду обновить, нажав правой клавишей на проекте и выбрав в контекстном меню команду Refresh или нажав клавишу F5.
Откройте main.c и выполните подключение библиотеки. Например, для экрана с контроллером ili9163 подключение выглядит следующим образом:
/* USER CODE BEGIN Includes */
#include "ili9163.h"
/* USER CODE END Includes */
Прокрутите код до функции int main(void) и после инициализации периферии выполните инициализацию экрана:
/* Initialize all configured peripherals */
MX_GPIO_Init();
MX_SPI1_Init();
/* USER CODE BEGIN 2 */
display_init();
display_setRotation(2);
display_clear(BLUE);
display_on();
/* USER CODE END 2 */
Здесь display_init() — инициализация экрана. В этот момент происходит настройка всех его регистров, отвечающих за разрешение, цветопередачу, контроль питания, настройку частоты и т.д.
display_setRotation(2) — угол поворота экрана с шагом 90o. Возможные варианты от 0 до 3.
display_clear(BLUE) — очистка экрана, т.е. заливка выбранным цветом.
display_on() — включение дисплея.
Запрограммируйте CyberSteak. Экран теперь светится синим цветом.
Все функции, доступные для использования находятся в файле библиотеки экрана с расширением *.h. Сами функции описаны в файле *.с.
Основным цветам в библиотеке присвоены названия (см. *.h). Для получения произвольного цвета необходимо его указать в 16bit формате RGB565, например, воспользовавшись калькулятором.
Давайте нарисуем закрашенный прямоугольник произвольного цвета на черном фоне. Для этого очистим экран черным цветом: display_clear(BLACK). После команды включения дисплея добавим функцию рисования закрашенного прямоугольника в точке с координатами x=50, y=20, шириной 30, высотой 70 пикселей, цвет — оттенок зеленого: fillrect(50,20,30,70,0x2E45).
Потренируйтесь с выводом на экран остальных геометрических фигур, доступных в библиотеке.
Теперь давайте выведем на экран картинку, заполняющую весь экран, т.е. размерами 128х128 пикселей. Для этого в библиотеке предусмотрена функция draw_background(const uint16_t *background), где *background — указатель на массив цветов пикселей. Выберите подходящую картинку и с помощью, например, Photoshop’а сделайте ее размерами 128х128 пикселей, сохранив в формате PNG:
Далее воспользуйтесь приложением LCD Image Converter, о котором мы рассказывали на уроке №3. Запустите приложение и в меню File выполните команду Open для открытия файла рисунка, который вы приготовили, предварительно установив тип Images для отображения файлов с рисунками в форматах *.bmp, *.gif, *.jpg, *.png и т.п.
Установите желаемый масштаб отображения картинки, например х2. Подкорректируйте, если есть необходимость, некоторые пиксели. В меню Options выберите пункт Conversion. Выберите preset: Color R5G6B5. Во вкладке Prepare установите Type: Color, Main Scan Direction: Top to Bottom, Line Scan Direction: Forward. Далее во вкладке Matrix установите Type: Color, а во вкладке Image нужно установить Block Size: 16bit. После этого в меню File выберите Convert, укажите имя файла и нажмите Сохранить. Программа создаст файл с расширением *.с, в котором находится массив цветов пикселей. Этот массив данных теперь необходимо скопировать в файл, который мы будем использовать нашей программой в качестве ресурса для графических элементов — фона, спрайтов и др.
Откройте SW4STM32 и создайте в папке Inc файл pictures.h. Скопируйте созданный ранее массив данных в этот файл:
Откройте main.c и подключите ресурсный файл pictures.h к проекту:
/* USER CODE BEGIN Includes */
#include "ili9163.h"
#include "pictures.h"
/* USER CODE END Includes */
Теперь в файле main.c вместо display_clear(BLACK) добавьте строку draw_background(background), где background — указатель на массив картинки.
Скомпилируйте проект и запрограммируйте CyberSteak. На экране должна появиться наша картинка:
А теперь добавим ракету. В графическом редакторе создайте спрайт на черном фоне, небольшого размера, например 20х70 (ш х в) пикселей:
Создайте массив цветов пикселей для этого спрайта с помощью конвертера LCD Image Converter и добавьте массив в ресурсный файл pictures.h. Откройте main.c и после команды включения дисплея добавьте строку отображения спрайта:
/* USER CODE BEGIN 2 */
display_init(); //display initialization
display_setRotation(2);
draw_background(background);
display_on();
draw_sprite (10, 8, 20,70, rocket, background);
/* USER CODE END 2 */
Запись означает: отобразить спрайт с координатами верхнего левого угла x=10, y=8, шириной 20, высотой 70 пикселей, указатель на массив спрайта: rocket, указатель на массив фона: background.
В итоге на экране должна появиться такая картинка:
Урок по рисованию закончен. В другой раз поговорим о письменности.