ESP8266 Écran OLED 0,96 pouces avec Arduino IDE

Ce guide montre comment utiliser l’écran OLED SSD1306 de 0,96 pouce avec ESP8266 à l’aide de l’IDE Arduino. Nous allons vous montrer comment écrire du texte, définir différentes polices, dessiner des formes et afficher des images bitmap.

Circuit d'image d'affichage OLED ESP8266 Arduino

Nous avons également un guide dédié qui montre comment afficher les relevés de température et d’humidité à l’aide du capteur DHT et de l’ESP8266.

Présentation de l’écran OLED de 0,96 pouces

Le Écran OLED que nous utiliserons dans ce didacticiel est le modèle SSD1306 : un écran monochrome de 0,96 pouce avec 128 × 64 pixels, comme illustré dans la figure suivante.

Écran OLED de 0,96 pouces avec ESP32 ESP8266 Arduino

L’écran OLED ne nécessite pas de rétroéclairage, ce qui se traduit par un très beau contraste dans les environnements sombres. De plus, ses pixels ne consomment de l’énergie que lorsqu’ils sont allumés, de sorte que l’écran OLED consomme moins d’énergie par rapport aux autres écrans.

Le modèle que nous utilisons a quatre broches et communique avec n’importe quel microcontrôleur utilisant le protocole de communication I2C. Certains modèles sont livrés avec une broche RESET supplémentaire ou communiquent à l’aide du protocole de communication SPI.

Câblage des broches SSD1306 de l’affichage OLED

Parce que l’écran OLED utilise le protocole de communication I2C, le câblage est très simple. Vous pouvez utiliser le tableau suivant comme référence.

Broche	ESP8266
Vin	3.3V
Terre	Terre
SCL	GPIO 5 (D1)
SDA	GPIO 4 (D2)

Alternativement, vous pouvez suivre le diagramme schématique suivant pour câbler l’ESP8266 à l’écran OLED.

Schéma du circuit d'affichage Arduino OLED ESP8266

Dans cet exemple, nous utilisons le protocole de communication I2C. Les broches les plus appropriées pour la communication I2C dans l’ESP8266 sont GPIO 5 (SCL) et GPIO 4 (SDA).

Si vous utilisez un écran OLED avec protocole de communication SPI, utilisez les GPIO suivants.

GPIO 14 : CLK
GPIO 12 : MISO
GPIO 13 : MOSI
GPIO 15 : CS

Lisez notre guide de référence de brochage ESP8266 pour en savoir plus sur les GPIO ESP8266.

Installation de la bibliothèque OLED SSD1306 – ESP8266

Il existe plusieurs bibliothèques disponibles pour contrôler l’écran OLED avec l’ESP8266. Dans ce tutoriel, nous utiliserons deux bibliothèques Adafruit : Bibliothèque Adafruit_SSD1306 et Bibliothèque Adafruit_GFX.

Suivez les étapes suivantes pour installer ces bibliothèques.

1. Ouvrez votre IDE Arduino et accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques. Le gestionnaire de bibliothèque devrait s’ouvrir.

2. Tapez « SSD1306 » dans la zone de recherche et installez la bibliothèque SSD1306 d’Adafruit.

1680665173 164 ESP8266 Ecran OLED 096 pouces avec Arduino IDE

3. Après avoir installé la bibliothèque SSD1306 à partir d’Adafruit, tapez « GFX » dans la zone de recherche et installez la bibliothèque.

Installation de la bibliothèque GFX ESP8266 ESP32 Arduino

4. Après avoir installé les bibliothèques, redémarrez votre IDE Arduino.

Nous allons programmer l’ESP8266 à l’aide de l’IDE Arduino, vous devez donc avoir le module complémentaire ESP8266 installé dans votre IDE Arduino. Si ce n’est pas le cas, suivez d’abord le didacticiel suivant :

Test de l’écran OLED avec ESP8266

Après avoir câblé l’écran OLED à l’ESP8266 et installé toutes les bibliothèques requises, vous pouvez utiliser un exemple de la bibliothèque pour voir si tout fonctionne correctement.

Dans votre IDE Arduino, accédez à Fichier > Exemples > Adafruit SSD1306 et sélectionnez l’exemple pour l’affichage que vous utilisez.

