Lcd assistant изображение для arduino

Содержание

Вывод картинки на oled дисплей и контроллер Arduino, Esp8266, ESP32

Для реализации нам понадобится:

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

Для начала подключим oled дисплей к контроллеру. Oled дисплей управляется по шине i2c и подключается всего 2мя проводами. Схема подключения представлена ниже.

Подключение к Arduino uno:

К esp8266 nodemcu:

После того как подключили дисплей. Нам необходимо подготовить фото. Разрешение у дисплея 128×64 пикселя. Фото или картинку нужно уменьшить до данного размера. Для этого достаточно и программы paint. По этому нажимаем правой кнопкой по картинке, выбираем “изменить” и она откроется у нас в программе paint.

Далее нажмем кнопку “Изменить размер”

Далее выберем пиксели, уберем галочку “сохранить пропорции” (так как скорее всего картинка у Вас не пропорциональна разрешению 128×64) и зададим по горизонтали 128 пикселей, а по вертикале 64.

После этого сохраняем картинку и теперь необходимо ее преобразовать в код. Для этого нужно скачать программу. Программу будем использовать LCD image Converter, которую можно скачать тут. Программа скачивается в архиве. Архив распаковываем и запускаем ярлык.

Далее закидываем картинку в программу, выбираем Options->Conversion

И в открывшемся окне выбираем следующее:

В пресетах выбираем тип “Monochrome“
Выставляем во вкладке “Scanning” все так как выделено красным.

Далее во вкладке “Preprocessing” выставляем все так как показано ниже:

Ну и последнее во вкладке “Image” выставляем так как показано ниже:

Ну и после выбранных параметров, мы можем нажать кнопку “Show Preview” и у нас откроется код подготовленной картинки для вставки его в Скетч.

Либо можно закрыть это окно, вернуться в главное окно программы, выбрать File->Convert… и сохранить файл в формате “имяфайла”.C.

И если открыть сохраненный файл в формате .C через блокнот, то можем увидеть тот же самый код картинки для вставки в скетч:

Ну и теперь что касается самого скетча. Его можно скачать тут: https://yadi.sk/d/87RtImnnd_I-qQ

Код картинки нужно вставить между фигурными скобками < >. В блоке:

static const uint8_t image_data_Saraarray[1024] = <

И еще необходимо установить 2 библиотеки:

Данные библиотеки можно установить зайдя в программе arduino ide Скетч -> Подключить библиотеку -> Управлять библиотеками.

На этом все. Теперь заливаем скетч в микроконтроллер и наслаждаемся полученным результатом.

Источник

Инструкции

В этом уроке вы познакомитесь с интерфейсом Arduino OLED. В первой части настроим OLED-дисплей так, что он будет показывать нам данные датчика температуры и влажности, а во второй части отобразим логотипы iPhone, Samsung и LG.

OLED-дисплеи, что это такое?

OLED – что же это за аббревиатура? Она в переводе с английского означает, органический светоизлучающий диод. OLED-дисплеи очень маленькие и имеют высокое разрешение. Эти дисплеи не имеют подсветки, они излучают свой собственный свет. Вот почему эти дисплеи очень экономны и практичны для использования в разных электронных устройствах.

Почти в любом магазине, где продают бытовую электронику, можно увидеть хотя бы один телевизор с OLED-дисплеем. Именно из-за такой особой технологии изготовления такое устройство будет очень дорого. Но почему? Каковы особенности такого дисплея?

Технология OLED используется в основном для производства ЖК-панелей. В портативной электронике обычно используются AMOLED-дисплеи, которые, впрочем, в общих чертах очень похожи. Зато OLED-дисплей типичен для умных часов и фитнес-браслетов. В нашем проекте будем использовать OLED-дисплей. Приобрести данный дисплей можно на алиэкспресс. Вот вам ссылка на дисплей по недорогой цене.

OLED в работе

