Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
materiels:afficheurs:graphique [2021/12/24 09:42] – [5.9 Afficher du texte ou un caractère] phil | materiels:afficheurs:graphique [2024/01/25 09:53] (Version actuelle) – [5. Les primitives graphiques] phil |
---|
[[matériels:accueilmatériels|{{ :iconemaison.jpg?nolink&25|Sommaire Matériels}}]] | [[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] | [Mise à jour le : 24/12/2021] |
| |
| |
* **Lectures connexes** | * **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: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> | * <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> |
{{ :materiels:afficheurs:ghiardui.jpg?nolink&200|}} | {{ :materiels:afficheurs:ghiardui.jpg?nolink&200|}} |
==== 1. Introduction ==== | ==== 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 ==== | ==== 2. Le système de coordonnées et les unités ==== |
Ce document couvre les **fonctions graphiques courantes** fonctionnant de la même manière, quel que soit le type d'afficheur. | 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 === | === 5.1 Bibliothèques et initialisation === |
| |
<pane id="tab-gfx0"> | <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> | * **Exemple** <code cpp *.cpp> |
| |
<pane id="tab-brainpad8"> | <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**(). \\ **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 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> | * **Exemple** <code python *.py> |
</tabs> | </tabs> |
=== 5.10 Bitmaps === | === 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, | * 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 largeur et une hauteur (en pixels), |
* une couleur. | * une couleur. |
</callout> | </callout> |
| |
| {{ :materiels:afficheurs:bitmap.jpg?nolink |}} |
| |
<tabs> | <tabs> |
// Pixel à 1 en vert, pixel à 0 en rouge | // Pixel à 1 en vert, pixel à 0 en rouge |
disp.drawBitmap(20, 20, sprite, 16, 10, ST7735_GREEN, ST7735_RED); | 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> |
| |
<pane id="tab-brainpad9"> | <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 ^ | ^ Valeur ^ Transformation ^ |
| 3 | Fait pivoter l'image de 90° | | | 3 | Fait pivoter l'image de 90° | |
| 4 | Fait pivoter l'image de 180° | | | 4 | Fait pivoter l'image de 180° | |
| 5 | Fait pivoter l'image de 270° | | | 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> | <callout icon="fa fa-wrench" color="green">//varImage// = **CreateImage**(//pixH//, //pixV//, //nomVar//, //dimH//, //dimV//, //transf//) \\ **Image**(//varImage//,//x//,//y//)</callout> |
| |
| |
Image(monsterImage,55,30) | Image(monsterImage,55,30) |
Show() | |
</code> | </code> |
</pane> | </pane> |
</tabs> | </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 === | === 5.11 Autres primitives === |
<callout type="info" icon="true">Il est généralement possible : | <callout type="info" icon="true">Il est généralement possible : |