- Affichage OLED
- Composants requis
- Connexions des broches SPI entre NodeMCU et écran OLED
- Programmation NodeMCU pour l'interfaçage OLED
- Convertir l'image en valeurs Bitmap
Dans ce tutoriel, nous allons interfacer l'affichage OLED avec NodeMCU ESP8266. NodeMCU est une plate-forme IoT open source qui comprend un micrologiciel qui fonctionne sur le SoC Wi-Fi ESP8266 Wi-Fi à faible coût d'Espressif Systems. Il dispose de broches GPIO pour connecter d'autres périphériques et prend en charge la communication série à l'aide de broches SPI, I2C et UART. Il a également des broches pour ADC et PWM. Nous avons précédemment interfacé OLED avec d'autres microcontrôleurs dont le contrôleur de la famille ESP (ESP32):
- Interfaçage de l'écran OLED SSD1306 avec Raspberry Pi
- Interfaçage de l'écran OLED SSD1306 avec Arduino
- Construisez une montre intelligente en interfaçant un écran OLED avec un téléphone Android à l'aide d'Arduino
- Horloge Internet utilisant ESP32 et écran OLED
Dans ce tutoriel, nous utiliserons le protocole SPI pour interfacer l'écran OLED monochrome à 7 broches SSD1306 0.96 avec NodeMCU et apprendrons à afficher l'image sur l'écran OLED avec NodeMCU ESP8266.
Affichage OLED
La diode électroluminescente organique (OLED) est une sorte de diode électroluminescente dans laquelle une couche électroluminescente constituée d'un composé organique émet de la lumière lorsqu'un courant électrique est fourni. Cette couche est placée entre deux électrodes. Cette technologie est utilisée dans les écrans d'affichage comme les ordinateurs, les téléviseurs, les smartphones, etc. Les écrans OLED ont leur propre éclairage et n'ont pas besoin de rétro-éclairage comme dans les LCD, ils sont donc écoénergétiques et utilisés avec de nombreux microcontrôleurs. Un autre avantage de l'utilisation d'écrans OLED sur LCD est d'afficher des graphiques de grande qualité et de meilleure qualité sur les OLED. En savoir plus sur la technologie d'affichage OLED ici.
Il existe différents types d'écrans OLED disponibles sur le marché. Ces affichages sont caractérisés sur la base de la couleur, du nombre de broches, du contrôleur IC et de la taille de l'écran. Sur la base de la couleur, les OLED sont disponibles en bleu monochrome, blanc monochrome et jaune / bleu. Et sur la base de la communication, principalement deux types d'OLED sont disponibles - 3 broches et 7 broches. L'OLED à 3 broches peut être utilisé en mode de communication I2C et l'OLED à 7 broches peut être utilisé soit en mode SPI, soit en mode I2C.
Dans ce tutoriel, nous utiliserons l' écran OLED « Monochrome 7 broches SSD1306 0,96 » qui mesure 128 pixels de large et 64 pixels de long. Cet écran peut fonctionner sur les protocoles de communication SPI et I2C. Nous utiliserons le protocole SPI dans ce tutoriel. SSD1306 IC est présent sur cette OLED ce qui permet d'afficher les pixels sur l'écran.
Composants requis
- Écran OLED SSD1306 à 7 broches monochrome de 0,96 po
- NodeMCU ESP8266
- Câble micro USB
- Planche à pain
- Fils de cavalier mâle à mâle
Connexions des broches SPI entre NodeMCU et écran OLED
Vous trouverez ci-dessous le schéma de circuit pour connecter un écran OLED à 7 broches avec NodeMCU pour communiquer à l'aide du protocole de communication série SPI.
Le tableau ci-dessous montre les connexions entre l'écran OLED et NodeMCU ESP8266. La broche GND va à NodeMCU GND, la broche VDD peut être connectée à 3,3 V ou 5 V, SCK est la broche d'horloge sur l'écran OLED qui est connectée à D5 de NodeMCU pour l'horloge SPI. La broche SDA qui est la broche MOSI sur OLED de l'interface SPI va à D7 de NodeMCU. La broche RESET va à D3. DC, la broche de commande de données est connectée à D2 de NodeMCU. La dernière broche est CS va à D8, sélection de puce de NodeMCU.
|
Non. |
Affichage Oled |
NodeMCU |
|
1 |
GND |
GND |
|
2 |
VDD |
3,3 V |
|
3 |
SCK |
D5 |
|
4 |
MOSI (SPI) ou SDA (I2C) |
D7 |
|
5 |
RÉINITIALISER |
D3 |
|
6 |
DC |
D2 |
|
sept |
CS |
D8 |
Ici, nous utiliserons les bibliothèques « Adafruit _SSD1306.h» et « Adafruit_GFX.h » pour interfacer OLED avec NodeMCU. Ouvrez Arduino IDE et installez la dernière version d'Arduino IDE ( Sketch> Inclure la bibliothèque> Gérer les bibliothèques ou Ctrl + Shift_I ).
Étant donné que la taille de pixel de notre écran OLED est de 128x64, nous devons donc modifier le fichier d'en-tête de Adafruit_SSD1306. Ouvrez les bibliothèques Arduino, accédez à Adafruit_SSD1306 et ouvrez son fichier d'en-tête ( Adafruit _SSD1306.h ). Commentez la ligne « #define SSD1306_128_32 » et supprimez le commentaire de la ligne «#define SSD1306_128_64 » comme indiqué dans l'image ci-dessous, puis enregistrez le fichier. Par défaut, cette bibliothèque est fournie avec «# define SSD1306_128_32 ».
Enfin, changez les numéros de broches dans l' exemple d' Adafruit SSD1306 « ssd1306_128x64_spi » selon le tableau ci-dessus. Maintenant, lorsque vous exécutez l'esquisse après avoir correctement connecté l'écran OLED avec NodeMCU, vous verrez le logo d'Adafruit sur l'écran OLED qui est par défaut enregistré dans la bibliothèque. Après le logo Adafruit, il affiche de nombreux autres graphiques tels que des lignes, des rectangles, des triangles, des cercles, des chaînes, des nombres, des animations et des images bitmap. Ici Dans ce tutoriel, nous allons apprendre à afficher n'importe quelle image sur OLED avec NodeMCU ESP8266.
Programmation NodeMCU pour l'interfaçage OLED
Comme toujours, le code complet est fourni à la fin, nous avons ici expliqué le code en détail.
Démarrez le code en important les bibliothèques nécessaires. Puisque nous utilisons le protocole SPI, nous allons donc importer la bibliothèque «SPI.h» et importer également «Adafruit_GFX.h» et «Adafruit_SSD1306.h» pour l'affichage OLED.
#comprendre
Notre taille OLED est de 128x64, nous définissons donc la largeur et la hauteur de l'écran sur 128 et 64 respectivement. Définissez donc les variables des broches OLED connectées à NodeMCU pour la communication SPI.
#define SCREEN_WIDTH 128 // Largeur d'affichage OLED, en pixels #define SCREEN_HEIGHT 64 // Hauteur d'affichage OLED, en pixels // Déclaration pour écran SSD1306 connecté à l'aide du logiciel SPI (cas par défaut): #define OLED_MOSI D7 #define OLED_CLK D5 #define OLED_DC D2 #define OLED_CS D8 #define OLED_RESET D3 Adafruit_SSD1306 affichage (SCREEN_WIDTH, SCREEN_HEIGHT, OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);
Initialisez l'écran OLED à l'aide de SSD1306_SWITCHCAPVCC pour générer 3,3 V en interne pour initialiser l'affichage.
if (! display.begin (SSD1306_SWITCHCAPVCC)) { Serial.println (F ("SSD1306 allocation failed")); pour(;;); // Ne continue pas, boucle indéfiniment }
L'affichage de l'écran OLED est effacé avant d'afficher quoi que ce soit en appelant la fonction display.clearDisplay (). Nous définissons la taille de la police sur 2 en appelant la fonction setTextSize (font-size), et définissons la couleur du texte et la position du curseur en utilisant setTextColor et la fonction setCursor . La commande Display.display () est utilisée pour transférer des données vers la mémoire interne du contrôleur SSD1306. Après le transfert, le pixel apparaît à l'écran. Maintenant, nous pouvons commencer à faire défiler le texte de différentes manières en appelant display.startscrollright (x-pos, y-pos) et display.startscrollleft (x-pos, y-pos) pour le temps donné en fonction de retard. Le défilement du texte peut être arrêté à l'aide de la fonction display.stopscroll ().
void testscrolltext (void) {display.clearDisplay (); // efface l'écran d'affichage de l'affichage OLED.setTextSize (2); // Dessine du texte à l'échelle 2X display.setTextColor (WHITE); display.setCursor (0, 0); display.println (F ("CIRCUIT")); display.println (F ("DIGEST")); display.display (); // Afficher le délai de texte initial (100); // Défilement dans différentes directions, en faisant une pause entre les deux: display.startscrollright (0x00, 0x0F); retard (2000); display.stopscroll (); retard (1000); display.startscrollleft (0x00, 0x0F); retard (2000); display.stopscroll (); retard (1000); display.startscrolldiagright (0x00, 0x07); retard (2000); display.startscrolldiagleft (0x00, 0x07); retard (2000); display.stopscroll (); retard (1000); }
Nous appelons la fonction display.drawBitmap () qui prend 6 paramètres (coordonnée x, coordonnée y, tableau bitmap, largeur, hauteur et couleur) pour dessiner l'image sur OLED. Comme notre taille d'affichage est de 128x64, nous définissons la largeur et la hauteur sur 128 et 64 respectivement. Ici, le tableau bitmap contient les informations de pixel pour dessiner le pixel à l'écran pour créer l'image. Ce tableau bitmap peut être généré en ligne, ce qui est expliqué ci-dessous ou il existe de nombreux logiciels disponibles pour convertir l'image en tableau bitmap.
const unsigned char myBitmap PROGMEM = { 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf7, 0xc0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc7, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0x01, 0xc0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0f, 0x03, 0xff, 0xc0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1e, 0x03, 0x3f, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x3e, 0x03, 0x3f, 0xfc, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x3c, 0x03, 0x7f, 0xfe, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7c, 0x03, 0xf0, 0x3f, 0x83, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x78, 0x00, 0xc0, 0x0f, 0xc1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xf8, 0x00, 0x00, 0x07, 0xe0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xf0, 0x00, 0x00, 0x03, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x01, 0xf0, 0x00, 0x00, 0x00, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xe0, 0x00, 0x0f, 0x00, 0x7e, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xc0, 0x3f, 0xff, 0x80, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7f, 0xf9, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xf9, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0x80, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x01, 0xf0, 0x1f, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x03, 0xe0, 0x06, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x07, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0x00, 0x80, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x1e, 0x01, 0xe0, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x1e, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xe0, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0xc0, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x01, 0xf0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xb0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0x18, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xbc, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x01, 0xfe, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1f, 0xff, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x07, 0xfc, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x03, 0xf0, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x01, 0xc0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xe0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x3f, 0xe0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x0e, 0x30, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x07, 0x70, 0x00, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x03, 0xe0, 0x1b, 0xfc, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x01, 0xc0, 0x7f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x7f, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x67, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x66, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7e, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; display.drawBitmap (35, 0, myBitmap, 128, 64, NOIR, BLANC); display.display ();
Convertir l'image en valeurs Bitmap
Le Bitmap en ligne peut être généré à partir de http://javl.github.io/image2cpp/. Téléchargez le fichier image que vous souhaitez afficher sur l'OLED et définissez la taille sur 128x64. Une image d'aperçu sera affichée, puis un tableau bitmap sera généré.
Les captures d'écran ci-dessous montrent le processus pour générer la valeur bitmap de n'importe quelle image.
Enfin, téléchargez le code complet dans NodeMCU ESP8266 et vous verrez l'image s'afficher sur l'écran OLED. Ici, nous affichons le logo CircuitDigest sur l'écran OLED.