Когда напряжение подается на дисплей, ток протекает от катода к аноду через органические слои OLED. Катод отдает электроны в излучающий слой органических молекул, между тем анод удаляет электроны из проводящего слоя органических молекул.

На границе между проводящим и излучающим слоями создаются электронные дыры. Эти дыры заполнены электронами, и OLED излучает свет. Цвет дисплея зависит от используемых органических молекул.

OLED и Arduino

OLED-дисплей, который мы собираемся использовать, имеет 128×64 белых OLED-пикселей. Это 0,96 » (25 мм X 14 мм). OLED-дисплеи других размеров также доступны. OLED, используемый в этом руководстве, является монохромным (имеет только один цвет), но вы также можете приобрести OLED-дисплей, который имеет несколько цветов.

Этот дисплей использует SPI для связи с Arduino. Связь SPI быстрее, чем связь I2C, поэтому именно этот вид связи сделает наш дисплей быстрее.

Принципиальная электрическая схема

OLED работает с напряжением 3,3 V, поэтому не рекомендуем подключать его к 5 V Arduino. Данная схема сможет работать, но срок службы OLED-уменьшится.

Выполните все соединения для OLED и DHT22 с Arduino следующим образом

Источник

#15.2 Дисплей SSD1306. Вывод растрового изображения.

На OLED-дисплее SSD1306 можно отображать одноцветные растровые изображения размером 128×64 пикселя.

Первое, что нужно сделать, это изменить размер фотографии или изображения, и сохранить его в виде монохромного растрового изображения. Если вы находитесь на ПК с Windows, вы можете использовать Paint.

В качестве примера я буду использовать изображение водяного знака для сайта и свою фотографию.

Как сделать свое изображение.

В сети есть множество инструментов для преобразования изображений в массив байт. Какие-то из них необходимо устанавливать, есть даже те, что работают онлайн. Кстати, такой формат изображений называется X-Bitmap. Я же буду использовать бесплатную программу LCD Image Converter. Данная программа умеет конвертировать картинки в массив данных для вывода изображений на дисплей, например на OLED-дисплей SSD1306. Программа из коробки имеет русский язык , достаточно его выбрать по умолчанию.

Затем в программе LCD Image Converter выберете «Новое изображение».

В открывшемся окне укажите имя, я оставил по умолчанию.

Для загрузки изображения нажимаем Изображение → Импортировать .

Вот так выглядит моя фотография до конвертирования. Нажимаем «Преобразование»

Здесь вам нужно произвести настройки программы LCD Image Converter, как показано на картинке ниже.

Также измените параметры на вкладке «Изображения»

Настройки программы LCD Image Converter на этом закончились. Сейчас можно преобразовать ваше изображение для вывода на дисплей для Arduino проектов.

Укажите имя файла и тип файла «.с» и сохраните файл.

Код Arduino для вывода растрового изображения на SSD1306 дисплей.

Файл, который вы получили содержит массив «C» с изображением. Откройте этот файл в текстовом редакторе и скопируйте массив.

Вставьте массив в скетч. Затем, чтобы отобразить массив, используйте drawBitmap() метод, который принимает следующие аргументы (х, у, массив изображения, ширина изображения, высота изображения, вращение). Координаты (x, y) определяют место начала отображения изображения.

Код в среде Arduino IDE будет выглядит вот так.

Но работать он будет только на NodeMCU.

Arduino, даже семейство MEGA, не сможет отобразить ваше изображение. Это связано с тем, что нужно добавить PROGMEM, которая дает понять компилятору, что данную переменную необходимо хранить во flash памяти, а не в SRAM. Подробнее про PROGMEM можете прочитать тут.

Должно быть вот так:

Код вывода растровых изображений на дисплей SSD1306 для Arduino будет вот таким.

Загрузите в Arduino NANO и получите результат.

