Différences

Ci-dessous, les différences entre deux révisions de la page.

--- materiels:afficheurs:ard0_96 [2023/08/20 18:20] – [2.1 La bibliothèque Adafruit GFX Graphics] phil
+++ materiels:afficheurs:ard0_96 [2024/04/16 22:37] (Version actuelle) – phil
@@ Ligne 2: / Ligne 2: @@
 ===== 0,96" 128x64 OLED 2864 Display module - SSD1306 (I2C) =====
-[Mise à jour le 18/8/2023]
+[Mise à jour le 16/4/2024]
-{{ :materiels:afficheurs:langfr-330px-arduino_logo.svg.png?nolink&150|}}
+{{ :materiels:afficheurs:micpyardu.png?nolink|}}
   * **Ressources**
@@ Ligne 10: / Ligne 10: @@
   * **Lectures connexes**
-    * <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:graphique" target="_blank">Les afficheurs graphiques</a></html>
+    * <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:graphique" target="_blank">Les afficheurs graphiques : généralités et primitives</a></html>
+    * Bibliothèques - <html><a href="https://www.arduinolibraries.info/" target="_blank">Arduino Library List</a></html>
     * <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:libgfx" target="_blank">Bibliothèque - Adafruit GFX Graphics Library</a></html>
     * <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:ada1107#x64_oled_featherwing_-_sh1107_3_buttons_i2c" target="_blank">Adafruit 1,3" 128x64 OLED FeatherWing - SH1107 + 3 buttons (I2C)</a></html>
@@ Ligne 24: / Ligne 25: @@
 La technologie OLED est utilisée dans des applications commerciales telles que les écrans pour téléphones mobiles et lecteurs multimédias portables, les autoradios et les appareils photo numériques, entre autres.\\
 \\
-L'écran **Gravity OLED 2864** est un module d'affichage autolumineux à **fond bleu**. La zone d'affichage est de **0,96"** et utilise une puce <html><a href="https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf" target="_blank" title="pdf">SSD1306</a></html>. Il prend en charge les communications **I2C** et les fréquences de rafraîchissement allant jusqu'à 60 Hz. Le module utilise l’interface commune Gravity I2C pour une utilisation plug and play simplifiée. <html><a href="https://www.dfrobot.com/wiki/index.php/Gravity:_I2C_OLED-2864_Display" target="_blank">DFRobot</a></html>
+L'écran **Gravity OLED 2864** est un module d'affichage **monochrome** bleu sur fond noir. La zone d'affichage est de **0,96"** et utilise une puce <html><a href="https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf" target="_blank" title="pdf">SSD1306</a></html>. Il prend en charge les communications **I2C** et les fréquences de rafraîchissement allant jusqu'à 60 Hz. Le module utilise l’interface commune Gravity I2C pour une utilisation plug and play simplifiée. <html><a href="https://www.dfrobot.com/wiki/index.php/Gravity:_I2C_OLED-2864_Display" target="_blank">DFRobot</a></html>
   * **Caractéristiques**
@@ Ligne 35: / Ligne 36: @@
     * **Tension d'alimentation** : 3,3V ~ 5V
     * **Consommation maximale** : 20mA @ 3v
+    * **Angle de vision: >160°**
     * **Dimensions** : 41.2x26.2x8mm
@@ Ligne 43: / Ligne 45: @@
     * **x** : position du point par rapport au côté gauche de l'écran. \\
     * **y** : position du point par rapport au dessus de l'écran.  \\
-    * **w** : largeur (du mot Width).  \\
+    * **w** : largeur (Width).  \\
-    * **h** : hauteur (du mot Height).  \\
+    * **h** : hauteur (Height).  \\
-    * **c** : couleur (1=point allumé, 0=point éteint)  \\
+    * **c** : couleur (1 = point allumé, 0 = point éteint)  \\
+{{ :materiels:capteurs:environnement:code.png?nolink|}}
 ==== 2. Programmation ====
 Les programmes suivant sont codés :
@@ Ligne 57: / Ligne 60: @@
 <pane id="tab-arduino">
