Преобразуем изображения и GIF анимацию в C++ код для Arduino
Сейчас в продаже доступно много разных Ч/Б дисплеев, в том числе и OLED. Для того, чтобы получить красивое черно-белое изображение для этих дисплеев, с глубиной цвета всего 1 бит, но в тоже время с имитацией полутонов, как на представленной ниже картинке – нужно использовать преобразование по алгоритму “Floyd-Steinberg”.
Я, наверное, Вам уже надоел своими конвертерами, но не спешите с оценкой. Этот конвертер, в отличие от предыдущих, может преобразовать изображение любого масштаба и с любой глубиной цвета в требуемый размер и сразу получить на выходе готовый Си код понятный Arduino IDE или другому компилятору.
Можно, конечно, использовать графический редактор со встроенной функцией дизеринга Floyd-Steinberg, но ради пары картинок, нет желания изучать функционал этого сложного ПО. Да и как правило эти редакторы в основном платные. По этому я представляю он-лайн инструмент для конвертирования изображений полного цикла, с возможностью подстраивать детализацию выходного изображения.
Для примера загружаю изображение автомобиля в онлайн конвертер. При помощи ползунков “Яркость” и “Контрастность” добиваюсь максимально детализированного изображения на предпросмотре. На выходе получаю Ч/Б картинку с заданными мною параметрами разрешения и исходный код этого изображения. Полученный код можно скопировать и вставить в свой проект.
Пошаговая инструкция для преобразования:
1 — Выберите изображение на своем ПК, нажав на кнопку “Выберите фаил” и загрузите его в он-лайн конвертер. Изображение может быть цветным или ч/б с любой глубиной цвета и любого размера.
2 — Укажите требуемый размер получаемого на выходе преобразователя изображения.
3 — При помощи бегунков “Яркость” и “Контрастность добейтесь наилучшего результата на предварительном просмотре.
4 — Укажите название изображения латинскими буквами.
5 — Скопируйте полученный Си код и вставьте его в свой исходник.
6 — При необходимости сохраните преобразованное изображение, нажав на изображении правую кнопку мышки.
Преобразование GIF-анимации
Для реализации ардуино проекта, мне понадобилась черно-белая GIF-анимация. В интернете я нашел простой, пакетный способ преобразования картинок. Которым я с Вами, с удовольствием, делюсь. Ссылка на автора.
Для конвертирования GIF-ок в черно-белый формат. Потребуется приложение IrfanView. Скачиваем и устанавливаем его на свой ПК.
Запускаем приложение и загружаем в него GIF-ку. Потом жмем на кнопку меню ‘Сервис >> Извлечь все кадры’. После чего приложение извлечёт из ГИФ-ки все кадры изображений и сохранит их в той же папке, в которой находится сам файл анимации.
Следующим шагом нужно преобразовать все кадры анимации в черно-белые картинки, с требуемым для дисплея размером. Для этого жмём в меню ‘Файл >> Преобразовать’. Или кнопку ‘B’ на клавиатуре.
Сначала нужно указать, в какой формат нужно преобразовать, для этого нажимаем кнопку ‘Обработка’
И активируем все параметры, которые отмечены на скриншоте ниже.
После чего выделяем все ранее преобразованные картинки и жмем кнопку ‘Добавить’. И следом кликаем на кнопку ‘Выполнить’. После чего, в этой же папке появятся преобразованные ч/б изображения.
Для преобразования картинок в код, понятный компилятору, нужно скачать приложение OledAnimation
и положить его в папку с ч/б изображениями. В этой папке не должно быть других изображений кроме тех, которые мы конвертируем. После запуска приложения все файлы, находящиеся в папке будут проконвертированы.
В левом окне приложения мы получаем данные всех кадров анимации в формате Си.
Копируем их и вставляем в предварительно созданный заголовочный файл. Теперь осталось скопировать скетч для ардуино, который находится в правом окне. Но формат скетча, предложенного автором приложения, совершенно не оптимизирован и его дальнейшее использование совместно с другими проектами будет затруднительно. Поэтому я создаю массив указателей, в котором прописываю все имеющиеся кадры анимации, в том же порядке, как они пронумерованы.
Что бы получилась красивая анимация, нужно подбирать исходники со сплошным однотонным фоном и контрастным изображением. Как на приложенном ниже изображении.
Подключаем дисплей к Ардуино
Для проверки анимации, понадобятся следующие компоненты:
Arduino nano
OLED SH1106
Провода соединительные
Соединяем дисплей с Arduino по следующей схеме:
Скетч для Ардуино
Скетч настолько простой, что даже комментировать в нем особо нечего.
Для воспроизведения анимации я вызываю простейшую функцию и предаю ей все требуемые параметры. Такие как: размер изображения по горизонтали и вертикали, длительность показа кадров, количество кадров в анимации, число повторов воспроизведения, имя массива указателей и цвет изображения, который в данном случае может принимать всего 2 значения: черный или белый. Учитывая не большой объем памяти программ контроллера ATmega328. Нужно учесть, что прокручивать в одном скетче несколько анимаций практически невозможно. Хотя если эти анимации будут маленького размера и с небольшим количеством кадров, то можно попробовать их запихнуть.
Для скетча так же потребуется библиотеки OLED_SH1106 и Adafruit-GFX
Так же можно скачать весь ардуино проект со всеми изображениями.
#include <Wire.h>
#include <OLED_SH1106.h>
#include "chayka.h"
#include "butterfly.h"
#include "fish.h"
#include "snow.h"
//массивы указателей. В каждом массиве находятся указатели на все кадры анимации
//static const uint8_t * butterfly[] = { b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,b11,b12,b13,b14,b15 };
static const uint8_t * chayka[] = { c1,c2,c3,c4,c5,c6,c7,c8,c9,c10,c11,c12,c13,c14,c15,c16 };
//static const uint8_t * fish[] = { f1,f2,f3,f4,f5,f6,f7,f6,f5,f4,f3,f2 };
//static const uint8_t * snow[] = { s1,s2,s3,s4,s5,s6,s7,s8,s9,s10,s11,s12 };
OLED_SH1106 display(-1); // если на дисплее нет пина res то -1
void setup()
{
display.begin(SH1106_SWITCHCAPVCC, 0x3c); // Инициализация дисплея с I2C адресом 0x3C
}
void loop()
{
animatoin_view( 64, 63, 0, sizeof(chayka)/2, 4, chayka, true);
}
void animatoin_view(uint8_t anim_widht, uint8_t anim_height, uint16_t anim_delay, uint8_t anim_frame, uint8_t anim_repeat, const uint8_t * const anim_n[], boolean inv )
{
display.invertDisplay(inv); //инверсия экрана
for( uint8_t j = 0; j<anim_repeat; j++)
{
for( uint8_t i = 0; i<anim_frame; i++)
{
display.clearDisplay(); // очистить видео буфер
display.drawBitmap((128-anim_widht)/2, (64-anim_height)/2, anim_n[i], anim_widht, anim_height, 1); // загрузить указанный кадр анимации в видеобуфер
display.display(); // отобразить на экране дисплея данные из видеобуфера
delay(anim_delay); // задержка между кадрами
}
}
display.invertDisplay(false); //отключить инверсию экрана
}
Спасибо за то, что прочитали до конца. Если у Вас остались вопросы, то можете задать их в комментариях под статьёй. Если Вы не зарегистрированы ни в одной из предложенных социальных сетей, то для того что бы оставить комментарий, нажмите на иконку с рисунком конверта.
2 комментария