Test de l'exemple de bibliothèque Adafruit SSD1306

Le code suivant devrait se charger :

/*********
  Complete project details at https://www.raspberryme.com
  
  This is an example for our Monochrome OLEDs based on SSD1306 drivers. Pick one up today in the adafruit shop! ------> http://www.adafruit.com/category/63_98
  This example is for a 128x32 pixel display using I2C to communicate 3 pins are required to interface (two I2C and one reset).
  Adafruit invests time and resources providing this open source code, please support Adafruit and open-source hardware by purchasing products from Adafruit!
  Written by Limor Fried/Ladyada for Adafruit Industries, with contributions from the open source community. BSD license, check license.txt for more information All text above, and the splash screen below must be included in any redistribution. 
*********/

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
  B00000001, B11000000,
  B00000001, B11000000,
  B00000011, B11100000,
  B11110011, B11100000,
  B11111110, B11111000,
  B01111110, B11111111,
  B00110011, B10011111,
  B00011111, B11111100,
  B00001101, B01110000,
  B00011011, B10100000,
  B00111111, B11100000,
  B00111111, B11110000,
  B01111100, B11110000,
  B01110000, B01110000,
  B00000000, B00110000 };

void setup() {
  Serial.begin(115200);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i<display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i<display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
    display.drawTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    display.fillTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(BLACK, WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons[NUMFLAKES][3];

  // Initialize 'snowflake' positions
  for(f=0; f< NUMFLAKES; f++) {
    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons[f][YPOS]   = -LOGO_HEIGHT;
    icons[f][DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons[f][XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons[f][YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons[f][DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f< NUMFLAKES; f++) {
      icons[f][YPOS] += icons[f][DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons[f][YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons[f][YPOS]   = -LOGO_HEIGHT;
        icons[f][DELTAY] = random(1, 6);
      }
    }
  }
}

Afficher le code brut

Si votre OLED n’a pas de broche RESET, vous devez définir la variable OLED_RESET sur -1 comme indiqué ci-dessous :

#define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin)

1680665173 749 ESP8266 Ecran OLED 096 pouces avec Arduino IDE

Remarque : si votre OLED a une broche RESET, vous devez la connecter à un autre GPIO que GPIO 4, car cette broche est utilisée pour la communication I2C dans l’EPS8266.

Téléchargez le code sur votre carte ESP8266. N’oubliez pas de sélectionner la bonne carte et le bon port COM dans le menu Outils.

Vous devriez obtenir une série d’animations différentes dans l’OLED, comme indiqué dans la courte vidéo suivante.

Si votre écran OLED n’affiche rien :

Vérifiez que l’écran OLED est correctement câblé à l’ESP8266
Revérifiez l’adresse I2C de l’écran OLED : avec l’OLED connecté à l’ESP8266, télécharger ce code et vérifiez l’adresse I2C dans le moniteur série

Vous devez modifier l’adresse OLED dans la ligne suivante, si nécessaire. Dans notre cas, l’adresse est 0x3C.

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

Écrire du texte – Écran OLED

La bibliothèque Adafruit pour l’écran OLED est livrée avec plusieurs fonctions pour écrire du texte. Dans cette section, vous apprendrez à écrire et à faire défiler du texte à l’aide des fonctions de la bibliothèque.

« Bonjour le monde! » Écran OLED

L’esquisse suivante affiche Hello, world ! message sur l’écran OLED.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

void setup() {
  Serial.begin(115200);

  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000);
  display.clearDisplay();

  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 10);
  // Display static text
  display.println("Hello, world!");
  display.display(); 
}

void loop() {
  
}

Afficher le code brut

Après avoir téléchargé le code, voici ce que vous obtiendrez dans votre OLED :

ESP32 ESP8266 Type de police d'affichage Arduino OLED

Voyons rapidement comment fonctionne le code.

Importation de bibliothèques

Tout d’abord, vous devez importer les bibliothèques nécessaires. La bibliothèque Wire pour utiliser I2C et les bibliothèques Adafruit pour écrire sur l’écran : Adafruit_GFX et Adafruit_SSD1306.

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Initialiser l’affichage OLED

Ensuite, vous définissez la largeur et la hauteur de votre OLED. Dans cet exemple, nous utilisons un écran OLED 128×64. Si vous utilisez d’autres tailles, vous pouvez modifier cela dans les variables SCREEN_WIDTH et SCREEN_HEIGHT.

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

Ensuite, initialisez un objet d’affichage avec la largeur et la hauteur définies précédemment avec le protocole de communication I2C (&Wire).

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

Le paramètre (-1) signifie que votre écran OLED n’a pas de broche RESET. Si votre écran OLED a une broche RESET, il doit être connecté à un GPIO. Dans ce cas, vous devez passer le numéro GPIO en paramètre.

Dans setup(), initialisez le moniteur série à une vitesse de transmission de 115 200 à des fins de débogage.

Serial.begin(115200);

Initialisez l’affichage OLED avec la méthode begin() comme suit :

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
  Serial.println("SSD1306 allocation failed");
  for(;;); // Don't proceed, loop forever
}

Cet extrait imprime également un message sur le moniteur série, au cas où nous ne pourrions pas nous connecter à l’écran.

Serial.println("SSD1306 allocation failed");

Si vous utilisez un écran OLED différent, vous devrez peut-être modifier l’adresse OLED. Dans notre cas, l’adresse est 0x3C.

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

Si cette adresse ne fonctionne pas, vous pouvez exécuter une esquisse de scanner I2C pour trouver votre adresse OLED. Tu peux trouver le croquis du scanner I2C ici.

Après avoir initialisé l’affichage, ajoutez un délai de deux secondes, afin que l’OLED ait suffisamment de temps pour s’initialiser avant d’écrire du texte :

delay(2000);

Effacer l’affichage, définir la taille de la police, la couleur et écrire du texte

Après avoir initialisé l’affichage, effacez le tampon d’affichage avec la méthode clearDisplay() :

display.clearDisplay();

Avant d’écrire du texte, vous devez définir la taille du texte, la couleur et l’endroit où le texte sera affiché dans l’OLED.

Définissez la taille de la police à l’aide de la méthode setTextSize() :

display.setTextSize(1);

Définissez la couleur de la police avec la méthode setTextColor() :

display.setTextColor(WHITE);

BLANC définit une police blanche et un arrière-plan noir.

Définissez la position où le texte commence à l’aide de la méthode setCursor(x,y). Dans ce cas, nous définissons le texte pour qu’il commence aux coordonnées (0,10).

display.setCursor(0,10);

Enfin, vous pouvez envoyer le texte à l’écran en utilisant la méthode println(), comme suit :

display.println("Hello, world!");

Ensuite, vous devez appeler la méthode display() pour afficher réellement le texte à l’écran.

display.display();

Texte défilant

La bibliothèque Adafruit OLED fournit des méthodes utiles pour faire défiler facilement du texte.

startscrollright(0x00, 0x0F) : fait défiler le texte de gauche à droite

startscrollleft(0x00, 0x0F) : fait défiler le texte de droite à gauche

startscrolldiagright(0x00, 0x07) : fait défiler le texte du coin inférieur gauche au coin supérieur droit

startscrolldiagleft(0x00, 0x07) : fait défiler le texte du coin inférieur droit au coin supérieur gauche

L’esquisse suivante implémente ces méthodes.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

void setup() {
  Serial.begin(115200);

  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000);
  display.clearDisplay();

  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 0);
  // Display static text
  display.println("Scrolling Hello");
  display.display(); 
  delay(100);
 
}

