Створіть qr-код за допомогою arduino і відобразіть його на ssd1306 oled

Код "Швидкого реагування" або скорочений як QR-код став важливою частиною нашого цифрового життя, ймовірно, ви вже підсвідомо знайомі з ними, напевно, вже блукали по вашому місцевому продуктовому магазину, або, можливо, ви читаючи улюблену книгу, або навіть, можливо, ви робите онлайн-платежі за допомогою Google Pay, PhonePe або Paytm, або серфінг в Інтернеті тощо (я думаю, я міг би продовжувати і продовжувати з прикладами, так?), і ви випадково прийшли по всій цій дивно виглядаючій квадратній штуці і думці, що це за квадратна річ у будь-якому випадку, і якщо ви цього не зробили… ну, не хвилюйтеся, це обов’язково відбудеться рано чи пізно, так що для кращого розуміння теми ми будемо робити цікавий маленький проект з Arduino та OLED та демістифікуйте такі речі:

Основна концепція QR-коду.
Як це працює.
Як створити власний QR-код за допомогою Arduino.
І нарешті, покажіть його на екрані OLED (SSD1306).

Отже, що це взагалі за QR-код?

QR-код (код швидкого реагування) - це матричний двовимірний код для швидкого зчитування даних, розроблений DENSO WAVE в 1994 році для автомобільної промисловості Японії. QR-код дуже ефективно стискає дані порівняно зі стандартним штрих-кодом, для цього він використовує чотири стандартизовані режими кодування (числовий, буквено-цифровий, байт / двійковий і кандзі), технологія стала "відкритою", тобто доступною для всіх, тому дуже швидко набув популярності. Істотними перевагами QR-кодів перед звичайними штрих-кодами є більша ємність даних та висока стійкість до несправностей.

Як працює QR-код?

QR-коди (та інші матричні коди даних) призначені для читання спеціальними інструментами, а не людьми, тому ми можемо зрозуміти лише певну кількість, вивчаючи візуально, хоча кожен код різний по-різному, хоча вони містять кілька цікавих загальних функції, спостерігаючи за QR-кодом circuitdigest.com, ми вивчимо деякі з них

Шаблони пошуку: Великі квадратні коробки з суцільним віконцем всередині трьох кутів коду дозволяють легко підтвердити, що це QR-код, оскільки їх всього три, тому досить очевидно, що в який спосіб орієнтований код.
Шаблон вирівнювання: Це робить впевненим, що незалежно від орієнтації код може бути прочитаним.
Шаблон синхронізації: Він проходить горизонтально та вертикально між трьома шаблонами пошуку , використовуючи ці рядки, читач може визначити розмір коду.
Інформація про версію: На даний момент існує 40 різних версій стандарту QR-коду, цей розділ коду визначає версію QR-коду, яка використовується для маркетингової версії 1-7, яка використовується зазвичай.
Інформація про формат: Партнери формату мають інформацію про допустимість помилок та маскування даних.
Область даних: Цей розділ коду містить усі елементи даних та код виправлення помилок.
Зона виходу: інтервал у коді QR-коду є обов’язковим для того, щоб відрізнити код від оточення.

Зображення нижче дасть вам чітке уявлення про код

Інші розділи коду - це дані та код надмірності.

У цьому посібнику я не буду обговорювати ряд інших функцій та складних тем, якщо ви хочете прочитати докладніше про QR-код, будь ласка, дотримуйтесь цього підручника з QR-коду Тан Джин Скоро, рада EPCglobal Singapore. Журнал синтезу, 2008.

Специфікація QR-коду

Розмір символу	Хв. 21x21 комірка - Макс. 177x177 комірка (з 4-клітинним інтервалом)
Тип та обсяг інформації	Числові символи	Максимум 7089 символів
Абетки, Знаки	Максимум 4296 символів
Двійковий (8 біт)	Максимум 2953 символи
Персонажі кандзі	1817 символів максимум
Ефективність перетворення	Режим числових символів	3,3 клітинки / символ
Буквено-цифровий / Режим знаків	5,5 клітинок / символ
Бінарний (8-бітний) режим	8 комірок / символ
Режим символів кандзі (13 біт)	13 клітин / символ
Виправлення помилок функціональність	Рівень L	Прибл. 7% площі символу відновлено максимум
Рівень М	Прибл. 15% площі символу відновлено максимум
Рівень Q	Прибл. 25% площі символу відновлено максимум
Рівень Н	Прибл. 30% площі символу відновлено максимум
Функція зв’язку	Можна розділити максимум на 16 символів

Створення власного QR-коду

Дотримуйтесь наведених нижче кроків, щоб створити власний QR-код, у цьому прикладі ми створимо QR-код нашого улюбленого веб-сайту Circuit Digest

Щоб створити QR-код, перейдіть на цей веб-сайт, і якщо ви подивитесь на верхню частину веб-сайту, ви побачите список варіантів, у цьому посібнику ми створюємо QR-код для URL-адреси, тому ми збираємося

Клацніть на вкладку URL і вставте URL для Circuit Digest у розділ Enter URL.
Клацніть на зберегти.
Введіть ім’я файлу для вихідного файлу.
Виберіть PNG як бажаний формат файлу.
і натисніть зберегти.

Зображення нижче дасть вам чітке уявлення про процес

Наш найдорожчий мікроконтролер “Arduino” не настільки розумний, щоб він міг просто скомпілювати вихідне зображення PNG і відображати його на OLED-дисплеї. Отже, для відображення QR-коду на OLED нам потрібно виконати кілька простих кроків і перетворити зображення PNG у растровий масив, який читається Arduino. Це перетворення ми вже робили під час взаємодії SSD1306 OLED з Arduino та графічного РК-дисплея з Arduino. Ми також з'єднали OLED SSD1306 з Raspberry Pi, ESP32, NodeMCU та багатьма іншими мікроконтролерами. Перетворення растрового масиву можна виконати нижче двох кроків:

