Graphiques sur un écran SSD1306 I2C OLED 128x64 avec CircuitPython à l'aide d'un Itsybitsy M4 Express : 13 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

L'écran OLED SSD1306 est un petit écran graphique monochrome I2C, peu coûteux, largement disponible, avec 128x64 pixels, qui s'interface facilement (seulement 4 fils) aux cartes de développement à microprocesseur telles qu'un Raspberry Pi, Arduino ou Adafruit Itsybitsy M4 Express, CircuitPlayground Express ou d'autres appareils CircuitPython. Les pilotes peuvent être téléchargés à partir d'Internet.

Les routines graphiques pour Arduinos sont disponibles depuis un certain temps, mais pas pour les autres systèmes de développement.

Les pilotes de périphériques de base permettent aux utilisateurs de:

• Effacez l'écran en noir ou blanc. oled.fill(c)
• Écrire une chaîne de texte à l'écran à une position (x, y) spécifiée oled.text("Texte", x, y, c)
• Dessine un point à une position (x, y) spécifiée oled.pixel(x, y, c)
• Chargez un fichier image à l'écran. (Non utilisé dans ce projet)
• Mettre à jour l'affichage oled.show()

Ce Instructable démontrera, avec des procédures simples, comment dessiner, de manière interactive:

• lignes
• cercles
• boîtes creuses
• blocs solides
• caractères prédéfinis

J'utiliserai un Adafruit Itsybitsy M4 Express pour démontrer les méthodes mais le code, en Python, peut facilement être porté sur d'autres systèmes de développement.

J'ai choisi l'Itsybitsy M4 pour cette démonstration car il est peu coûteux, puissant, facile à programmer, comprend des entrées/sorties analogiques et numériques, a beaucoup de mémoire, a une documentation et des forums d'aide facilement localisés sur Internet, est très facile à configurer initialement et prend en charge CircuitPython, une version de Python idéale pour ceux qui découvrent le codage.

Une fois que vous avez configuré votre Itsybitsy et SSD1306, il s'agit d'une construction de maquette très simple. Il n'y a pas de saisie, tous les fichiers peuvent être téléchargés.

C'est un projet peu coûteux et facile à construire mais qui introduit quelques idées intermédiaires/avancées. J'espère que vous allez essayer. J'ai été impressionné par ce petit écran.

Étape 1: Ce dont nous avons besoin pour ce projet

Matériel:

• SSD1306 I2C mono affichage 128x64 pixels
• Itsybitsy M4 Express
• Câble microUSB vers USB - pour programmer la carte
• Planche à pain
• 1 potentiomètre 10K Ohm
• 1 bouton interrupteur
• fil de connexion - différentes couleurs peuvent aider
• Ordinateur (pour écrire le code et le télécharger) - un très vieil ordinateur portable fera l'affaire.

Logiciel:

Éditeur Mu - pour écrire le code et télécharger le script sur Itsybitsy

La configuration de Itsybitsy est expliquée ici:

La dernière version de CircuitPython:

Bibliothèques CircuitPython:

Éditeur Mu:

Étape 2: le circuit

C'est un circuit très simple à mettre en place. La page suivante illustre la planche à pain finie avec des fils colorés pour faciliter les choses.

Étape 3: Version Breadboard du Circuit

Il y a des rails d'alimentation en haut et en bas de la planche à pain. Avec le fil rouge, joignez les rails +ve ensemble. Avec du fil noir, joignez les rails -ve ensemble.

Reliez la broche 3V de l'Itsybitsy au rail +ve inférieur - fil rouge. (Colonne 12)

Joignez la broche G (GND) de l'Itsybitsy au rail supérieur -ve - fil noir. (Colonne 12)

Dans les colonnes 33 et 34, connectez les broches SSD1306 VCC et GND aux rails d'alimentation supérieurs.

Avec un fil rose, joignez les broches SCL ensemble.

Avec un fil gris, joignez les broches SDA ensemble.

Avec les fils rouge et noir, connectez les broches extérieures du potentiomètre aux rails d'alimentation supérieurs et avec le fil vert, connectez la broche centrale (essuie-glace) à A5 sur l'Itsybitsy.

Connectez un côté de l'interrupteur à bouton avec un fil violet à la broche 2 et avec un fil noir, connectez l'autre côté à un rail GND.

Étape 4: Chargement de la police

Téléchargez le fichier de police et faites-le glisser sur le lecteur CIRCUITPY. (C'est l'Itsybitsy.)

Double-cliquez sur le dossier lib et regardez la liste des pilotes que vous avez déjà chargés.

Étape 5: Ajout de pilotes supplémentaires