-=== 2.1 La bibliothèque Adafruit GFX Graphics ===
+<callout type="info" icon="true" title="Bibliothèque Adafruit_SSD1306">En programmation C, C++ l'utilisation des méthodes de la classe **Adafruit_GFX** sur cet afficheur peut se faire par l'intermédiaire de la bibliothèque **Adafruit_SSD1306**. Comme Adafruit_SSD1306 dérive de <html><a href="https://learn.adafruit.com/adafruit-gfx-graphics-library/overview" target="_blank" title="Site Adafruit">Adafruit GFX Graphics</a></html> il suffit de créer un objet Adafruit_SSD1306 pour accéder aux méthodes de Adafruit_GFX.
-<callout type="info" icon="true" title="OakOLED">En programmation C, C++ l'utilisation des méthodes de la classe **Adafruit_GFX** sur cet afficheur peut se faire par l'intermédiaire de la bibliothèque **OakOLED**. Comme OakOLED dérive de <html><a href="https://webge.fr/dokuwiki/doku.php?id=arduino:biblio:libgfx" target="_blank">Adafruit GFX Graphics</a></html> il suffit de créer un objet OakOLED pour accéder aux méthodes de Adafruit_GFX.</callout>
+\\ \\
+**Installer** <html><a href="https://github.com/adafruit/Adafruit_SSD1306" target="_blank">Adafruit_SSD1306</a></html> avec le gestionnaire de bibliothèques de l'IDE. Les méthodes de la classe sont décrites <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:graphique" target="_blank"><b>ici</b></a></html>.
+</callout>
-  - **Installer** <html><a href="https://github.com/netguy204/OakOLED" target="_blank">OakOLED</a></html> avec le gestionnaire de bibliothèques de l'IDE. \\ \\
+//Exemple : "Hello World"//
-  - **Tester l'exemple "Hello World"** ci-dessous. \\ \\ <code cpp helloWorld.cpp>
+{{ :materiels:afficheurs:affssd1306.png?nolink&300|}}
-// Exemple OakOLED
+<code cpp helloWorld.cpp>
-// Affiche "hello, world"
+// Exemple d'utilisation de la bibliothèque Adafruit_SSD1306
+// Description : Affiche "hello, world"
-#include "Wire.h"
+// Bibliothèques nécessaire à l'afficheur
-#include "Adafruit_GFX.h"
+#include <Adafruit_SSD1306.h>
-#include "OakOLED.h"
+// Constructeurs
+Adafruit_SSD1306 oled = Adafruit_SSD1306(128, 32, &Wire);  // Afficheur
-OakOLED oled;
 void setup() {
-  Serial.begin(115200);
+  // Initialisation
-  oled.begin();
+  oled.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // Addresse=0x3C pour 128pxx32px
+  // Configuration de l'affichage
+  oled.clearDisplay();
   oled.setTextSize(1);
-  oled.setTextColor(1);
+  oled.setTextColor(WHITE);
-  oled.setCursor(0, 0);
-  oled.println("Hello, World!");
+  oled.println("Hello, World!");  // préparation du texte dans le buffer
-  oled.display();
+  oled.display();                 // Transfert buffer -> afficheur
 }
@@ Ligne 87: / Ligne 95: @@
 }
 </code>
