Outils pour utilisateurs

Outils du site


issue173:micro-ci_micro-la

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
issue173:micro-ci_micro-la [2021/09/29 08:15] d52frissue173:micro-ci_micro-la [2021/10/03 17:19] (Version actuelle) andre_domenech
Ligne 10: Ligne 10:
  
 I was able to gain a tremendous amount of information on using the SSD1302 from the web. One of the most useful websites was the Random Nerds Tutorials site. Their page for this section is https://randomnerdtutorials.com/micropython-ssd1306-oled-scroll-shapes-esp32-esp8266/ . This page also discusses how to do display scrolling, which we’ll discuss shortly.** I was able to gain a tremendous amount of information on using the SSD1302 from the web. One of the most useful websites was the Random Nerds Tutorials site. Their page for this section is https://randomnerdtutorials.com/micropython-ssd1306-oled-scroll-shapes-esp32-esp8266/ . This page also discusses how to do display scrolling, which we’ll discuss shortly.**
 +
 +Ce mois-ci, nous allons continuer à jouer avec l'écran OLED SSD1302. Nous avons vu comment afficher simplement du texte en utilisant la police par défaut et comment utiliser d'autres polices grâce au paquet de la bibliothèque micropython-font-to-py.
 +
 +Passons directement à de nouvelles choses que nous pouvons faire.
 +
 +Graphiques simples
 +
 +REMARQUE : Le code présenté ici a été développé avec l'ESP32/ESP8266. Pour l'essentiel, le même code fonctionne sur le RPi Pico avec quelques modifications dans les sections import et I2C.
 +
 +Afin de réaliser des graphiques simples comme des lignes, des cercles, etc., vous devez télécharger un pilote graphique pour le SSD1302. Vous pouvez l'obtenir sur https://github.com/adafruit/micropython-adafruit-gfx/blob/master/gfx.py. Assurez-vous de le copier sur votre microcontrôleur.
 +
 +J'ai pu obtenir une grande quantité d'informations sur l'utilisation du SSD1302 sur le Web. L'un des sites les plus utiles était le site Random Nerds Tutorials. Leur page pour cette section est https://randomnerdtutorials.com/micropython-ssd1306-oled-scroll-shapes-esp32-esp8266/. Cette page explique également comment faire défiler l'affichage, ce dont nous parlerons bientôt.
 +
  
 **We’ll start (right) with the normal import and I2C setup code… This is for the ESP32/ESP8266. **We’ll start (right) with the normal import and I2C setup code… This is for the ESP32/ESP8266.
Ligne 26: Ligne 39:
  
 oled.show()** oled.show()**
 +
 +Nous allons commencer (à droite) par le code normal d'importation et de configuration de I2C... Ceci est pour l'ESP32/ESP8266.
 +
 +Maintenant que les préliminaires nécessaires sont terminés, nous pouvons nous concentrer sur la façon de dessiner nos graphiques.
 +
 +Ligne simple
 +
 +Nous allons commencer par dessiner une ligne de la position 0,0 à la position 128, sur la ligne inférieure de l'écran. Si vous utilisez un OLED 128x64, ce sera (bien sûr) 64, mais si vous utilisez un 128x32, alors vous devrez utiliser 32. Les paramètres d'appel de la fonction line sont les suivants :
 +
 +line(x0, y0, x1, y1, color)
 +
 +Nous le coderons donc comme suit :
 +
 +graphics.line(0, 0, 127, oled_height, 1)
 +
 +oled.show()
 +
  
 **By using oled_height as our y1 parameter, we can ensure that this will work for both 128x64 and 128x32 displays. Now, sleep for 2 seconds, then clear the display and we will move on to the next demo. **By using oled_height as our y1 parameter, we can ensure that this will work for both 128x64 and 128x32 displays. Now, sleep for 2 seconds, then clear the display and we will move on to the next demo.