Есть одно небольшое «но». Если вы уменьшите растровое изображение, редактор может черные линии немного осветить, и при конвертировании эти линии заполняться частично точками. Так как дисплей выводит или нет точки, и серый пытается компенсировать меньшей плотностью точек. Редактор изменить яркости точек не умеет, и может получиться вот так.

Для нормального отображения картинки и фото, редактируйте их перед тем, как конвертировать. Программа для редактирования растровой графики GIMP может конвертировать изображения с расширением .xbm, а это то, что нам нужно для дисплея. Правда, я не дружу с подобными программами.

Подправил я картинку, и вот что получилось.

Не идеально, но уже лучше. При необходимости, это можно довести до ума, даже с моими знаниями работы с растровой графикой.

На этом цикл уроков по дисплею SSD1306 заканчиваю. Если есть вопросы и предложения по урокам, пишите в комментариях .

Предыдущие уроки по дисплею SSD1306:

Не забывайте подписываться на канал Youtube и вступайте в группы в Вконтакте и Facebook.

Всем Пока-Пока.

И до встречи в следующем уроке.

Понравилась статья? Поделитесь ею с друзьями:

Источник

Взаимодействие NodeMCU ESP8266 с графическим OLED дисплеем

Хотите добавить немного графики в свои IoT проекты на ESP8266? Или, может, хотите отобразить IP адрес вашего ESP8266, не прибегая к последовательному выходу. Для этого идеально подойдут суперкрутые OLED дисплеи (на органических светодиодах)! Они сверхлегкие, толщиной почти с бумагу, теоретически гибкие и дают более яркое и четкое изображение.

Взаимодействие NodeMCU ESP8266 с графическим OLED дисплеем

Обзор модуля OLED дисплея

Главная особенность модуля OLED дисплея – небольшой монохромный OLED дисплей. Его ширина составляет 128 пикселей, а высота – 64 пикселя, а толщина – 0,96 дюйма. Он миниатюрен, но всё еще обладает преимуществами – OLED дисплей очень хорошо читабелен благодаря высокой контрастности, и вы можете разместить на нем обманчиво большое количество графики.

Поскольку дисплей обладает собственной подсветкой, то внешняя подсветка не требуется. Это значительно снижает мощность, необходимую для работы OLED, и поэтому дисплей обладает такой высокой контрастностью, чрезвычайно широким углом обзора и может отображать глубокие уровни черного.

Рисунок 1 – I2C OLED дисплей, 128×64, синий

Сердцем модуля является мощный однокристальный CMOS контроллер OLED драйвера, SSD1306, который обрабатывает всю буферизацию ОЗУ, поэтому вашему ESP8266 остается совсем немного работы. Рабочее напряжение контроллера SSD1306 составляет от 1,65 В до 3,3 В – идеально подходит для взаимодействия с микроконтроллерами 3,3 В, такими как ESP8266.

Распределение памяти OLED модуля

Чтобы иметь абсолютный контроль над вашим модулем OLED дисплея, важно знать о его распределении памяти.

Независимо от размера OLED модуля драйвер SSD1306 обладает встроенным ОЗУ для отображаемых графических данных (Graphic Display Data RAM, GDDRAM) объемом 1 КБ для экрана, который содержит отображаемый битовый рисунок. Эта область памяти 1K организована в 8 страниц (от 0 до 7). Каждая страница содержит 128 столбцов/сегментов (от 0 до 127). И каждый столбец может хранить 8 бит данных (от 0 до 7). Это наверняка говорит вам, что в итоге мы имеем

8 страниц х 128 сегментов х 8 бит данных = 8192 бита = 1024 байта = 1 КБ памяти

Весь 1K памяти с выделенными страницами, сегментами и данными показан ниже.

Рисунок 2 – Распределение 1 КБ RAM памяти OLED дисплея 128×64

Каждый бит представляет собой определенный пиксель на OLED дисплее, который можно программным способом включить или выключить.