-  - **Utiliser la bibliothèque OakOLED dans un programme** (IDE Visual Studio Code) \\ \\
+</pane>
-  -  **Inclure** la bibliothèque **Wire.h** au programme en entrant le code ci-dessous.<code cpp *.cpp> \\ \\
-#include <Wire.h>
-</code>
-  - **Inclure** les bibliothèques **Adafruit_GFX** et **OakOLED** dans le programme par :F1 -> Arduino:Library Manager -> Adafruit_GFX (OakOLED) -> Include Library.<code cpp *.cpp>
-#include <Adafruit_GFX.h> // Résultat attendu
-#include <OakOLED.h>
-</code>
-  - **Créer l'objet oled** \\ Entrer le code ci-dessous.<code cpp *.cpp>
-OakOLED oled;
-</code>
-  - **Utiliser** les méthodes de la classe <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:graphique" target="_blank">Adafruit_GFX</a></html>
-=== 2.2 La bibliothèque U8glib ===
+<pane id="tab-micropy">
-{{  :arduino:arduino.png?50&nolink|}}
-. **Installer** <html><a href="https://github.com/olikraus/U8glib_Arduino" target="_blank">Arduino U8glib</a></html> ou <html><a href="https://github.com/olikraus/U8g2_Arduino" target="_blank">U8g2</a></html> si vous utilisez Arduino / Genuino 101 avec le gestionnaire de bibliothèques. Ces bibliothèques graphiques prennent en charge un grand nombre d'afficheurs monochromes.
+=== 2.1 Présentation ===
+<callout type="info" icon="true" title="Bibliothèque SSD1306"><html>Les exemples de code de cette page ont été testés sur un afficheur <html><a href="https://www.gotronic.fr/art-module-oled-i2c-gravity-dfr0486-26805.htm" target="_blank">Gravity OLED-2864 (128x64) </a></html> de DFROBOT et un <html><a href="https://www.gotronic.fr/art-module-afficheur-oled-0-96-tf052-28511.htm" target="_blank">Module afficheur OLED 0,96'' TF052</a></html> connectés à un **ESP32** ou à un **Raspberry Pi Pico**. Ces afficheurs sont pilotés par un circuit SOLOMON SYSTECH <html><a href="https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf" target="_blank">SSD1306</a></html>. Sa mise en oeuvre nécessite une bibliothèque. \\ \\
+<html><a href="https://github.com/stlehmann/micropython-ssd1306" target="_blank"><strong>Télécharger</strong></a></html> la bibliothèque SSD1306 pour MicroPython et la copier dans un fichier nommé ssd1306.py à installer dans la carte à µC. Celle bibliothèque hérite de <html><a href="https://docs.micropython.org/en/latest/pyboard/library/framebuf.html" target="_blank">framebuf</a></html>. On dispose donc des méthodes ci-dessous pour dessiner des formes sur le buffer d'impression.</callout>
+  * **Méthodes de la bibliothèque SSD1306**
+^ Prototype                                            ^ Description                                                                                                                                                                                                                                                                                                                                                                                                                 ^
+| **fill**( c )                                        | Remplit l'écran en **noir (c=1)** ou en **blanc (c=0)**                                                                                                                                                                                                                                                                                                                                                                     |
+| **rect** ( x , y , w , h , c[, f])                   | Dessine un rectangle de largeur w et de hauteur h dans la couleur c au point (x,y). Le paramètre facultatif f peut être défini sur True pour remplir le rectangle. Sinon, seul un contour d'un pixel est dessiné.                                                                                                                                                                                                           |
+| **hline**(x,y,w,c)                                   | Dessine une ligne horizontale de longueur w dans la couleur c au point (x,y)                                                                                                                                                                                                                                                                                                                                                |
+| **vline**(x,y,h,c)                                   | Dessine une ligne verticale de longueur h dans la couleur c au point (x,y)                                                                                                                                                                                                                                                                                                                                                  |
+| **line**(x1,y1,x2,y2,c)                              | Dessine une ligne dans la couleur c entre les points (x1,y1) et (x2,y2)                                                                                                                                                                                                                                                                                                                                                     |
+| **pixels** ( x , y[, c])                             | Affiche un pixel dans la couleur c au point (x,y). Si c n'est pas donné, obtient la valeur de couleur du pixel spécifié. Si c est donné, définit le pixel spécifié sur la couleur donnée.                                                                                                                                                                                                                                   |
+| **scroll**(depl.horiz, depl. vert.)                  | Déplace le contenu de l'écran de n points                                                                                                                                                                                                                                                                                                                                                                                   |
+| **show**()                                           | Transfert le contenu du buffer d'affichage sur l'écran                                                                                                                                                                                                                                                                                                                                                                      |
+| **text**("text",x,y,c)                               | Affiche le texte "text" dans la couleur c au point (x,y). En noir (c=1) ou en blanc (c=0). **La hauteur d'un caractère occupe 8px**.                                                                                                                                                                                                                                                                                            |
+| **poly** ( x , y , coordonnées , c[, f])             | Étant donné une liste de coordonnées, dessine un polygone fermé arbitraire (convexe ou concave) à l'emplacement x, y donné en utilisant la couleur donnée.\\ Les coordonnées doivent être spécifiées sous forme de tableau d'entiers, par exemple .array('h', [x0, y0, x1, y1, ... xn, yn])\\ Le paramètre facultatif f peut être défini sur True pour remplir le polygone. Sinon, seul un contour d'un pixel est dessiné.  |
+| **ellipse**( x , y , xr , an , c[, f , m])  | Dessine une ellipse à l'emplacement donné. Les rayons xr et yr définissent la géométrie ; des valeurs égales entraînent le dessin d'un cercle. Le paramètre c définit la couleur.\\ Le paramètre optionnel f peut être défini sur True pour remplir l'ellipse sinon, seul un contour d'un pixel est dessiné.                                                                                                                |
+<callout type="warning" icon="true">A l'exception de scroll(), les méthodes ci-dessus "écrivent" dans le **tampon d'affichage**. Il faut vider le tampon avec **show()** pour que les caractères apparaissent à l'écran.</callout>
+=== 2.2 Mise en oeuvre ===
+== 2.2.1 Configurations ==
+<callout type="primary" icon="true">Dans les exemples de cette page, les microcontrôleurs accèdent à l'afficheur via le bus I2C. Il faut au préalable le **configurer** et créer une instance de la classe SSD1306 comme ci-dessous.</callout>
+ // Exemple pour un **ESP32 Feather Huzzah**//
+<code python main.py>
+from machine import Pin, SoftI2C
+import ssd1306
+import time
+import urandom
-. **Tester l'exemple "Hello World" ** \\
+# Configuration du bus i2c sur l'ESP32 Feather Huzzah
-Arduino Examples -> Example from Custom Libraries -> U8glib -> HelloWorld
+i2c = SoftI2C(scl=Pin(22), sda=Pin(23),freq=100000)
-{{ :arduino:exu8glib.png?nolink&200 |}}
-<callout type="info" icon="true">Dans la liste placée entre commentaires, sélectionner le constructeur **u8g** comme ci-dessous.</callout>
+# Dimension de l'afficheur oled (ssd1306)
+oled_width = 128 # px
+oled_height = 64 # px
-<code cpp *.cpp>
+# Construction de l'objet oled
-//U8GLIB_SSD1306_128X64 u8g(10, 9);// HW SPI Com: CS = 10, A0 = 9 (Hardware Pins are  SCK = 13 and MOSI = 11)
+oled = ssd1306.SSD1306_I2C(oled_width, oled_height, i2c)
-U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE|U8G_I2C_OPT_DEV_0);	// I2C / TWI
-//U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0|U8G_I2C_OPT_NO_ACK|U8G_I2C_OPT_FAST);// Fast I2C / TWI
 </code>
