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


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

Внешний вид проекта подключения OLED дисплея к модулю ESP32

Также на нашем сайте мы рассматривали подключение OLED дисплея к другим микроконтроллерам (платам):

Необходимые компоненты

  1. Модуль ESP32 (купить на AliExpress).
  2. Модуль OLED дисплея SSD1306 128×64 с диагональю 0.96 дюйма и интерфейсом I2C (купить на AliExpress)..

Общие принципы работы OLED дисплея

Распиновка OLED дисплея

OLED дисплеи выпускаются в двух вариантах: с интерфейсом I2C (4 контакта у дисплея) и с интерфейсом SPI (7 контактов у дисплея). В данной статье мы рассмотрим работу с OLED дисплеем с 4 контактами, работающим по интерфейсу I2C. Если вам интересна работа с OLED дисплеем по интерфейсу SPI, то вы можете посмотреть все проекты с OLED дисплеями на нашем сайте – среди них много проектов с использованием интерфейса SPI.

Назначение контактов (распиновка) OLED дисплея, работающего по интерфейсу I2C, показана на следующем рисунке.

Назначение контактов (распиновка) OLED дисплея, работающего по интерфейсу I2C

GND – подключение к общему проводу (земле).

VCC – подача питания на модуль. Необходимо напряжение питания 3.3V.

SCL (Serial Clock pin) – линия для передачи импульсов синхронизации в интерфейсе I2C.

SDA (Serial Data pin) – линия для передачи импульсов синхронизации в интерфейсе I2C.

Но учитывайте тот факт, что расположение контактов у некоторых OLED дисплеев может отличаться от того, что приведено на рисунке выше, поэтому перед непосредственным подключением дисплея проверяйте у него расположение контактов по маркировке, которая нанесена на дисплей. Некоторые модули OLED дисплеев могут иметь встроенный регулятор напряжения 3.3V, а некоторые могут не иметь его. Если такого регулятора напряжения нет в вашем модуле OLED дисплея, то вам следует использовать его только с устройствами 3.3V, иначе вы можете повредить его. Если у него есть регулятор напряжения с маркировкой 662K, то тогда OLED дисплей можно применять вместе с устройствами 5V.

Компоненты OLED дисплея

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

Компоненты OLED дисплея, находящиеся на его печатной плате

Регулятор напряжения XC6206P332 понижает входное напряжение до уровня 3.3V. Наличие этого регулятора позволяет подключать OLED дисплей к микроконтроллерам и электрическим цепям, работающим с напряжением 5.5V. С помощью соответствующего джампера на плате дисплея можно изменять его I2C адрес. По умолчанию этот адрес равен 0x78, но его также можно изменить на 0x7A.

Схема модуля OLED дисплея 0.96”

Схема модуля OLED дисплея с диагональю 0.96” (дюйма) показана на следующем рисунке.

Схема модуля OLED дисплея с диагональю 0.96” (дюйма)Как вы можете видеть, она состоит из небольшого числа компонент. Большинство из них это резисторы и конденсаторы, необходимые для контроллера дисплея SSD1306. К другим компонентам можно отнести регулятор напряжения 3.3V (XC6206P332), подтягивающие резисторы для линий интерфейса I2C и резисторы джампера переключения I2C адреса.

Часто задаваемые вопросы про OLED дисплеям

Что такое модуль OLED дисплея?

OLED (Organic Light-Emitting Diode) в переводе означает органический светоизлучающий диод. То есть это само излучающая система, не требующая подсветки как в обычных ЖК дисплеях.

Какие типы контроллеров используются в модулях OLED дисплеев?
В OLED дисплеях небольшого размера самыми распространенными контроллерами являются SSD1306 и SH1106.

Какие типы протоколов используются для связи с OLED дисплеями?
I2C или SPI.

Какие самые популярные размеры и разрешения у OLED дисплеев?

Сейчас OLED дисплеи выпускаются со сравнительно большим числом возможных размеров, однако наиболее популярными среди них являются модели с диагональю экрана 0.96” и 1.3” и с разрешением 128x64 Dpi. Также в проектах любительской электроники применяются OLED дисплеи с разрешением 128x32 точек на дюйм.

Схема проекта

Схема подключения OLED дисплея к модулю ESP32 представлена на следующем рисунке.

Схема подключения OLED дисплея к модулю ESP32