Ligne 48: Ligne 78:
  
 oled.fill(0)** oled.fill(0)**
 +
 +En utilisant oled_height comme paramètre y1, nous pouvons nous assurer que cela fonctionnera pour les écrans 128x64 et 128x32. Maintenant, sleep pendant 2 secondes, puis effacez l'écran et nous passerons à la démo suivante.
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
 +Rectangle
 +
 +Ensuite, nous allons dessiner un rectangle. Les paramètres de la fonction rectangle sont :
 +
 +rect(x0, y0, largeur, hauteur, couleur)
 +
 +Nous allons dessiner un rectangle de 0,0 à 50,20. De cette façon, il fonctionnera sur l'un ou l'autre des afficheurs. Une fois que nous avons affiché le rectangle, comme ci-dessus, nous allons dormir pendant 2 secondes et effacer l'affichage. Ainsi notre code sera :
 +
 +graphics.rect(0, 0, 50, 20, 1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
  
 **Filled Rectangle **Filled Rectangle
Ligne 60: Ligne 113:
  
 oled.fill(0)** oled.fill(0)**
 +
 +Rectangle rempli
 +
 +Pour créer un rectangle rempli, nous allons utiliser une fonction très similaire, fill_rect, avec les mêmes paramètres que précédemment.
 +
 +graphics.fill_rect(0, 0, 50, 20, 1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
  
 **Circles **Circles
Ligne 90: Ligne 156:
  
 oled.fill(0)** oled.fill(0)**
 +
 +Cercles
 +
 +Les cercles sont tout aussi simples que les rectangles. Les fonctions sont circle et fill_circle. Elles utilisent toutes deux la même liste de paramètres.
 +
 +circle(x0, y0, rayon, couleur)
 +
 +fill_circle(x0, y0, rayon, couleur)
 +
 +Encore une fois, nous utiliserons des paramètres qui fonctionneront sur l'un ou l'autre des deux écrans OLED.
 +
 +# Cercle (x0, y0, rayon, couleur)
 +
 +graphics.circle(64, 10, 10, 1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
 +# Cercle rempli
 +
 +graphics.fill_circle(64, 10, 10, 1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
  
 **Triangles **Triangles
Ligne 122: Ligne 219:
  
 oled.show()** oled.show()**
 +
 +Triangles
 +
 +Les fonctions triangle sont similaires aux fonctions rect et circle, mais possèdent un troisième ensemble de coordonnées.
 +
 +triangle(x0, y0, x1, y1, x2, y2, couleur)
 +
 +fill_triangle(x0, y0, x1, y1, x2, y2, couleur)
 +
 +Comme pour les dernières fonctions, nous utiliserons des coordonnées qui s'adapteront aux deux tailles d'écran.
 +
 +graphics.triangle(0,0,55,20,5,32,1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
 +oled.show()
 +
 +# Triangle rempli
 +
 +graphics.fill_triangle(0,0,55,20,5,32,1)
 +
 +oled.show()
 +
 +sleep(2)
 +
 +oled.fill(0)
 +
 +oled.show()
 +
  
 **Easy enough, right? **Easy enough, right?
Ligne 132: Ligne 262:
  
 I originally tested this code on the ESP32, but I was able to get it to run on the RPi Pico. The only thing you have to make sure of is the I2C setup. Between the information from last month and the information in the code above, you should have no problems getting things to work. Just in case you have forgotten, I got this demo from Random Nerds Tutorials web site. You can find the link in the text above.** I originally tested this code on the ESP32, but I was able to get it to run on the RPi Pico. The only thing you have to make sure of is the I2C setup. Between the information from last month and the information in the code above, you should have no problems getting things to work. Just in case you have forgotten, I got this demo from Random Nerds Tutorials web site. You can find the link in the text above.**
 +
 +C'est assez facile, non ?
 +
 +Sur le dépôt, le fichier pour cette section s'appelle rnerd_ssd1306_esp32_graphics1.py pour l'ESP32/ESP8266 et pico_oled_graphics2.py pour le Pico.
 +
 +Défilement de l'affichage
 +
 +Parfois, vous voulez faire quelque chose de plus agréable qu'un affichage statique où le texte est écrasé au fur et à mesure. Le défilement du texte depuis le côté ou le haut, suivi d'une pause de quelques secondes, puis une évacuation hors de l'écran, donne à votre projet un certain facteur "WOW". De nos jours, nous avons besoin d'un facteur "WOW" pour que nos projets se démarquent.
 +
 +À l'origine, j'ai testé ce code sur l'ESP32, mais j'ai réussi à le faire fonctionner sur le RPi Pico. La seule chose dont vous devez être sûr est la configuration de I2C. Entre les informations du mois dernier et celles du code ci-dessus, vous ne devriez avoir aucun problème pour que ça fonctionne. Au cas où vous l'auriez oublié, j'ai obtenu cette démo du site Web Random Nerds Tutorials. Vous pouvez trouver le lien dans le texte ci-dessus.
 +
  
 **Getting Started **Getting Started
Ligne 143: Ligne 284:
 Now that we have all of our support functions coded (final ones shown top right), we can start using them. Each demo portion is fairly long, so we’ll just loop three times. The original code (next page, on the left) had this as a forever loop.** Now that we have all of our support functions coded (final ones shown top right), we can start using them. Each demo portion is fairly long, so we’ll just loop three times. The original code (next page, on the left) had this as a forever loop.**
  
-*Once the demo is finished, clear the display.+Mise en route 
 + 
 +Comme je le fais la plupart du temps, nous allons commencer (en haut à droite) par la section d'importation et, dans ce cas, la configuration de I2C. Comme je l'ai dit, si vous avez réussi à faire fonctionner le code ci-dessus, vous pouvez faire fonctionner celui-ci. 
 + 
 +Maintenant que nous avons mis en place le texte des « écrans », nous devons créer une liste de listes (au milieu à droite) que nous passerons dans les fonctions que nous allons créer. Chaque entrée de la liste est configurée comme X (colonne), Y (ligne) et message. Dans le code ci-dessus, nous avons créé trois messages comme « screen1 », deux messages comme « screen2 » et un message comme « screen3 ». Il nous suffit donc de définir l'endroit où nous voulons que chacun des messages s'affiche. Chaque liste s'affiche comme un « écran » complet. 
 + 
 +À ce stade (en bas à droite), nous pouvons créer notre première fonction de support. Celle-ci s'appelle scroll_in_screen et fera défiler l'écran horizontalement de gauche à droite. Une fois que tout a été transmis à l'écran, la fonction est terminée et vous pouvez appeler sleep pendant quelques secondes afin que l'utilisateur puisse lire le message. 
 + 
 +Maintenant que nous avons codé toutes nos fonctions de support (les dernières en haut à droite), nous pouvons commencer à les utiliser. Chaque partie de la démo est assez longue, donc nous allons simplement boucler trois fois. Dans le code original (page suivante, à gauche), il s'agissait d'une boucle perpétuelle. 
 + 
 + 
 +**Once the demo is finished, clear the display.
  
 # Clear the OLED # Clear the OLED
Ligne 156: Ligne 308:
  
 Until next time, as always; stay safe, healthy, positive and creative!** Until next time, as always; stay safe, healthy, positive and creative!**
 +
 +Une fois la démo terminée, effacez l'écran.
 +
 +# Clear the OLED
 +
 +oled.fill(0)
 +
 +oled.show()
 +
 +Maintenant que vous avez vu les fonctions qui fonctionnent de gauche à droite et de haut en bas, vous pouvez essayer de créer des fonctions qui défilent de droite à gauche et de bas en haut.
 +
 +J'ai pris toute la place que je devais prendre et c'est tout pour ce mois-ci. Vous pouvez trouver le code des deux projets (aux formats Pico et ESP) dans mon dépôt github à l'adresse https://github.com/gregwa1953/FCM173_MicroThisMicroThat.
 +
 +Jusqu'à la prochaine fois, comme toujours ; restez en sécurité, en bonne santé, positif et créatif !
 +
 +
 +
 +// Textes en noir dans les encadrés : //
 +p. 33 :
 +**For the RPi Pico, I used GP8 and GP9 (physical pins 11 and 12) for the connection to the I2C bus. The code for the Pico will be…**
 +Pour le RPi Pico, j'ai utilisé GP8 et GP9 (picots physiques 11 et 12) pour les connexions au bus I2C. Le code pour le Pico sera :
 +
 +**From here the code for all three microcontrollers will be the same.**
 +À partir d'ici, le code est le même pour les 3 microcontrôleurs.
 +
 +p. 35 :
 +**At this point, let’s set up a few simple lines of text that will embody our “screens” that will be scrolled.**
 +Arrivé ici, paramétrons quelques simples lignes de texte qui peupleront nos « écrans » qui défileront.
 +
 +**The next function will take the data that is already on the screen and scroll it off the display towards the right side. This function has a speed parameter.**
 +Le fonction suivante prendra les données qui sont déjà à l'écran et les évacuera de l'afficheur par la droite. Cette fonction a un paramètre de vitesse.
 +
 +p. 36 :
 +**Here is the scroll vertically from top to bottom, pausing when the screen is full.**
 +Voici le déroulement vertical du haut vers le bas, avec un arrêt quand l'écran est plein.
 +
 +**This is the function that will scroll the data off the bottom of the screen.**
 +Voici la fonction qui évacuera les données par le bas de l'écran.
 +
 +**Finally, here is the continuous vertical scroll support function.**
 +Enfin, voici la fonction qui prend en charge le déroulement vertical continu.
 +
  
issue173/micro-ci_micro-la.1632896118.txt.gz · Dernière modification : 2021/09/29 08:15 de d52fr