void loop() {
  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

Afficher le code brut

Le texte défile comme indiqué dans la courte vidéo suivante.

Utilisation d’autres polices – Écran OLED

La bibliothèque Adafruit GFX nous permet d’utiliser des polices alternatives en plus des polices intégrées. Il vous permet de choisir entre Serif, Sans et Mono. Chaque police est disponible en gras, en italique et en différentes tailles.

Les tailles sont définies par la police réelle. Ainsi, la méthode setTextSize() ne fonctionne pas avec ces polices. Les polices sont disponibles en tailles 9, 12, 18 et 24 points et contiennent également des caractères 7 bits (codes ASCII) (décrits comme 7b dans le nom de la police).

Vous pouvez choisir parmi la prochaine sélection de polices :

FreeMono12pt7b.h		FreeSansBoldOblique12pt7b.h
FreeMono18pt7b.h		FreeSansBoldOblique18pt7b.h
FreeMono24pt7b.h		FreeSansBoldOblique24pt7b.h
FreeMono9pt7b.h			FreeSansBoldOblique9pt7b.h
FreeMonoBold12pt7b.h		FreeSansOblique12pt7b.h
FreeMonoBold18pt7b.h		FreeSansOblique18pt7b.h
FreeMonoBold24pt7b.h		FreeSansOblique24pt7b.h
FreeMonoBold9pt7b.h		FreeSansOblique9pt7b.h
FreeMonoBoldOblique12pt7b.h	FreeSerif12pt7b.h
FreeMonoBoldOblique18pt7b.h	FreeSerif18pt7b.h
FreeMonoBoldOblique24pt7b.h	FreeSerif24pt7b.h
FreeMonoBoldOblique9pt7b.h	FreeSerif9pt7b.h
FreeMonoOblique12pt7b.h		FreeSerifBold12pt7b.h
FreeMonoOblique18pt7b.h		FreeSerifBold18pt7b.h
FreeMonoOblique24pt7b.h		FreeSerifBold24pt7b.h
FreeMonoOblique9pt7b.h		FreeSerifBold9pt7b.h
FreeSans12pt7b.h		FreeSerifBoldItalic12pt7b.h
FreeSans18pt7b.h		FreeSerifBoldItalic18pt7b.h
FreeSans24pt7b.h		FreeSerifBoldItalic24pt7b.h
FreeSans9pt7b.h			FreeSerifBoldItalic9pt7b.h
FreeSansBold12pt7b.h		FreeSerifItalic12pt7b.h
FreeSansBold18pt7b.h		FreeSerifItalic18pt7b.h
FreeSansBold24pt7b.h		FreeSerifItalic24pt7b.h
FreeSansBold9pt7b.h		FreeSerifItalic9pt7b.h

Les polices qui fonctionnent mieux avec l’écran OLED sont les tailles 9 et 12 points.

Pour utiliser l’une de ces polices, vous devez d’abord l’inclure dans votre croquis, par exemple :

#include <Fonts/FreeSerif12pt7b.h>

Ensuite, il vous suffit d’utiliser la méthode setFont() et de passer en argument, la police spécifiée :

display.setFont(&FreeSerif12pt7b);

Après avoir spécifié la police, toutes les méthodes d’écriture de texte utiliseront cette police. Pour revenir à la police d’origine, il vous suffit d’appeler la méthode setFont() sans arguments :

display.setFont();

Téléchargez le croquis suivant sur votre tableau :

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif9pt7b.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

void setup() {
  Serial.begin(115200);

  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { 
    Serial.println("SSD1306 allocation failed");
    for(;;);
  }
  delay(2000);

  display.setFont(&FreeSerif9pt7b);
  display.clearDisplay();
  display.setTextSize(1);             
  display.setTextColor(WHITE);        
  display.setCursor(0,20);             
  display.println("Hello, world!");
  display.display();
  delay(2000); 
}
void loop() {
  
}

Afficher le code brut

Maintenant, votre écran imprime le « Hello, world! » message en police FreeSerif.

Dessiner des formes sur l’écran OLED

La bibliothèque Adafruit OLED fournit des méthodes utiles pour dessiner des pixels, des lignes et des formes. Jetons un coup d’œil à ces méthodes.

Dessiner un pixel

ESP32 ESP8266 Écran Arduino OLED Pixel Dot

Pour dessiner un pixel dans l’affichage OLED, vous pouvez utiliser la méthode drawPixel(x, y, color) qui accepte comme arguments les coordonnées x et y où le pixel apparaît, et la couleur. Par exemple:

display.drawPixel(64, 32, WHITE);

Tracer une ligne

ESP32 ESP8266 Ligne d'affichage Arduino OLED

Utilisez la méthode drawLine(x1, y1, x2, y2, color) pour créer une ligne. Les coordonnées (x1, y1) indiquent le début de la ligne et les coordonnées (x2, y2) indiquent où la ligne se termine. Par exemple:

display.drawLine(0, 0, 127, 20, WHITE);

Dessiner un rectangle

ESP32 ESP8266 Rectangle d'affichage Arduino OLED

Le drawRect(x, y, width, height, color) fournit un moyen facile de dessiner un rectangle. Les coordonnées (x, y) indiquent le coin supérieur gauche du rectangle. Ensuite, vous devez spécifier la largeur, la hauteur et la couleur :

display.drawRect(10, 10, 50, 30, WHITE);

Vous pouvez utiliser fillRect(x, y, width, height, color) pour dessiner un rectangle rempli. Cette méthode accepte les mêmes arguments que drawRect().

La bibliothèque fournit également des méthodes pour afficher des rectangles aux coins arrondis : drawRoundRect() et fillRoundRect(). Ces méthodes acceptent les mêmes arguments que les méthodes précédentes plus le rayon du coin. Par exemple:

display.drawRoundRect(10, 10, 30, 50, 2, WHITE);

ESP32 ESP8266 Écran OLED Arduino Rectangle Vertical

Ou un rectangle rond rempli :

display.fillRoundRect(10, 10, 30, 50, 2, WHITE);

ESP32 ESP8266 Arduino OLED Affichage Rectangle Vertical Rempli

Dessiner un cercle

Cercle d'affichage ESP32 ESP8266 Arduino OLED

Pour dessiner un cercle, utilisez la méthode drawCircle(x, y, radius, color). Les coordonnées (x,y) indiquent le centre du cercle. Vous devez également passer le rayon en argument. Par exemple:

display.drawCircle(64, 32, 10, WHITE);

De la même manière, pour construire un cercle plein, utilisez la méthode fillCircle() avec les mêmes arguments :

display.fillCircle(64, 32, 10, WHITE);

ESP32 ESP8266 Cercle d'affichage Arduino OLED rempli

Dessiner un triangle

Triangle d'affichage OLED ESP32 ESP8266 Arduino

Utilisez la méthode drawTriangle(x1, y1, x2, y2, x3, y3, color) pour construire un triangle. Cette méthode accepte comme arguments les coordonnées de chaque coin et la couleur.

display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);

