Écran OLED SH1106 I2C et ESP32 ou ESP8266

Aujourd'hui, explorons comment écrire et dessiner sur un petit écran OLED monochrome branché à une carte ESP32 ou ESP8266.

L'écran en question a une taille de 1,3 pouce (environ 3,5 cm X 1,8 cm) et une résolution de 128 X 64 pixels. Il est basé sur le contrôleur SH1106 et utilise le protocole I2C. L'image produite est blanche sur fond noir.

Cet billet pourrait possiblement vous être utile même si vous utilisez un écran différent de celui que j'ai utilisé, puisque la bibliothèque u8g2 est compatible avec un très grand nombre de modèles d'écrans monochromes.

Connexions de l'afficheur à l'ESP32

• Broche GND de l'afficheur - Broche GND de l'ESP32
• Broche VCC de l'afficheur - Broche 3V3 de l'ESP32
• Broche SCL de l'afficheur - Broche GPIO 22 de l'ESP32
• Broche SDA de l'afficheur - Broche GPIO 21 de l'ESP32

Connexions de l'afficheur à l'ESP8266

• Broche GND de l'afficheur - Broche GND de l'ESP8266
• Broche VCC de l'afficheur - Broche 3V3 de l'ESP8266
• Broche SCL de l'afficheur - Broche GPIO 5 de l'ESP8266
• Broche SDA de l'afficheur - Broche GPIO 4 de l'ESP8266

Installation de la bibliothèque u8g2

Nous utiliserons la bibliothèque u8g2, qui peut facilement être installée depuis le gestionnaire de bibliothèques de l'IDE Arduino.

Essai des exemples fournis avec la bibliothèque

Évidemment, plusieurs exemples sont fournis avec la bibliothèque. Cependant, puisque la bibliothèque supporte plusieurs modèles d'écrans différents, chaque fichier d'exemple débute par une longue liste de constructeurs: il faut décommenter la ligne qui correspond au modèle d'écran que vous utilisez (dans mon cas: SH1106 128X64  I2C).

Écriture de texte à l'écran

Plusieurs dizaines de polices de caractères peuvent être utilisées pour écrire du texte à l'écran (voir la liste complète). Si vous désirez utiliser des caractères accentués, il est important de choisir une police dont le nom se termine par "f", ce qui indique que la police inclut tous les caractères nécessaires. De plus, la fonction "enableUTF8Print()" doit être appelée au démarrage du programme.

• enableUTF8Print: pour permettre l'utilisation de caractères accentués
• setFont: pour choisir une police de caractère
• setCursor: pour choisir l'endroit sur l'écran où on désire écrire du texte
• print: écriture du texte à la position du curseur

Dans un premier temps, le texte est écrit en mémoire (buffer). Il faut ensuite utiliser sendBuffer() pour transférer l'image à l'écran.

Dessiner des formes géométriques

Plusieurs fonctions facilitent le traçage de formes géométriques à l'écran:

• drawPixel: pour dessiner un point
• drawLine: pour dessiner une ligne droite
• drawFrame: pour dessiner un contour de rectangle (vide)
• drawBox: pour dessiner un rectangle plein
• drawCircle: pour dessiner un contour circulaire (vide)
• drawDisc: pour dessiner un cercle plein
• drawTriangle: pour dessiner un triangle

Afficher un bitmap XBM

La fonction drawXBMP permet de tracer à l'écran une image bitmap de type XBM. J'ai obtenu de bons résultat en sauvegardant un petit dessin en format .xbm avec le logiciel Gimp, puis en ouvrant le fichier obtenu avec un éditeur de texte: j'en ai tiré le contenu de la variable "logoBitmap" dans le sketch de démonstration ci-dessous.

Un sketch

Pour finir, voici mon sketch complet,  qui fait apparaître des dessins et du texte à l'écran.

Articles similaires:

J'ai aussi utilisé le même écran OLED avec un Raspberry Pi , avec un Arduino et avec une carte STM32.

Avec l'ESP32 et l'ESP8266, j'ai aussi utilisé ces afficheurs:  écran couleur SPI ST7735, afficheur LCD 16 X 2, afficheur 7 segments TM1638.

Vous pouvez également consulter la liste de tous mes articles concernant l'ESP8266 et l'ESP32.

Yves Pelletier   (Twitter, Facebook)