ESP32 Sa Display Oled - Progress Bar: 6 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Ang ESP32 na pag-uusapan natin ngayon ay isa na kasama na ng built-in na Display Oled. Ginagawa ng pagpapaandar na ito ang aming buhay nang mas madali, dahil maaari kaming magkaroon ng isang impression tungkol sa halaga ng lilitaw na variable. Hindi mo rin kailangang tumingin sa isang window ng pag-debug. Gayundin, maaari kang mag-ipon ng mga representasyon at gumuhit ng mga tsart ng pagganap, bukod sa iba pang mga bagay. Dahil sa mga benepisyong ito, isinasaalang-alang ko ang modelong ito ng isang kamangha-manghang produkto, at ipaprograma namin ito ngayon gamit ang Arduino IDE.

Kaya, sa video na ito mag-programa kami ng isang progress bar. Mahalagang tandaan na kung ang iyong ESP32 ay walang display oled, posible na bilhin ito nang hiwalay. Gayundin, kung hindi mo pa nai-program ang isang ESP32, iminumungkahi kong panoorin mo ang video na ito: PANIMULA SA VIDEO SA ESP32, na tumutukoy sa paksa nang mas detalyado.

Hakbang 1: Library

Upang magamit ang oled display, kailangan naming i-configure ang library sa Arduino IDE. Upang magawa ito, i-download ang library sa pamamagitan ng link.

I-zip ang file at i-paste ito sa folder ng mga aklatan ng Arduino IDE.

C: / ProgramFiles (x86) / Arduino / aklatan

Hakbang 2: Wemos Lolin ESP32 OLED

Ang Wemos Lolin ang pangalan ng ESP na ito. Sa imahe, ang itim na bahagi ay ang display at, sa tabi ng aparato, ipinapakita namin ang buong pinout. Tulad ng ipinakita, maraming mga IO na pinapayagan kaming i-on at i-off ang iba't ibang mga elemento. Bilang karagdagan, ang modelong ito ay may pinakabagong henerasyon na WiFi at Bluetooth.

Hakbang 3: Halimbawa

Sa video, makikita mo ang aming handa na proyekto, at kung paano gamitin ang oled display upang maipakita ang isang progress bar na kinokontrol ng isang potensyomiter.

Hakbang 4: Assembly

Para sa aming pagpupulong gumamit ako ng potensyomiter na 10k, at binuksan ko ang cursor’s GPIO25. Mayroon din kaming 3v3 at GND, tulad ng nakikita mo sa figure sa ibaba. Ang kapangyarihan ay magmumula sa USB mismo.

Hakbang 5: Code

Una, idinagdag namin ang library na "SSD1306.h". Sa pamamagitan nito, maa-access namin ang oled display. Pagkatapos, lumikha kami ng isang display object ng uri ng SSD1306 na responsable para sa pagkontrol sa nilalamang ipinakita sa oled display.

# isama ang "SSD1306.h" // alias para sa # isama ang "SSD1306Wire.h" // objeto controlador do display de led / * 0x3c: é identificador único para comunicação do display pino 5 e 4 são os de comunicação (SDA, SDC) * / SSD1306 screen (0x3c, 5, 4); // pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 // utilizado para fazer o contador de porcentagem int contador;

Pag-set up

Sa pag-andar ng setup (), isasimula namin ang aming display object upang makontrol namin ang ipapakita. Sa pamamagitan ng bagay na ito, mai-configure din namin ang mapagkukunan ng pagsulat para sa mga teksto na ipapakita. At, sa wakas, itinakda namin ang pin (partikular, ang pin kung saan namin nakabukas ang potensyomiter) sa INPUT upang mabasa ang halaga.

void setup () {Serial.begin (115200); Serial.println (); Serial.println (); // Inicializa o objeto que controlará o que será exibido na tela screen.init (); // gira o display 180º (deixa de ponta cabeça) // display.flipScreenVertically (); // configura 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); }

Loop

Sa pag-andar ng loop (), babasahin namin ang kasalukuyang halaga ng potensyomiter. Mapapansin natin na ginagamit namin ang pagpapaandar na "mapa" kaagad pagkatapos basahin ang halaga, sapagkat ang binasang halaga ay masyadong mataas upang mailagay sa isang advance bar, kaya ilalagay namin ang mapa sa halagang nasa loob ng 0 hanggang 100.

void loop () {// leitura do valor do potenciometro int valor = analogRead (PINO_POTENCIOMETRO); //Serial.println(valor); // mapeando o valor do potenciometro para sa 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 display, mag-click sa iyong tela screen.clear (); // ++ counter; // counter> 100? counter = 0: counter = counter; // desenha isang progress bar drawProgressBar (); // exibe na tela o que foi configurado at entidad. screen.display (); antala (10); }

Sa pagpapaandar na "drawProgress ()", gagamitin namin ang halagang binasa mula sa potentiometer na na-save sa variable na "percProgress" upang maitakda sa bar ng pag-unlad. Maglalagay din kami ng isang teksto sa itaas lamang ng progress bar, na nagpapahiwatig ng kasalukuyang porsyento.

// função para desenhar isang progress bar walang displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenha isang progress bar / * * drawProgressBar (x, y, lapad, taas, halaga); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: width comprimento da barra de progresso p4: taas altura da barra de progreso p5: halaga ng lakas ng loob ng isang barra de progreso deve assumir * / screen.drawProgressBar (10, 32, 100, 10, contador); // configura o alinhamento do texto que será escrito // nesse caso alinharemos o 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, escreve a string "valor máximo" else if (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

Hakbang 6: Ilang Ibang Mga Kagiliw-giliw na Pag-andar

Ipakita

// inilalagay ang baligtad na display

walang bisa flipScreenVertically ();

Pagguhit

// kumukuha ng isang solong pixel mula sa screen

walang bisa ang setPixel (int16_t x, int16_t y);

// gumuhit ng linya

walang bisa drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1);

// gumuhit ng isang rektanggulo

walang bisa drawRect (int16_t x, int16_t y, int16_t lapad, int16_t taas);

// gumuhit ng isang bilog

walang bisa drawCircle (int16_t x, int16_t y, int16_t radius);

// punan ang isang bilog

walang bisa ang fillCircle (int16_t x, int16_t y, int16_t radius);

// gumuhit ng isang pahalang na linya

walang bisa ang drawHorizontalLine (int16_t x, int16_t y, int16_t haba);

// gumuhit ng isang patayong linya

walang bisa drawVerticalLine (int16_t x, int16_t y, int16_t haba);

Text

// nagtatakda ng pagkakahanay ng teksto na isusulat

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);