-. **Utiliser la bibliothèque U8glib dans un programme** (IDE Visual Studio Code)
+ // Exemple pour un **Raspberry Pi Pico**//
+<code python main.py>
+# Modifications à apporter au code ci-dessus
+from machine import Pin, I2C
+...
-  * **Inclure** la bibliothèque **u8glib** au programme par F1 -> Arduino:Library Manager -> U8glib -> Include Library
+# Configuration du bus i2c sur le Raspberry Pi Pico
-<code cpp *.cpp>
+# Accès au connecteur I2C0 du shield Grove
-#include <U8glib.h> // Résultat attendu
+i2c = I2C(0,sda=Pin(8), scl=Pin(9),freq=400_000)
+# Accès au connecteur I2C1 du shield Grove
+#i2c = I2C(1,sda=Pin(6), scl=Pin(7),freq=400_000)
+...
 </code>
-  * **Initialiser l'objet u8g**
+<callout type="success" icon="true">Une fois créée, l'instance de la classe SSD1306 est utilisable pour afficher du texte et des graphiques sur l'écran.</callout>
-Entrer le code ci-dessous.
-<code cpp *.cpp>
+== 2.2.2 Démos ==
-U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE|U8G_I2C_OPT_DEV_0);	// I2C / TWI
+  * **Démo 1** : affichage d'un texte
+<code python main.py>
+# A ajouter au code du §2.1
+# Division de l'afficheur en 8 lignes et 9 colonnes
+lin_hight = 9
+col_width = 8
+def text_write(text, lin, col):
+    oled.text(text,col*col_width,lin*lin_hight)
+oled.fill(0) # Extinction de l'afficheur
+text_write("MicroPython",1,2);
+text_write("sur",3,6)
+text_write("ESP32",5,5)
+oled.show()
+time.sleep(1)
 </code>