OLED дисплей 128×64 отображает всё содержимое ОЗУ, тогда как OLED дисплей 128×32 отображает только 4 страницы (половину содержимого) ОЗУ.

Подключение модуля OLED дисплея к NodeMCU ESP8266

Хватит теории, приступим к практике! Давайте подключим дисплей к ESP8266 NodeMCU.

Подключение довольно простое. Начните с подключения вывода VCC на модуле к выводу 3.3V на NodeMCU и соединения выводов GND.

Затем подключите вывод SCL к выводу D1 (тактовый сигнал I2C) на NodeMCU и подключите вывод SDA к выводу D2 (данные I2C) на NodeMCU. Распиновку NodeMCU ESP8266 можно посмотреть в следующих статьях:

Схема подключения показана на рисунке ниже.

Рисунок 3 – Подключение OLED дисплея к NodeMCU ESP8266

Теперь вы готовы загрузить на NodeMCU ESP8266 какой-нибудь код и напечатать что-нибудь на дисплее.

Установка библиотеки для модуля OLED дисплея

У контроллера SSD1306 OLED дисплея гибкие, но сложные драйверы. Для использования контроллера SSD1306 требуются глубокие знания об адресации памяти. К счастью, была написана библиотека Adafruit SSD1306, чтобы скрыть все эти сложности, и чтобы мы могли выдавать простые команды для управления дисплеем.

Чтобы установить библиотеку, перейдите в меню Скетч → Подключить библиотеку → Управлять библиотеками…. Подождите, пока менеджер библиотеки загрузит список библиотек и обновит список установленных библиотек.

Рисунок 4 – Выбор управления библиотеками в Arduino IDE

Отфильтруйте результаты поиска, набрав « adafruit ssd1306 ». Должна остаться пара записей. Ищите Adafruit SSD1306 by Adafruit. Нажмите на эту запись, а затем выберите Установить.

Рисунок 5 – Установка библиотеки монохромного OLED дисплея Adafruit SSD1306

Библиотека Adafruit SSD1306 представляет собой аппаратную библиотеку, которая выполняет функции более низкого уровня. Для отображения графических примитивов (таких как точки, линии, круги, прямоугольники и т.д.) она должна работать в паре с библиотекой Adafruit GFX. Установите и эту библиотеку.

Рисунок 6 – Установка библиотеки графического ядра Adafruit GFX

Примечание

Библиотека выделяет для буфера 1 КБ ((128×64)/8 бит) памяти ESP8266. Таким образом, она может манипулировать экранным буфером и затем выполнять групповую передачу из памяти ESP8266 во внутреннюю память контроллера SSD1306.

Модификация библиотеки Adafruit SSD1306

Библиотека Adafruit SSD1306 не настроена для дисплеев OLED 128×64 (один из которых мы сейчас используем). Чтобы она заработала, в заголовочном файле Adafruit_SSD1306.h необходимо изменить размер экрана. Если он не будет изменен, при попытке компиляции скетча может появиться сообщение об ошибке #error (“Height incorrect, please fix Adafruit_SSD1306.h!”) (некорректная высота, исправьте Adafruit_SSD1306.h):

Рисунок 7 – Некорректная высота, пожалуйста, исправьте ошибку Adafruit_SSD1306.h

Чтобы изменить заголовочный файл Adafruit_SSD1306.h, откройте папку с библиотеками. Стандартный путь: Мои Документы → Arduino. Теперь перейдите в libraries → Adafruit_SSD1306

Рисунок 8 – Расположение библиотеки Adafruit SSD1306

Откройте файл Adafruit_SSD1306.h в текстовом редакторе. Прокрутите файл вниз, чтобы найти секцию SSD1306 Displays или сразу перейдите к строке 73. Закомментируйте #define SSD1306_128_32 и раскомментируйте #define SSD1306_128_64 , чтобы код в этом разделе выглядел следующим образом:

Рисунок 9 – Удаление ошибки неверной высоты, изменив файл Adafruit_SSD1306.h

