Приветствую!
По своей профессии я мастер по ремонту электроники, а не программист. Возможно по этой причине большая часть прочитанных статей не привела меня к быстрому решению. Для реализации некой задумки мне понадобилось вывести изображения на самый не дорогой дисплей (1.8 tft spi 128x160 v1.1) с платы wi-fi модуля (esp8266mod). Статей на эту тему хоть отбавляй, но как всегда ничего сразу не работает как есть. Поэтому делюсь подробной инструкцией, как вывести изображение на lcd модуль.
Цель: вывести свое цветное изображение на дисплей(не графику) + текст либо данные, с минимальными затратами времени и без танцев с бубном.
Схема подключения.
Если у вас платы такие же как и на моем фото, то полностью повторяем схему подключения как на фото ниже.
Подготовка Arduino (программа разработки)
Необходимо скачать библиотеку через менеджер библиотек (инструменты/управлять библиотеками...):
TFT_eSPI (by Bodmer Версия 2.5.43)
Тут необходимо настроить библиотеку с помощью файла User_Setup.h (расположен: документы/Arduino/libraries/TFT_eSPI/User_Setup.h). Необходимо раскомментировать параметры под свой дисплей, либо если ваш проект содержит те же платы что и у меня, то просто скопировать этот текст ниже в файл User_Setup.h
//////начало файла User_Setup.h
// User defined information reported by "Read_User_Setup" test & diagnostics example
#define USER_SETUP_INFO "User_Setup"
// Define to disable all #warnings in library (can be put in User_Setup_Select.h)
#define DISABLE_ALL_LIBRARY_WARNINGS
// Tell the library to use parallel mode (otherwise SPI is assumed)
#define TFT_PARALLEL_8_BIT
#define ST7735_DRIVER // Define additional parameters below for this display
#define TFT_RGB_ORDER TFT_RGB // Colour order Red-Green-Blue
#define TFT_WIDTH 128
#define TFT_HEIGHT 160
#define ST7735_REDTAB
#define TFT_INVERSION_OFF
// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_MOSI PIN_D7 // Automatically assigned with ESP8266 if not defined
#define TFT_SCLK PIN_D5 // Automatically assigned with ESP8266 if not defined
#define TFT_CS PIN_D3 // Chip select control pin D8
#define TFT_DC PIN_D6 // Data Command control pin //A0
#define TFT_RST PIN_D4 // Reset pin (could connect to NodeMCU RST, see next line)
#define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define SMOOTH_FONT
#define SPI_FREQUENCY 27000000
#define SPI_READ_FREQUENCY 20000000
#define USE_HSPI_PORT
//////конец файла User_Setup.h
Далее выбрать в инструменты/менеджер плат: Generic esp8266 Module (при отсутствии, скачать/установить через менеджер плат).
Создаем новый проект.
Копируем в него текст ниже. Тут все максимально просто, чтобы просто разобраться.
//////начало кода скетча
#include <TFT_eSPI.h>
#include <SPI.h>
#include "bmp.h"
TFT_eSPI tft = TFT_eSPI(); // Вызвать библиотеку
void setup() {
tft.begin(); // initialize a ST7735 chip
tft.setSwapBytes(true);
tft.fillScreen(TFT_WHITE);
tft.pushImage(0,0,128,160,mercy1); // непосредственно функция вывода изображения
delay(1000);
}
void loop()
{
tft.setRotation(3); // установка альбомной ориентации
tft.setTextSize(1); // установка размера шрифта 1
tft.setTextColor(TFT_BLACK);// цвет текста
tft.drawString("3 pingvina", 40, 120); // вывод строки на дисплей "символы", позиция Х, позиция Y
}
//////конец кода скетча
Сохраняем проект(обязательно смотрим путь куда сохраняется проект, он нам еще пригодится, для размещения рисунка. Обычно это папка Документы/Arduino/ где-то тут папка с названием проекта. В дальнейшем в эту папку нужно положить файл с преобразованной картинкой.
Подготовка изображения и создание массива данных.
Выбираем нужное изображение и подгоняем его разрешение под разрешение tft экрана. В моем случае это 128 точек на 160 точек. Сохраняя или не сохраняя пропорции, без разницы на данном примере это роли не играет. Будем ориентировать дисплей горизонтально. Можно воспользоваться встроенной программой Paint, для изменения разрешения. Программа позволяет подогнать размер сохраняя пропорции, при необходимости добавить полосы или подрезать изображение под разрешение экрана. Затем сохранить лучше всего сразу в формате BMP 24-разрядный рисунок.
Скачиваем конвертер «lcd-image-converter-20161012» ( версия программы не принципиальна, но на моей 7-ке 32-бит. запустилась эта. Для получения массива данных из рисунка.
Запускаем программу / новое изображение/ задать имя. Далее: Файл/ открыть/ bmp.bmp. Далее переходим на вкладку с открытым рисунком, открываем меню Настройки/ Преобразование... Тут необходимо указать 2 важных параметра, без которых у меня никак не получалось нормальное отображение изображения на дисплее. На вкладке «Подготовка» выбрать параметры. Предустановка: Цветное R5G6B5. Основное сканирование: Справа налево. На вкладке «Изображение» выбрать Блок данных: 16 бит. На рисунках ниже...
Если изображение на дисплее получится как-будто в жалюзях, значит необходимо параметр выше поменять под свой проект, там четыре варианта. Два из которых отзеркалят изображение на дисплее.
Далее слева внизу нажимаем кнопку «Открыть предпросмотр» выделить все/копировать. Вставляем свой массив данных в bmp.h файл.
Файл bmp.h имеет следующий вид:
//////начало кода
const uint16_t mercy1 [] PROGMEM = {
//вставить ваш массив данных
};
//////конец кода
Сохранить файл с расширением h в папку с названием вашего проекта, рядом с самим проектом.
Подключить плату к USB, выбрать порт, выполнить загрузку скетча. Изображение должно появиться после загрузки программы.
П.С. Мои грабли(мучения с этим дисплеем) по тексту: Не правильная конфигурация порядка цветов RGB & BGR в файле настроек библиотеки, Не верный выбор платы в том же файле настроек. Не правильное подключение дисплея к плате по пинам, Самый главный косяк связан с конвертацией изображения в массив данных ( Основное сканирование: Справа налево.)Суть в том что изображение отправляется в определенной кодировке цвета, при это по пиксельно строится на дисплее строками, и если задать не верно сканирование, то можно получить дефект похожий на жалюзи вместо нормального изображения. Поэтому онлайн конвертеры мне не помогли.
П.С. По тексту программы скетча в void setup() выполняется код картинки. В данном случае картинка статична и используется как фон. В void loop() можно все очистить, но если требуется наложение текста как у меня либо вывод каких либо данных, то пример привел.