Поскольку мы используем модуль OLED дисплея, работающий по протоколу I2C, то нам понадобится всего 4 провода для его подключения. Соответственно, его контакты VCC и GND подключены к контактам 3.3V и GND модуля ESP32. Контакт SCL OLED дисплея подключен к контакту GPIO22 модуля ESP32, а контакт SDA – к контакту GPIO21.

Внешний вид собранной конструкции проекта показан на следующем рисунке.

Внешний вид собранной конструкции проекта

Объяснение кода программы для подключения OLED дисплея

Для упрощения работы с OLED мы будем использовать две библиотеки Arduino – Adafruit’s SSD1306 library и Adafruit GFX Library. Для их установки в Arduino IDE выберите пункт меню Sketch > Include Library > Manage Libraries. Подождите пока менеджер библиотек скачает индексы библиотек и обновит список установленных библиотек. Затем в строке поиска введите название необходимой библиотеки и после осуществления поиска установите ее.

Тестирование работы OLED дисплея

После того, как в схеме проекта будут сделаны все необходимые соединения, откройте пример программы для работы с OLED дисплеем, расположенный по адресу File > Examples > Adafruit SSD1306 >ssd1306_128x64_i2c. После открытия этого примера измените в нем адрес 0x3C. Затем скомпилируйте и загрузите код примера в модуль ESP32. После этого на экране OLED дисплея вы должны увидеть следующую картину:

Тестирование работы OLED дисплея

Код программы вывода текста и тестирования функций работы с графикой

Для тестирования основных функций работы с текстом и графикой откройте следующий код программы в Arduino IDE и загрузите его в модуль ESP32. Результат должен быть следующим:

Тестирование работы различных способов вывода текста на OLED дисплей

Теперь давайте более внимательно рассмотрим фрагменты этого кода. В начале кода программы необходимо подключить необходимые библиотеки и объявить глобальные переменные. В нашей программе мы подключим библиотеку wire.h потому что будем работать с протоколом I2C и библиотеки от Adafruit для работы с OLED дисплеем.

Затем зададим разрешение экрана для используемого OLED дисплея (SCREEN_WIDTH и SCREEN_HIGHT). Также изменим OLED адрес на 0x3C. Измените его в соответствии с вашим модулем дисплея. Если вы не уверены в том, какой у вас I2C адрес используйте I2C сканер для его определения. Далее создадим объект для работы с OLED дисплеем, передав ему необходимые параметры.

Затем в функции void setup() инициализируем последовательную связь и библиотеку Adafruit GFX. После этого очистим буфер с помощью функции clearDisplay – она очистит все содержимое экрана дисплея.

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

Отображение текста на экране OLED дисплея

С помощью данного фрагмента текста мы напечатаем фразу "Hello world!" на экране OLED дисплея. Но перед вызовом этой функции мы установим размер текста с помощью функции display.setTextSize(size), его цвет с помощью функции display.setTextColor(colour) и позицию курсора с помощью функции display.setCursor(x,y). Окончательный вывод текста на экран происходит после вызова функции display.display() – именно она говорит контроллеру дисплея отобразить содержимое буфера на экран. Пока мы не вызовем эту функцию на экране дисплея ничего не отобразится.

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

Отображение инвертированного текста на экране OLED дисплея

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

Увеличение размера текста

Увеличение размера текста на экране OLED дисплея

В этом фрагменте кода мы увеличиваем размер выводимого текста в 2 раза с помощью вызова функции display.setTextSize(2).

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

Отображение чисел на экране OLED дисплея

Здесь все аналогично выводу текста. Можно использовать функции print или println для отображения числа на экране дисплея.

Отображение чисел в заданной системе счисления

Отображение чисел в заданной системе счисления на экране OLED дисплея

Это можно сделать с помощью вызова функций print или println в формате print(value, base), где base и будет названием системы счисления.

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

Отображение символов ASCII на экране OLED дисплея

Файлы шрифтов могут содержать не только цифры и буквы, но также и маленькие или графические символы. Для их отображения мы можем использовать функцию write. Чтобы отобразить необходимый ASCII символ необходимо указать его ASCII код. В представленном примере мы отобразили смайлик, ASCII код которого равен 0x01. На следующем рисунке приведена таблица ASCII символов для шрифта, используемого в библиотеке Adafruit GFX по умолчанию. Но вы можете использовать свои собственные файлы шрифтов, которые могут содержать различные глифы (Glyphs) с различными ASCII кодами.

Таблица ASCII символов для шрифта, используемого в библиотеке Adafruit GFX по умолчанию