Utilisez la méthode fillTriangle() pour dessiner un triangle rempli.

display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);

ESP32 ESP8266 Triangle d'affichage Arduino OLED rempli

Inverser

La bibliothèque fournit une méthode supplémentaire que vous pouvez utiliser avec des formes ou du texte : la méthode invertDisplay(). Passez true en argument pour inverser les couleurs de l’écran ou false pour revenir aux couleurs d’origine.

Si vous appelez la commande suivante après avoir défini le triangle :

display.invertDisplay(true);

Vous obtiendrez un triangle inversé comme suit :

ESP32 ESP8266 Arduino OLED Affichage Triangle Fond rempli

Code – Dessiner des formes

Téléchargez le croquis suivant qui implémente chaque extrait de code que nous avons couvert précédemment et passe en revue toutes les formes.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

void setup() {
  Serial.begin(115200);

  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(64, 32, WHITE);
  display.display();
  delay(3000);

  // Draw line
  display.clearDisplay();
  display.drawLine(0, 0, 127, 20, WHITE);
  display.display();
  delay(3000);
  
  // Draw rectangle
  display.clearDisplay();
  display.drawRect(30, 10, 50, 30, WHITE);
  display.display();
  delay(3000);
  // Fill rectangle
  display.fillRect(30, 10, 50, 30, WHITE);
  display.display();
  delay(3000);

  // Draw round rectangle
  display.clearDisplay();
  display.drawRoundRect(10, 10, 30, 50, 2, WHITE);
  display.display();
  delay(3000);
  // Fill round rectangle
  display.clearDisplay();
  display.fillRoundRect(10, 10, 30, 50, 2, WHITE);
  display.display();
  delay(3000);
  
  // Draw circle
  display.clearDisplay();
  display.drawCircle(64, 32, 10, WHITE);
  display.display();
  delay(3000);
  // Fill circle
  display.fillCircle(64, 32, 10, WHITE);
  display.display();
  delay(3000);
  
  // Draw triangle
  display.clearDisplay();
  display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);
  display.display();
  delay(3000);
  // Fill triangle
  display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);
  display.display();
  delay(3000);

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(3000);
  display.invertDisplay(false);
  delay(3000);
}

