ESP32 עם תצוגת Oled - סרגל התקדמות: 6 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

ה- ESP32 שעליו נדבר היום הוא אחד שכבר מגיע עם Display Oled מובנה. פונקציה זו מקלה על חיינו הרבה יותר, מכיוון שנוכל להתרשם לגבי ערך המשתנה שמופיע. אתה אפילו לא צריך להסתכל על חלון באגים. כמו כן, אתה יכול להרכיב ייצוגים ולצייר בין היתר תרשימי ביצועים. בגלל היתרונות הללו, אני מחשיב את המודל הזה למוצר פנטסטי, ואנו מתכנתים אותו היום באמצעות Arduino IDE.

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

שלב 1: ספרייה

כדי להשתמש בתצוגת oled, עלינו להגדיר את הספרייה ב- Arduino IDE. לשם כך, הורד את הספרייה דרך הקישור.

פתח את הקובץ והדבק אותו בתיקיית הספריות של Arduino IDE.

C:/ProgramFiles (x86)/Arduino/libraries

שלב 2: Wemos Lolin ESP32 OLED

Wemos Lolin הוא שמו של ESP זה. בתמונה, החלק השחור הוא התצוגה, ולצד המכשיר אנו מציגים את כל ה- pinout. כפי שמוצג, ישנם מספר IOs המאפשרים לנו להפעיל ולכבות אלמנטים שונים. בנוסף, לדגם זה יש את הדור האחרון של WiFi ו- Bluetooth.

שלב 3: דוגמה

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

שלב 4: הרכבה

להרכבה שלנו השתמשתי בפוטנציומטר של 10k והפעלתי את ה- GPIO25 של הסמן. יש לנו גם 3v3 ו- GND, כפי שניתן לראות באיור שלהלן. הכוח יגיע מה- USB עצמו.

שלב 5: קוד

ראשית, אנו מוסיפים את הספרייה "SSD1306.h". עם זאת, ניגש לתצוגה המשולבת. לאחר מכן, אנו יוצרים אובייקט תצוגה מסוג SSD1306 שיהיה אחראי לשליטה על התוכן המוצג בתצוגה האולידית.

#include "SSD1306.h" // כינוי ל- #include "SSD1306Wire.h" // שליטה על תצוגת LED /* 0x3c: זהה זיהוי אונקיה עבור קומוניקה כדי להציג פינו 5 ו -4 סאו או דה קומוניקה (SDA, SDC) */ SSD1306 מסך (0x3c, 5, 4); // pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 // utilizado para fazer o contador de porcentagem int contador;

להכין

בפונקציית setup () נאתחל את אובייקט התצוגה שלנו כך שנוכל לשלוט במה שיוצג. באמצעות אובייקט זה, אנו גם להגדיר את מקור הכתיבה לטקסטים שיוצגו. ולבסוף, הגדרנו את הסיכה (במיוחד את הסיכה שבה הפנינו את הפוטנציומטר) ל- INPUT כדי לקרוא את הערך.

הגדרת void () {Serial.begin (115200); Serial.println (); Serial.println (); // Inicializa o objeto que controlará o que será exibido on tela screen.init (); // gira o display 180º (deixa de ponta cabeça) // display.flipScreenVertically (); // configa a fonte de escrita "ArialMT_Plain_10" screen.setFont (ArialMT_Plain_10); // configura o pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO, INPUT); }

לוּלָאָה

בפונקציית הלולאה () נקרא את ערך הפוטנציומטר הנוכחי. אנו יכולים להבחין כי אנו משתמשים בפונקציית "מפה" זמן קצר לאחר קריאת הערך, מכיוון שערך הקריאה גבוה מכדי להכניס סרגל התקדמות, כך שנמפה את הערך בטווח 0 עד 100.

לולאת void () {// leitura do valor do potenciometro int valor = analogRead (PINO_POTENCIOMETRO); //Serial.println(valor); // mapeando o valor do potenciometro para o valor da barra de progresso // potenciometro faz a leitura do valor no intervalo de 0 a 4095 // a barra de progresso espera um valor entre 0 e 100 contador = map (valor, 0, 4095, 0, 100); // תצוגת limpa todo o, apaga o contúdo da tela screen.clear (); // ++ מונה; // מונה> 100? counter = 0: counter = counter; // desenha סרגל התקדמות drawProgressBar (); // exibe na tela o que foi configurado até então. תצוגת מסך(); עיכוב (10); }

בפונקציה "drawProgress ()", נשתמש בערך הנקרא מהפוטנציומטר שנשמר במשתנה "percProgress" כדי להגדיר בסרגל ההתקדמות. כמו כן, נציב טקסט ממש מעל סרגל ההתקדמות, המציין את האחוז הנוכחי.

// função para desenhar סרגל התקדמות ללא displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenha סרגל התקדמות / * * drawProgressBar (x, y, רוחב, גובה, ערך); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: width comprimento da barra de progresso p4: height altura da barra de progresso p5: value val que que a barra de progresso deve assumir */ screen.drawProgressBar (10, 32, 100, 10, contador); // הגדרות או טקסטים של טקסטים מסוג serrit escrito // nesse caso alinharemos או texto ao centro screen.setTextAlignment (TEXT_ALIGN_CENTER); // escreve o texto de porcentagem / * * drawString (x, y, text); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: string texto que será exibido */ screen.drawString (64, 15, String (contador) + "%"); // se o contador está em zero, escreve a string "valor mínimo" if (contador == 0) {screen.drawString (64, 45, "Valor mínimo"); } // se o contador está em 100, רשום מחרוזת "valor máximo" אחרת אם (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

שלב 6: כמה פונקציות מעניינות אחרות

לְהַצִיג

// מעמיד את המסך הפוך

void flipScreenVertically ();

צִיוּר

// מצייר פיקסל בודד מהמסך

void setPixel (int16_t x, int16_t y);

// צייר קו

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1);

// צייר מלבן

void drawRect (int16_t x, int16_t y, int16_t רוחב, int16_t גובה);

// צייר עיגול

void drawCircle (int16_t x, int16_t y, radius int16_t);

// מלאו עיגול

void fillCircle (int16_t x, int16_t y, radius int16_t);

// צייר קו אופקי

void drawHorizontalLine (int16_t x, int16_t y, int16_t length);

// צייר קו אנכי

void drawVerticalLine (int16_t x, int16_t y, int16_t length);

טֶקסט

// מגדיר את יישור הטקסט שייכתב

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);