Скроллинг текста

Скроллинг текста на экране OLED дисплея

С помощью библиотеки Adafruit GFX мы можем производить скроллинг на экране OLED дисплея как фрагмента текста, так и всего экрана. С помощью функций startscrollright и startscrollleft можно производить скроллинг дисплея вправо или влево соответственно. Значения внутри этих функций обозначают начальную и конечную номера страниц. В нашем примере мы скроллим весь дисплей, то есть все 8 страниц.

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

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

Функция для рисования прямоугольника на экране OLED дисплея очень проста – надо всего лишь задать координаты его верхнего левого угла, его ширину и высоту, а также его цвет. То есть формат данной команды выглядит следующим образом – drawRect(x, y, width, height, colour).

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

Рисование заполненного цветом прямоугольника на экране OLED дисплея

Функция очень похожа на выше описанную функцию drawRect, разница лишь в том что здесь мы заливаем прямоугольник цветом. Формат команды для рисования прямоугольника, заполненного цветом, выглядит следующим образом – fillRect(x, y, width, height, colour).

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

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

В данном примере функция для рисования прямоугольника со скругленными краями также очень похожа на функцию drawRect. Но в ней кроме координат верхнего левого угла, ширины, высоты и цвета нужно также указать радиус скругления углов, то есть формат команды выглядит следующим образом – drawRoundRect (x, y, width, height, radius, colour).

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

Рисование заполненного цветом прямоугольника со скругленными краями на экране OLED дисплея

Функция для рисования подобного прямоугольника очень похожа на функцию drawRoundRect, разница лишь в том что здесь прямоугольник со скругленными краями нужно еще и заполнить цветом. В результате формат команды выглядит следующим образом – fillRoundRect (x, y, width, height, radius, colour).

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

Рисование круга на экране OLED дисплея

Для рисования круга на экране OLED дисплея мы можем использовать функцию drawCircle, в которой необходимо указать координаты центра круга  его радиус. В результате форма команды выглядит следующим образом – drawCircle(x, y, Radius).

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

Рисование закрашенного круга на экране OLED дисплея

Для этого нужно использовать функцию fillCircle, в ней также необходимо указать координаты центра круга и его радиус, то есть получаем команду вида fillCircle(x, y, Radius).

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

Рисование треугольника на экране OLED дисплея

Для рисования треугольника мы можем использовать функцию drawTriangle, в нее необходимо передавать семь параметров: координаты (X и Y) всех трех вершин треугольника, а также его цвет. В результате получаем команду вида – drawTriangle(x1, y1, x2, y2, x3, y3, Colour).

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

Рисование закрашенного треугольника на экране OLED дисплея

Аналогично функции drawTriangle в функцию для рисования закрашенного треугольника необходимо передать семь параметров: координаты (X и Y) всех трех вершин треугольника, а также его цвет. В результате получаем команду вида fillTriangle(x1, y1, x2, y2, x3, y3, Colour).

Отображение изображения на экране OLED дисплея

Чтобы отобразить изображение на экране OLED дисплея прежде всего необходимо убедиться в том, что его разрешение не превосходит разрешение дисплея. Для нашего проекта нам необходимо будет изменить разрешение изображения до размера 128x64 пикселов. После этого его нужно конвертировать в шестнадцатеричный массив данных чтобы мы его могли использовать в тексте программы. Данное преобразование можно выполнить несколькими способами, мы будем использовать один из самых простых из них. Для этого зайдите на веб-сайт Image2cpp и загрузите в него свое изображение:

Преобразование изображения в массив данных с помощью веб-сайта Image2cpp

Измените размер изображения на 128 x 64. Измените другие настройки по своему желанию, чтобы получить требуемое вам изображение. После этого в качестве выходного формата выберите пункт Arduino code и нажмите на кнопку generate code (сгенерировать код). После этого в поле ниже появится необходимый вам массив с данными изображения. Скопируйте его и вставьте в программу туда, где объявляются глобальные переменные. После этого отобразить данный массив на экране OLED дисплея в виде изображения можно с помощью функции drawBitmap(x, y, array_name, Width, Hieght, Colour).

Результат выполнения этой программы будет выглядеть следующим образом:

Исходный код программ

Программа вывода на экран OLED дисплея текста и графических фигур

Программа вывода на экран OLED дисплея собственного изображения

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

Источник статьи

(Проголосуй первым!)
Загрузка...
198 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован.