Gere um código qr usando o arduino e exiba-o no ssd1306 oled

O código de "Resposta Rápida" ou abreviado como código QR tornou-se uma parte essencial de nossas vidas digitais, as chances são de que você já está subconscientemente familiarizado com eles agora, você provavelmente está vagando em torno de sua mercearia local, ou talvez esteja lendo seu livro favorito, ou mesmo possivelmente você está fazendo um pagamento online com Google Pay, PhonePe ou Paytm, ou navegando na web, etc. (suponho que eu poderia continuar e continuar com exemplos, hein?) e por acaso você veio através dessa coisa quadrada de aparência estranha e pensamento, o que é essa coisa quadrada afinal e se você não… bem, não se preocupe, isso vai acontecer mais cedo ou mais tarde, então para entender melhor o assunto, vamos fazer um pequeno projeto divertido com Arduino e OLED e desmistificar as seguintes coisas:

• Conceito básico do código QR.
• Como funciona.
• Como fazer seu próprio código QR usando o Arduino.
• E, finalmente, exiba-o em uma tela OLED (SSD1306).

Então, o que é esse QR Code?

O código QR (código de resposta rápida) é um código 2D de matriz para leitura de dados em alta velocidade, desenvolvido pela DENSO WAVE em 1994 para a indústria automotiva do Japão. Um código QR comprime dados de forma muito eficiente em comparação com o código de barras padrão, para conseguir isso ele usa quatro modos de codificação padronizados (numérico, alfanumérico, byte / binário e kanji), a tecnologia foi feita "open source", ou seja, disponível para todos, então, ganhou popularidade muito rapidamente.Vantagens significativas dos códigos QR sobre os códigos de barras convencionais são a maior capacidade de dados e alta tolerância a falhas.

Como funciona o código QR?

Os códigos QR (e outros códigos de matriz de dados) são projetados para serem lidos por ferramentas especiais, não por humanos, então há apenas uma quantidade específica que podemos entender estudando visualmente, embora cada código seja diferente de várias maneiras, embora contenham alguns interessantes recursos, observando o código QR circuitdigest.com, estudaremos alguns deles

1. Padrões do Finder: grandes caixas quadradas com uma caixa sólida dentro dos três cantos do código facilitam a confirmação de que é um código QR, uma vez que existem apenas três deles, então é bastante óbvio a maneira como o código é orientado.
2. Padrão de alinhamento: Isso garante que qualquer que seja a orientação, o código pode ser legível.
3. Padrão de tempo: é executado horizontalmente e verticalmente entre os três padrões de localização , usando essas linhas o leitor pode determinar o tamanho do código.
4. Informações da versão: Existem atualmente 40 versões diferentes do padrão do código QR, esta seção do código determina a versão do código QR que está sendo usada, para a versão de marketing 1-7 usada normalmente.
5. Informações de formato: os parceiros de formato possuem informações sobre tolerância a erros e mascaramento de dados.
6. Área de dados: esta seção do código contém todos os elementos de dados e o código de correção de erros.
7. Zona de saída: O espaçamento em cada código QR é obrigatório para diferenciar o código de seus arredores.

A imagem abaixo lhe dará uma ideia clara sobre o código

Outras seções do código são dados e código de redundância.

Há uma série de outros recursos e tópicos complicados que não irei discutir neste tutorial. Se você quiser ler mais detalhes sobre o código QR, siga este tutorial do QR Code de Tan Jin Soon, EPCglobal Singapore Council. Synthesis Journal, 2008.

A especificação do código QR

Tamanho do Símbolo	Min. Célula de 21 x 21 - máx. 177x177 células (com intervalo de 4 células)
Tipo e volume de informação	Caracteres numéricos	7.089 caracteres no máximo
Alfabetos, Sinais	4.296 caracteres no máximo
Binário (8 bits)	2.953 caracteres no máximo
Personagens Kanji	1.817 caracteres no máximo
Eficiência de conversão	Modo de caracteres numéricos	3,3 células / personagem
Modo alfanumérico / sinais	5,5 células / personagem
Modo Binário (8 bits)	8 células / personagem
Modo de caracteres Kanji (13 bits)	13 células / personagem
Correção de erros funcionalidade	Nível L	Aproximadamente. 7% da área do símbolo restaurada no máximo
Nível M	Aproximadamente. 15% da área do símbolo restaurada no máximo
Nível Q	Aproximadamente. 25% da área do símbolo restaurada no máximo
Nível H	Aproximadamente. 30% da área do símbolo restaurada no máximo
Funcionalidade de ligação	Possível ser dividido em 16 símbolos no máximo

Gerando seu próprio código QR

Siga as etapas mencionadas abaixo para gerar seu próprio código QR, neste exemplo, vamos fazer um código QR de nosso amado site Circuit Digest

Para gerar um código QR vá a este site e se você olhar na parte superior do site você pode ver uma lista de opções, neste tutorial estamos gerando um código QR para uma URL, então vamos

1. Clique na guia URL e cole o URL do Circuit Digest na seção Inserir URL.
2. Clique em salvar.
3. Dê um nome de arquivo para o arquivo de saída.
4. Selecione PNG como nosso formato de arquivo preferido.
5. e clique em salvar.

A imagem abaixo lhe dará uma ideia clara sobre o processo

Nosso querido microcontrolador “Arduino” não é inteligente o suficiente para poder apenas compilar a imagem PNG bruta e exibi-la no display OLED. Portanto, para exibir o código QR no OLED, precisamos seguir alguns passos simples e converter a imagem PNG em um array de bitmap legível pelo Arduino. Esta conversão foi feita anteriormente durante a interface do SSD1306 OLED com o Arduino e a interface do LCD gráfico com o Arduino. Também conectamos SSD1306 OLED com Raspberry Pi, ESP32, NodeMCU e muitos outros microcontroladores. A conversão da matriz de bitmap pode ser feita nas duas etapas abaixo:

1. Converter o formato PNG em BMP.
2. Converta a imagem BMP em uma matriz de códigos HEX.

Converter o formato PNG para BMP

Para converter a imagem PNG baixada em imagem BMP, vá a este site e na seção de conversor de imagem e

1. Clique no menu suspenso e selecione
2. Converter para BMP
3. Clique Go

A imagem abaixo lhe dará uma ideia clara sobre o processo:

Você verá uma nova página semelhante à imagem abaixo:

1. Clique na guia Escolher Arquivos e selecione a imagem baixada
2. Nas configurações opcionais, digite o tamanho desejado no painel (estamos usando um OLED de 128x64)
3. Clique no botão Iniciar conversão

A seguinte página será exibida e após alguns segundos sua imagem convertida será baixada se o download não iniciar automaticamente, clique na opção de download do arquivo:

Ótimo! Chegou a hora de nosso arquivo BMP convertê-lo em um array de códigos HEX legíveis por um Arduino.

Converta a imagem BMP em uma matriz de códigos HEX

Para converter a imagem BMP baixada em uma matriz HEX, vá para este site e clique em Ferramentas -> image2cpp

A imagem abaixo lhe dará uma ideia clara sobre o processo

Você verá uma tela com quatro opções e as discutiremos em detalhes

1. Selecione a imagem
2. Configurações de imagem
3. Antevisão
4. Resultado

Selecione a seção da imagem

Nesta seção, selecionaremos a imagem que acabamos de converter para BMP:

Seção de configurações de imagem

Nesta seção, definiremos o tamanho da tela, a cor de fundo, a escala e as opções de centro para o valor necessário.

1. Tamanho da tela (definimos como 128x64 porque estamos usando um OLED com densidade de pixels de 128x64).
2. Nesta seção, podemos definir a cor de fundo do OLED (escolhemos ser branco).
3. A escala é definida para o tamanho original.
4. Finalmente, na opção centro, clique nas caixas de seleção horizontal e vertical, isso fará com que a imagem apareça no centro.

A imagem abaixo lhe dará uma ideia clara

Seção de visualização

Na seção de visualização, podemos ver uma visualização clara da imagem que será exibida no OLED como mostrado abaixo:

Seção de saída

Na seção de saída iremos gerar e copiar o código gerado, para isso siga as etapas abaixo:

1. Formato de saída do código (nós o definimos como código Arduino porque estamos usando um).
2. Identificador (esta opção define o nome da matriz gerada, deixamos como está).
3. Modo de desenho (definimos a opção de modo de desenho como horizontal).
4. E, finalmente, clicamos no botão de geração de código para gerar o código de saída final.

A imagem abaixo lhe dará uma ideia clara

Diagrama de circuito

A imagem abaixo mostra as conexões de interface entre o Arduino Nano e o SSD1306:

Pin Arduino Nano	PIN OLED
GND	GND
3,3 V	VCC
D13	CLK
D11	MOSI
D8	RES
D9	SDC
D10	CCS

Explicação do código

Para mostrar a imagem no OLED precisamos da ajuda de uma biblioteca do Arduino, que pode ser baixada deste repositório GitHub. Baixe a versão U8glib-1.19.1.zip da biblioteca e importe-a no IDE do Arduino. Se você for novo no Arduino, use a ajuda deste link que descreve como importar uma biblioteca. Na seção a seguir, modificaremos o código para exibir o array HEX gerado anteriormente no OLED. O código completo com um vídeo funcional é fornecido no final deste artigo. A explicação detalhada do código é fornecida abaixo.

Primeiro, inclua a biblioteca baixada.

#include "U8glib.h" // incluindo a biblioteca U8glib

Em seguida, defina todos os pinos necessários para 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 #define OLED_CSS_PIN 8 // Arduino Digital Pin D13: ICP1

Inicialize a biblioteca u8glib.

U8GLIB_SH1106_128X64 u8g (OLED_CLK_PIN, OLED_MOSI_PIN, OLED_RES_PIN, OLED_SDC_PIN, OLED_CSS_PIN);

Em seguida, inclua a matriz de imagem gerada.

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, 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, 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, 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, …….. ………..

A função Draw é usada para desenhar a imagem bitmap (código QR) no OLED com a ajuda da função u8g.drawBitmapP.

void draw (void) {// comandos gráficos para redesenhar a tela completa devem ser colocados aqui u8g.drawBitmapP (0, 0, 16, 64, circuitdigest); ….. ……

Finalmente, na função loop () , chame todos os procedimentos necessários para construir a imagem no OLED

void loop () {u8g.firstPage (); // Uma chamada para este procedimento, marca o início do loop da imagem. fazer {desenhar (); } while (u8g.nextPage ()); // Uma chamada para este procedimento, marca o final do corpo do loop da imagem. // reconstruir a imagem após algum atraso delay (1000); }

Após completar o código, conecte o Arduino na porta USB do seu computador, selecione sua porta COM e carregue o código. Se você fez tudo corretamente, terá um display funcionando com um código QR em OLED.

Espero que tenham gostado desse projeto e gostado de aprender algo novo, continue lendo, continue aprendendo e até a próxima.