Работаем с экраном. Класс M5.Lcd

Работа с текстом
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"); // вывод текста

Display

В состав библиотеки 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() {

}

Дополнительные материалы

Рисуем круги при помощи нажатий кнопок