- Alors, quel est ce code QR de toute façon?
- Générer votre propre code QR
- Conversion du PNG au format BMP
- Convertir l'image BMP en un tableau de codes HEX
- Schéma
- Explication du code
Le code "Quick Response" ou le code QR abrégé est devenu un élément essentiel de notre vie numérique, il est probable que vous les connaissiez déjà inconsciemment. Vous avez probablement déjà erré dans votre épicerie locale, ou peut-être êtes-vous en lisant votre livre préféré, ou même peut-être que vous effectuez un paiement en ligne avec Google Pay, PhonePe ou Paytm, ou que vous surfez sur le Web, etc. (je suppose que je pourrais continuer encore et encore avec des exemples, hein?) et vous êtes venu à travers cette chose carrée étrange et pensée, qu'est-ce que cette chose carrée de toute façon et si vous ne l'avez pas… eh bien, ne vous inquiétez pas, cela arrivera tôt ou tard, alors pour mieux comprendre le sujet, nous allons faire un petit projet amusant avec Arduino et OLED et démystifier les choses suivantes:
- Concept de base du code QR.
- Comment ça fonctionne.
- Comment créer votre propre code QR en utilisant Arduino.
- Et enfin, affichez-le sur un écran OLED (SSD1306).
Alors, quel est ce code QR de toute façon?
Le code QR (Quick Response code) est un code matriciel 2D pour la lecture de données à grande vitesse, développé par DENSO WAVE en 1994 pour l'industrie automobile du Japon. Un QR code compresse les données de manière très efficace par rapport au code-barres standard, pour y parvenir il utilise quatre modes d'encodage standardisés (numérique, alphanumérique, octet / binaire et kanji), la technologie a été rendue "open source" c'est-à-dire accessible à tous donc, il Les principaux avantages des codes QR par rapport aux codes à barres conventionnels sont une plus grande capacité de données et une grande tolérance aux pannes.
Comment fonctionne le code QR?
Les codes QR (et autres codes de matrice de données) sont conçus pour être lus par des outils spéciaux, pas par des humains, il n'y a donc qu'une quantité spécifique que nous pouvons comprendre en étudiant visuellement, bien que chaque code soit différent de différentes manières bien qu'ils contiennent quelques points communs intéressants fonctionnalités en observant le code QR circuitdigest.com nous en étudierons quelques-unes
- Modèles de recherche: De grandes cases carrées avec une case pleine à l'intérieur dans les trois coins du code permettent de confirmer facilement qu'il s'agit d'un code QR car il n'y en a que trois, il est donc assez évident de savoir dans quelle direction le code est orienté.
- Modèle d'alignement: Cela garantit que quelle que soit l'orientation, le code peut être lisible.
- Schéma de synchronisation: Ceci fonctionne horizontalement et verticalement entre les trois motifs de recherche , en utilisant ces lignes, le lecteur peut déterminer la taille du code.
- Informations sur la version: Il existe actuellement 40 versions différentes du standard de code QR, cette section du code détermine la version de code QR qui est utilisée, pour la version marketing 1-7 utilisée normalement.
- Informations sur le format: les partenaires de format ont des informations sur la tolérance d'erreur et le masquage des données.
- Zone de données: Cette section du code contient tous les éléments de données et le code de correction d'erreur.
- Zone de sortie: L'espacement dans chaque code QR est obligatoire afin de différencier le code de son environnement.
L'image ci-dessous vous donnera une idée claire du code
Les autres sections du code sont les données et le code de redondance.
Il existe un certain nombre d'autres fonctionnalités et sujets complexes dont je ne parlerai pas dans ce didacticiel.Si vous souhaitez lire plus de détails sur le code QR, veuillez suivre ce didacticiel sur le code QR par Tan Jin Soon, EPCglobal Singapore Council. Journal de synthèse, 2008.
La spécification du code QR
Taille du symbole |
Min. Cellule 21x21 - Max. Cellule 177x177 (avec intervalle de 4 cellules) |
|
Type et volume d'informations |
Caractères numériques |
7089 caractères au maximum |
Alphabets, signes |
4 296 caractères au maximum |
|
Binaire (8 bits) |
2953 caractères au maximum |
|
Caractères Kanji |
1817 caractères au maximum |
|
Efficacité de conversion |
Mode caractères numériques |
3,3 cellules / caractère |
Mode alphanumérique / signes |
5,5 cellules / caractère |
|
Mode binaire (8 bits) |
8 cellules / caractère |
|
Mode caractères kanji (13 bits) |
13 cellules / caractère |
|
Correction des erreurs Fonctionnalité |
Niveau L |
Environ. 7% de la zone de symbole restaurée au maximum |
Niveau M |
Environ. 15% de la zone de symbole restaurée au maximum |
|
Niveau Q |
Environ. 25% de la zone de symbole restaurée au maximum |
|
Niveau H |
Environ. 30% de la zone de symbole restaurée au maximum |
|
Fonctionnalité de liaison |
Possible d'être divisé en 16 symboles au maximum |
Générer votre propre code QR
Suivez les étapes mentionnées ci-dessous pour générer votre propre code QR, dans cet exemple, nous allons créer un code QR de notre site Web bien-aimé Circuit Digest
Pour générer un code QR, accédez à ce site Web et si vous regardez en haut du site Web, vous pouvez voir une liste d'options.Dans ce tutoriel, nous générons un code QR pour une URL, nous allons donc
- Cliquez sur l'onglet URL et collez l'URL du résumé du circuit dans la section Entrer l'URL.
- Cliquez sur enregistrer.
- Donnez un nom de fichier pour le fichier de sortie.
- Sélectionnez PNG comme format de fichier préféré.
- et cliquez sur Enregistrer.
L'image ci-dessous vous donnera une idée claire du processus
Notre plus cher microcontrôleur «Arduino» n'est pas assez intelligent pour pouvoir simplement compiler l'image PNG brute et l'afficher sur l'écran OLED. Ainsi, pour afficher le code QR sur l'OLED, nous devons suivre quelques étapes simples et convertir l' image PNG en un tableau bitmap lisible par Arduino. Cette conversion que nous avons précédemment effectuée lors de l'interfaçage du SSD1306 OLED avec Arduino et de l'interfaçage de l'écran LCD graphique avec Arduino. Nous avons également interfacé SSD1306 OLED avec Raspberry Pi, ESP32, NodeMCU et de nombreux autres microcontrôleurs. La conversion du tableau bitmap peut être effectuée en deux étapes ci-dessous:
- Conversion du PNG au format BMP.
- Convertissez l'image BMP en un tableau de codes HEX.
Conversion du PNG au format BMP
Pour convertir l'image PNG téléchargée en image BMP, accédez à ce site Web et dans la section convertisseur d'image et
- Cliquez sur le menu déroulant et sélectionnez
- Convertir en BMP
- Cliquez sur Go
L'image ci-dessous vous donnera une idée claire du processus:
Vous serez présenté avec une nouvelle page ressemblant à l'image ci-dessous:
- Cliquez sur l'onglet Choisir les fichiers et sélectionnez l'image téléchargée
- Dans les paramètres facultatifs, tapez la taille souhaitée du panneau (nous utilisons un OLED 128x64)
- Cliquez sur le bouton Démarrer la conversion
La page suivante vous sera présentée et après quelques secondes, votre image convertie sera téléchargée si le téléchargement ne démarre pas automatiquement, cliquez sur l'option de téléchargement de votre fichier:
Génial! Maintenant, nous avons notre fichier BMP, il est temps de le convertir en un tableau de codes HEX lisibles par un Arduino.
Convertir l'image BMP en un tableau de codes HEX
Pour convertir l'image BMP téléchargée en un tableau HEX, allez sur ce site Web et cliquez sur Outils -> image2cpp
L'image ci-dessous vous donnera une idée claire du processus
Un écran vous sera présenté avec quatre options et nous en discuterons en détail
- Sélectionnez une image
- Paramètres d'image
- Aperçu
- Production
Sélectionnez la section d'image
Dans cette section, nous sélectionnerons l'image que nous venons de convertir en BMP:
Section des paramètres d'image
Dans cette section, nous définirons la taille du canevas, la couleur d'arrière-plan, la mise à l'échelle et les options de centre à la valeur requise.
- Taille du canevas (nous avons mis à 128x64 car nous utilisons un OLED avec une densité de 128x64 pixels).
- Dans cette section, nous pouvons définir la couleur d'arrière-plan de l'OLED (nous le choisissons comme blanc).
- La mise à l'échelle est définie sur la taille d'origine.
- Enfin, dans l'option centrale, cliquez sur les cases à cocher horizontale et verticale, cela fera apparaître l'image au centre.
L'image ci-dessous vous donnera une idée claire
Section d'aperçu
Dans la section d'aperçu, nous pouvons voir un aperçu clair de l'image qui sera affichée dans l'OLED comme indiqué ci-dessous:
Section de sortie
Dans la section de sortie, nous allons générer et copier le code généré, pour ce faire, suivez les étapes ci-dessous:
- Format de sortie du code (nous le définissons comme code Arduino car nous en utilisons un).
- Identifiant (cette option définit le nom du tableau généré, nous le laissons par défaut tel quel).
- Mode de dessin (nous définissons l'option du mode de dessin sur horizontal).
- Et enfin, nous cliquons sur le bouton générer du code, cela générera le code de sortie final.
L'image ci-dessous vous donnera une idée claire
Schéma
L'image ci-dessous montre les connexions d'interfaçage entre Arduino Nano et SSD1306:
Arduino Nano Pin |
PIN OLED |
GND |
GND |
3,3 V |
VCC |
D13 |
CLK |
D11 |
MOSI |
D8 |
RES |
D9 |
SDC |
D10 |
CCS |
Explication du code
Pour afficher l'image sur l'OLED, nous avons besoin de l'aide d'une bibliothèque Arduino, qui peut être téléchargée à partir de ce référentiel GitHub. Téléchargez la version U8glib-1.19.1.zip de la bibliothèque et importez-la dans l'IDE Arduino. Si vous êtes nouveau sur Arduino, prenez l'aide de ce lien décrivant comment importer une bibliothèque. Dans la section ci-dessous, nous modifierons le code pour afficher le tableau HEX précédemment généré sur l'OLED. Le code complet avec une vidéo de travail est donné à la fin de cet article. L'explication détaillée du code est donnée ci-dessous.
Tout d'abord, incluez la bibliothèque téléchargée.
#include "U8glib.h" // y compris la bibliothèque U8glib
Définissez ensuite toutes les broches nécessaires pour OLED.
#define OLED_CLK_PIN 13 // Arduino Digital Pin D13: SCK #define OLED_MOSI_PIN 11 // Arduino Digital Pin D11: MOSI #define OLED_RES_PIN 10 // Arduino Digital Pin D10: SS #define OLED_SDC_PIN # 9 // Arduino Digital Pin D9: OC1A OLED_CSS_PIN 8 // Broche numérique Arduino D13: ICP1
Initialisez la bibliothèque u8glib.
U8GLIB_SH1106_128X64 u8g (OLED_CLK_PIN, OLED_MOSI_PIN, OLED_RES_PIN, OLED_SDC_PIN, OLED_CSS_PIN);
Incluez ensuite le tableau d'images généré.
const uint8_t circuitdigest PROGMEM = {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1c, 0x01, 0x87, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x0c, 0x01, 0x87, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0xf0, 0x7f, 0x31, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0xf0, 0x7f, 0x33, 0xff, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x81, 0x8f, 0x31,0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0x31, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xb1, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xc1, 0x98, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xc1, 0x98, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, …….. …… …..0xff, 0xff, …….. ………..0xff, 0xff, …….. ………..
La fonction Draw est utilisée pour dessiner l'image bitmap (code QR) sur OLED à l'aide de la fonction u8g.drawBitmapP.
void draw (void) {// Les commandes graphiques pour redessiner l'écran complet doivent être placées ici u8g.drawBitmapP (0, 0, 16, 64, circuitdigest); ….. ……
Enfin, dans la fonction loop () , appelez toutes les procédures nécessaires pour construire l'image sur OLED
boucle vide () {u8g.firstPage (); // Un appel à cette procédure, marque le début de la boucle d'image. faire {draw (); } while (u8g.nextPage ()); // Un appel à cette procédure, marque la fin du corps de la boucle d'image. // reconstruit l'image après un certain délai (1000); }
Après avoir terminé le code, branchez l'Arduino dans le port USB de votre ordinateur, sélectionnez votre port COM et téléchargez le code. Si vous avez tout fait correctement, vous aurez un écran fonctionnel avec un code QR sur OLED.
J'espère que vous avez aimé ce projet et que vous avez aimé apprendre quelque chose de nouveau, continuez à lire, continuez à apprendre et je vous verrai la prochaine fois.