void loop() {
  
}

Afficher le code brut

Afficher des images bitmap dans l’OLED

Vous pouvez afficher des images monochromes 128×64 bitmap sur l’écran OLED.

Tout d’abord, utilisez un programme d’imagerie pour redimensionner une photo ou une image et l’enregistrer en tant que bitmap monochrome. Si vous êtes sur un PC Windows, vous pouvez utiliser Paint.

Afficher les images bitmap OLED convertir l'image

Ensuite, utilisez un convertisseur Image vers tableau C pour convertir l’image en tableau. j’ai utilisé Convertisseur d’images LCD.

Exécutez le programme et démarrez avec une nouvelle image. Accédez à Image > Importer et sélectionnez l’image bitmap que vous avez créée précédemment.

Allez dans Options > Conversion et dans l’onglet Préparer, sélectionnez les options suivantes :

Type : monochrome, tramage de seuil
Sens de numérisation principal : de haut en bas
Direction de balayage de ligne : vers l’avant

Accédez à l’onglet Image et sélectionnez les options suivantes :

Fractionner en lignes
Taille de bloc : 8 bits
Ordre des octets : Little-Endian

Afficher les images bitmap OLED convertir l'exportation d'image

Ensuite, cliquez sur OK. Enfin, dans le menu principal, allez dans Fichier > Convertir. Un nouveau fichier avec l’extension .c doit être enregistré. Ce fichier contient le tableau C pour l’image. Ouvrez ce fichier avec un éditeur de texte et copiez le tableau.

Dans notre cas, voici le tableau que nous obtenons :

static const uint8_t image_data_Saraarray[1024] = {
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x0a, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x14, 0x9e, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x36, 0x3f, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x6d, 0xff, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xfb, 0xff, 0x80, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xd7, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xef, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xdf, 0xff, 0x90, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xbf, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1d, 0x7f, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x01, 0x1b, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x02, 0xa7, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xc0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0xff, 0x80, 0x00, 0x0b, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0f, 0x07, 0xff, 0xf8, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0e, 0x01, 0xff, 0xc0, 0x38, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x1c, 0x46, 0xff, 0xb1, 0x18, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x97, 0xff, 0xc0, 0x7a, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xbf, 0xff, 0xff, 0xff, 0xfe, 0x81, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x81, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xff, 0xff, 0xfe, 0xff, 0xfd, 0x83, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xbf, 0xff, 0xfe, 0xff, 0xfd, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xfb, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x3f, 0xff, 0xdc, 0xff, 0xfa, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xd8, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xd0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x90, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x02, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xf5, 0xff, 0xd7, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x5f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xa0, 0x00, 0x0f, 0xfb, 0xff, 0xff, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0xfd, 0xff, 0xdf, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xbf, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x87, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x43, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x01, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x73, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0xff, 0xff, 0xff, 0x80, 0x00, 0x7b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00, 0x33, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x3f, 0xff, 0xf8, 0x00, 0x00, 0x27, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x0f, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x00, 0x67, 0xff, 0xe0, 0x00, 0x00, 0x1b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0x40, 0x00, 0x00, 0xf3, 0xff, 0xc4, 0x00, 0x00, 0x0b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0x80, 0x00, 0x00, 0xfc, 0xff, 0x8c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x7f, 0x3c, 0x3c, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x3f, 0xc0, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff
};

Afficher le code brut

Copiez votre tableau dans l’esquisse. Ensuite, pour afficher le tableau, utilisez la méthode drawBitmap() qui accepte les arguments suivants (x, y, tableau image, largeur image, hauteur image, rotation). Les coordonnées (x, y) définissent où l’image commence à s’afficher.

Copiez le code ci-dessous pour afficher votre image bitmap dans l’OLED.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

static const uint8_t image_data_Saraarray[1024] = {
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x0a, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x14, 0x9e, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x36, 0x3f, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x6d, 0xff, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xfb, 0xff, 0x80, 0x1f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xd7, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xef, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xdf, 0xff, 0x90, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xbf, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1d, 0x7f, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x01, 0x1b, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x02, 0xa7, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xc0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0xff, 0x80, 0x00, 0x0b, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0f, 0x07, 0xff, 0xf8, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0e, 0x01, 0xff, 0xc0, 0x38, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x1c, 0x46, 0xff, 0xb1, 0x18, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x97, 0xff, 0xc0, 0x7a, 0x07, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xbf, 0xff, 0xff, 0xff, 0xfe, 0x81, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x81, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xff, 0xff, 0xfe, 0xff, 0xfd, 0x83, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xbf, 0xff, 0xfe, 0xff, 0xfd, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xfb, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x3f, 0xff, 0xdc, 0xff, 0xfa, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xd8, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xd0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x90, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x02, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xf5, 0xff, 0xd7, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x5f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xa0, 0x00, 0x0f, 0xfb, 0xff, 0xff, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0xfd, 0xff, 0xdf, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xbf, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x87, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x43, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x01, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x73, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0xff, 0xff, 0xff, 0x80, 0x00, 0x7b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00, 0x33, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x3f, 0xff, 0xf8, 0x00, 0x00, 0x27, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x0f, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x00, 0x67, 0xff, 0xe0, 0x00, 0x00, 0x1b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfd, 0x40, 0x00, 0x00, 0xf3, 0xff, 0xc4, 0x00, 0x00, 0x0b, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0x80, 0x00, 0x00, 0xfc, 0xff, 0x8c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x7f, 0x3c, 0x3c, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x3f, 0xc0, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 
    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff
};
 
void setup() {
  Serial.begin(115200);
 
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000); // Pause for 2 seconds
 
  // Clear the buffer.
  display.clearDisplay();
  
  // Draw bitmap on the screen
  display.drawBitmap(0, 0, image_data_Saraarray, 128, 64, 1);
  display.display();
}
 
void loop() {
  
}

Afficher le code brut

Après avoir téléchargé le code, voici ce que nous obtenons à l’écran.

Image d'affichage OLED ESP32 ESP8266 Arduino

Dépannage

Si vous obtenez l’erreur « SSD1306 allocation failed » ou si l’OLED n’affiche rien à l’écran, il peut s’agir de l’un des problèmes suivants :

Mauvaise adresse I2C

L’adresse I2C de l’écran OLED que nous utilisons est 0x3C. Cependant, le vôtre peut être différent. Assurez-vous donc de vérifier votre adresse I2C d’affichage à l’aide d’un Croquis du scanner I2C.

SDA et SCL ne sont pas correctement connectés

Assurez-vous que les broches SDA et SCL de l’écran OLED sont correctement câblées. Dans le cas de l’ESP8266, connectez la broche SDA au GPIO 4 (D2) et la broche SCL au GPIO 5 (D1).

Conclusion

Nous espérons que vous avez trouvé ce guide sur l’écran OLED avec EPS8266 utile. Désormais, vous pouvez intégrer l’écran OLED dans vos propres projets. Passez au didacticiel suivant pour apprendre à afficher les lectures des capteurs sur l’écran OLED :

Si vous aimez ESP8266, vous aimerez certainement nos ressources ESP8266 :

Certains de nos projets les plus populaires avec ESP8266 :

Merci d’avoir lu.

Apprenez l’histoire de Raspberry Pi à travers cette vidéo :

ESP8266 OLED ESP12F Node-MCU Carte de Développement XTVTX 2 Pièces OLED Arduino avec écran OLED de 0,96 Pouces,Pilote CH340,Module sans Fil ESP-12E WiFi, et Micro USB,pour la Programmation Arduino

