ESP32 com display Oled - Barra de progresso: 6 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

O ESP32 do qual falaremos hoje é um que já vem com Display Oled integrado. Esta função facilita muito a nossa vida, pois podemos ter uma impressão do valor da variável que aparece. Você nem mesmo precisa olhar para uma janela de depuração. Além disso, você pode montar representações e desenhar gráficos de desempenho, entre outras coisas. Por causa desses benefícios, considero este modelo um produto fantástico, e iremos programá-lo hoje usando o IDE do Arduino.

Portanto, neste vídeo iremos programar uma barra de progresso. É importante lembrar que se o seu ESP32 não tiver o display oled, é possível comprá-lo separadamente. Além disso, se você nunca programou um ESP32, sugiro que assista a este vídeo: VÍDEO INTRODUÇÃO AO ESP32, que trata do assunto com mais detalhes.

Etapa 1: Biblioteca

Para usar o display oled, precisamos configurar a biblioteca no IDE do Arduino. Para isso, baixe a biblioteca pelo link.

Descompacte o arquivo e cole-o na pasta de bibliotecas do Arduino IDE.

C: / Arquivos de programas (x86) / Arduino / bibliotecas

Etapa 2: Wemos Lolin ESP32 OLED

Wemos Lolin é o nome desse ESP. Na imagem, a parte preta é o display e, ao lado do dispositivo, exibimos toda a pinagem. Conforme mostrado, existem vários IOs que nos permitem ligar e desligar vários elementos. Além disso, este modelo possui WiFi e Bluetooth de última geração.

Etapa 3: Exemplo

No vídeo, você pode ver nosso projeto pronto, e como usar o display OLED para exibir uma barra de progresso controlada por um potenciômetro.

Etapa 4: Montagem

Para nossa montagem, usei um potenciômetro de 10k e liguei o GPIO25 do cursor. Temos também 3v3 e GND, como você pode ver na figura abaixo. A alimentação virá do próprio USB.

Etapa 5: Código

Primeiro, adicionamos a biblioteca "SSD1306.h". Com isso, acessaremos o display oled. Em seguida, criamos um objeto display do tipo SSD1306 que será responsável por controlar o conteúdo mostrado no display oled.

#include "SSD1306.h" // alias para #include "SSD1306Wire.h" // objeto controlador do display de led / * 0x3c: é um identificador único para comunicação do display pino 5 e 4 são os de comunicação (SDA, SDC) * / Tela SSD1306 (0x3c, 5, 4); // pino que ligamos o potenciômetro # define PINO_POTENCIOMETRO 25 // usado para fazer o contador de porcentagem int contador;

Configurar

Na função setup (), inicializaremos nosso objeto de exibição para que possamos controlar o que será exibido. Através deste objeto, também iremos configurar a fonte de escrita dos textos que serão exibidos. E, finalmente, definimos o pino (especificamente, o pino onde giramos o potenciômetro) para INPUT para ler o valor.

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

Ciclo

Na função loop (), leremos o valor atual do potenciômetro. Podemos notar que estamos usando a função "map" logo após a leitura do valor, porque o valor lido é muito alto para ser colocado em uma barra de progresso, portanto, mapearemos o valor para ficar no intervalo de 0 a 100.

void loop () {// leitura do valor do potenciômetro int valor = analogRead (PINO_POTENCIOMETRO); //Serial.println(valor); // mapeando o valor do potenciômetro para o valor da barra de progresso // potenciômetro 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); // todo o display limpa, apaga o contúdo da tela screen.clear (); // ++ contador; // contador> 100? contador = 0: contador = contador; // desenha uma barra de progresso drawProgressBar (); // exibe na tela o que foi definido até então. Tela de exibição(); atraso (10); }

Na função "drawProgress ()", usaremos o valor lido do potenciômetro que está salvo na variável "percProgress" para definir na barra de progresso. Também colocaremos um texto logo acima da barra de progresso, indicando a porcentagem atual.

// função para desenhar uma barra de progresso no displayvoid drawProgressBar () {Serial.print (">>"); Serial.println (contador); // desenha uma barra de progresso / * * drawProgressBar (x, y, width, height, value); parametros (p): p1: x coordenada X no plano cartesiano p2: y coordenada Y no plano cartesiano p3: largura comprimento da barra de progresso p4: altura altura da barra de progresso p5: valor valor que a barra de progresso deve cumprir * / 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); // conversão 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á aplicada * / screen.drawString (64, 15, String (contador) + "%"); // se o contador está em zero, ganhou uma string "valor mínimo" if (contador == 0) {screen.drawString (64, 45, "Valor mínimo"); } // se o contador está em 100, recebe uma string "valor máximo" else if (contador == 100) {screen.drawString (64, 45, "Valor máximo"); }}

Etapa 6: algumas outras funções interessantes

Exibição

// coloca a tela de cabeça para baixo

void flipScreenVertically ();

Desenhando

// desenha um único pixel da tela

void setPixel (int16_t x, int16_t y);

// Desenhe uma linha

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

// desenha um retângulo

void drawRect (int16_t x, int16_t y, int16_t largura, int16_t altura);

// desenhar um círculo

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

// preencha um círculo

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

// desenha uma linha horizontal

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

// desenha uma linha vertical

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

Texto

// define o alinhamento do texto a ser escrito

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);