- Allora, cos'è questo codice QR?
- Generare il tuo codice QR
- Conversione del formato PNG in BMP
- Converti l'immagine BMP in una matrice di codici HEX
- Schema elettrico
- Spiegazione del codice
Il codice "Risposta rapida" o abbreviato come codice QR è diventato una parte essenziale delle nostre vite digitali, è probabile che tu abbia già inconsciamente familiarità con loro ormai probabilmente hai vagato per il tuo negozio di alimentari locale, o forse lo sei leggendo il tuo libro preferito, o forse stai effettuando un pagamento online con Google Pay, PhonePe o Paytm, o navigando sul web, ecc. (Suppongo che potrei andare avanti e avanti con esempi eh?) attraverso questa strana cosa quadrata e il pensiero, cos'è questa cosa quadrata comunque e se non hai… beh, non preoccuparti, prima o poi succederà, quindi per capire meglio l'argomento faremo un piccolo progetto divertente con Arduino e OLED e demistificare le seguenti cose:
- Concetto di base del codice QR.
- Come funziona.
- Come creare il tuo codice QR personale usando Arduino.
- E infine, visualizzalo su uno schermo OLED (SSD1306).
Allora, cos'è questo codice QR?
Il codice QR (codice Quick Response) è un codice 2D a matrice per la lettura di dati ad alta velocità, sviluppato da DENSO WAVE nel 1994 per l'industria automobilistica giapponese. Un codice QR comprime i dati in modo molto efficiente rispetto al codice a barre standard, per ottenere ciò utilizza quattro modalità di codifica standardizzate (numerica, alfanumerica, byte / binario e kanji), la tecnologia è stata resa "open source" ovvero disponibile per tutti, quindi ha guadagnato popolarità molto rapidamente.I vantaggi significativi dei codici QR rispetto ai codici a barre tradizionali sono una maggiore capacità di dati e un'elevata tolleranza ai guasti.
Come funziona il codice QR?
I codici QR (e altri codici a matrice di dati) sono progettati per essere letti da strumenti speciali, non da esseri umani, quindi c'è solo una quantità specifica che possiamo capire studiando visivamente, sebbene ogni codice sia diverso in vari modi sebbene contengano alcuni comuni interessanti caratteristiche osservando il codice QR di circuitdigest.com ne studieremo alcune
- Pattern del Finder: grandi riquadri quadrati con una casella solida all'interno nei tre angoli del codice rendono facile confermare che si tratta di un codice QR poiché ce ne sono solo tre, quindi è abbastanza ovvio che in che modo è orientato il codice.
- Schema di allineamento: questo assicura che qualunque sia l'orientamento il codice può essere leggibile.
- Schema di temporizzazione: scorre orizzontalmente e verticalmente tra i tre schemi di ricerca , utilizzando queste linee il lettore può determinare la dimensione del codice.
- Informazioni sulla versione: attualmente esistono 40 diverse versioni dello standard del codice QR, questa sezione del codice determina la versione del codice QR che viene utilizzata, per la versione di marketing 1-7 utilizzata normalmente.
- Informazioni sul formato: i partner del formato dispongono di informazioni sulla tolleranza agli errori e sul mascheramento dei dati.
- Area dati: questa sezione del codice contiene tutti gli elementi di dati e il codice di correzione degli errori.
- Quit Zone: la spaziatura in ogni codice QR è obbligatoria per differenziare il codice dall'ambiente circostante.
L'immagine qui sotto ti darà un'idea chiara del codice
Altre sezioni del codice sono dati e codice di ridondanza.
Ci sono una serie di altre funzionalità e argomenti complicati di cui non parlerò in questo tutorial, se desideri leggere maggiori dettagli sul codice QR, segui questo tutorial sul codice QR di Tan Jin Soon, EPCglobal Singapore Council. Rivista di sintesi, 2008.
La specifica del codice QR
Dimensione simbolo |
Min. Cella 21x21 - Max. Cella 177x177 (con intervallo di 4 celle) |
|
Tipo di informazioni e volume |
Caratteri numerici |
7.089 caratteri al massimo |
Alfabeti, segni |
4.296 caratteri al massimo |
|
Binario (8 bit) |
2.953 caratteri al massimo |
|
Caratteri Kanji |
1.817 caratteri al massimo |
|
Efficienza di conversione |
Modalità caratteri numerici |
3,3 celle / carattere |
Modalità alfanumerica / segni |
5,5 celle / carattere |
|
Modalità binaria (8 bit) |
8 celle / carattere |
|
Modalità caratteri Kanji (13 bit) |
13 celle / carattere |
|
Correzione dell'errore funzionalità |
Livello L |
Circa 7% dell'area del simbolo ripristinata al massimo |
Livello M |
Circa Il 15% dell'area del simbolo ripristinato al massimo |
|
Livello Q |
Circa 25% dell'area del simbolo ripristinata al massimo |
|
Livello H |
Circa Il 30% dell'area del simbolo ripristinato al massimo |
|
Funzionalità di collegamento |
Possibile essere diviso in 16 simboli al massimo |
Generare il tuo codice QR
Segui i passaggi indicati di seguito per generare il tuo codice QR, in questo esempio creeremo un codice QR del nostro amato sito web Circuit Digest
Per generare un codice QR vai su questo sito web e se guardi nella parte superiore del sito puoi vedere un elenco di opzioni, in questo tutorial stiamo generando un codice QR per un URL, quindi andremo a
- Fare clic sulla scheda URL e incollare l'URL per il Circuit Digest nella sezione Immetti URL.
- Fare clic su Salva.
- Assegna un nome al file di output.
- Seleziona PNG come formato di file preferito.
- e fai clic su Salva.
L'immagine qui sotto ti darà un'idea chiara del processo
Il nostro più caro microcontrollore "Arduino" non è così intelligente da poter semplicemente compilare l'immagine PNG grezza e visualizzarla sul display OLED. Quindi, per visualizzare il codice QR sull'OLED dobbiamo seguire alcuni semplici passaggi e convertire l' immagine PNG in un array bitmap leggibile da Arduino. Questa conversione l'abbiamo fatta in precedenza mentre interfacciavamo SSD1306 OLED con Arduino e interfacciavamo LCD grafico con Arduino. Abbiamo anche interfacciato SSD1306 OLED con Raspberry Pi, ESP32, NodeMCU e molti altri microcontrollori. La conversione dell'array bitmap può essere eseguita nei due passaggi seguenti:
- Conversione del formato PNG in BMP.
- Converti l'immagine BMP in una matrice di codici HEX.
Conversione del formato PNG in BMP
Per convertire l'immagine PNG scaricata in immagine BMP, vai su questo sito Web e nella sezione del convertitore di immagini e
- Fare clic sul menu a discesa e selezionare
- Converti in BMP
- Fare clic su Vai
L'immagine qui sotto ti darà un'idea chiara del processo:
Ti verrà presentata una nuova pagina simile all'immagine qui sotto:
- Fare clic sulla scheda Scegli file e selezionare l'immagine scaricata
- Nelle impostazioni opzionali, digitare nel pannello la dimensione desiderata (stiamo usando un OLED 128x64)
- Fare clic sul pulsante Avvia conversione
Ti verrà presentata la seguente pagina e dopo pochi secondi la tua immagine convertita verrà scaricata se il download non si avvia automaticamente clicca sull'opzione scarica il tuo file:
Grande! Ora abbiamo il nostro file BMP, è il momento di convertirlo in un array di codici HEX leggibili da un Arduino.
Converti l'immagine BMP in una matrice di codici HEX
Per convertire l'immagine BMP scaricata in un array HEX, vai su questo sito Web e fai clic su Strumenti -> image2cpp
L'immagine qui sotto ti darà un'idea chiara del processo
Ti verrà presentata una schermata che ha quattro opzioni e le discuteremo in dettaglio
- Seleziona immagine
- Impostazioni immagine
- Anteprima
- Produzione
Seleziona la sezione dell'immagine
In questa sezione selezioneremo l'immagine che abbiamo appena convertito in BMP:
Sezione Impostazioni immagine
In questa sezione, imposteremo le opzioni di dimensione della tela, colore di sfondo, ridimensionamento e centro al valore richiesto.
- Dimensioni della tela (impostiamo su 128x64 perché stiamo usando un OLED con densità di 128x64 pixel).
- In questa sezione possiamo impostare il colore di sfondo dell'OLED (lo scegliamo bianco).
- Il ridimensionamento è impostato sulla dimensione originale.
- Infine, nell'opzione centrale fai clic sulle caselle di controllo orizzontale e verticale, questo farà apparire l'immagine al centro.
L'immagine qui sotto ti darà un'idea chiara
Sezione Anteprima
Nella sezione di anteprima possiamo vedere una chiara anteprima dell'immagine che verrà visualizzata nell'OLED come mostrato di seguito:
Sezione output
Nella sezione output genereremo e copieremo il codice generato, per farlo seguire i passaggi seguenti:
- Formato di output del codice (lo impostiamo come codice Arduino perché ne stiamo utilizzando uno).
- Identificatore (questa opzione imposta il nome per l'array generato, lo lasciamo predefinito così com'è).
- Modalità di disegno (impostiamo l'opzione della modalità di disegno su orizzontale).
- E infine, facciamo clic sul pulsante di generazione del codice per generare il codice di output finale.
L'immagine qui sotto ti darà un'idea chiara
Schema elettrico
L'immagine sottostante mostra le connessioni di interfacciamento tra Arduino Nano e SSD1306:
Pin di Arduino Nano |
PIN OLED |
GND |
GND |
3,3V |
VCC |
D13 |
CLK |
D11 |
MOSI |
D8 |
RES |
D9 |
SDC |
D10 |
CCS |
Spiegazione del codice
Per mostrare l'immagine sull'OLED abbiamo bisogno dell'aiuto di una libreria Arduino, che può essere scaricata da questo repository GitHub. Scarica la versione U8glib-1.19.1.zip della libreria e importala nell'IDE di Arduino. Se sei nuovo su Arduino, utilizza questo collegamento che descrive come importare una libreria. Nella sezione seguente modificheremo il codice per visualizzare l'array HEX generato in precedenza sull'OLED. Il codice completo con un video funzionante è fornito alla fine di questo articolo. Di seguito viene fornita la spiegazione dettagliata del codice.
Innanzitutto, includi la libreria scaricata.
#include "U8glib.h" // inclusa la libreria U8glib
Quindi definire tutti i pin necessari per 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 # D9fine: OC1 OLED_CSS_PIN 8 // Pin digitale Arduino D13: ICP1
Inizializza la libreria u8glib.
U8GLIB_SH1106_128X64 u8g (OLED_CLK_PIN, OLED_MOSI_PIN, OLED_RES_PIN, OLED_SDC_PIN, OLED_CSS_PIN);
Quindi includi l'array di immagini generato.
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, 0xff, 0xff, 0xf0, 0x00, 0x1c 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, 0x8, 0x7, 0x7 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, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xb1, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0x33, 0x98 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 funzione Draw viene utilizzata per disegnare l'immagine bitmap (codice QR) su OLED con l'aiuto della funzione u8g.drawBitmapP.
void draw (void) {// i comandi grafici per ridisegnare lo schermo completo dovrebbero essere posizionati qui u8g.drawBitmapP (0, 0, 16, 64, circuitdigest); ….. ……
Infine, nella funzione loop () , chiama tutte le procedure necessarie per costruire l'immagine su OLED
void loop () {u8g.firstPage (); // Una chiamata a questa procedura, segna l'inizio del ciclo di immagini. do {draw (); } while (u8g.nextPage ()); // Una chiamata a questa procedura, segna la fine del corpo del ciclo di immagini. // ricostruisce l'immagine dopo un certo ritardo (1000); }
Dopo aver completato il codice, collega Arduino alla porta USB del tuo computer, seleziona la tua porta COM e carica il codice. Se hai fatto tutto correttamente avrai un display funzionante con un codice QR su OLED.
Spero che questo progetto ti sia piaciuto e ti sia piaciuto imparare qualcosa di nuovo, continua a leggere continua ad imparare e ci vediamo la prossima volta.