-  * **Utiliser les méthodes de la classe U8GLIB**
+  * **Démo 2** : affichage de lignes
-Une page lui sera bientôt consacrée.
-**Exemple**
+<code python main.py>
-<code cpp Hello.cpp>
+# A ajouter au code du §2.1
-#include <U8glib.h>
+# ligne horizontale : hline(pos_x1,pos_y1,pos_x2,pos_y2,c)
+# ligne verticale : vline(pos_x1,pos_y1,pos_x2,pos_y2,c)
+# c=0=>noir, c=1=>blanc
-U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE|U8G_I2C_OPT_DEV_0);	// I2C / TWI
+oled.hline(0,0,oled_width-1,1)
+oled.hline(0,oled_height-1,oled_width-1,1)
+oled.vline(0,0,oled_height,1)
+oled.vline(oled_width-1,0,oled_height,1)
+oled.show()
-void setup(void){
+time.sleep(3)
-u8g.drawStr( 0, 22, "hello World!");
+</code>
-}
-void loop(void){
+  * **Démo 3** : affichage aléatoire de pixels
-}
+<code python main.py>
+# A ajouter au code du §2.1
+oled.fill(0) # Ecran noir
+for n in range(50):
+    pos_x = urandom.randint(1,oled_width)
+    pos_y = urandom.randint(1,oled_height)
+    oled.pixel(pos_x,pos_y,1)
+oled.show()
+time.sleep(3)
 </code>
-</pane>
+  * **Démo 4** : affichage d'une icône
-<pane id="tab-micropy">
+<code python main.py>
+# A ajouter au code du §2.1
+ICON = [
+    [0,0,0,0,1,1,1,0,0,0,0],
+    [0,0,0,1,0,0,0,1,0,0,0],
+    [0,0,1,0,0,0,0,0,1,0,0],
+    [0,1,0,0,0,0,0,0,0,1,0],
+    [1,0,0,0,0,0,0,0,0,0,1],
+    [1,1,1,1,1,1,1,1,1,1,1],
+    [0,0,0,0,1,1,1,0,0,0,0],
+    [0,0,0,1,0,1,0,1,0,0,0],
+    [0,0,1,0,0,1,0,0,1,0,0],
+    [0,1,0,0,0,1,0,0,0,1,0],
+    [0,0,0,0,1,1,1,0,0,0,0],
+]
+# Démo 4a : affichage d'une icône au centre
+oled.fill(0) # Extinction de l'afficheur
+for y in range (11):
+    for x in range (11):
+        oled.pixel(x+64,y+32,ICON[y][x])
+oled.show()
+time.sleep(2)
+# Démo 4b : affichage d'icônes au hazard
+for n in range(12):
+    pos_x = urandom.randint(1,oled_width-12)
+    pos_y = urandom.randint(1,oled_height-12)
+    for y, ligne in enumerate(ICON):
+        for x, c in enumerate(ligne):
+            oled.pixel(x+pos_x,y+pos_y,c)
+oled.show()
+time.sleep(3)
+</code>
+{{ :python:micropython:materiel:thonny.png?nolink&70|}}
+<callout type="tip" icon="true" title="TELECHARGER"><html><strong><a href="https://webge.fr/doc/wikis/code/micropython/MICROPYTHON_ESP32_SSD1306_DEMO.zip" target="_blank">Télécharger</a></strong></html> le projet MICROPYTHON_ESP32_SSD1306_DEMO pour Thonny et la <html><strong><a href="https://webge.fr/doc/wikis/videos/VIDEO_MICROPYTHON_ESP32_DEMO_ SSD1306.zip" target="_blank">vidéo</a></strong></html> des démos.</callout>
+  * **Démo 5 ** : affichage d'une icône avec canal alpha \\ Modifier l'exemple du site <html><a href="https://wiki.mchobby.be/index.php?title=FEATHER-MICROPYTHON-OLED" target="_blank">MCHobby</a></html> en prenant en compte le code du §2.2.1 pour un ESP32 ou un Raspberry Pi Pico.
 </pane>
 </tabs>