Перетворення PNG у формат BMP.
Перетворіть зображення BMP у масив шестигранних кодів.

Перетворення PNG у формат BMP

Щоб перетворити завантажене зображення PNG у зображення BMP, перейдіть на цей веб-сайт і в розділі конвертера зображень і

Клацніть на спадне меню та виберіть
Перетворити на BMP
Клацніть Перейти

Зображення нижче дасть вам чітке уявлення про процес:

Вам буде представлена нова сторінка, схожа на зображення нижче:

Клацніть на вкладці Вибрати файли та виберіть завантажене зображення
У додаткових налаштуваннях панель введіть потрібний розмір (ми використовуємо OLED 128x64)
Натисніть кнопку «Почати перетворення»

Вам буде представлена наступна сторінка, і через кілька секунд ваше перетворене зображення буде завантажено, якщо завантаження не розпочнеться автоматично, клацніть на опцію завантаження файлу:

Чудово! Тепер ми отримали час від нашого BMP-файлу, щоб перетворити його на масив шістнадцяткових кодів, які читає Arduino.

Перетворіть зображення BMP у масив шестигранних кодів

Щоб перетворити завантажене зображення BMP у шестигранний масив, перейдіть на цей веб-сайт і натисніть Інструменти -> image2cpp

Зображення нижче дасть вам чітке уявлення про процес

Вам буде представлений екран із чотирма варіантами, і ми детально обговоримо їх

Виберіть зображення
Налаштування зображення
Попередній перегляд
Вихідні дані

Виберіть розділ зображення

У цьому розділі ми виберемо зображення, яке ми щойно перетворили на BMP:

Розділ налаштувань зображення

У цьому розділі ми встановимо необхідні значення розміру полотна, кольору тла, масштабування та центрування.

Розмір полотна (ми встановили значення 128x64, оскільки ми використовуємо OLED зі щільністю пікселів 128x64).
У цьому розділі ми можемо встановити колір тла OLED (ми вибираємо його білим).
Масштабування встановлюється до початкового розміру.
Нарешті, у центральній опції натисніть на горизонтальні та вертикальні прапорці, це зробить зображення відображатися в центрі.

Зображення нижче дасть вам чітке уявлення

Попередній перегляд

У розділі попереднього перегляду ми можемо побачити чіткий попередній перегляд зображення, яке буде відображатися в OLED, як показано нижче:

Вихідний розділ

У розділі виводу ми створимо та скопіюємо згенерований код, для цього виконайте наступні кроки:

Формат виводу коду (ми встановлюємо його як код Arduino, оскільки ми його використовуємо).
Ідентифікатор (цей параметр встановлює ім'я для сформованого масиву, ми залишаємо його за замовчуванням як є).
Режим малювання (Ми встановлюємо параметр режиму малювання на горизонтальний).
І нарешті, ми натискаємо на кнопку згенерувати код, це генерує кінцевий вихідний код.

Зображення нижче дасть вам чітке уявлення

Кругова діаграма

Нижче на зображенні показані взаємозв'язки між Arduino Nano та SSD1306:

Arduino Nano Pin	OLED-PIN
GND	GND
3,3 В	VCC
D13	CLK
D11	МОЗІ
D8	ВДЕ
D9	SDC
D10	CCS

Пояснення коду

Щоб показати зображення на OLED, нам потрібна допомога бібліотеки Arduino, яку можна завантажити з цього сховища GitHub. Завантажте версію бібліотеки U8glib-1.19.1.zip та імпортуйте її в IDE Arduino. Якщо ви новачок в Arduino, скористайтеся цим посиланням, що описує, як імпортувати бібліотеку. У наведеному нижче розділі ми змінимо код, щоб відобразити раніше створений шестигранний масив на OLED. Повний код із робочим відео наведено в кінці цієї статті. Детальне пояснення коду наведено нижче.

Спочатку включіть завантажену бібліотеку.

#include "U8glib.h" // включаючи бібліотеку U8glib

Потім визначте всі необхідні шпильки для 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 D9f: OduC OLED_CSS_PIN 8 // Arduino Digital Pin D13: ICP1

Ініціалізуйте бібліотеку u8glib.

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

Потім включіть сформований масив зображень.

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, 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, 0xc, 0xff, 0x00, 0xc, 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, 0xc 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, 0xff, 0xff, 0xff, 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, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf, 0xf 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, 0xf3, 0x01, 0x8f, 0xb1, 0x80, 0x33, 0x81, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0x01, 0x8f, 0xc3, 0xc, 0xc, 0xc, 0xc 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, …….. ………..

Функція малювання використовується для малювання растрового зображення (QR-код) на OLED за допомогою функції u8g.drawBitmapP.

void draw (void) {// графічні команди для перемальовування повного екрана слід розмістити тут u8g.drawBitmapP (0, 0, 16, 64, circuitdigest); ….. ……

Нарешті, у функції loop () викличте всі необхідні процедури для побудови зображення на OLED

недійсний цикл () {u8g.firstPage (); // Виклик цієї процедури означає початок циклу зображення. do {draw (); } while (u8g.nextPage ()); // Виклик цієї процедури означає кінець тіла циклу зображення. // відновлюємо зображення після деякої затримки (1000); }

Після заповнення коду підключіть Arduino до USB-порту комп’ютера, виберіть COM-порт і завантажте код. Якщо ви все зробили правильно, у вас буде робочий дисплей з QR-кодом на OLED.

Сподіваюся, вам сподобався цей проект і вам сподобалось вивчати щось нове, продовжуйте читати, продовжуйте вчитися, і я побачу вас наступного разу.