Вот и всё. Теперь сохраните файл и перезапустите Arduino IDE.

Код ESP8266: отображение текста

Теперь самое интересное!

Следующий тестовый скетч напечатает на дисплее сообщение «Hello World!». Он также включает в себя:

отображение инвертированного текста;
отображение чисел;
отображение чисел с основанием (hex, dec);
отображение символов ASCII
прокрутка текста по горизонтали и по вертикали;
прокрутка части дисплея.

Это даст вам полное представление о том, как использовать OLED дисплей, и может послужить основой для более практических экспериментов и проектов.

Скетч начинается с включения четырех библиотек, а именно SPI.h , Wire.h , Adafruit_GFX.h и Adafruit_SSD1306.h . Хотя библиотека SPI.h для OLED дисплеев с I2C не требуется, нам нужно добавить ее для компиляции нашей программы.

Далее нам нужно создать объект Adafruit_SSD1306 . Конструктор Adafruit_SSD1306 принимает номер вывода ESP8266, к которому подключен вывод сброса дисплея. Поскольку используемый нами OLED дисплей не имеет вывода RESET, мы отправим конструктору значение -1, чтобы ни один из выводов ESP8266 не использовался в качестве сброса для дисплея.

В функции setup() нам нужно инициализировать объект OLED дисплея с помощью функции begin() . Эта функция принимает два параметра. Первый параметр SSD1306_SWITCHCAPVCC включает внутреннюю схему питания, а второй параметр предоставляет I2C адрес OLED дисплея. Адрес I2C такого модуля OLED дисплея обычно равен 0x3C . Он фиксированный и не может быть изменен.

Далее перед печатью нашего первого сообщения на экране мы очищаем буфер.

Отображение простого текста (Hello World)

Для отображения текста на экране нам нужно установить размер шрифта. Это можно сделать, вызвав setTextSize(font-size) и передав в качестве параметра размер шрифта (размер начинается с 1).

Далее нам нужно установить цвет шрифта, вызвав функцию setTextColor(color) . Передайте параметр WHITE для темного фона или BLACK для светлого фона. Теперь перед печатью сообщения нам нужно установить позицию курсора, вызвав функцию setCursor(X, Y) . Пиксели на экране адресуются по горизонтальным (X) и вертикальным (Y) координатам. Система координат размещает начало координат (0,0) в верхнем левом углу, причем положительный X смещается вправо, а положительный Y смещается вниз.

Мы можем использовать функцию print(» «) или println(» «) , чтобы напечатать сообщение на экране так же, как мы печатаем данные в мониторе последовательного порта. Помните, println() переместит курсор на новую строку.

Чтобы библиотека могла выполнять чрезвычайно быстрые математические операции с буфером экрана (более 100 кадров в секунду), вызовы функций печати не сразу передают содержимое экранного буфера на контроллер SSD1306. Для указания библиотеке выполнить массовую передачу из экранного буфера в ESP8266 во внутреннюю память контроллера SSD1306 необходимо вызвать функцию display() . Как только содержимое памяти будет перенесено, на OLED дисплее появятся пиксели, соответствующие содержимому экранного буфера.

Отображение инвертированного текста

Для отображения инвертированного текста мы снова вызовем функцию setTextColor(FontColor, BackgroundColor) . Если вы были внимательны, то знаете, что ранее мы передали этой функции только один параметр, но теперь мы передаем два параметра. Это возможно благодаря перегрузке функций. Перегрузка функций – это возможность создавать несколько функций с одинаковым именем, но с разными наборами параметров. Вызовы перегруженной функции будут запускать конкретную реализацию этой функции в зависимости от переданных параметров.

В нашем случае вызов setTextColor(BLACK, WHITE) отобразит черный текст на заполненном светлом фоне.

Изменение размера шрифта

