`Display`: Дисплей

Display 

Display lilka::display: Екземпляр класу Display, який можна використовувати для роботи з дисплеєм. Вам не потрібно інстанціювати Display вручну.

class Display : public Arduino_ST7789, public lilka::GFX<Display>

Клас для роботи з дисплеєм.

Дивись також

Використовується для відображення графічних об’єктів.

Цей клас наслідує Arduino_GFX з бібліотеки Arduino_GFX_Library, а також клас GFX.

Детальніше про доступні методи можна дізнатися в документації бібліотеки Arduino_GFX_Library - https://github.com/moononournation/Arduino_GFX.

#include <lilka.h>

void setup() {
    lilka::begin();
}

void loop() {
   lilka::display.fillScreen(lilka::colors::Red); // Заповнити екран червоним кольором
   lilka::display.setCursor(32, 32);
   lilka::display.setTextColor(lilka::colors::Green); // Зелений текст
   lilka::display.print("Привіт, Лілка!");
}

Public Functions

void begin(): Почати роботу з дисплеєм.

Попередження

Цей метод викликається автоматично при виклику lilka::begin().

void showStartupScreen()

Відобразити вітальний екран Лілки.

Цей метод відображає зображення, встановлене за допомогою setSplash(). За замовчуванням це вітальний екран Лілки.

Дивись також

setSplash

Примітка

Цей метод викликається автоматично при виклику lilka::begin(), якщо LILKA_NO_SPLASH не встановлено в true.

void setSplash(const void *splash, uint32_t rleLength = 0)

Встановити зображення, яке буде відображатися при запуску.

За замовчуванням відображається вітальний екран Лілки.

Його потрібно викликати перед викликом lilka::begin() або не викликати взагалі.

Примітка

Якщо викликати цей метод, то вітальний екран буде відображатись навіть якщо LILKA_NO_SPLASH встановлено в true.

Параметри:

splash – Масив 16-бітних кольорів (5-6-5) з розміром 280*240 (або масив байтів, закодованих алгоритмом RLE, з довжиною rleLength).
rleLength – Якщо використовується RLE-кодування, цей аргумент вказує довжину масиву splash. Зображення повинне бути згенероване за допомогою утиліти sdk/tools/image2code з прапорцем --rle.

uint16_t color565hsv(uint16_t hue, uint8_t sat, uint8_t val)

Перетворити HSV колір в 16-бітний формат.

Параметри:

hue – Тон (0-360).
sat – Насиченість (0-100).
val – Яскравість (0-100).

Повертає:

16-бітний колір.

Canvas 

class Canvas : public Arduino_Canvas, public lilka::GFX<Canvas>

Клас для роботи з графічним буфером. Він наслідує клас Arduino_Canvas з бібліотеки Arduino_GFX_Library, а також клас GFX.

Дивись також

GFX

При частому перемальовуванні екрану без використання буфера може спостерігатися мерехтіння. Наприклад, якщо використовувати метод fillScreen для очищення екрану перед кожним викликом print, то текст буде мерехтіти.

Щоб уникнути цього, можна використовувати графічний буфер. Цей клас дозволяє малювати графічні об’єкти на буфері, а потім відобразити його на екрані за допомогою методу lilka::display.drawCanvas. Фактично, цей клас і є графічним буфером.

Такий підхід дозволяє зменшити мерехтіння, але збільшує використання пам’яті. Він називається «буферизація», оскільки ми спершу малюємо на буфері, а тоді відображаємо буфер на екрані.

Цей клас, як і Display, є підкласом Arduino_GFX з бібліотеки Arduino_GFX_Library. Це означає, що майже всі методи, які доступні в Display, також доступні в Canvas.

#include <lilka.h>

void setup() {
    lilka::begin();
}

void loop() {
    lilka::Canvas canvas; // Створити новий Canvas зі стандартним розміром (розмір дисплею)
    int y = 100;
    while (1) {
        canvas.fillScreen(lilka::colors::Black); // Заповнити буфер чорним кольором
        canvas.setCursor(32, y);
        canvas.setTextColor(lilka::colors::Black); // Чорний текст
        canvas.print("Привіт, Лілка!");
        lilka::display.drawCanvas(&canvas); // Відобразити буфер на екрані - жодного мерехтіння!
        y++;
        if (y > 200) {
            y = 100;
        }
    }
}

Public Functions

Canvas(): Створити буфер зі стандартним розміром (який дорівнює розміру дисплею).

Canvas(uint16_t w, uint16_t h)

Створити буфер з заданими розмірами.

Параметри:

w – Ширина буфера.
h – Висота буфера.

Canvas(uint16_t x, uint16_t y, uint16_t w, uint16_t h)

Створити буфер з заданими розмірами та позицією.

Параметри:

x – Координата X лівого верхнього кута буфера.
y – Координата Y лівого верхнього кута буфера.
w – Ширина буфера.
h – Висота буфера.

GFX 

template<typename T> class GFX

Цей клас описує спільні методи для класів Display та Canvas, оскільки вони обидва є підкласами GFX.

Public Functions

uint16_t color565(uint8_t r, uint8_t g, uint8_t b)

Перетворити RGB колір в 16-бітний формат.

Оскільки дисплей підтримує лише 16-бітні кольори, цей метод дозволяє перетворити 24-бітний колір в 16-бітний.

Параметри:

r – Компонента R.
g – Компонента G.
b – Компонента B.

void setFont(const uint8_t *font)

Встановити шрифт.

Шрифт можна вибрати зі списку рекомендованих шрифтів:

FONT_4x6
FONT_5x7
FONT_5x8
FONT_6x12
FONT_6x13
FONT_7x13
FONT_8x13
FONT_8x13_MONO
FONT_9x15
FONT_10x20
FONT_10x20_MONO

Також можна використати будь-який інший шрифт з бібліотеки U8g2: https://github.com/olikraus/u8g2/wiki/fntlistallplain

lilka::display.setFont(FONT_6x12);
lilka::display.setCursor(0, 32);
lilka::display.print("Привіт, Лілка!");

Параметри:: font – Вказівник на шрифт.

void setCursor(int16_t x, int16_t y)

Встановити курсор.

Параметри:

x – Координата X.
y – Координата Y.

void setTextSize(uint8_t size)

Встановити масштаб тексту.

Якщо цей параметр дорівнює 1, текст виводиться в масштабі 1:1. Якщо 2, то кожен піксель тексту буде займати 2x2 пікселі на екрані, і так далі.

Параметри:: size – Масштаб.

void setTextColor(uint16_t color): Встановити колір тексту.

void setTextColor(uint16_t color, uint16_t background): Встановити колір тексту та фону.

void print(...)

Відобразити текст.

lilka::display.setCursor(0, 32);
lilka::display.setTextColor(lilka::colors::Black); // Чорний текст
lilka::display.print("Привіт, ");
lilka::display.print(String("Лілка!\n"));
lilka::display.print(42);

Дивись також

setCursor, setTextColor, setTextSize, setFont

Параметри:: ... – Текст.

void fillScreen(uint16_t color): Заповнити екран кольором.

void drawPixel(int16_t x, int16_t y, uint16_t color): Встановити колір пікселя.

void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color): Намалювати лінію.

void drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color): Намалювати прямокутник.

void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color): Намалювати заповнений прямокутник.

void drawCircle(int16_t x, int16_t y, int16_t r, uint16_t color): Намалювати коло.

void fillCircle(int16_t x, int16_t y, int16_t r, uint16_t color): Намалювати заповнене коло.

void drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color): Намалювати трикутник.

void fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color): Намалювати заповнений трикутник.

void drawEllipse(int16_t x, int16_t y, int16_t rx, int16_t ry, uint16_t color)

Намалювати еліпс.

Параметри:

x – Координата X центру еліпса.
y – Координата Y центру еліпса.
rx – Радіус по X.
ry – Радіус по Y.
color – Колір.

void fillEllipse(int16_t x, int16_t y, int16_t rx, int16_t ry, uint16_t color)

Намалювати заповнений еліпс.

Дивись також

drawEllipse

void drawArc(int16_t x, int16_t y, int16_t r1, int16_t r2, int16_t start, int16_t end, uint16_t color)

Намалювати дугу.

Параметри:

x – Координата X центру дуги.
y – Координата Y центру дуги.
r1 – Зовнішній радіус дуги.
r2 – Внутрішній радіус дуги.
start – Початковий кут (в градусах).
end – Кінцевий кут (в градусах).
color – Колір.

void fillArc(int16_t x, int16_t y, int16_t r1, int16_t r2, int16_t start, int16_t end, uint16_t color)

Намалювати заповнену дугу.

Дивись також

drawArc

void draw16bitRGBBitmap(int16_t x, int16_t y, uint16_t *bitmap, int16_t w, int16_t h)

Намалювати зображення з масиву 16-бітних точок.

lilka::Image *image = lilka::resources.loadImage("image.bmp");
lilka::display.drawBitmap(0, 0, image->pixels, image->width, image->height);

Параметри:

x – Координата X лівого верхнього кута зображення.
y – Координата Y лівого верхнього кута зображення.
bitmap – Масив 16-бітних кольорів.
w – Ширина зображення.
h – Висота зображення.

void draw16bitRGBBitmap(int16_t x, int16_t y, const uint16_t bitmap[], int16_t w, int16_t h)

Дивись також

draw16bitRGBBitmap

void draw16bitRGBBitmapWithTranColor(int16_t x, int16_t y, uint16_t *bitmap, uint16_t transparent_color, int16_t w, int16_t h)

Намалювати зображення з масиву 16-бітних точок і вказати колір, який буде вважатися прозорим.

// Завантажити зображення з файлу "image.bmp", використовуючи білий колір як прозорий.
lilka::Image *image = lilka::resources.loadImage("image.bmp", lilka::colors::White);
lilka::display.draw16bitRGBBitmapWithTranColor(
    0, 0, image->pixels, image->transparentColor, image->width, image->height
);

Параметри:

x – Координата X лівого верхнього кута зображення.
y – Координата Y лівого верхнього кута зображення.
bitmap – Масив 16-бітних кольорів.
transparent_color – Колір, який буде вважатися прозорим.
w – Ширина зображення.
h – Висота зображення.

void drawCanvas(Canvas *canvas): Відобразити буфер на екрані (див. lilka::Canvas).

void drawImage(Image *image, int16_t x, int16_t y)

Намалювати зображення.

lilka::Image *image = lilka::resources.loadImage("image.bmp");
if (!image) {
    Serial.println("Failed to load image");
    return;
}
lilka::display.drawImage(image, 32, 64);
// Звільнюємо пам'ять
delete image;

Параметри:

image – Вказівник на зображення (об’єкт класу lilka::Image).
x – Координата X осі зображення.
y – Координата Y осі зображення.

void drawImageTransformed(Image *image, int16_t x, int16_t y, Transform transform)

Намалювати зображення з афінними перетвореннями.

Дивись також

lilka::Transform

Примітка

Зверніть увагу, що перетворення - це повільніше, ніж звичайне малювання зображення, оскільки обчислює координати пікселів «на льоту». Використовуйте його лише тоді, коли не можете заздалегідь створити обернені копії зображеня за допомогою методів lilka::Image::rotate, lilka::Image::flipX та lilka::Image::flipY.

Параметри:

image – Вказівник на зображення (об’єкт класу lilka::Image).
x – Координата X осі зображення.
y – Координата Y осі зображення.
transform – Об’єкт класу lilka::Transform, який містить матрицю перетворення.

Image 

class Image

Зображення

Містить розміри, прозорий колір та пікселі зображення (в 16-бітному форматі, 5-6-5). Пікселі зберігаються в рядку зліва направо, зверху вниз.

Вісь зображення (pivot) - це точка, яка вказує на центр зображення. Це дозволяє вам встановити точку, відносно якої буде відображатися зображення, а також навколо якої буде відбуватися перетворення зображення.

Примітка

Основна відмінність Image від поняття «bitmap» погялає в тому, що Image містить масив пікселів, розміри зображення і прозорий колір, в той час як «bitmap» - це просто масив пікселів.

Public Functions

Image(uint32_t width, uint32_t height, int32_t transparentColor = -1, int16_t pivotX = 0, int16_t pivotY = 0)

Створити зображення з заданими розмірами та прозорим кольором.

Якщо transparentColor встановлено в -1, то прозорість відсутня.

Параметри:

width – Ширина зображення.
height – Висота зображення.
transparentColor – 16-бітний колір (5-6-5), який буде вважатися прозорим. За замовчуванням -1 (прозорість відсутня).
pivotX – Координата X центральної осі зображення. За замовчуванням 0.
pivotY – Координата Y центральної осі зображення. За замовчуванням 0.

void rotate(int16_t angle, Image *dest, int32_t blankColor)

Обернути зображення на заданий кут (в градусах) і записати результат в dest.

Цей метод, а також методи flipX та flipY, зручно використовувати для створення обернених та віддзеркалених копій зображення, якщо ви заздалегідь знаєте, які варіанти зображення вам знадобляться.

Замість них можна використовувати клас lilka::Transform та його методи, які дозволяють виконувати та комбінувати складніші перетворення «на льоту», але такі перетворення є повільнішими.

lilka::Image *image = lilka::resources.loadImage("image.bmp");
if (!image) {
   Serial.println("Failed to load image");
   return;
}
lilka::Image *rotatedImage = new lilka::Image(image->width, image->height);
// Повертаємо на 30 градусів, заповнюючи пікселі, які виходять за межі зображення, білим кольором:
image->rotate(30, rotatedImage, lilka::colors::White);
// Звільнюємо пам'ять
delete image;
delete rotatedImage;

Дивись також

Display::drawImageTransformed, Canvas::drawImageTransformed, Transform

Попередження

dest повинен бути ініціалізований заздалегідь.

Параметри:

angle – Кут обертання в градусах.
dest – Вказівник на Image, в яке буде записано обернуте зображення.
blankColor – 16-бітний колір (5-6-5), який буде використаний для заповнення пікселів, які виходять за межі зображення.

void flipX(Image *dest): Віддзеркалити зображення по горизонталі і записати результат в dest.

void flipY(Image *dest): Віддзеркалити зображення по вертикалі і записати результат в dest.

Public Members

uint32_t width: Ширина зображення.

uint32_t height: Висота зображення.

int32_t transparentColor: 16-бітний колір (5-6-5), який буде прозорим. За замовчуванням -1 (прозорість відсутня).

int16_t pivotX: Координата X центральної осі зображення.

int16_t pivotY: Координата Y центральної осі зображення.

uint16_t *pixels: Масив пікселів зображення. Ініціалізується в конструкторі автоматично.

Public Static Functions

static Image *newFromRLE(const uint8_t *data, uint32_t length, uint32_t width, uint32_t height, int32_t transparentColor = -1, int16_t pivotX = 0, int16_t pivotY = 0): Створити зображення з масиву 16-бітних точок, стисненого алгоритмом RLE.

Transform 

class Transform

Клас для роботи з афінними перетвореннями.

Афінні перетворення - це перетворення, які зберігають паралельність ліній. Вони включають в себе обертання, масштабування та віддзеркалення.

Перетворення - це всього лиш матриця 2x2. Застосування перетворення до вектора - це множення цього вектора на матрицю перетворення. Магія!

// Цей код обертає зображення на 30 градусів і тоді віддзеркалює його по горизонталі
lilka::Transform transform = lilka::Transform().rotate(30).flipX();
lilka::display.drawImageTransformed(image, 32, 64, transform);

Public Functions

Transform(): Створити об’єкт класу lilka::Transform.

Transform rotate(int16_t angle)

Обернути навколо центру на кут angle (в градусах).

Оскільки на екрані вісь Y вказує вниз, обертання буде здійснено за годинниковою стрілкою.

Параметри:: angle – Кут обертання в градусах.
Повертає:: Нове перетворення.

Transform scale(float scaleX, float scaleY)

Масштабувати по X та Y.

Щоб віддзеркалити зображення, використайте від’ємні значення (наприклад, -1).

Параметри:

scaleX – Масштаб по X.
scaleY – Масштаб по Y.

Повертає:

Нове перетворення.

Transform multiply(Transform other)

Помножити це перетворення на інше.

Примітка

Зверніть увагу: при комбінації перетворень порядок важливий, і він є оберненим до порядку множення матриць! В результаті цього, перетворення other буде виконано перед поточним перетворенням. Тобто якщо в вас є деякі перетворення A та B, то перетворення A.multiply(B) утворить нове перетворення, в якому спочатку виконається перетворення B, а потім A.

Примітка

Для уникнення плутанини рекомендуємо використовувати більш високорівневі методи, такі як rotate та scale.

Параметри:

other – Інше перетворення.

Повертає:

Перетворення, яке є результатом застосування цього перетворення після other перетворення.

lilka::Transform rotate30 = lilka::Transform().rotate(30); // обернути на 30 градусів
lilka::Transform scale2x = lilka::Transform().scale(2, 2); // збільшити в 2 рази
lilka::Transform scaleThenRotate = rotate30.multiply(scale2x); // результат - це перетворення "спочатку збільшити, а потім обернути", а не навпаки!

Transform inverse()

Інвертувати перетворення.

Примітка

Інвертне перетворення - це таке перетворення, яке скасує це перетворення, тобто є зворотнім до цього.

Повертає:: Інвертоване перетворення.

inline int_vector_t transform(int_vector_t vector)

Перетворити вектор, використовуючи це перетворення.

Параметри:: vector – Вхідний вектор.
Повертає:: Результат перетворення.

Display: Дисплей

Display

Canvas

GFX

Image

Transform

`Display`: Дисплей

Display 

Canvas 

GFX 

Image 

Transform 