Въведение ESP32 Lora OLED дисплей: 8 стъпки

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

Това е друг видеоклип относно Въвеждането на ESP32 LoRa. Този път ще говорим конкретно за графичен дисплей (от 128x64 пиксела). Ще използваме библиотеката SSD1306 за показване на информация на този OLED дисплей и ще представим пример за анимация, използваща XBM изображения.

Стъпка 1: Използвани ресурси

1 Heltec WiFi LoRa 32

Protoboard

Стъпка 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 пиксела --p.webp

Следващата стъпка е да го направите монохромен, като го запазите като монохромно растерно изображение.

След това го преоразмеряваме до размер, съвместим с дисплея.

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

С изображението в правилния размер, ние ще го редактираме, за да оформим рамките. Тук изтриваме всяка дъга от нивото на сигнала и ги запазваме като съответни кадри.

Сега трябва да конвертираме BMP файлове във формат XBM.

Има няколко софтуерни опции, които могат да направят това преобразуване. Избрахме и GIMP като опция за редактор.

В нашия пример използвахме PaintBrush за генериране и редактиране на файловете. Всеки от тези процеси обаче би могъл да бъде извършен в Gimp (или всеки друг редактор).

За да конвертираме, първо отваряме файла.

С отворено изображение можем да изберем Файл => Експортиране като …

В прозореца Експортиране на изображение трябва да променим разширението на целевия файл за XBM. Gimp ще отговаря за идентифицирането на желания формат и представянето на още опции …

При експортиране Gimp ще представи други опции. Можем да оставим стойностите по подразбиране.

След конвертирането на всички файлове ще имаме четири XBM файла, по един за всеки кадър.

Сега нека ги копираме в папката с изходния код и да ги преименуваме, като сменим техните разширения на.h.

Стъпка 5: Излизане от XBM файлове

Можем да отворим XBM файловете във всеки текстов редактор, където ще видим матрицата на изображението и информацията за размера на изображението, които вече са дефинирани.

Стъпка 6: Изходен код

Източник: Извлечения

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

// Включете като библиотека необходима информация #включете #include "SSD1306.h" // Включете os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" // дефинираме позиционирането на imagem и интервало за прехвърляне #define posX 21 #define posY 0 #define intervalo 500 // Pinos do OLED estão conctados ao ESP32: I2C // OLED_SDA - GPIO4 // OLED_SCL - GPIO15 // OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST deve ser controlado por software SSD1306 display (0x3c, SDA, SCL, RST); // Cria e ajusta o Objeto display

Изходен код: Настройка ()

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

void setup () {display.init (); // inicia o display display.flipScreenVertical (); // обърнете вертикално a tela (опционално)}

Изходен код: 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 // информация за tamanho da imagem com frame1_width e frame1_height // информация за nome da matriz que contem os bits da imagem, no caso frame1_bits display.drawXbm (posX, posY, frame1_width, frame1_height, frame1_bits); // mostra o buffer no display display.display (); // aguarda um intervalo antes de mostrar o próximo frame delay (intervalo);

Повтаряме процеса за всички останали кадри.

// повтаряне на processo para todos os outros кадрите 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, изберете менюто Инструменти => Карта: "Heltec_WIFI_LoRa_32"

Все още в менюто Инструменти изберете COM порта, където е свързан Heltec.

Щракнете върху бутона КАЗАНЕ…

… И изчакайте заключението.

Стъпка 8: Файлове

Изтеглете файловете:

PDF

АЗ НЕ