29 917
modifications
Modifications
Sauter à la navigation
Sauter à la recherche
Ligne 40 :
Ligne 40 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Ligne 69 :
Ligne 102 : − + Ligne 82 :
Ligne 115 : + + + + Ligne 100 :
Ligne 137 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + Ligne 115 :
Ligne 218 : − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + − + + − d = LCD()+ + + + + + + + + + + + + + + + + + + + − d.drawOvalFilled(120, 160, 60, 120, BLUE)+ − d.drawCircleFilled(120, 160, 60, RED) − d.drawCircle(120, 160, 59, GREEN, border=5) − image_caching_demo()+ + + − d.fillMonocolor(WHITE)+ − d.charsTest(BLACK)+ − pyb.delay(500)+ − d.renderImageTest()+ − pyb.delay(500)+ − d.fillMonocolor(BLACK)+ − d.renderBmp('MP_powered.bmp')+ + + +
MicroPython-ILI9341-Exemples (voir la source)
Version du 4 avril 2016 à 20:13
, 4 avril 2016 à 20:13→RGB888 vers RGB565
Ces couleurs sont stockées dans des tuples {{fname|(rouge,vert,bleu)}} '''mais attention''' ces valeurs numériques respectent la codification RGB565 (couleur 16-bit, R:5-bit; G:6-bit; B:5-bit).
Ces couleurs sont stockées dans des tuples {{fname|(rouge,vert,bleu)}} '''mais attention''' ces valeurs numériques respectent la codification RGB565 (couleur 16-bit, R:5-bit; G:6-bit; B:5-bit).
Essayez d'utiliser les couleurs prédéfinie dès que cela est possible.
=== RGB888 vers RGB565 ===
Le standard de définition de couleur c'est la couleur RGB en 24 bits (aussi dit "RGB888"). Dans cette codification, chacune des couleurs couleurs rouge, vert, bleu est représentée par un octet (donc 8 bits). Au total, il faut donc 3 octets pour représenter une couleur (soit 50% d'espace en plus que le codage RGB565).
Il reste cependant des cas ou vous aurez besoin de créer vos propres couleurs RGB.
Personnellement, j'adore l'outil "[http://www.w3schools.com/colors/colors_picker.asp Color Picker de W3Schools]", outils qui affiche également la valeur RGB 888 de la couleur.
Le fichier {{fname|colors.py}} à récemment reçu la fonction {{fname|rgbTo565()}} qui permet de créer une couleur RGB565 à partir de la codification usuelle RGB 888 (24 bits, chaque valeur RGB ayant une valeur entre 0 et 255).
Voici un exemple utilisant la fonction {{fname|rgbTo565()}} pour créer un dégradé de couleur.
<nowiki># Creation d'un dégradé de couleur vertes à partir
# d'une codification RGB888. Converti les couleurs RGB888 vers RGB565
from lcd import *
l = LCD( rate=21000000 )
colorStep = 11 # faire sauter les couleur 8 bits par pas de 11
boxes = 255//colorStep # Nous allons dessiner x boites
for i in range( 0, boxes+1 ):
iColorValue = i * colorStep
# Convertir la couleur en RGB565 pour le TFT
aColor = rgbTo565(iColorValue,255,iColorValue)
yStart = 0+i*(320//boxes)
yHeight = 320//boxes
print( '%i, %i = %i' % (yStart, yHeight, yStart+yHeight) )
l.drawRect( 0, yStart, 240, yHeight, aColor, border=3, fillcolor=aColor )</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-RGB565.jpg|320px]]
== La couleur de fond ==
== La couleur de fond ==
l.fillMonocolor( PURPLE, margin=80 ) </nowiki>
l.fillMonocolor( PURPLE, margin=80 ) </nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-20.jpg|480px]]
[[Fichier:MicroPython-ILI9341-Exemples-20.jpg|320px]]
== Afficher du texte ==
== Afficher du texte ==
[[Fichier:MicroPython-ILI9341-Exemples-10.jpg|640px]]
[[Fichier:MicroPython-ILI9341-Exemples-10.jpg|640px]]
Soit le résultat suivant suivant l'orientation normal de l'écran
[[Fichier:MicroPython-ILI9341-Exemples-11.jpg|320px]]
La définition de la fonction est la suivante:
La définition de la fonction est la suivante:
<small>Note: ces paramètres sont en fait ceux que l'on peut passer à la classe BaseChars</small>
<small>Note: ces paramètres sont en fait ceux que l'on peut passer à la classe BaseChars</small>
== Dessiner des lignes ==
La fonction {{fname|drawLine()}}, vous pouvez tracer des lignes à travers l'écran... et donc dessiner des graphes et formes complexes.
<nowiki>drawLine( x,y,x1,y1, color )</nowiki>
Paramètres:
* '''x, y''' : Point de départ
* '''x1, y1''' : point d'arrivée
* '''color''' : couleur du tracé (tuple (r,g,b) suivant la codification RGB565)
Voici quelques exemples de d'utilisation allant jusqu'au tracé d'une sinusoïde.
=== Exemple 1 ===
Cet exemple permet de tester différents tracés (et optimisation) ainsi que quelques pièges (tracé de lignes à rebours).
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.drawLine( 20, 155, 121, 31, RED )
l.drawLine( 121, 155, 20, 31, GREEN )
l.drawLine( 20,31, 121, 31, BLUE )
l.drawLine( 121,155, 20,155, ORANGE )
l.drawLine( 121,31, 121,155, YELLOW )
l.drawLine( 20,155, 20,31, CYAN )</nowiki>
Ce qui produit le résultat suivant:
[[Fichier:MicroPython-ILI9341-Exemples-60.jpg|320px]]
=== Exemple 2 ===
Cet exemple effectue un tracé sur tout l'écran et permet d'évaluer la rapidité du tracé.
<nowiki>from lcd import *
l = LCD( rate=21000000 )
# Tracé de haut en bas
for i in range( 0, 320, 8 ):
l.drawLine( 0,0, 240, i, CYAN )
# tracé de gauche à droite
for i in range( 0, 240, 8 ):
l.drawLine( 0,0, i, 320, MAGENTA )</nowiki>
Ce qui produit le résultat suivant:
[[Fichier:MicroPython-ILI9341-Exemples-61.jpg|320px]]
=== Exemple 3 ===
Utilisation de la fonction {{fname|drawLine()}} pour un tracé graphique
<nowiki>from lcd import *
from math import sin, trunc, radians
l = LCD( rate=21000000 )
# Draw axis
l.drawLine( 0,0, 240, 0, CYAN )
l.drawLine( 120, 0, 120, 320, CYAN )
# Draw a sinus plot (in the height of the screen)
previous=None
for degree in range(0,320):
# screen x axis = SIN, screen y axis = degrees
point = ( trunc(120+sin(radians(degree))*120) , degree )
if previous != None:
l.drawLine( previous[0], previous[1], point[0], point[1], YELLOW )
previous = point</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-62.jpg|320px]]
== Rectangle ==
== Rectangle ==
Vous pouvez dessiner un rectangle à l'aide de {{fname|drawRect}}.
Vous pouvez dessiner un rectangle à l'aide de {{fname|drawRect}}.
<nowiki>drawRect( x, y, width, height, color, border=1, fillcolor=None):
<nowiki>drawRect( x, y, width, height, color, border=1, fillcolor=None)</nowiki>
* '''x''', '''y''' - position du coin supérieur gauche.
* '''x''', '''y''' - position du coin supérieur gauche.
<nowiki>from lcd import *
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l = LCD( rate=21000000 )
l.drawRect(5, 5, 53, 310, BLUE, border=10, fillcolor=ORANGE)</nowiki>
l.drawRect(5, 5, 53, 310, BLUE, border=10, fillcolor=ORANGE)
l.drawRect(100,100,50,50,RED,border=3, fillcolor=GREEN )</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-30.jpg|320px]]
== Cercles et ovales ==
Il est également possible de dessiner des cercles et ovales facilement à l'aide de {{fname|drawCircle}}, {{fname|drawCircleFilled}}, {{fname|drawOvale}}
=== Cercles ===
<nowiki>drawCircle( x, y, radius, color, border=1, degrees=360, startangle=0 )
drawCircleFilled( x, y, radius, color)</nowiki>
* '''x''', '''y''' - position du centre du cercle.
* '''radius''' - rayon du cercle (en pixel)
* '''border''' - épaisseur de la bordure entre 1 et 5 pixels
* '''color''' - couleur sous la forme d'un tuple {{fname|(r,g,b)}} respectant la codification RGB565.
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.drawCircle( 10, 10, 5, GREEN )
l.drawCircleFilled(120, 160, 60, RED)</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-40.jpg|320px]]
=== Arcs ===
La fonction {{fname|drawCircle}} dispose des paramètres '''degrees''' et '''startangle''' qui permettent de dessiner des arcs.
* '''degrees''' - nombres de degrés à dessiner
* '''startangle''' - angle de départ (l'angle 0 est au nord et suis le sens horlogique).
[[Fichier:MicroPython-ILI9341-Exemples-42.jpg|480px]]
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.drawCircle( 100, 100, 25, YELLOW, border=1, startangle=0, degrees=90 )
l.drawCircle( 100, 100, 25, RED, border=1, startangle=90, degrees=90 )
l.drawCircle( 100, 100, 25, GREEN, border=1, startangle=180, degrees=90 )
l.drawCircle( 100, 100, 25, CYAN, border=1, startangle=270, degrees=90 ) </nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-43.jpg|320px]]
=== Ovales ===
{{fname|drawOvalFilled()}} permet de dessiner un ovale (rempli)
<nowiki>drawOvalFilled( x, y, xradius, yradius, color)</nowiki>
* '''x''', '''y''' - position du centre du cercle.
* '''xradius''', '''yradius''' - rayon sur l'axe X et rayon sur l'axe Y (en pixel)
* '''color''' - couleur sous la forme d'un tuple {{fname|(r,g,b)}} respectant la codification RGB565.
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.drawOvalFilled(120, 160, 60, 120, BLUE)</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-30.jpg|480px]]
[[Fichier:MicroPython-ILI9341-Exemples-41.jpg|320px]]
== todo ==
== Afficher une image ==
Nous l'avons déjà vu dans les premiers pas, il est possible d'afficher une image BMP (au format RGB565) sur l'écran à l'aide de la fonction {{fname|renderBmp()}}.
Image qui soit être disponible dans le sous répertoire '''images''' de la carte PyBoard
[[Fichier:MicroPython-ILI9341-Installer-11.jpg|800px]]
<nowiki>renderBmp(filename, pos=None, cached=True, bgcolor=None)</nowiki>
* '''filename''' - nom de l'image (nom de fichier) à afficher (eg: test.bmp)
* '''pos''' - tuple {{fname|(x,y)}} du coin inférieur gauche de l'image par rapport au coin inférieur gauche de l'écran.
* '''bgcolor''' - couleur de fond (optionnel), tuple {{fname|(r,g,b)}} respectant la codification RGB565.
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.fillMonocolor( GREEN )
l.renderBmp( 'test.bmp' )</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-51.jpg|320px]]
<nowiki>from lcd import *
l = LCD( rate=21000000 )
l.renderBmp( 'test.bmp', pos=(50,15), bgcolor=RED )</nowiki>
[[Fichier:MicroPython-ILI9341-Exemples-52.jpg|320px]]
Attention:
* décalé de 50px (axe X) par rapport au bord gauche
* décalé de 10px (axe Y) par rapport ab bord inférieur de l'écran (depuis le bord inférieur de l'image).
== A explorer ==
Voici quelques fonctions que vous pouvez explorer dans la bibliothèque.
<nowiki>image_caching_demo()
l.fillMonocolor(WHITE)
l.charsTest(BLACK)
pyb.delay(500)
l.renderImageTest()
pyb.delay(500)
l.fillMonocolor(BLACK)
l.renderBmp('MP_powered.bmp')</nowiki>
{{MicroPython-ILI9341-TRAILER}}
{{MicroPython-ILI9341-TRAILER}}