Ligne 3 : |
Ligne 3 : |
| | | |
| Ce tutoriel couvre plusieurs modèles de cartes sous MicroPython: | | Ce tutoriel couvre plusieurs modèles de cartes sous MicroPython: |
− | * {{pl|846|Feather ESP8266}} + {{pl|879|OLED FeatherWing}} | + | * {{pl|846|Feather ESP8266}} + {{pl|879|OLED FeatherWing}} <br />[[Fichier:FEATHER-MICROPYTHON-OLED-10a.png|120px]] |
| | | |
| == Installer la bibliothèque == | | == Installer la bibliothèque == |
Ligne 41 : |
Ligne 41 : |
| == Brancher == | | == Brancher == |
| === OLED Featherwing === | | === OLED Featherwing === |
− | Le FeatherWing OLED s'insère simplement sur la carte Feather (ex: Feather ESP8266) et propose une résolution de 128 x 32 pixels. | + | Le {{pl|879|FeatherWing OLED}} s'insère simplement sur la carte Feather (ex: Feather ESP8266) et propose une résolution de 128 x 32 pixels. |
| | | |
| [[Fichier:FEATHER-MICROPYTHON-OLED-10a.png|200px]] [[Fichier:FEATHER-MICROPYTHON-OLED-10b.png]] | | [[Fichier:FEATHER-MICROPYTHON-OLED-10a.png|200px]] [[Fichier:FEATHER-MICROPYTHON-OLED-10b.png]] |
Ligne 66 : |
Ligne 66 : |
| [60] | | [60] |
| | | |
− | === Créer lcd === | + | === Créer LCD === |
| ==== pour FeatherWing OLED ==== | | ==== pour FeatherWing OLED ==== |
| [[Fichier:FEATHER-MICROPYTHON-OLED-10b.png]] | | [[Fichier:FEATHER-MICROPYTHON-OLED-10b.png]] |
Ligne 76 : |
Ligne 76 : |
| </syntaxhighlight> | | </syntaxhighlight> |
| | | |
− | === Tester lcd === | + | === Tester la bibliothèque === |
| Dans les exemples ci-dessous, voici les paramètres que vous retrouverez dans les différents appels de fonction: | | Dans les exemples ci-dessous, voici les paramètres que vous retrouverez dans les différents appels de fonction: |
| | | |
Ligne 89 : |
Ligne 89 : |
| ==== Remplir ==== | | ==== Remplir ==== |
| Remplir un écran ou un rectangle de point blanc (allume tous les Pixels) ou points noir (éteint les pixels). | | Remplir un écran ou un rectangle de point blanc (allume tous les Pixels) ou points noir (éteint les pixels). |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(1) # Rempli l'écran en blanc |
− | lcd.fill(1) # Rempli l'écran en blanc | |
| lcd.show() # Afficher! | | lcd.show() # Afficher! |
| | | |
Ligne 100 : |
Ligne 99 : |
| | | |
| [[Fichier:FEATHER-MICROPYTHON-OLED-20a.jpg|320px]] | | [[Fichier:FEATHER-MICROPYTHON-OLED-20a.jpg|320px]] |
| + | |
| + | ==== Pixel ==== |
| + | Dessiner un pixel se fait à l'aide de ma méthode `pixel`. |
| + | |
| + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
| + | # Dessine un pixel en noir |
| + | # pixel( x, y, c ) |
| + | lcd.rect( 3, 4, 1 ) |
| + | lcd.show() # Afficher! |
| + | </syntaxhighlight> |
| + | |
| + | Il est également possible d'obtenir la couleur d'un pixel avec l'instruction suivante: |
| + | |
| + | <syntaxhighlight lang="python"># Obtenir la couleur d'un pixel |
| + | # color = pixel( x, y ) |
| + | # Retourne 1 si le point est allumé, sinon 0. |
| + | c = lcd.pixel( 3, 4 ) |
| + | </syntaxhighlight> |
| | | |
| ==== Rectangle ==== | | ==== Rectangle ==== |
| Dessiner un rectangle (à 3 pixels du bord). | | Dessiner un rectangle (à 3 pixels du bord). |
| | | |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
− | lcd.fill(0) # Rempli l'écran en noir | |
| # Dessine un rectangle en blanc | | # Dessine un rectangle en blanc |
| # rect( x, y, w, h, c ) | | # rect( x, y, w, h, c ) |
Ligne 117 : |
Ligne 133 : |
| La bibliothèque dispose de méthodes optimisées pour dessiner des lignes Horizontales et verticales. | | La bibliothèque dispose de méthodes optimisées pour dessiner des lignes Horizontales et verticales. |
| | | |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
− | lcd.fill(0) # Rempli l'écran en noir | |
| # Dessine des lignes en blanc. | | # Dessine des lignes en blanc. |
| # Ligne horizontale hline( x,y, w, c ) | | # Ligne horizontale hline( x,y, w, c ) |
Ligne 134 : |
Ligne 149 : |
| Le tracé de ligne se fait sans anti-aliasing. | | Le tracé de ligne se fait sans anti-aliasing. |
| | | |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
− | lcd.fill(0) # Rempli l'écran en noir | |
| # Dessine des lignes en blanc. | | # Dessine des lignes en blanc. |
| # line(x1,y1,x2,y2,c) | | # line(x1,y1,x2,y2,c) |
Ligne 148 : |
Ligne 162 : |
| La bibliothèque embarque une font permettant l'affichage de texte. | | La bibliothèque embarque une font permettant l'affichage de texte. |
| | | |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
− | lcd.fill(0) # Rempli l'écran en noir | |
| # Dessine du texte en blanc. | | # Dessine du texte en blanc. |
| # text( str, x,y, c ) | | # text( str, x,y, c ) |
Ligne 160 : |
Ligne 173 : |
| Il est également possible de réaliser un bel effet visuel en décalant le texte affiché! | | Il est également possible de réaliser un bel effet visuel en décalant le texte affiché! |
| | | |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(0) # Rempli l'écran en noir |
− | lcd.fill(0) # Rempli l'écran en noir | |
| lcd.text( "Bonjour!", 0,0, 1 ) # blanc | | lcd.text( "Bonjour!", 0,0, 1 ) # blanc |
| lcd.text( "Bonjour!", 1,1, 0 ) # noir | | lcd.text( "Bonjour!", 1,1, 0 ) # noir |
Ligne 174 : |
Ligne 186 : |
| | | |
| Mise en place en dessinant une croix noir sur fond blanc. | | Mise en place en dessinant une croix noir sur fond blanc. |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.fill(1) # Rempli l'écran en blanc |
− | lcd.fill(1) # Rempli l'écran en blanc | |
| lcd.line(0,0,128,32,0) # noir | | lcd.line(0,0,128,32,0) # noir |
| lcd.line(0,32,128,0,0) # blanc | | lcd.line(0,32,128,0,0) # blanc |
Ligne 184 : |
Ligne 195 : |
| | | |
| Scroll Horizontal de 15 pixels vers la gauche. | | Scroll Horizontal de 15 pixels vers la gauche. |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.scroll( -15, 0 ) |
− | lcd.scroll( -15, 0 ) | |
| lcd.show() | | lcd.show() |
| </syntaxhighlight> | | </syntaxhighlight> |
Ligne 192 : |
Ligne 202 : |
| | | |
| Puis Scroll Vertical de 8 pixels vers le bas. | | Puis Scroll Vertical de 8 pixels vers le bas. |
− | <syntaxhighlight lang="python"> | + | <syntaxhighlight lang="python">lcd.scroll( 0, 8 ) |
− | lcd.scroll( 0, 8 ) | |
| lcd.show() | | lcd.show() |
| </syntaxhighlight> | | </syntaxhighlight> |
Ligne 200 : |
Ligne 209 : |
| | | |
| {{ambox|text=La fonction ne permet pas de faire défiler une partie du framebuffer. Il est cependant possible de maintenir un framebuffer séparé (et plus grand) contenant l'image à faire défiler. Ce FrameBuffer est alors utilisé pour extraire la partie de l'image à dessiner sur le LCD.}} | | {{ambox|text=La fonction ne permet pas de faire défiler une partie du framebuffer. Il est cependant possible de maintenir un framebuffer séparé (et plus grand) contenant l'image à faire défiler. Ce FrameBuffer est alors utilisé pour extraire la partie de l'image à dessiner sur le LCD.}} |
| + | |
| + | ==== Icon ==== |
| + | Il est assez facile de créer et afficher une icône. |
| + | |
| + | L'icône est définie avec un 1 pour un point allumé et un 0 pour un point éteint: |
| + | |
| + | <syntaxhighlight lang="python">HEART_ICON = [ |
| + | [0,0,0,0,0,0,0,0,0,0,0], |
| + | [0,0,1,1,1,0,1,1,1,0,0], |
| + | [0,1,1,0,1,1,1,1,1,1,0], |
| + | [0,1,0,1,1,1,1,1,1,1,0], |
| + | [0,1,1,1,1,1,1,1,1,1,0], |
| + | [0,0,1,1,1,1,1,1,1,0,0], |
| + | [0,0,0,1,1,1,1,1,0,0,0], |
| + | [0,0,0,0,1,1,1,0,0,0,0], |
| + | [0,0,0,0,0,1,0,0,0,0,0], |
| + | [0,0,0,0,0,0,0,0,0,0,0] ]</syntaxhighlight> |
| + | |
| + | La fonction {{fname|draw_icon()}} permet de dupliquer le contenu d'un "pseudo tableau" (l'icône) sur l'écran aux coordonnées x,y. |
| + | |
| + | <syntaxhighlight lang="python">def draw_icon( lcd, from_x, from_y, icon ): |
| + | for y, row in enumerate( icon ): |
| + | for x, color in enumerate( row ): |
| + | if color==None: |
| + | continue |
| + | lcd.pixel( from_x+x, |
| + | from_y+y, |
| + | color )</syntaxhighlight> |
| + | |
| + | Le code est prévu pour définir des icônes avec un Canal Alpha (avec des 1, 0 et None). |
| + | * Les points marqués 1 sont allumés. |
| + | * Les points marqués 0 sont éteints. |
| + | * Les points marqués None sont ignorés (donc non modifiés sur l'affichage). |
| + | |
| + | Dans l'exemple ci-dessous, la variable {{fname|a}} est assignée a {{fname|None}} et utilisé comme valeur de Canal Alpha. |
| + | |
| + | <syntaxhighlight lang="python">a = None |
| + | FB_ICON = [ |
| + | [a,a,a,a,a,a,a,a,a,a,0,0,a,a,a,a,a], |
| + | [a,a,a,a,a,a,a,a,a,0,0,0,0,a,a,a,a], |
| + | [a,a,a,a,a,a,a,a,0,0,1,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,0,0,1,0,0,1,0,0,0,0,a], |
| + | [0,0,1,1,1,1,1,1,0,0,0,1,1,1,1,0,0], |
| + | [0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,a,0,1,1,1,1,1,0,0,a], |
| + | [a,0,0,0,0,0,0,a,0,0,0,0,0,0,0,a,a], |
| + | [a,0,0,0,0,0,a,a,a,0,0,0,0,0,0,a,a] ]</syntaxhighlight> |
| + | |
| + | |
| + | |
| + | Le script ci-dessous exploite l'affichage d'icône sous différentes formes: |
| + | # Affichage d'une icône simple. |
| + | # Affichage aléatoire d'une icône de façon aléatoire. |
| + | # Affichage d'une icône avec Canal Alpha. |
| + | |
| + | <syntaxhighlight lang="python">from machine import Pin, I2C |
| + | import time |
| + | i2c = I2C( sda=Pin(4), scl=Pin(5) ) |
| + | import ssd1306 |
| + | lcd = ssd1306.SSD1306_I2C( 128, 32, i2c ) |
| + | lcd.fill( 0 ) |
| + | lcd.show() |
| + | |
| + | HEART_ICON = [ |
| + | [0,0,0,0,0,0,0,0,0,0,0], |
| + | [0,0,1,1,1,0,1,1,1,0,0], |
| + | [0,1,1,0,1,1,1,1,1,1,0], |
| + | [0,1,0,1,1,1,1,1,1,1,0], |
| + | [0,1,1,1,1,1,1,1,1,1,0], |
| + | [0,0,1,1,1,1,1,1,1,0,0], |
| + | [0,0,0,1,1,1,1,1,0,0,0], |
| + | [0,0,0,0,1,1,1,0,0,0,0], |
| + | [0,0,0,0,0,1,0,0,0,0,0], |
| + | [0,0,0,0,0,0,0,0,0,0,0] ] |
| + | |
| + | # a: Alpha Channel (pas dessiné) |
| + | a = None |
| + | FB_ICON = [ |
| + | [a,a,a,a,a,a,a,a,a,a,0,0,a,a,a,a,a], |
| + | [a,a,a,a,a,a,a,a,a,0,0,0,0,a,a,a,a], |
| + | [a,a,a,a,a,a,a,a,0,0,1,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,a,0,0,1,0,1,0,0,a,a,a], |
| + | [a,a,a,a,a,a,0,0,1,0,0,1,0,0,0,0,a], |
| + | [0,0,1,1,1,1,1,1,0,0,0,1,1,1,1,0,0], |
| + | [0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0], |
| + | [0,0,1,1,1,1,0,a,0,1,1,1,1,1,0,0,a], |
| + | [a,0,0,0,0,0,0,a,0,0,0,0,0,0,0,a,a], |
| + | [a,0,0,0,0,0,a,a,a,0,0,0,0,0,0,a,a] ] |
| + | |
| + | def draw_icon( lcd, from_x, from_y, icon ): |
| + | for y, row in enumerate( icon ): |
| + | for x, color in enumerate( row ): |
| + | if color==None: |
| + | continue |
| + | lcd.pixel( from_x+x, |
| + | from_y+y, |
| + | color ) |
| + | |
| + | def randrange( max ): |
| + | assert max < 256 |
| + | import urandom |
| + | r = urandom.getrandbits(8) |
| + | while r > max: |
| + | r = urandom.getrandbits(8) |
| + | return r |
| + | |
| + | def random_icon( lcd, icon, count ): |
| + | range_x = lcd.width - len(icon[0]) |
| + | range_y = lcd.height - len(icon) |
| + | for i in range( count ): |
| + | draw_icon( lcd, |
| + | randrange( range_x ), |
| + | randrange( range_y ), |
| + | icon |
| + | ) |
| + | |
| + | # Affiche une Simple icone |
| + | lcd.fill( 0 ) |
| + | draw_icon( lcd, 0, 0, HEART_ICON ) |
| + | lcd.show() |
| + | time.sleep( 2 ) # 2 secondes |
| + | |
| + | # 4x affichage aléatoire de 25 icones |
| + | for i in range( 5 ): |
| + | lcd.fill( 0 ) |
| + | random_icon( lcd, HEART_ICON, 25 ) |
| + | lcd.show() |
| + | time.sleep( 2 ) |
| + | |
| + | # affichage de 30 icones (avec canal Alpha ) |
| + | lcd.fill( 0 ) |
| + | for i in range( 30 ): |
| + | random_icon( lcd, FB_ICON, 1 ) |
| + | lcd.show() |
| + | |
| + | time.sleep( 2 ) |
| + | lcd.fill( 0 )</syntaxhighlight> |
| + | |
| + | Ce qui produit les résultats suivants: |
| + | |
| + | [[Fichier:FEATHER-MICROPYTHON-OLED-20j.jpg|320px]] |
| + | |
| + | [[Fichier:FEATHER-MICROPYTHON-OLED-20k.jpg|320px]] |
| + | |
| + | [[Fichier:FEATHER-MICROPYTHON-OLED-20l.jpg|320px]] |
| + | |
| + | == Plus de ressources == |
| + | * [https://github.com/micropython/micropython/tree/master/drivers/display Pilotes d'afficheurs sur le GitHub MicroPython] |
| + | * [https://www.pymadethis.com/article/oled-displays-i2c-micropython/ Article PyMadeThis sur écran OLED ssd1603] |
| + | * [https://www.pymadethis.com/article/displaying-images-oled-displays/ Article PyMadeThis sur affichage d'image 2 couleurs] |
| | | |
| == Où acheter == | | == Où acheter == |
| * {{pl|846|Feather ESP8266}} | | * {{pl|846|Feather ESP8266}} |
| * {{pl|879|OLED FeatherWing 128x32 Pixels (ADA-2900) }} | | * {{pl|879|OLED FeatherWing 128x32 Pixels (ADA-2900) }} |