Introduction ESP32 Lora OLED Display : 8 étapes

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

Ceci est une autre vidéo concernant l'introduction à l'ESP32 LoRa. Cette fois, nous parlerons plus précisément d'un affichage graphique (de 128x64 pixels). Nous allons utiliser la bibliothèque SSD1306 pour afficher des informations sur cet écran OLED et présenter un exemple d'animation utilisant des images XBM.

Étape 1: Ressources utilisées

1 Wi-Fi Heltec LoRa 32

Protoboard

Étape 2: L'affichage

L'écran utilisé sur la carte de développement est un OLED de 0.96 pouces.

Il a 128x64 et est monochrome.

Il dispose d'une communication I2C et est connecté à l'ESP32 via 3 fils:

SDA sur GPIO4 (pour les données)

SCL sur GPIO15 (pour l'horloge)

RST sur GPIO16 (pour la réinitialisation et le démarrage de l'affichage)

Étape 3: La bibliothèque SSD1306

Cela peut être trouvé avec l'ensemble de bibliothèques fournies par Heltec-Aaron-Lee.

Il a plusieurs fonctions pour écrire des chaînes, dessiner des lignes, des rectangles, des cercles et afficher des images.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Étape 4: Les fichiers d'animation et XBM

Nous utiliserons la fonction drawXbm de la bibliothèque pour afficher une animation.

Le format d'image XBM se compose d'un tableau de caractères où chaque élément représente textuellement un ensemble de pixels monochromes (1 bit chacun), via une valeur hexadécimale. Ceux-ci sont équivalents à un octet.

Étant donné que plusieurs caractères sont utilisés pour représenter un seul octet, ces fichiers ont tendance à être plus volumineux que ceux des formats actuellement adoptés. L'avantage est qu'ils peuvent être compilés directement sans nécessiter de traitement préalable.

En plus du tableau, deux paramètres qui déterminent la taille de l'image sont inclus.

Pour construire l'animation, nous avons besoin des images qui formeront les cadres.

Nous pouvons utiliser n'importe quel logiciel de retouche d'image pour travailler. Les seules précautions à prendre sont d'abord de conserver une taille compatible avec l'affichage et d'utiliser des fichiers monochromes.

Pour générer les fichiers, nous pouvons les dessiner ou importer des images. Ici, nous avons décidé d'éditer une image en couleur à l'aide de PaintBrush, et nous avons dessiné chacun des cadres

Image originale - 960x707 pixels - Format PNG

L'étape suivante consiste à le rendre monochrome en l'enregistrant en tant que bitmap monochrome.

Ensuite, nous le redimensionnons à une taille compatible avec l'affichage.

Portez une attention particulière aux unités de mesure. Dans ce cas, nous avons ajusté l'image pour qu'elle occupe toute la hauteur de l'écran (vertical = 64 pixels).

Avec l'image à la bonne taille, nous l'éditerons pour former les cadres. Ici, nous effaçons chaque arc de niveau de signal et les sauvegardons en tant que trames correspondantes.

Maintenant, nous devons convertir les fichiers BMP au format XBM.

Il existe plusieurs options logicielles qui peuvent effectuer cette conversion. Nous avons également choisi GIMP comme option d'éditeur.

Dans notre exemple, nous avons utilisé PaintBrush pour générer et modifier les fichiers. Cependant, chacun de ces processus aurait pu être effectué dans Gimp (ou tout autre éditeur).

Pour convertir, nous ouvrons d'abord le fichier.

Avec l'image ouverte, nous pouvons sélectionner Fichier => Exporter en tant que…

Dans la fenêtre Exporter l'image, nous devons changer l'extension du fichier de destination pour XBM. Gimp se chargera d'identifier le format souhaité et de présenter plus d'options…

Lors de l'exportation, Gimp présentera d'autres options. Nous pouvons laisser les valeurs par défaut.

Après avoir converti tous les fichiers, nous aurons quatre fichiers XBM, un pour chaque image.

Copiez-les maintenant dans le dossier du code source et renommez-les en changeant leurs extensions en.h.

Étape 5: Quitter les fichiers XBM

Nous pouvons ouvrir les fichiers XBM dans n'importe quel éditeur de texte, où nous verrons la matrice d'image et les informations de taille d'image qui ont déjà été définies.

Étape 6: Code source

Code source: Énoncés

Nous inclurons les bibliothèques nécessaires, ainsi que les fichiers image. On définit les positions de l'image et l'intervalle de transition. Nous pointons également les broches OLED connectées à l'ESP32. Enfin, nous créons et ajustons l'objet Display.

//Incluindo as bibliotecas necessárias#include #include "SSD1306.h" //Incluindo os arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" //définition de la position de l'image et de l'intervalle de transition #define posX 21 #define posY 0 #define intervalo 500 //Pinos do OLED estão conctados ao ESP32: I2C //OLED_SDA -- GPIO4 //OLED_SCL -- GPIO15 //OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 //O RST deve ser controlado por software SSD1306 display (0x3c, SDA, SCL, RST); //Cria e ajusta o Présentoir Objeto

Code source: configuration ()

Initialiser l'affichage et inverser verticalement l'écran. L'action est facultative.

void setup() { display.init(); //inicia ou afficher display.flipScreenVertically(); // inverser verticalement une telle (optionnel) }

Code source: boucle ()

La première chose à faire dans la boucle est d'effacer l'écran. Nous chargeons l'image 1 dans le tampon en utilisant les positions initiales posX et posY. On renseigne la taille de l'image avec frame1_width et frame1_height, et le nom du tableau contenant les bits de l'image. Nous montrons le tampon à l'écran et attendons un intervalle avant d'afficher l'image suivante.

boucle vide() { display.clear(); //limpa tela //carrega para o buffer o frame 1 //usando as posições iniciais posX e posY //informa o tamanho da imagem com frame1_width e frame1_height //informa o nome da matriz que contem os bits da imagem, no caso frame1_bits display.drawXbm(posX, posY, frame1_width, frame1_height, frame1_bits); //mostra o buffer no display display.display(); //aguarda um intervalo antes de mostrar o próximo frame delay(intervalo);

Nous répétons le processus pour tous les autres cadres.

//répéter ou traiter pour tous les cadres d'outros display.clear(); display.drawXbm(posX, posY, frame2_width, frame2_height, frame2_bits); display.display(); retard (intervalle); display.clear(); display.drawXbm(posX, posY, frame3_width, frame3_height, frame3_bits); display.display(); retard (intervalle); display.clear(); display.drawXbm(posX, posY, frame4_width, frame4_height, frame4_bits); display.display(); retard (intervalle); }

Étape 7: Faire le téléchargement de code

Avec l'IDE ouvert, ouvrez le fichier avec le code source en double-cliquant sur le fichier.ino, ou en allant dans le menu Fichier.

Avec Heltec connecté en USB, sélectionnez le menu Outils => Carte: "Heltec_WIFI_LoRa_32"

Toujours dans le menu Outils, sélectionnez le port COM où le Heltec est connecté.

Cliquez sur le bouton TÉLÉCHARGER…

… Et attendez la conclusion.

Étape 8: Fichiers

Téléchargez les fichiers:

PDF

INO