La carte ESP8266 Node-MCU possède toutes les caractéristiques du module ESP8266 traditionnel, avec la même taille et les mêmes ports périphériques, et offre une intégration transparente avec un écran OLED de 0,96 pouce. L'écran présente une haute résolution de 128x64 avec un pilote 1306 et est compatible avec les interfaces I2C et SPI. Cette ESP8266 Display carte utilise l'I2C pour se connecter à un écran OLED via les broches SDA (D6 / GPIO12) et SCL (D5 / GPIO14). Avec cette carte, il est facile d'afficher une variété d'informations et de données. Pour installer la nouvelle version du pilote CH-340, il suffit de rechercher les mots clés "CH340 Driver" sur Google.com ou Bing.com et de suivre les instructions d'installation fournies.Recommandé pour le système d'exploitation Win10. La carte ESP8266 Display Node-MCU est équipée d'un module ESP12E, qui contient le microprocesseur RISC Tensilica Xtensa 32-bit LX106 alimentant la puce ESP8266. Ce microprocesseur supporte le RTOS et fonctionne à une fréquence d'horloge réglable entre 80 MHz et 160 MHz. Cette ESP8266 Display carte est une option exceptionnelle pour divers projets d'Internet des objets (IoT). Elle peut être utilisée pour afficher l'état de la connexion réseau,les informations de surveillance, les niveaux de puissance et d'autres données pertinentes.

19,99 €
ESP8266 OLED ESP12F Node-MCU Carte de Développement avec écran OLED de 0,96 Pouces,Pilote CH340,Module sans Fil ESP-12E WiFi, et Micro USB,pour la Programmation Arduino IDE/Micropython

La carte ESP8266 Display Node-MCU possède toutes les caractéristiques du module ESP8266 traditionnel, avec la même taille et les mêmes ports périphériques, et offre une intégration transparente avec un écran OLED de 0,96 pouce. L'écran présente une haute résolution de 128x64 avec un pilote 1306 et est compatible avec les interfaces I2C et SPI. Cette ESP8266 Display carte utilise l'I2C pour se connecter à un écran OLED via les broches SDA (D6 / GPIO12) et SCL (D5 / GPIO14). Avec cette carte, il est facile d'afficher une variété d'informations et de données. La carte ESP8266 Node-MCU est équipée d'un module ESP12E, qui contient le microprocesseur RISC Tensilica Xtensa 32-bit LX106 alimentant la puce ESP8266. Ce microprocesseur supporte le RTOS et fonctionne à une fréquence d'horloge réglable entre 80 MHz et 160 MHz. Pour installer la nouvelle version du pilote CH340, il suffit de rechercher les mots clés "CH340 Driver" sur Google.com ou Bing.com et de suivre les instructions d'installation fournies.Recommandé pour le système d'exploitation Win10. Cette ESP8266 Display Node-MCU carte est une option exceptionnelle pour divers projets d'Internet des objets (IoT). Elle peut être utilisée pour afficher l'état de la connexion réseau,les informations de surveillance, les niveaux de puissance et d'autres données pertinentes.

11,99 €

10,99 €
-8%
DIYmalls 0.96" OLED écran Module I2C IIC 128x64 SSD - 1306 3.3V-5V Blanc pour Arduino ESP32 ESP8266 (lot de 3)

-0.96 OLED se connecte facilement en utilisant I2C sur quatre lignes (alimentation, masse, données et horloge) à l'adresse 0x3c. L'adresse est modifiable avec quelques soudures, mais à moins que vous n'en ayez vraiment besoin, ne risquez pas. -L'adresse I2C réelle (7 bits) de OLED est 0x3C, pas 3D, pas l'adresse (8 bits) imprimée à l'arrière de l'écran dit 0x78 ou 0x7A. 0x78 est 0x3C décalé vers la gauche de 1 bit, c'est ainsi que les adresses i2c sont envoyées sur le bus. Vous devez définir correctement cette adresse dans n'importe quelle esquisse, sinon vous n'obtiendrez pas de données envoyées à l'écran et vous risquez de la confondre avec un DOA. -L'une des grandes choses à propos de l'écran OLED est qu'ils sont par conception, émettant de la lumière. Vous pouvez avoir les écrans dans l'obscurité totale, et vous pouvez facilement les lire. À la lumière directe du soleil, ils peuvent toujours être lu, mais il n'est pas recommandé de les exposer au soleil pendant de longues périodes. - Ce petit écran OLED est largement utilisé dans les projets de bricolage : montres intelligentes, petite station météo, réveil, moniteur de ressources informatiques (pourcentages d'utilisation du processeur/GPU, disponibilité de la RAM, températures centrales), etc. - Il y a un film transparent amovible sur chaque surface en verre OLED pour une protection résistante aux rayures jusqu'à utilisation.

20,98 €