This month, we will continue playing with the SSD1302 OLED display. We’ve seen how to simply display text using the default font and how to use other fonts through the micropython-font-to-py library package. Let’s jump right in to some new things that we can do. Simple Graphics NOTE: The code presented here was developed using the ESP32/ESP8266. For the most part, the same code runs on the RPi Pico with a few changes in the import and I2C sections. In order to do simple graphics like lines, circles and so on, you need to download a graphics driver for the SSD1302. You can get it at https://github.com/adafruit/micropython-adafruit-gfx/blob/master/gfx.py. Be sure to copy it to your microcontroller device. 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. Now the necessary preliminaries are out of the way, we can concentrate on how to draw our graphics. Simple Line We’ll start with drawing a line from position 0,0 to position 128, bottom line of the display. If you are using a 128×64 OLED, that (of course) would be 64, but if you are using a 128×32, then you would need to use 32. The function call parameters for the line function is as follows: line(x0, y0, x1, y1, color) So we would code it as follows… graphics.line(0, 0, 127, oled_height, 1) 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 128×64, ce sera (bien sûr) 64, mais si vous utilisez un 128×32, 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 128×64 and 128×32 displays. Now, sleep for 2 seconds, then clear the display and we will move on to the next demo. sleep(2) oled.fill(0) Rectangle Next, we will draw a rectangle. The parameters for the rectangle function are: rect(x0, y0, width, height, color) We will draw a rectangle from 0,0 to 50,20. This way, it will work on either of the display devices. Once we show the rectangle, then, like above, we’ll sleep for 2 seconds and clear the display. So our code would be… graphics.rect(0, 0, 50, 20, 1) oled.show() sleep(2) oled.fill(0)
En utilisant oled_height comme paramètre y1, nous pouvons nous assurer que cela fonctionnera pour les écrans 128×64 et 128×32. 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 To create a filled rectangle we’ll use a very similar function fill_rect with the same parameters as before. graphics.fill_rect(0, 0, 50, 20, 1) oled.show() sleep(2) 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 are just as easy as rectangles. The functions are circle and fill_circle. They both use the same parameter list. circle(x0, y0, radius, color) fill_circle(x0, y0, radius, color) Again, we’ll use parameters that will work on either of the two OLED displays. # Circle (x0,y0,radius,colour) graphics.circle(64, 10, 10, 1) oled.show() sleep(2) oled.fill(0) # Filled Circle graphics.fill_circle(64, 10, 10, 1) oled.show() sleep(2) 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 The triangle functions are similar to the rect and circle functions, but have a third set of coordinates. triangle(x0, y0, x1, y1, x2, y2, color) fill_triangle(x0, y0, x1, y1, x2, y2, color) As with the last functions, we’ll use coordinates that will fit either size display. graphics.triangle(0,0,55,20,5,32,1) oled.show() sleep(2) oled.fill(0) oled.show() # Filled Triangle graphics.fill_triangle(0,0,55,20,5,32,1) oled.show() sleep(2) oled.fill(0) 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? The file on the repository for this section is called rnerd_ssd1306_esp32_graphics1.py for the ESP32/ESP8266 and pico_oled_graphics2.py for the Pico. Display Scrolling Sometimes, you want to make something nicer than a static display where the text simply overwrites itself. Having the text scroll in from the side or top and pause a few seconds, then scroll off the screen, gives your project a certain “WOW” factor. These days, we need a “WOW” factor to make our projects stand out. 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 As I do most of the time, we’ll start (top right) with the import section and, in this case, the I2C setup. As I said, if you were able to get the code above to work you can get this to work. Now that we have the text of the “screens” set up, we need to create a list of lists (middle right) that we will pass into the functions that we will be creating. Each entry in the list is set up as X (column), Y (row) and message. In the above code, we created three messages as “screen1”, two messages as “screen2” and 1 message as “screen3”. So, we just need to set up where we want each of the messages to show up. Each list shows up as a complete “screen”. At this point (bottom right), we can create our first support function. This one is called scroll_in_screen and will scroll the screen horizontally from left to right. Once everything has been passed into the display, the function is finished and you can call sleep for a period so the user can read the message. 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.
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 oled.fill(0) oled.show() Now that you have seen the functions that work from left to right and top to bottom, you might want to try to create functions that scroll from right to left and bottom to top on your own. I’ve taken up all the space that I should, so that’s all for this month. You can find the code for both projects (in both Pico and ESP formats) at my github repository at https://github.com/gregwa1953/FCM173_MicroThisMicroThat 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.