Это старая версия документа!


Эксперимент 48. Отображение картинки

Мы уже научились отображать на дисплее текст и графические примитивы. Из этих элементов мы уже можем отображать пользовательский интерфейс, меню и выводить информацию с различных датчиков. Но для красивого интерфейса нужны еще иконки, пиктограммы и просто картинки. Кроме того, многие игры отображаются с помощью спрайтов — небольших прямоугольных изображений из которых строится вся сцена и персонажи.

Существует множество графических форматов, в которых можно сохранять изображения. Самым простым является формат BMP. В данном формате можно хранить только однослойные растры. В этом формате просто описывается цвет каждой точки изображения. На каждый пиксель в разных файлах может приходиться разное количество бит (глубина цвета). Сейчас этот формат распространен мало так как он не подразумевает никакого сжатия данных и картинки имеют большой вес, зато с ним легко работать. С помощью встроенного в Windows простейшего графического редактора Paint без труда можно сконвертировать картинки в этот формат.

Наш дисплей имеет разрешение 128*160 точек. Попробуем занять весь дисплей одним большим изображением. Тогда оно должно быть такого же размера. Если оно будет меньше — то останется незаполненная область экрана. Если больше — обрежется. Можно загрузить в память микроконтроллера любое свое изображение, но если подходящего изображения под рукой нет, то можно скачать нашу картинку с самолетом и загрузить в МК ее.

Схема эксперимента

Рисунок 1. Монтажная схема эксперимента для дисплея с 8 выводами

Рисунок 2. Монтажная схема эксперимента для дисплея с 11 выводами

Программный код эксперимента

Напишем приветственную надпись на дисплее.

Exp48.ino
  1. #include <SPI.h>
  2. #include <Adafruit_ST7735.h>
  3. #include "LittleFS_ImageReader.h"
  4.  
  5. #define PIN_CS 2
  6. #define PIN_DC 4
  7. #define PIN_RST 5
  8.  
  9. Adafruit_ST7735 tft = Adafruit_ST7735(PIN_CS, PIN_DC, PIN_RST);
  10.  
  11. LittleFS_ImageReader reader;
  12.  
  13. void setup() {
  14. LittleFS.begin();
  15. tft.initR(INITR_BLACKTAB);
  16. tft.setRotation(2);
  17.  
  18. // Отображаем картинку с именем plane.bmp начиная с координаты 0, 0
  19. // Измените название файла на свое, если у вас другая картинка
  20. reader.drawBMP("/plane.bmp", tft, 0, 0);
  21. }
  22.  
  23. void loop() {
  24. }