מבוא ESP32 Lora OLED Display: 8 שלבים

2025 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2025-01-23 14:46

זהו סרטון נוסף הנוגע למבוא ל- ESP32 LoRa. הפעם נדבר במיוחד על תצוגה גרפית (של 128x64 פיקסלים). נשתמש בספריית 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

ניתן למצוא זאת יחד עם מערך הספריות שסיפק הלקטק-אהרון-לי.

יש לו מספר פונקציות לכתיבת מחרוזות, ציור קווים, מלבנים, עיגולים והצגת תמונות.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

שלב 4: קבצי האנימציה ו- XBM

נשתמש בפונקציית drawXbm של הספרייה להצגת אנימציה.

פורמט התמונה של XBM מורכב ממערך של תווים כאשר כל אלמנט מייצג טקסטלית קבוצה של פיקסלים מונוכרום (1 ביט כל אחד), באמצעות ערך הקסדצימלי. אלה שווים לבייט אחד.

מכיוון שמשתמשים במספר תווים לייצוג בתים בודדים, קבצים אלה נוטים להיות גדולים יותר מאלה של הפורמטים שאומצו כיום. היתרון הוא שניתן לאסוף אותם ישירות ללא צורך בטיפול קודם.

בנוסף למערך, כלולות שתי הגדרות הקובעות את גודל התמונה.

כדי לבנות את האנימציה, אנו זקוקים לתמונות שיהוו את המסגרות.

אנו יכולים להשתמש בכל תוכנת עריכת תמונות כדי לעבוד. אמצעי הזהירות היחידים שעלינו לנקוט הם קודם כל לשמור על הגודל התואם לתצוגה ולהשתמש בקבצים מונוכרום.

כדי ליצור את הקבצים, נוכל לצייר אותם או לייבא תמונות. כאן, החלטנו לערוך תמונת צבע באמצעות PaintBrush, וציירנו כל אחת מהמסגרות

תמונה מקורית - 960x707 פיקסלים - פורמט PNG

השלב הבא הוא להפוך אותו למונוכרום על ידי שמירתו כמפת סיביות מונוכרום.

לאחר מכן, נשנה את גודל הגודל התואם את התצוגה.

שימו לב במיוחד ליחידות המידה. במקרה זה, התאמנו את התמונה כך שתתפוס את כל גובה התצוגה (אנכי = 64 פיקסלים).

כשהתמונה בגודל הנכון, נערוך אותה ליצירת המסגרות. כאן, אנו מוחקים כל קשת של רמת האות ושומרים אותם כמסגרות מתאימות.

כעת עלינו להמיר קבצי BMP לפורמט XBM.

ישנן מספר אפשרויות תוכנה שיכולות לבצע המרה זו. בחרנו גם ב- GIMP כאפשרות עורך.

בדוגמה שלנו, השתמשנו ב- PaintBrush כדי ליצור ולערוך את הקבצים. עם זאת, כל אחד מהתהליכים הללו יכול היה להתבצע ב- Gimp (או בכל עורך אחר).

כדי להמיר, אנו פותחים תחילה את הקובץ.

כשהתמונה פתוחה, אנו יכולים לבחור קובץ => ייצא כ …

בחלון ייצוא תמונה, עלינו לשנות את סיומת קובץ היעד עבור XBM. גימפ תהיה אחראית על זיהוי הפורמט הרצוי והצגת אפשרויות נוספות …

בעת הייצוא, Gimp תציג אפשרויות אחרות. אנו יכולים להשאיר את ערכי ברירת המחדל.

לאחר המרת כל הקבצים, יהיו לנו ארבעה קבצי XBM, אחד לכל מסגרת.

עכשיו בואו להעתיק אותם לתיקיית קוד המקור ולשנות את שמם על ידי שינוי הסיומות שלהם ל-.h.

שלב 5: יציאת קבצי XBM

אנו יכולים לפתוח את קבצי XBM בכל עורך טקסט, שם נראה את מטריצת התמונה ומידע על גודל התמונה שכבר הוגדרו.

שלב 6: קוד המקור

קוד מקור: הצהרות

אנו נכלול את הספריות הדרושות, כמו גם את קבצי התמונות. אנו מגדירים את מיקומי התמונה ואת מרווח המעבר. אנו מצביעים גם על סיכות ה- OLED המחוברות ל- ESP32. לבסוף, אנו יוצרים ומתאימים את אובייקט התצוגה.

// Incluindo as bibliotecas needsárias #include #include "SSD1306.h" // Incluindo os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" // definições de posição da imagem e intervalo de transição #define posX 21 #define posY 0 #define intervalo 500 // Pinos do OLED estão cono 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 for software SSD1306 display (0x3c, SDA, SCL, RST); // Cria e ajusta o תצוגת Objeto

קוד מקור: הגדרות ()

אתחל את התצוגה והפך את המסך אנכית. פעולה היא אופציונלית.

הגדרת חלל () {display.init (); // inicia o display display.flipScreenVertically (); // inverte verticalmente a tela (אופציונלי)}

קוד מקור: לולאה ()

הדבר הראשון שצריך לעשות בלולאה הוא לנקות את המסך. אנו מעמיסים את מסגרת 1 למאגר באמצעות העמדות הראשוניות posX ו- posY. אנו מודיעים על גודל התמונה עם frame1_width ו- frame1_height, ושם המערך המכיל את פיסות התמונה. אנו מציגים את המאגר בתצוגה ומחכים למרווח זמן לפני הצגת המסגרת הבאה.

לולאת חלל () {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 // informa o 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 frame (intervalo);

אנו חוזרים על התהליך עבור כל המסגרות האחרות.

// repete o processo for todos os outros frames 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

INO