ESP32 avec écran Oled - Barre de progression : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

L'ESP32 dont nous allons parler aujourd'hui est déjà livré avec Display Oled intégré. Cette fonction nous facilite grandement la vie, car nous pouvons nous faire une idée de la valeur de la variable qui apparaît. Vous n'avez même pas besoin de regarder une fenêtre de débogage. Vous pouvez également assembler des représentations et dessiner des graphiques de performances, entre autres. En raison de ces avantages, je considère ce modèle comme un produit fantastique, et nous allons le programmer aujourd'hui en utilisant Arduino IDE.

Ainsi, dans cette vidéo, nous allons programmer une barre de progression. Il est important de rappeler que si votre ESP32 n'a pas l'écran oled, il est possible de l'acheter séparément. Aussi, si vous n'avez jamais programmé d'ESP32, je vous propose de regarder cette vidéo: VIDEO PRESENTATION DE L'ESP32, qui aborde le sujet plus en détail.

Étape 1: Bibliothèque

Pour utiliser l'écran oled, nous devons configurer la bibliothèque dans l'IDE Arduino. Pour ce faire, téléchargez la bibliothèque via le lien.

Décompressez le fichier et collez-le dans le dossier des bibliothèques de l'IDE Arduino.

C: /ProgramFiles(x86)/Arduino/libraries

Étape 2: Wemos Lolin ESP32 OLED

Wemos Lolin est le nom de cet ESP. Dans l'image, la partie noire est l'affichage et, à côté de l'appareil, nous affichons l'intégralité du brochage. Comme indiqué, il existe plusieurs E/S qui nous permettent d'activer et de désactiver divers éléments. De plus, ce modèle dispose de la dernière génération WiFi et Bluetooth.

Étape 3: Exemple

Dans la vidéo, vous pouvez voir notre projet prêt et comment utiliser l'écran Oled pour afficher une barre de progression contrôlée par un potentiomètre.

Étape 4: Assemblage

Pour notre montage j'ai utilisé un potentiomètre de 10k, et j'ai allumé le GPIO25 du curseur. Nous avons également 3v3 et GND, comme vous pouvez le voir sur la figure ci-dessous. L'alimentation viendra de l'USB lui-même.

Étape 5: Coder

Tout d'abord, nous ajoutons la bibliothèque "SSD1306.h". Avec cela, nous accéderons à l'écran oled. Après, nous créons un objet d'affichage du type SSD1306 qui sera chargé de contrôler le contenu affiché dans l'écran oled.

#include "SSD1306.h" // alias pour #include "SSD1306Wire.h" //objet 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) */ écran SSD1306 (0x3c, 5, 4); //pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 //utilizado para fazer o contador de porcentagem int contador;

Installer

Dans la fonction setup(), nous allons initialiser notre objet d'affichage afin de pouvoir contrôler ce qui sera affiché. A travers cet objet, nous allons également configurer la source d'écriture des textes qui seront affichés. Et, enfin, nous réglons la broche (en particulier, la broche où nous avons tourné le potentiomètre) sur INPUT pour lire la valeur.

void setup() { Serial.begin(115200); Serial.println(); Serial.println(); // Inicializa o objeto que controlará o que sera 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, ENTREE); }

Boucle

Dans la fonction loop(), nous allons lire la valeur actuelle du potentiomètre. Nous pouvons remarquer que nous utilisons la fonction "map" peu de temps après avoir lu la valeur, car la valeur lue est trop élevée pour être mise dans une barre de progression, nous allons donc mapper la valeur pour qu'elle se situe dans la plage de 0 à 100.

void loop() { //leitura do valor do potenciometro int valor = analogRead(PINO_POTENCIOMETRO); //Série.println(valeur); //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 ou display, apaga ou contúdo da tela screen.clear(); // ++compteur; // compteur > 100 ? compteur = 0: compteur = compteur; //desenha une barre de progression drawProgressBar(); //exibe na tela o que foi configurado até então. écran d'affichage(); retard(10); }

Dans la fonction "drawProgress()", nous utiliserons la valeur lue sur le potentiomètre qui est enregistrée dans la variable "percProgress" à définir dans la barre de progression. Nous placerons également un texte juste au-dessus de la barre de progression, indiquant le pourcentage actuel.

//Função para desenhar a progress bar no displayvoid drawProgressBar() { Serial.print(">> "); Serial.println(contador); // desenha une barre de progression /* * drawProgressBar(x, y, width, height, value); paramètres (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 valor que a barra de progresso 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); //screve o texto de porcentagem /* * drawString(x, y, text); paramètres (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 à zéro, escreve une chaîne "valor mínimo" if(contador == 0){ screen.drawString(64, 45, "Valor mínimo"); } //se o contador est à 100, escreve une chaîne "valor máximo" else if(contador == 100){ screen.drawString(64, 45, "Valor máximo"); } }

Étape 6: Quelques autres fonctions intéressantes

Affichage

// met l'affichage à l'envers

void flipScreenVertically ();

Dessin

// dessine un seul pixel de l'écran

void setPixel (int16_t x, int16_t y);

// tracer une ligne

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

// dessine un rectangle

void drawRect (int16_t x, int16_t y, int16_t largeur, int16_t hauteur);

// trace un cercle

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

// remplir un cercle

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

// trace une ligne horizontale

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

// trace une ligne verticale

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

Texte

// définit l'alignement du texte à écrire

// TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER_BOTH

void setTextAlignment (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);