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

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

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

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

<span menu>
<span menu-item>Инструменты</span>
<span menu-item>Flash size</span>
<span menu-item>4MB (FS:1MB OTA:~1019KB)</span>
</span>

<WRAP center round download 60%>
{{ :products:esp-iot:plane.zip |}}
</WRAP>

Для отображения картинки нам потребуется библиотека "LittleFS_ImageReader", которую придется установить вручную. Для этого нужно скачать архив по ссылке ниже и поместить папку "LittleFS_ImageReader", которая находится в архиве и содержит два файла с расширениями ".h" и ".cpp", в папку "libraries". Папка "libraries" расположена по следующему пути — C:\Users\<user>\Documents\Arduino 
(<user> это имя твоей учетной записи на компьютере). Также можно открыть в проводнике папку "Документы", а уже в ней папку "Arduino". 

<WRAP center round download 60%>
{{:products:laboratory_iot_c:littlefs_imagereader.zip|}}
</WRAP>


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

{{ :products:esp-iot:exp24_mon.png?direct&600 |}}
//Рисунок 1. Монтажная схема эксперимента для дисплея с 8 выводами//

{{ :products:esp-iot:exp24_mon_11pin.png?direct&600 |}}
//Рисунок 2. Монтажная схема эксперимента для дисплея с 11 выводами//
==== Программный код эксперимента ====
Выведем картинку на  дисплей. 

<file arduino Exp48.ino[enable_line_numbers="2", start_line_numbers_at="1"]>
#include <SPI.h>
#include <Adafruit_ST7735.h>
#include <LittleFS_ImageReader.h>

#define PIN_CS  2
#define PIN_DC  4
#define PIN_RST 5

Adafruit_ST7735 tft = Adafruit_ST7735(PIN_CS,  PIN_DC, PIN_RST);

LittleFS_ImageReader reader; // Создаем объект считывателя

void setup() {
  LittleFS.begin();
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(2); 

  // Отображаем картинку с именем plane.bmp начиная с координаты 0, 0
  // Измените название файла на свое, если у вас другая картинка
  reader.drawBMP("/plane.bmp", tft, 0, 0);
}

void loop() {
}

</file>