Ранее в этой статье мы вызывали функцию setTextSize(font-size) , чтобы установить размер шрифта, и передавали в качестве параметра 1 . Вы можете использовать эту функцию для масштабирования шрифта, передавая любое неотрицательное целое число.

Символы отображаются в соотношении сторон 7:10. Это означает, что при передаче размера шрифта 1 текст будет отображаться с разрешением 7×10 пикселей на символ, при передаче 2 текст будет отображаться с разрешением 14×20 пикселей на символ, и так далее.

За рендеринг шрифта отвечает библиотека Adafruit_GFX. По умолчанию выбран моноширинный шрифт. Однако более поздние версии библиотеки Adafruit GFX предлагают возможность использовать альтернативные шрифты. В библиотеку входит несколько альтернативных шрифтов, плюс есть возможность добавлять новые.

Отображение чисел

Отобразить числа на OLED дисплее можно, просто вызвав функцию print() или println() . Перегруженная реализация этих функций принимает 32-разрядные целые числа без знака, поэтому вы можете показывать числа в диапазоне только от 0 до 4 294 967 295.

Указание основания для чисел

У функций print() и println() есть необязательный второй параметр, который определяет основание (формат); допустимые значения: BIN (двоичное, или основание 2), OCT (восьмеричное, или основание 8), DEC (десятичное, или основание 10), HEX (шестнадцатеричное, или основание 16). Для чисел с плавающей запятой этот параметр указывает количество десятичных знаков. Например:

print(78, BIN) дает “ 1001110 ”
print(78, OCT) дает “ 116 ”
print(78, DEC) дает “ 78 ”
print(78, HEX) дает “ 4E ”
println(1.23456, 0) дает “ 1 ”
println(1.23456, 2) дает “ 1.23 ”
println(1.23456, 4) дает “ 1.2346 ”

Отображение символов ASCII

Функции print() и println() отправляют данные на дисплей в виде читаемого текста ASCII, а функция write() отправляет на дисплей двоичные данные. Таким образом, вы можете использовать эту функцию для отображения символов ASCII. В нашем примере отправка числа 3 будет отображать символ сердца.

Прокрутка всего экрана

Вы можете прокручивать дисплей по горизонтали, вызывая функции startscrollright(startPage, stopPage) и startscrollleft(startPage, stopPage) , и по диагонали, вызывая startscrolldiagright(startPage, stopPage) и startscrolldiagleft(startPage, stopPage) . Все эти функции принимают два параметра, а именно, начальная страница ( startPage ) и конечная страница ( stopPage ). Для объяснения страниц обратитесь к разделу «Распределение памяти OLED модуля». Поскольку на дисплее отображается восемь страниц от 0 до 7, вы можете прокручивать весь экран, прокручивая все страницы, то есть, передавая параметры 0x00 и 0x07.

Чтобы остановить прокрутку дисплея, используется функция stopcroll() .

Прокрутка определенной части

Иногда нам не нужно прокручивать весь экран. Прокрутку только определенной части можно выполнить, передав функциям прокрутки правильную информацию о стартовой и конечной страницах. Для объяснения страниц обратитесь к разделу «Распределение памяти OLED модуля». Поскольку на дисплее отображается восемь страниц от 0 до 7, вы можете прокрутить какую-либо часть экрана, передав в качестве параметров конкретные номера страниц.

В нашем примере мы передали в оба параметра значение 0x00. Это позволит прокрутить только первую страницу (первые 8 строк) дисплея.

Код ESP8266: основы рисования

В этом примере мы собираемся попробовать простейшее рисование. Данный скетч демонстрирует множество функций рисования, включая прямоугольники, скругленные прямоугольники, круги и треугольники. Попробуйте загрузить скетч, а затем мы рассмотрим его более подробно.

Большая часть кода (включение библиотек и инициализация дисплея) такая же, как в примере выше, за исключением следующих фрагментов кода для рисования простых фигур.

Рисование прямоугольника