Vous aurez besoin des éléments suivants dans le dossier lib:

• simpleio.mpy
• adafruit_bus_device
• adafruit_framebuf.mpy
• adafruit_ssd1306.mpy

S'ils sont manquants, faites-les glisser dans le dossier de la dernière version disponible.

Vous êtes maintenant prêt à télécharger le script.

Une fois chargé dans l'éditeur Mu, vous pouvez l'enregistrer dans Itsybitsy sous le nom main.py.

Le programme parcourt une série de démonstrations de lignes, de cercles, d'un graphique à barres dynamique et affichant des caractères définis. Il suffit de tourner lentement le pot et d'appuyer sur le bouton et de le maintenir enfoncé pour contrôler l'affichage.

Les pages suivantes donnent plus d'informations sur le fonctionnement du programme.

Étape 6: Configurer les appareils

Cette première section charge toutes les bibliothèques et configure le SSD1306, le potentiomètre et le bouton interrupteur sur les bonnes broches.

Étape 7: définir des caractères et tracer des lignes horizontales et verticales

Cette section configure les caractères prédéfinis. Ils font 5 points de large et 8 points de haut. Chaque point de la définition dessine 4 points sur l'écran afin qu'ils s'affichent mieux.

Les lignes horizontales et verticales sont faciles à tracer avec une boucle. Vous devez juste vous rappeler que vous avez besoin du point supplémentaire à la fin. Une ligne de (0, 7) à (5, 7) aura besoin de 6 points: avec x égal à 0, 1, 2, 3, 4 et 5 tour à tour.

La commande de point de base est oled.pixel(x, y, color) - 0 est le noir et 1 est le blanc.

L'origine (0, 0) est en haut à gauche de l'écran, 0 - 127 pixels horizontalement (de gauche à droite) et 0 - 63 verticalement (de haut en bas).

Étape 8: Boîtes, blocs et lignes inclinées

Les boîtes sont construites à partir de lignes horizontales et verticales.

Les blocs sont construits à partir de plusieurs lignes horizontales.

Pour les lignes inclinées, nous vérifions d'abord que les coordonnées sont données le plus à gauche en premier. Sinon, nous les échangeons car la ligne sera tracée de gauche à droite.

Nous calculons ensuite la pente et l'utilisons pour définir la valeur y pour chaque valeur de x.

La procédure display(t) rend visible l'écran mis à jour et attend un court délai, t secondes.

Étape 9: Symbole de degré, alignement, graphique à barres et cercle

Le symbole du degré est créé à partir de 4 pixels.

La routine align() ajoute des espaces supplémentaires devant le nombre pour aligner à droite les valeurs courtes dans un espace fixe.

La routine graph(v) dessine un graphique à barres horizontales donnant le pourcentage sélectionné. La valeur est écrite à l'extrémité droite en utilisant 'T' pour représenter 100 (Ton ou Top).

Les cercles nécessitent une certaine trigonométrie, nous devons donc importer la bibliothèque mathématique au début du script. Nous utilisons sin, cos et radians pour calculer les décalages x et y par rapport au centre lorsqu'un rayon pivote de 90 degrés. Des points sont tracés dans chacun des quatre quadrants pour chaque calcul des décalages.

Étape 10: Collecte des déchets, titres et cercles

Ces instructions illustrent l'effacement de l'écran en noir et blanc, l'écriture de texte à l'écran et l'utilisation de la routine gc() 'garbage collection' pour libérer de l'espace. La valeur montre qu'il y a beaucoup d'espace pour un script beaucoup plus volumineux.

Le programme dessine alors des cercles avec un centre commun et avec des centres mobiles. Une routine assez rapide compte tenu de la quantité de calcul requise.

L'en-tête de la démo des lignes est écrit ensuite.

Étape 11: Démo de lignes

Cette routine donne vraiment un entraînement à la routine line(). Des lignes radiales sont tracées à partir de chacun des quatre coins de l'écran avec des espacements différents formant des motifs.

Étape 12: La boucle principale: graphique à barres et caractères définis

C'est la boucle principale du programme. Les valeurs du potentiomètre modifient les valeurs affichées et modifient la longueur du graphique à barres.

Si le bouton est maintenu enfoncé, les caractères définis sont inversés, tout comme 1/0 et Vrai/Faux. Cette boucle s'exécute assez lentement car dessiner les caractères prédéfinis est un processus lent. Vous pouvez accélérer les choses en commentant certains d'entre eux.

Il n'y a pas de capteur de température installé, pour garder cette démo simple, donc le '?' s'affiche à la place d'une valeur à la ligne 190.