Подключение дисплея ili9341 к ESP8266. Вывод JPG картинки

Недавно встал вопрос быстрого вывода картинок в среде Arduino, ведь обычно скорости avr и arm не хватает, чтобы быстро отрисовать изображение, незаметно для глаз. Все библиотеки, что я пробовал рисовали картинку около 1-1,5 секунд, что ужасно долго. Наконец, я случайно наткнулся на библиотеку, которая не описывается в рунете, но работает просто превосходно. Для начала конечно нужно правильно всё подключить. Для этой библиотеки всё было хорошо описано в одном из примеров.

  Display SDO/MISO      to NodeMCU pin D6 <<<<<< This is not used by this sketch
  Display LED           to NodeMCU pin  5V or 3.3V
  Display SCK           to NodeMCU pin D5
  Display SDI/MOSI      to NodeMCU pin D7
  Display DC/RS (or AO) to NodeMCU pin D3
  Display RESET         to NodeMCU pin D4 <<<<<< Or connect to NodeMCU RST pin
  Display CS            to NodeMCU pin D8
  Display GND           to NodeMCU pin GND (0V)
  Display VCC           to NodeMCU pin 5V or 3.3V

Для наглядности я нарисовал линии подключения дисплея ili9341 к модулю NodeMCU

Библиотека, которую я тестировал, называется TFT_eSPI. Вручную её можно не устанавливать, она доступна для установки в Library Manager.

Первым делом, чтобы проверить подключение, запустил стандартный тест бенчмарк от adafruit – выполняется очень быстро.

Быстро закинул в PROGMEM картинку, разрешением 320х240 через стандартную процедуру конвертации картинки в код. В статье по ссылке всё описано, как это сделать.

const unsigned short picture[xxxxx] PROGMEM=
{
массив изображения
}

Картинка в этой библиотеке выводится немного другой командой, вот её синтаксис. В скобках указывается x,y – стартовая позиция отрисовки, затем разрешение, а последний аргумент – название массива в памяти программ PROGMEM.

  tft.pushImage(0, 0, 320, 240, picture);

Можете сами оценить скорость работы библиотеки, на глаз это около 0.1-0.2 секунд. Но выводить сырые raw изображения не так интересно, когда есть ещё одна библиотека по выводу JPEG изображений из памяти ESP8266.

Перед тем как продолжить, расскажу зачем я использую дисплей ili9341. Я долго искал квадратный дисплей большого размера, но из доступных ничего нет, с понятной документацией. У меня лежал в запасе 3.2 дюйма, и я решил, что смогу подогнать прототип корпуса под его размеры, используя площадь 240х240 пикселей.

В итоге, я аккуратно оторвал дисплейный модуль от платы, чтобы поместить его в корпус и начал методично распаивать все контакты, кроме тача, так как его там не было.

Собственно плата осталась из-за наличия в ней элементов, да и в прототипе распаивать кастомную плату было лень, но вот стандартная не помещалась в изделии(. В итоге я посмотрел, где можно без боли её распилить, не навредив основной плате и сделал это.

Работает)

Так, мы отвлеклись от темы декодирования JPEG картинок. Вы же хотите много JPEG изображений в своём ESP8266 или ESP32? Тогда открываем этот пример, после установки библиотеки.

Так как, у меня рабочая зона дисплея 240х240 пикселей, то я сформировал изображения такого формата и закачал во внутренню память SPIFFS, из папки data. Как это сделать, рассмотрено в этой статье. Но есть очень важный момент при сохранении jpg файла, до которого я догадался не сразу, а только изучив описание библиотеки. Нужно обязательно выключать прогрессивный формат сохранения изображений.

Сохранив котика в папке data, и закачав его в память SPIFFS, я немного отредактировал команду вывода изображения, сдвинув начальную точку отрисовки по y на 45 пикселей, чтобы подогнать её под свою область 240х240. Команда приняла такой вид, также я убрал радномный цвет подложки, и оставил белый 0xFFFF. Файл, как вы догадались называется ‘cutecat.jpg ‘

  tft.fillScreen(0xFFFF);

  drawJpeg("/cutecat.jpg", 0 , 45);     // 240 x 320 image

Картинка рисуется около 0.6-0.8 секунд, с декомпрессией jpg, что вполне хороший результат.

Самое главное – этот способ проще и быстрее, чем переводить картинки в массивы. А небольшие элементы интерфейса будут выводиться быстро и незаметно на глаз. Далее, мы попробуем проделать эти операции с esp32, только выведем изображения с SD карты, и проверим насколько её возможности больше в работе с графикой.