Введение в ESP32 Lora OLED-дисплей: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Это еще одно видео, посвященное введению в ESP32 LoRa. В этот раз речь пойдет конкретно о графическом дисплее (128х64 точки). Мы будем использовать библиотеку SSD1306 для отображения информации на этом OLED-дисплее и представим пример анимации с использованием изображений XBM.

Шаг 1. Используемые ресурсы

1 Heltec WiFi LoRa 32

Протоборд

Шаг 2: Дисплей

На макетной плате используется дисплей OLED с диагональю 0,96 дюйма.

Он имеет размер 128x64 и является монохромным.

Он имеет связь I2C и подключается к ESP32 через 3 провода:

SDA на GPIO4 (для данных)

SCL на GPIO15 (для часов)

RST на GPIO16 (для сброса и запуска дисплея)

Шаг 3. Библиотека SSD1306

Его можно найти вместе с набором библиотек, предоставленным Heltec-Aaron-Lee.

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

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Шаг 4: файлы анимации и XBM

Мы будем использовать библиотечную функцию drawXbm для отображения анимации.

Формат изображения XBM состоит из массива символов, где каждый элемент текстуально представляет набор монохромных пикселей (по 1 биту каждый) в шестнадцатеричном формате. Это эквивалентно одному байту.

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

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

Для создания анимации нам нужны изображения, из которых будут формироваться кадры.

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

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

Исходное изображение - 960x707 пикселей - формат PNG

Следующий шаг - сделать его монохромным, сохранив как монохромное растровое изображение.

Затем мы изменяем его размер до размера, совместимого с дисплеем.

Обратите особое внимание на единицы измерения. В данном случае мы настроили изображение так, чтобы оно занимало всю высоту экрана (по вертикали = 64 пикселя).

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

Теперь нам нужно преобразовать файлы BMP в формат XBM.

Есть несколько программных опций, которые могут выполнять это преобразование. Мы также выбрали GIMP в качестве редактора.

В нашем примере мы использовали PaintBrush для создания и редактирования файлов. Однако каждый из этих процессов можно было выполнить в GIMP (или в любом другом редакторе).

Чтобы преобразовать, мы сначала открываем файл.

Открыв изображение, мы можем выбрать File => Export as…

В окне экспорта изображения мы должны изменить расширение файла назначения для XBM. GIMP будет отвечать за определение желаемого формата и представление дополнительных опций …

При экспорте GIMP представит другие варианты. Мы можем оставить значения по умолчанию.

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

Теперь давайте скопируем их в папку с исходным кодом и переименуем, изменив их расширения на.h.

Шаг 5: Выход из файлов XBM

Мы можем открыть файлы XBM в любом текстовом редакторе, где мы увидим матрицу изображения и информацию о размере изображения, которые уже были определены.

Шаг 6: Исходный код

Исходный код: Заявления

Мы включим необходимые библиотеки, а также файлы изображений. Определяем позиции изображения и интервал перехода. Мы также указываем контакты OLED, подключенные к ESP32. Наконец, мы создаем и настраиваем объект Display.

// Включить как необходимые библиотеки # include #include "SSD1306.h" // Включить файлы изображений #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" // определение положения изображения и интервала перехода #define posX 21 #define posY 0 #define interval 500 // Выводы на OLED-дисплеи на ESP32: I2C // OLED_SDA - GPIO4 // OLED_SCL - GPIO15 // OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST Разработка программного управления дисплеем SSD1306 (0x3c, SDA, SCL, RST); // Cria e ajusta o Objeto display

Исходный код: Setup ()

Инициализируйте дисплей и переверните экран по вертикали. Действие необязательно.

пустая настройка () {display.init (); // начало отображения display.flipScreenVertical (); // инвертировать по вертикали телу (опционально)}

Исходный код: Loop ()

Первое, что нужно сделать в цикле, - очистить экран. Мы загружаем кадр 1 в буфер, используя начальные позиции posX и posY. Мы сообщаем размер изображения с помощью frame1_width и frame1_height, а также имя массива, содержащего биты изображения. Мы показываем буфер на дисплее и ждем некоторый интервал, прежде чем показывать следующий кадр.

void loop () {display.clear (); // limpa tela // carrega para o buffer o frame 1 // usando as posições iniciais posX e posY // informa o tamanho da imagem com frame1_width e frame1_height // информация о nome da matriz que contem os bit da imagem, no caso frame1_bits display.drawXbm (posX, posY, frame1_width, frame1_height, frame1_bits); // в большинстве случаев в буфере нет дисплея display.display (); // увеличить интервал до максимальной или предварительной задержки кадра (интервал);

Повторяем процесс для всех остальных рам.

// повторить процесс для задач после завершения кадров display.clear (); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); display.display (); задержка (интервал); display.clear (); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); display.display (); задержка (интервал); display.clear (); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); display.display (); задержка (интервал); }

Шаг 7. Выполнение загрузки кода

В открытой среде IDE откройте файл с исходным кодом, дважды щелкнув файл.ino или перейдя в меню «Файл».

При подключении Heltec к USB выберите меню Tools => Card: "Heltec_WIFI_LoRa_32"

По-прежнему в меню «Инструменты» выберите COM-порт, к которому подключен Heltec.

Нажмите кнопку ЗАГРУЗИТЬ…

… И ждите заключения.

Шаг 8: файлы

Загрузите файлы:

PDF

Я НЕТ