Освой Arduino играючи
/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000
Работа с текстом
Display
Рисуем на экране
Добавляем своё изображение
Экран M5Stack имеет размер 320x240 пикселей. Начало отсчёта в верхнем левом углу (0, 0).
Главная страница документации по экрану: https://docs.m5stack.com/#/en/api/lcd
Документация содержит огромный список функций для рисования фигур, вывода текста, управлением цветами.
Напишем скетч для рисования кругов разных цветов, а также двух линий, который разделят экран на четыре равные части. Кроме того, закрасим экран цветом.
Задать цвет можно разными способами, в том числе именованными константами. Константы могут начинаться с TFT_* или без них (например, красный цвет можно задать как RED). Также можно указать шестнадцатеричный код цвета.
#include <M5Stack.h>
int i = 0;
int colors[] = {
TFT_NAVY, TFT_MAROON, TFT_PURPLE,
TFT_OLIVE, TFT_ORANGE, TFT_PINK,
0x3a59, 0xa254, 0x7bef,
0xffff
};
void setup() {
M5.begin();
M5.Lcd.setBrightness(255); // уровень яркости экрана
M5.Lcd.fillScreen(RED); // закрашиваем экран красным цветом
M5.Lcd.drawFastHLine(0, 120, 320, TFT_GREEN); // рисуем зелёную горизонтальную линию
M5.Lcd.drawFastVLine(160, 0, 240, TFT_GREEN); // рисуем зелёную вертикальную линию
}
void loop() {
M5.Lcd.fillCircle(160, 120, 100, colors[i]); // рисуем закрашенный круг
i++;
if (i >= (sizeof(colors) / sizeof(int))) {
i = 0;
}
delay(1000);
}
Для работы с текстом есть несколько готовых функций. Приведу часть из них.
M5.Lcd.setTextColor(YELLOW); // задать цвет для текста (используется текущий фон)
M5.Lcd.setTextColor(RED, YELLOW); // задать цвет для текста и фона
M5.Lcd.setTextSize(2); // задать размер текста
M5.Lcd.println("The cat"); // вывод текста
В состав библиотеки M5Stack входит пример File | Examples | M5Stack | Basis | Display, в котором экран закрашивается разными цветами, рисуются круги, а потом выводятся треугольники в случайном порядке.
В примере File | Examples | M5Stack | Basis | FactoryTest есть код для вывода изображения на экран. Воспользуемся им и создадим отдельный упрощённый скетч.
Но сначала подготовимся. Откройте папку с примером FactoryTest и скопируйте файл bmp_map.c. Данный файл поместите в одну папку с вашим скетчем. Если его открыть текстовым редактором, то увидим следующее (сокращённый вариант):
const unsigned char gImage_logoM5[153600] = {/* 0X00,0X10,0X40,0X01,0XF0,0X00,0X01,0X1B, */
/* 0X10,0X10,0X01,0X40,0X00,0XF0,0X01,0X1B, */
0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D,
...
0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D, 0XEF, 0X7D,
};
Скетч для примера получится следующим.
#include <M5Stack.h>
extern const unsigned char gImage_logoM5[];
void setup() {
M5.begin();
M5.Power.begin();
M5.Lcd.pushImage(0, 0, 320, 240, (uint16_t *)gImage_logoM5);
}
void loop() {
M5.update();
}
После загрузки скетча на экране появится логотип M5Stack.
Чтобы загрузить своё изображение, нужно сначала его сконвертировать в нужный формат. Воспользуемся специальной утилитой ImageToCode. Это консольная программа с открытым исходным кодом на C# (https://github.com/dsiberia9s/ImageToCode). В одной из папок есть готовый EXE-файл (только для Windows). Увы, теперь ссылка не работает.
Вам нужно подготовить своё изображение в формате BMP, PNG, JPG и перетащить его на значок приложения. В моём примере это был файл cat5stack.jpg.
Запустится консольное приложение, которое будет выводить процент выполнения конвертации. После завершения появится новый файл с расширением C - cat5stack.c.
Копируем полученный файл в папку с нашим скетчем из предыдущего примера и в коде меняем с учётом этого файла.
#include <M5Stack.h>
//extern const unsigned char gImage_logoM5[];
extern const unsigned char cat5stack[];
void setup() {
M5.begin();
M5.Power.begin();
M5.Lcd.pushImage(0, 0, 320, 240, (uint16_t *)cat5stack);
//M5.Lcd.drawBitmap(0, 0, 320, 240, (uint16_t *)cat5stack);
}
void loop() {
}
Рисуем круги при помощи нажатий кнопок