Нарисовать прямоугольник на дисплее можно с помощью функции drawRect(X_координата, Y_координата, ширина, высота, цвет) . На самом деле эта функция рисует «пустой» прямоугольник с границей в 1 пиксель. Вы также можете нарисовать закрашенный прямоугольник, используя функцию fillRect() .

Рисование скругленного прямоугольника

Нарисовать скругленный прямоугольник на дисплее можно с помощью функции drawRoundRect(X_координата, Y_координата, ширина, высота, радиус, цвет) . Эта функция принимает те же параметры, что и функция drawRect() , за исключением одного дополнительного параметра – радиуса скругления углов. Эта функция рисует полый скругленный прямоугольник с границей в 1 пиксель. Нарисовать закрашенный скругленный прямоугольник можно с помощью функции fillRoundRect() .

Рисование круга

Нарисовать окружность на дисплее можно с помощью функции drawCircle(X_координата_центра, Y_координата_центра, радиус, цвет) . Эта функция рисует полый круг с границей в 1 пиксель. Нарисовать заполненный круг можно с помощью функции fillCircle() .

Рисование треугольника

Нарисовать треугольник на дисплее можно с помощью функции drawTriangle(x0, y0, x1, y1, x2, y2, color) . Данная функция принимает семь параметров, а именно, координаты 3 вершин треугольника (x,y) и цвет. (x0, y0) представляет верхнюю вершину, (x1, y1) – левую вершину, и (x2, y2) – правую вершину.

Эта функция рисует полый треугольник с границей в 1 пиксель. Нарисовать заполненный треугольник можно с помощью функции fillTriangle() .

Код NodeMCU ESP8266: отображение растрового изображения

В последнем примере показано, как на OLED дисплее рисовать растровые изображения. Это полезно для создания заставок с логотипом компании, создания спрайтов или просто создания забавной графики при отображении информации. Скопируйте следующий код, вставьте его в Arduino IDE и нажмите «Загрузить».

Вот так выглядит результат.

Рисунок 26 – Отображение растрового изображения на модуле OLED дисплея

Чтобы показать растровое изображение на OLED дисплее, нам нужно вызвать функцию drawBitmap(X_координата, Y_координата, растровый_массив, ширина, высота, цвет) . Она принимает шесть параметров, а именно, координата X левого верхнего угла, координата Y левого верхнего угла, байтовый массив монохромного растрового изображения, ширина растрового изображения в пикселях, высота растрового изображения в пикселях и цвет.

В нашем примере растровое изображение имеет размер 128×64. Таким образом, координаты X и Y установлены в 0, а ширина и высота установлены в 128 и 64.

Но прежде чем мы сможем вызвать функцию drawBitmap() , нам сначала нужно нарисовать изображение. Помните, что разрешение OLED дисплея составляет 128×64 пикселей, поэтому изображения большего размера будут отображаться некорректно. Чтобы получить изображение правильного размера, вы можете использовать ваши любимые программы для рисования, такие как Inkscape, Photoshop, Paint и т.д., установив размер холста 128×64 пикселей.

В качестве примера мы взяли изображение Мэрилин Монро, преобразовали размер его в 128×64 пикселей с помощью Paint и сохранили в формате .bmp .

Теперь, когда у нас есть растровое изображение, самое время преобразовать его в массив, понятный OLED контроллеру SSD1306. Это можно сделать двумя способами: онлайн-метод с использованием image2cpp и офлайн-метод с использованием LCD Assistant.

Онлайн-генератор растровых массивов image2cpp

Онлайн-приложение image2cpp может преобразовать ваше изображение в массив. Image2cpp является более новым и намного более мощным, чем LCD Assistant. Оно позволит вам:

преобразовать несколько изображений одновременно;
масштабировать файл изображения (растянуть/масштабировать по размеру или относительно оригинала);
настроить порог яркости между черным и белым;
отцентрировать изображение по вертикали и/или по горизонтали;
инвертировать цвета изображения.

