Différences

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

--- materiels:afficheurs:graphique [2021/12/24 09:32] – [Modifier - Pane] phil
+++ materiels:afficheurs:graphique [2024/01/25 09:53] (Version actuelle) – [5. Les primitives graphiques] phil
@@ Ligne 1: / Ligne 1: @@
  [[matériels:accueilmatériels|{{ :iconemaison.jpg?nolink&25|Sommaire Matériels}}]]
-===== Les afficheurs graphiques =====
+===== Les afficheurs graphiques : généralités et primitives =====
 [Mise à jour le : 24/12/2021]
@@ Ligne 10: / Ligne 10: @@
   * **Lectures connexes**
-    * <html><a href="https://webge.fr/dokuwiki/doku.php?id=arduino:biblio:libgfx" target="_blank">Bibliothèque - Adafruit GFX Graphics Library</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:ard0_96" target="_blank">0,96" 128x64 OLED 2864 Display module - SSD1306 (I2C)</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 20: / Ligne 20: @@
 {{ :materiels:afficheurs:ghiardui.jpg?nolink&200|}}
 ==== 1. Introduction ====
-Ce document décrit les principes implémentés dans les **bibliothèques graphiques** telles que <html><a href="https://webge.fr/dokuwiki/doku.php?id=arduino:biblio:libgfx" target="_blank">GFX Graphics Library</a></html> pour les cartes **Arduino** ou <html><a href="https://www.brainpad.com/lessons/drawing/" target="_blank">Drawing</a></html> pour les cartes **BrainPad** <html><a href="https://www.brainpad.com/" target="_blank">Pulse et Tick</a></html> de <html><a href="https://www.ghielectronics.com/" target="_blank">GHI Electronics</a></html> en vue d'afficher du **texte**, des **dessins** ou des **images**.
+Ce document décrit les principes implémentés dans les **bibliothèques graphiques** telles que **GFX Graphics Library** pour les cartes **Arduino** ou <html><a href="https://www.brainpad.com/lessons/drawing/" target="_blank">Drawing</a></html> pour les cartes **BrainPad** <html><a href="https://www.brainpad.com/" target="_blank">Pulse et Tick</a></html> de <html><a href="https://www.ghielectronics.com/" target="_blank">GHI Electronics</a></html> en vue d'afficher du **texte**, des **dessins** ou des **images**.
 ==== 2. Le système de coordonnées et les unités ====
@@ Ligne 58: / Ligne 58: @@
 Ce document couvre les **fonctions graphiques courantes** fonctionnant de la même manière, quel que soit le type d'afficheur.
-<callout type="warning" icon="true"> Chaque fonctionnalité graphique est proposée pour une carte **Arduino** (bibliothèque <html><a href="https://webge.fr/dokuwiki/doku.php?id=arduino:biblio:libgfx" target="_blank">GFX Graphics Library</a></html>) programmée en **C, C++** et pour une carte <html><a href="https://www.brainpad.com/" target="_blank"><strong>BrainPad</strong></a></html>, programmée en **Python**, disposant d'un afficheur monochrome à circuit SSD1306. Dans les exemples de code, les méthodes de la bibliothèque **GFX Graphics Library** sont appliquées à un objet **disp** supposé **déclaré** et **initialisé** grâce à la bibliothèque spécifique au périphérique. Les cartes BrainPad utilisent simplement des fonctions.</callout>
+<callout type="warning" icon="true"> Chaque fonctionnalité graphique est proposée pour une carte **Arduino** (bibliothèque <html><a href="https://webge.fr/dokuwiki/doku.php?id=materiels:afficheurs:libgfx" target="_blank">GFX Graphics Library</a></html>) programmée en **C, C++** et pour une carte <html><a href="https://www.brainpad.com/" target="_blank"><strong>BrainPad</strong></a></html>, programmée en **Python**, disposant d'un afficheur monochrome à circuit SSD1306. Dans les exemples de code, les méthodes de la bibliothèque **GFX Graphics Library** sont appliquées à un objet **disp** supposé **déclaré** et **initialisé** grâce à la bibliothèque spécifique au périphérique. Les cartes BrainPad utilisent simplement des fonctions.</callout>
 === 5.1 Bibliothèques et initialisation ===
