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 10:12] – [5.10 Bitmaps] 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-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**() 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. \\ \\ | * **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> |
| |