Этот инструмент настолько мощный, что может работать и в автономном режиме. Просто сохраните страницу на своем ПК и откройте ее в браузере.

Для начала откройте image2cpp в вашем браузере и выберите любое изображение, которое вы хотите отобразить на OLED дисплее.

Рисунок 29 – Выберите изображение

Размеры вашего изображения будут отображаться в параметре Canvas size в разделе Image settings. Если вы выбрали изображение большего размера, чем 128×64, измените его на 128×64 и выберите подходящий параметр масштабирования Scaling. Вы можете просмотреть вывод в разделе предварительного просмотра Preview section.

При необходимости вы можете изменить цвет фона (Background color) или инвертировать цвета изображения (Invert image colors).

Наконец, измените в соответствии с вашими требованиями наиболее важный параметр – порог яркости (Brightness threshold). Установка порога сделает пиксели выше этого уровня белыми и ниже черными. В нашем случае мы установили 171, чтобы получить достаточно детализированное изображение Мэрилин Монро.

Рисунок 30 – Настройки преобразования растрового изображения в массив данных в image2cpp

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

Рисунок 31 – Предварительный просмотр изображения в image2cpp

Как только вы будете удовлетворены результатом, можете приступить к созданию массива данных. Просто выберите формат вывода кода (Code output format) как Arduino Code и нажмите кнопку Generate code.

Для информации, есть еще опция под названием Режим рисования (Draw mode). Она на самом деле создает изображение в соответствии с шаблоном сканирования дисплея. Если ваше изображение выглядит на дисплее испорченным, попробуйте изменить этот режим.

Рисунок 32 – Генерирование вывода в image2cpp

Вот и всё. Сейчас будет сгенерирован байтовый массив вашего растрового изображения. И вы можете использовать этот вывод непосредственно в коде нашего примера. Просто не забудьте назвать его соответствующим образом. А затем вызовите ваш массив внутри функции drawBitmap() .

Рисунок 33 – Вывод image2cpp в формате Arduino Code

Автономный генератор массивов растровых изображений LCD Assistant

Преобразовать ваше растровое изображение в массив данных может еще одно приложение, LCD Assistant. Оно не такой мощное, как image2cpp, но по-прежнему популярно среди любителей.

Для начала вам необходимо преобразовать ваше изображение в монохромное растровое изображение 128×64. Чтобы сделать это, вы можете использовать ваши любимые программы для рисования, такие как Inkscape, Photoshop, Paint и т.д. Мы делали это в MS Paint.

Откройте ваш файл в MS Paint и измените его размер на 128×64.

Рисунок 34 – Открытие изображения в Paint

Теперь сохраните ваш файл как растровое изображение. При сохранении файла выберите Сохранить как: Монохромный рисунок (*.bmp; *.dib). Это создаст 1-битное/двоичное растровое изображение, которое для каждого пикселя имеет только два возможных значения, то есть 0 (черный) или 1 (белый).

Рисунок 35 – Сохранение 1-битного монохромного растрового изображения в MS Paint

Единственным недостатком здесь является то, что вы не можете установить пороговый уровень яркости. По умолчанию он установлен на 50% и не может быть изменен.

Теперь скачайте программу LCD Assistant. Откройте ее и загрузите ваше растровое изображение из меню File.

Рисунок 36 – LCD Assistant преобразует растровое изображение в массив данных для графических LCD и OLED дисплеев

Ничего особого с этим инструментом вы сделать не можете. Итак, просто зайдите в меню File и нажмите Save output. Сохраните файл как текстовый файл.

Для информации, здесь есть еще опция под названием Byte Orientation. Она создает изображение в соответствии с шаблоном сканирования дисплея. Если ваше изображение выглядит на дисплее испорченным, попробуйте изменить этот режим.

Рисунок 37 – Сохранить вывод LCD Assistant