@@ Ligne 244: / Ligne 244: @@
 <pane id="tab-gfx0">
-  * **Syntaxe** \\ La méthode **display**() transfère le contenu de la mémoire graphique à l'écran. Pour effacer l'écran, il faut **effacer** la mémoire graphique avec **ClearDisplay**() (sans effet sur l'affichage) et **transférer** son contenu (vide) avec **Display**(). Display() doit donc suivre un ClearDisplay(). \\ <callout icon="fa fa-wrench" color="green">//void// **display**(); \\ //void// **ClearDisplay**();</callout>
+  * **Syntaxe** \\ La méthode **display**() transfère le contenu de la mémoire graphique à l'écran. Pour effacer l'écran, il faut **effacer** la mémoire graphique avec **clearDisplay**() (sans effet sur l'affichage) et **transférer** son contenu (vide) avec **display**(). display() doit donc suivre un clearDisplay(). \\ <callout icon="fa fa-wrench" color="green">//void// **display**(); \\ //void// **clearDisplay**();</callout>
   * **Exemple** <code cpp *.cpp>
@@ Ligne 420: / Ligne 420: @@
   * **Exemple** \\ <code cpp *.cpp>
-// Dessin du cadre (contour) d'un carré ou d'un rectangle de largeur w et de hauteur h à partir du point de coordonnées (x0,y0) correspondant au coin supérieur gauche de la forme, dans la couleur color. Les coins arrondis ont pour rayon radius.
+// Dessin du cadre (contour) d'un carré ou d'un rectangle
 disp.drawRoundRect(40,45,20,30,5,ST7735_YELLOW);
-// Remplissage d'un carré ou d'un rectangle de largeur w et de hauteur h à partir du point de coordonnées (x0,y0) correspondant au coin supérieur gauche de la forme, dans la couleur color. Les coins arrondis ont pour rayon radius.
+// Remplissage d'un carré ou d'un rectangle
 disp.fillRoundRect(40,45,20,30,5,ST7735_YELLOW);
 </code>
@@ Ligne 428: / Ligne 429: @@
 <pane id="tab-brainpad5">
-//Non disponible//
+//Non disponible sur Brainpad//
 </pane>
 </tabs>
@@ Ligne 445: / Ligne 446: @@
 <pane id="tab-gfx6">
-  * **Syntaxe** \\ Les triangles disposent également des méthodes **draw** et **fill**. Chacune nécessite sept paramètres: les coordonnées **X**, **Y** pour trois angles définissant le triangle, suivis de la **couleur**. \\ <callout icon="fa fa-wrench" color="green">//void// **drawTriangle**(//uint16_t// **x0**, //uint16_t// **y0**, //uint16_t// **x1**, //uint16_t// **y1**, //uint16_t// **x2**, //uint16_t// **y2**, //uint16_t// **color**); \\  //void// **fillTriangle**(//uint16_t// **x0**, //uint16_t// **y0**, //uint16_t// **x1**, //uint16_t// **y1**, //uint16_t// **x2**, //uint16_t// **y2**, //uint16_t// **color**);</callout>
+  * **Syntaxe** \\ Les triangles disposent également des méthodes **draw** et **fill**. Chacune nécessite sept paramètres: les coordonnées **x**, **y** pour trois angles définissant le triangle, suivis de la **couleur**. \\ <callout icon="fa fa-wrench" color="green">//void// **drawTriangle**(//uint16_t// **x0**, //uint16_t// **y0**, //uint16_t// **x1**, //uint16_t// **y1**, //uint16_t// **x2**, //uint16_t// **y2**, //uint16_t// **color**); \\  //void// **fillTriangle**(//uint16_t// **x0**, //uint16_t// **y0**, //uint16_t// **x1**, //uint16_t// **y1**, //uint16_t// **x2**, //uint16_t// **y2**, //uint16_t// **color**);</callout>
   * **Exemple** \\ <code cpp *.cpp>
-// Dessin d'un triangle dans la couleur color dont les sommets sont placés en (x0,y0), (x1,y1) et (x2,y2).
+// Dessin d'un triangle
 disp.drawTriangle(100, 45, 70, 45, 70, 75, ST7735_CYAN);
-// Remplissage d'un triangle dans la couleur color dont les sommets sont placés en (x0,y0), (x1,y1) et (x2,y2).
+// Remplissage d'un triangle
 disp.fillTriangle(100, 45, 70, 45, 70, 75, ST7735_CYAN);
 </code>
@@ Ligne 456: / Ligne 458: @@
 <pane id="tab-brainpad6">
-Non disponible.
+//Non disponible sur Brainpad//
 </pane>
 </tabs>
@@ Ligne 476: / Ligne 478: @@
     * **Syntaxe** \\ Un **caractère** peut être placé n'importe où sur l'écran dans n'importe quelle couleur. Il n'existe qu'une seule police (pour économiser sur la place mémoire). Ses dimensions sont **5x8 pixels** par défaut. Il est possible de passer un paramètre supplémentaire pour augmenter sa taille.  \\ <callout icon="fa fa-wrench" color="green">//void// **drawChar**(//uint16_t// **x**, //uint16_t// **y**, //char// **c**, //uint16_t// **color**, //uint16_t// **bg**, //uint8_t// **size**);</callout>
     * **Exemples** \\ <code cpp *.cpp>
-// Dessin du caractère c à la position (x ,y) dans la couleur color sur un fond de couleur bg. Si le paramètre de taille size est omis, le caractère fait 5x8 pixels. Si size = 2 le caractère fera 10x8 pixels etc.
+// Dessin d'un caractère
 disp.drawChar(110,140,'@',ST7735_YELLOW,ST7735_BLACK,2);
 </code>
@@ Ligne 500: / Ligne 502: @@
 <pane id="tab-brainpad8">
-  * **Syntaxe** \\ La fonction **Text**(), similaire à Print() permet de contrôler la position d'un texte à l'écran. Text() prend 3 arguments : le **texte** à afficher suivi de son emplacement **x** et **y** sur l'écran. Contrairement à la fonction Print() , elle doit être suivie par **Show**(). \\ La fonction **TextEx**() fonctionne Text(), mais ajoute une **mise à l'échelle** afin de créer un texte plus gros , mince ou long. TextEx() prend 5 arguments . Les trois premiers sont exactement les mêmes que la fonction Text() . Les deux derniers définissent la largeur et la hauteur de l'échelle. L'échelle 1 est la taille standard, 2 est le double et ainsi de suite. \\ <callout icon="fa fa-wrench" color="green">**Text**(//texte//, //x//, //y//) \\ **TextEx**(//texte//, //x//, //y//, //scaleWidth//, //scaleHeight//)</callout>
+  * **Syntaxe** \\ La fonction **Text**(), similaire à Print() permet de contrôler la position d'un texte à l'écran. Text() prend 3 arguments : le **texte** à afficher suivi de son emplacement **x** et **y** sur l'écran. Contrairement à la fonction Print() , elle doit être suivie par **Show**(). \\ **TextEx**() fonctionne comme Text(), mais ajoute une **mise à l'échelle** afin de créer un texte plus gros , mince ou long. TextEx() prend 5 arguments . Les trois premiers sont exactement les mêmes que la fonction Text() . Les deux derniers définissent la largeur **scaleWidth** et la hauteur **scaleHeight** de l'échelle. L'échelle 1 est la taille standard, 2 est le double et ainsi de suite. \\ <callout icon="fa fa-wrench" color="green">**Text**(//texte//, //x//, //y//) \\ **TextEx**(//texte//, //x//, //y//, //scaleWidth//, //scaleHeight//)</callout>
   * **Exemple** <code python *.py>
 # Code MicroPython
 Text("Hello Brain",30,30)
-Show() # Pour afficher
 TextEx("Large Text",0,30,2,2)
-Show()
 </code>
 </pane>
 </tabs>
 === 5.10 Bitmaps ===
-<callout type="info" icon="true">Il est possible d'afficher de petites images bitmap pour réaliser des **sprites** et autres mini animations ou des icônes. Pour cela, il faut préciser :
+<callout type="info" icon="true">Il est possible d'afficher de petites images **bitmap** pour réaliser des **sprites** et autres mini animations ou des **icônes**. Pour cela, il faut préciser :
   * les coordonnées X, Y,
-  * un bloc contigu de bits, où chaque bit '1' définit le pixel à 'colorer', tandis que chaque bit '0' est sauté).
+  * un bloc contigu de bits, où chaque bit à '1' définit le pixel à 'colorier', tandis qu'on ne tient pas compte de chaque bit à '0').
   * une largeur et une hauteur (en pixels),
   * une couleur.
 </callout>
+{{ :materiels:afficheurs:bitmap.jpg?nolink |}}
 <tabs>
@@ Ligne 537: / Ligne 540: @@
 // Pixel à 1 en vert, pixel à 0 en rouge
 disp.drawBitmap(20, 20, sprite, 16, 10, ST7735_GREEN, ST7735_RED);
-</code>
+</code> <callout type="tip" icon="true"> **Outil** pour générer des bitmap : <html><a href="https://javl.github.io/image2cpp/" target="_blank">image2cpp</a></html></callout>
 </pane>
 <pane id="tab-brainpad9">
- * **Syntaxe** \\ La fonction **CreateImage**() est utilisée pour créer une image utilisée par la ensuite avec la fonction **Image**() pour la positionner à l'écran. L'un des arguments requis pour la fonction CreateImage() peut prendre une chaîne ou un tableau. On utilise 0 pour le noir et 1 pour le blanc. \\ \\ La fonction CreateImage() nécessite 6 arguments. Les deux premiers sont la taille de l'image **pixH** x **pixV** pour le nombre de pixels . Le 3ème est la variable **nomVar** contenant le tableau ou la chaîne. Les 4e et 5e arguments sont utilisés pour redimensionner l'image horizontalement **dimH** et verticalement **dimV**. Le dernier argument est la transformation de l'image **transf** résumé dans le tableau ci-dessous. \\ \\
+  * **Syntaxe** \\ La fonction **CreateImage**() est utilisée pour créer une image utilisée par la ensuite avec la fonction **Image**() qui la positionne à l'écran. L'un des arguments requis pour la fonction CreateImage() peut prendre une **chaîne** ou un **tableau**. On utilise **0** pour le **noir** et **1** pour le **blanc**. \\ \\ La fonction CreateImage() nécessite 6 arguments. Les deux premiers sont la taille de l'image **pixH** x **pixV** en nombre de pixels . Le 3ème est la variable **nomVar** contenant le tableau ou la chaîne. Les 4e et 5e arguments sont utilisés pour redimensionner l'image horizontalement **dimH** et verticalement **dimV**. Le dernier argument est la transformation de l'image **transf** résumé dans le tableau ci-dessous. \\ \\
 ^ Valeur ^ Transformation ^
@@ Ligne 549: / Ligne 552: @@
 | 3 | Fait pivoter l'image de 90° |
 | 4 | Fait pivoter l'image de 180° |
 | 5 | Fait pivoter l'image de 270°  |
 \\
-La fonction Image() nécessite 3 arguments : l'image varImage créée à l'aide de CreateImage() et la position **x** et **y** où elle apparaîtra à l'écran.
+La fonction **Image()** nécessite 3 arguments : l'image **varImage** créée à l'aide de CreateImage() et la position **x** et **y** où elle apparaîtra à l'écran.
 <callout icon="fa fa-wrench" color="green">//varImage// = **CreateImage**(//pixH//, //pixV//, //nomVar//, //dimH//, //dimV//, //transf//) \\ **Image**(//varImage//,//x//,//y//)</callout>
@@ Ligne 584: / Ligne 587: @@
 Image(monsterImage,55,30)
-Show()
 </code>
 </pane>
 </tabs>
-<callout type="tip" icon="true"> **Outil** pour générer des bitmap : <html><a href="https://javl.github.io/image2cpp/" target="_blank">image2cpp</a></html></callout>
 === 5.11 Autres primitives ===
 <callout type="info" icon="true">Il est généralement possible :