Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
issue176:micro [2022/01/06 09:03] – d52fr | issue176:micro [2022/01/07 16:25] (Version actuelle) – andre_domenech |
---|
Oui, nous allons parler encore d'affichages pour nos projets de microcontrôleurs. Une fois de plus, nous utiliserons le SSD-1306 pour l'écran et, pour le microcontrôleur, nous reviendrons cette fois à notre ESP-32 générique. | Oui, nous allons parler encore d'affichages pour nos projets de microcontrôleurs. Une fois de plus, nous utiliserons le SSD-1306 pour l'écran et, pour le microcontrôleur, nous reviendrons cette fois à notre ESP-32 générique. |
| |
La raison de cet article est de prendre des fonctions graphiques « standards » et de les convertir en quelque chose qui peut être affiché sur un écran OLED SSD-1306 bicolore (noir et blanc). Ce n'est pas aussi simple qu'on pourrait le croire. Nous devrons utiliser GIMP ou PhotoShop pour effectuer la conversion, ce qui n'est pas très difficile, mais il y a quelques étapes à suivre dans l'ordre présenté pour accomplir cette étape très importante. Nous devrons également utiliser l'utilitaire mpfshell dont nous avons parlé dans le FCM#174 (partie 8 de la série Micro-ci Micro_là) pour transférer les fichiers images vers le microcontrôleur. La version utilisée à l'époque était la 0.9.2. | La raison de cet article est de prendre des fonctions graphiques « standards » et de les convertir en quelque chose qui peut être affiché sur un écran OLED SSD-1306 bicolore (noir et blanc). Ce n'est pas aussi simple qu'on pourrait le croire. Nous devrons utiliser GIMP ou PhotoShop pour effectuer la conversion, ce qui n'est pas très difficile, mais il y a quelques étapes à suivre, dans l'ordre présenté, pour accomplir cette étape très importante. Nous devrons également utiliser l'utilitaire mpfshell dont nous avons parlé dans le FCM n°174 (partie 8 de la série Micro-ci Micro_là) pour transférer les fichiers images vers le microcontrôleur. La version utilisée à l'époque était la 0.9.2. |
| |
| |
Avant de commencer, je dois remercier Martin Fitzpatrick pour son excellent article sur l'utilisation des fichiers PBM et le code micropython qui les prend en charge. Son site web est https://www.mfitzp.com/tutorials/displaying-images-oled-displays/ . | Avant de commencer, je dois remercier Martin Fitzpatrick pour son excellent article sur l'utilisation des fichiers PBM et le code micropython qui les prend en charge. Son site web est https://www.mfitzp.com/tutorials/displaying-images-oled-displays/ . |
| |
La première chose dont nous avons besoin, ce sont des fichiers images. Je vais utiliser les icônes météo que j'ai trouvées sur https://iconstore.co/icons/rns-weather-icons/. Le fichier à télécharger contient des images monochromes dans de nombreux formats. Pour faciliter l'utilisation, j'ai décidé d'utiliser les images du dossier PNG. Les 70 images sont des fichiers PNG monochromes d'une taille de 96x96 pixels. | La première chose dont nous avons besoin, ce sont des fichiers images. Je vais utiliser les icônes météo que j'ai trouvées sur https://iconstore.co/icons/rns-weather-icons/. Le fichier à télécharger contient des images monochromes dans de nombreux formats. Pour en faciliter l'utilisation, j'ai décidé d'utiliser les images du dossier PNG. Les 70 images sont des fichiers PNG monochromes d'une taille de 96x96 pixels. |
| |
L'étape suivante consiste à convertir les images que nous souhaitons au format PBM. Pour ce faire, nous allons utiliser GIMP. Ouvrez GIMP et chargez l'image que vous voulez. Nous allons utiliser le fichier weather_icon-47.png pour ce tutoriel. | L'étape suivante consiste à convertir les images choisies au format PBM. Pour ce faire, nous allons utiliser GIMP. Ouvrez GIMP et chargez l'image que vous voulez. Nous allons utiliser le fichier weather_icon-47.png pour ce tutoriel. |
| |
Comme l'image fait 96x96 pixels, et que notre écran fait au mieux 128x64, nous devrons choisir quelque chose de légèrement plus petit. Choisissons 50x50. Sélectionnez Image | Echelle et taille de l'image dans la barre de menu. | Comme l'image fait 96x96 pixels, et que notre écran fait au mieux 128x64, nous devrons choisir quelque chose de légèrement plus petit. Choisissons 50x50. Sélectionnez Image > Échelle et taille de l'image dans la barre de menu. |
| |
| |
Mettez en surbrillance la valeur de la Largeur et changez-la en 50. Ensuite, il suffit d'appuyer sur la touche {Tab} pour définir automatiquement la valeur Hauteur. Cliquez sur le bouton Mise à l'échelle pour effectuer la modification. | Mettez en surbrillance la valeur de la Largeur et changez-la en 50. Ensuite, il suffit d'appuyer sur la touche {Tab} pour définir automatiquement la valeur Hauteur. Cliquez sur le bouton Mise à l'échelle pour effectuer la modification. |
| |
Nous voulons maintenant inverser l'image pour que les pixels noirs deviennent blancs. Sélectionnez Couleurs | Inverser dans la barre de menus. Nous devons maintenant convertir l'image en une image de 1 bit par pixel. Pour ce faire, sélectionnez Image | Mode | Couleurs indexées dans la barre de menus. Vous verrez apparaître une boîte de dialogue qui ressemble à celle-ci. | Nous voulons maintenant inverser l'image pour que les pixels noirs deviennent blancs. Sélectionnez Couleurs > Inverser dans la barre de menus. Nous devons maintenant convertir l'image en une image de 1 bit par pixel. Pour ce faire, sélectionnez Image > Mode > Couleurs indexées dans la barre de menus. Vous verrez apparaître une boîte de dialogue qui ressemble à celle-ci. |
| |
Assurez-vous que vous avez sélectionné « Utiliser la palette noir et blanc (1 bit) » et « Supprimer les couleurs inutilisées et en double de la carte des couleurs ». Sélectionnez Floyd-Steinberg (Couleurs qui déteignent le moins) dans la liste déroulante Tramage des couleurs, puis cliquez sur le bouton Convertir. | Assurez-vous que vous avez sélectionné « Utiliser la palette noir et blanc (1 bit) » et « Supprimer les couleurs inutilisées et en double de la carte des couleurs ». Sélectionnez Floyd-Steinberg (Couleurs qui déteignent le moins) dans la liste déroulante Tramage des couleurs, puis cliquez sur le bouton Convertir. |
| |
Enfin, nous devons exporter l'image vers notre format de fichier .pbm. Sélectionnez Fichier | Exporter sous... dans la barre de menu, puis, dans la boîte de dialogue, changez l'extension .png en .pbm et cliquez sur le bouton Exporter. Une autre boîte de dialogue apparaît pour demander le type de formatage des données. Assurez-vous que l'option Raw est sélectionnée, puis cliquez sur le bouton Exporter. | Enfin, nous devons exporter l'image vers notre format de fichier .pbm. Sélectionnez Fichier > Exporter sous... dans la barre de menu, puis, dans la boîte de dialogue, changez l'extension .png en .pbm et cliquez sur le bouton Exporter. Une autre boîte de dialogue apparaît pour demander le type de formatage des données. Assurez-vous que l'option Raw est sélectionnée, puis cliquez sur le bouton Exporter. |
| |
| |
Now we will open the icon image file and do three readline calls. This gets the Magic Number, the Creator comment, and the dimension of the image from the image file header (we’ll talk about these in a moment), and finally the data of the image itself (middle right).** | Now we will open the icon image file and do three readline calls. This gets the Magic Number, the Creator comment, and the dimension of the image from the image file header (we’ll talk about these in a moment), and finally the data of the image itself (middle right).** |
| |
Votre image devrait maintenant ressembler à ceci. | Votre image devrait maintenant ressembler à ceci : |
| |
C'est tout pour cette partie. Ce n'était pas trop pénible - détaillé, mais pas douloureux. Maintenant, nous voulons télécharger cette image sur notre microcontrôleur. Encore une fois, j'utilise mpfshell pour le faire (voir ma note vers le bas de l'article sur l'utilisation de mpfshell). Ensuite, nous allons regarder notre code pour l'afficher sur l'écran OLED. Nous nommerons notre fichier graphx32.py car nous l'utilisons sur un microcontrôleur générique ESP-32. | C'est tout pour cette partie. Ce n'était pas trop pénible - détaillé, mais pas douloureux. Maintenant, nous voulons télécharger cette image sur notre microcontrôleur. Encore une fois, j'utilise mpfshell pour le faire (allez voir ma note vers le bas de l'article sur l'utilisation de mpfshell). Ensuite, nous allons regarder notre code pour l'afficher sur l'écran OLED. Nous nommerons notre fichier graphx32.py, car nous l'utilisons sur un microcontrôleur générique ESP-32. |
| |
Comme toujours, nous devons importer certaines bibliothèques. Nous avons besoin des bibliothèques ssd1306 et framebuf, ainsi que des bibliothèques SoftI2C et Pin de la bibliothèque machine. Ensuite, nous devons définir l'objet display pour l'affichage (en haut à droite). | Comme toujours, nous devons importer certaines bibliothèques. Nous avons besoin des bibliothèques ssd1306 et framebuf, ainsi que des bibliothèques SoftI2C et Pin de la bibliothèque machine. Ensuite, nous devons définir l'objet display pour l'affichage (en haut à droite). |
| |
Maintenant, nous allons ouvrir le fichier image de l'icône et faire trois appels readline. Cela permet d'obtenir le numéro magique, le commentaire du créateur et la dimension de l'image à partir de l'en-tête du fichier image (nous en parlerons dans un moment), et enfin les données de l'image elle-même (au milieu à droite). | Maintenant, nous allons ouvrir le fichier image de l'icône et faire trois appels readline. Cela permet d'obtenir le nombre magique, le commentaire du créateur et la dimension de l'image à partir de l'en-tête du fichier image (nous en parlerons dans un moment), et enfin les données de l'image elle-même (au milieu à droite). |
| |
| |
Les dernières choses que nous devons faire sont de charger les données de l'image (sans les informations d'en-tête) dans framebuffer, de remplir l'écran avec du noir, de « bliter » (par doublement du Framebuffer) les données à la position souhaitée et d'appeler la méthode show de l'écran. Le 50,50 de la première ligne de la section suivante fait référence à la taille de l'image. Si elle n'est pas 50x50, définissez-la à la taille correcte (en bas à droite). | Les dernières choses que nous devons faire sont de charger les données de l'image (sans les informations d'en-tête) dans framebuffer, de remplir l'écran avec du noir, de « bliter » (par doublement du Framebuffer) les données à la position souhaitée et d'appeler la méthode show de l'écran. Le 50,50 de la première ligne de la section suivante fait référence à la taille de l'image. Si elle n'est pas 50x50, définissez-la à la taille correcte (en bas à droite). |
| |
P4 est l'identifiant qui assure que le fichier est bien un fichier PBM. (Il existe un autre format PBM qui utilise P1, qui indique un fichier "Plain PBM"). La deuxième ligne, comme vous pouvez le voir, est un commentaire qui indique que le fichier a été créé par GIMP. Enfin, vous pouvez voir que les dimensions de l'image sont, comme nous nous y attendions, de 50 x 50 pixels. Cette information sera importante si vous ne vous souvenez pas de la taille du fichier image. | P4 est l'identifiant qui assure que le fichier est bien un fichier PBM. (Il existe un autre format PBM qui utilise P1, qui indique un fichier « Plain PBM »). La deuxième ligne, comme vous pouvez le voir, est un commentaire qui indique que le fichier a été créé par GIMP. Enfin, vous pouvez voir que les dimensions de l'image sont, comme nous nous y attendions, de 50 x 50 pixels. Cette information sera importante si vous ne vous souvenez pas de la taille du fichier image. |
| |
Lorsque vous exécutez le programme, votre affichage devrait ressembler à ceci. | Lorsque vous exécutez le programme, votre affichage devrait ressembler à ceci : |
| |
L'utilisation de cette méthode est (à mon avis) bien meilleure que la conversion des images en bytearray. L'utilisation de la méthode du fichier PBM nécessite quelques lignes de code supplémentaires, mais je la trouve beaucoup plus facile à utiliser. | L'utilisation de cette méthode est (à mon avis) bien meilleure que la conversion des images en bytearray. L'utilisation de la méthode du fichier PBM nécessite quelques lignes de code supplémentaires, mais je la trouve beaucoup plus facile à utiliser. |
Lorsque vous exécutez le programme, il ne devrait prendre qu'un instant pour se terminer et vous aurez une belle image de 32 x 32 au format PBM. | Lorsque vous exécutez le programme, il ne devrait prendre qu'un instant pour se terminer et vous aurez une belle image de 32 x 32 au format PBM. |
| |
Il y a un petit problème avec le fichier que nous avons créé en utilisant la bibliothèque PIL. Il ne semble pas y avoir de moyen de définir le commentaire du créateur dans l'en-tête du fichier image. Par conséquent, nous devons apporter une petite modification à notre fichier micropython pour gérer l'absence de commentaire. Nous devons changer le code « with open » par le suivant (en bas à gauche)... | Il y a un petit problème avec le fichier que nous avons créé en utilisant la bibliothèque PIL. Il ne semble pas y avoir de moyen de définir le commentaire du créateur dans l'en-tête du fichier image. Par conséquent, nous devons apporter une petite modification à notre fichier micropython pour gérer l'absence de commentaire. Nous devons changer le code « with open » par le suivant (en bas à gauche). |
| |
| |
Puisque le commentaire d'en-tête (selon les spécifications que j'ai pu trouver) commence toujours par un #, nous pouvons simplement vérifier la valeur de la deuxième ligne lue pour voir si elle commence par le symbole dièse. Si c'est le cas, nous lisons simplement la ligne suivante. Si ce n'est pas le cas, il ne faut pas essayer de lire une autre ligne. Il n'y aura que deux lignes dans l'en-tête, pas trois. Si nous essayons d'en lire trois et que le commentaire n'existe pas, la partie données du fichier sera courte et donc corrompue. En utilisant le schéma ci-dessus, les deux cas seront traités correctement. | Puisque le commentaire d'en-tête (selon les spécifications que j'ai pu trouver) commence toujours par un #, nous pouvons simplement vérifier la valeur de la deuxième ligne lue pour voir si elle commence par le symbole dièse. Si c'est le cas, nous lisons simplement la ligne suivante. Si ce n'est pas le cas, il ne faut pas essayer de lire une autre ligne. Il n'y aura que deux lignes dans l'en-tête, pas trois. Si nous essayons d'en lire trois et que le commentaire n'existe pas, la partie données du fichier sera courte et donc corrompue. En utilisant le schéma ci-dessus, les deux cas seront traités correctement. |
| |
Puisque la nouvelle image ne fait que 32x32, assurez-vous de changer la ligne qui charge les données dans frame buffer en... | Puisque la nouvelle image ne fait que 32x32, assurez-vous de changer la ligne qui charge les données dans framebuffer en : |
| |
fbuf = framebuf.FrameBuffer(data, 32, 32, framebuf.MONO_HLSB) | fbuf = framebuf.FrameBuffer(data, 32, 32, framebuf.MONO_HLSB) |
J'ai placé tout le code de l'article de ce mois-ci, ainsi que quelques exemples d'images, sur mon dépôt github à https://github.com/gregwa1953/FCM176_MicroThisMicroThat. | J'ai placé tout le code de l'article de ce mois-ci, ainsi que quelques exemples d'images, sur mon dépôt github à https://github.com/gregwa1953/FCM176_MicroThisMicroThat. |
| |
Pour faire fonctionner le code ci-dessus sur le RPi Pico, j'ai dû faire très peu de changements - vous pouvez trouver le fichier de code dans le dépôt zippé sous le nom de graphxPico.py. | Pour faire fonctionner le code ci-dessus sur le RPi Pico, j'ai dû faire très peu de changements, vous pouvez trouver le fichier de code dans le dépôt zippé sous le nom de graphxPico.py. |
| |
J'espère que vous, votre famille et vos amis passerez de bonnes fêtes de fin d'année. | J'espère que vous, votre famille et vos amis passerez de bonnes fêtes de fin d'année. |
**I mentioned the Magic number, the Creator comment, and the Dimensions in the header. Here is what gets printed in the Thonny REPL when the program runs.** | **I mentioned the Magic number, the Creator comment, and the Dimensions in the header. Here is what gets printed in the Thonny REPL when the program runs.** |
| |
J'ai mentionné le numéro magique, le commentaire du créateur et les dimensions dans l'en-tête. Voici ce qui s'affiche dans le REPL de Thonny lorsque le programme s'exécute. | J'ai mentionné le nombre magique, le commentaire du créateur et les dimensions dans l'en-tête. Voici ce qui s'affiche dans le REPL de Thonny lorsque le programme s'exécute. |
| |
| |
NOTE SUR L'UTILISATION DE MPFSHELL | NOTE SUR L'UTILISATION DE MPFSHELL |
| |
Lorsque j'ai développé le projet de ce mois-ci, j'ai utilisé la version 0.9.2 de mpfshell sous Python 3.7.4. Ceci est également vrai pour mon environnement lorsque j'ai écrit l'article sur l'utilisation de mpfshell dans le FCM n° 174. Cependant, ce mois-ci, j'ai essayé d'utiliser mpfshell sous Python 3.8.11 et il ne voulait pas se connecter au microcontrôleur ESP32. Comme j'étais pressé de rédiger l'article, j'ai continué à utiliser Python 3.7.4 sans problème. Lorsque j'ai transmis une première version de l'article et du code source à mon ami Halvard en Norvège, il a rencontré des problèmes avec mpfshell en utilisant une version plus récente de Python. J'ai fait quelques recherches sur le dépôt github de mpfshell et j'ai trouvé que d'autres personnes avaient des problèmes sur diverses versions de Linux en utilisant la version 0.9.2 sous Python 3.8 et plus, mais mpfshell 0.9.1 semblait bien fonctionner pour eux. J'ai passé quelques heures à faire des tests dans des environnements virtuels en utilisant mpfshell 0.9.1 sous les versions 3.7.4, 3.8.10, 3.9.5 et 3.10.0 de Python (grâce à pyenv), et tout a bien fonctionné et j'ai pu me connecter non seulement à l'ESP8266 (le seul microcontrôleur officiellement supporté) mais aussi à l'ESP32 et au RPi Pico. Donc, si vous avez des problèmes pour vous connecter à votre microcontrôleur en utilisant mpfshell, vous pouvez utiliser pip (ou pip3) pour désinstaller mpfshell puis installer mpfshell version 0.9.1. Cela fonctionne tout à fait bien. La seule chose à changer est la commande open pour se connecter au microcontrôleur via la liaison série. Au lieu d'utiliser « open /dev/ttyUSB0 » (ou n'importe quel port série que vous utiliseriez), utilisez « open ttyUSB0 » (ou votre port série approprié) pour vous connecter. Cela permet d'économiser quelques frappes au clavier, non ? L'ESP8266 et l'ESP32 se connectent tous deux sur ma machine sous /dev/ttyUSB0 et la RPi Pico se connecte sous /dev/ttyACM0. | Lorsque j'ai développé le projet de ce mois-ci, j'ai utilisé la version 0.9.2 de mpfshell sous Python 3.7.4. Ceci est également vrai pour mon environnement lorsque j'ai écrit l'article sur l'utilisation de mpfshell dans le FCM n° 174. Cependant, ce mois-ci, j'ai essayé d'utiliser mpfshell sous Python 3.8.11 et il ne voulait pas se connecter au microcontrôleur ESP32. Comme j'étais pressé de rédiger l'article, j'ai continué à utiliser Python 3.7.4 sans problème. Lorsque j'ai transmis une première version de l'article et du code source à mon ami Halvard en Norvège, il a rencontré des problèmes avec mpfshell en utilisant une version plus récente de Python. J'ai fait quelques recherches sur le dépôt github de mpfshell et j'ai trouvé que d'autres personnes avaient des problèmes sur diverses versions de Linux en utilisant la version 0.9.2 sous Python 3.8 et plus, mais mpfshell 0.9.1 semblait bien fonctionner pour eux. J'ai passé quelques heures à faire des tests dans des environnements virtuels en utilisant mpfshell 0.9.1 sous les versions 3.7.4, 3.8.10, 3.9.5 et 3.10.0 de Python (grâce à pyenv), et tout a bien fonctionné. J'ai pu me connecter non seulement à l'ESP8266 (le seul microcontrôleur officiellement supporté) mais aussi à l'ESP32 et au RPi Pico. Donc, si vous avez des problèmes pour vous connecter à votre microcontrôleur en utilisant mpfshell, vous pouvez utiliser pip (ou pip3) pour désinstaller mpfshell puis installer mpfshell version 0.9.1. Cela fonctionne tout à fait bien. La seule chose à changer est la commande open pour se connecter au microcontrôleur via la liaison série. |
| |
| Au lieu d'utiliser « open /dev/ttyUSB0 » (ou n'importe quel port série que vous utiliseriez), utilisez « open ttyUSB0 » (ou votre port série approprié) pour vous connecter. Cela permet d'économiser quelques frappes au clavier, non ? L'ESP8266 et l'ESP32 se connectent tous deux sur ma machine sous /dev/ttyUSB0 et la RPi Pico se connecte sous /dev/ttyACM0. |
| |
Jusqu'à la prochaine fois, comme toujours ; restez en sécurité, en bonne santé, positif et créatif ! | Jusqu'à la prochaine fois, comme toujours ; restez en sécurité, en bonne santé, positif et créatif ! |
| |
| |