- Jadi, Apa sih QR Code ini?
- Menghasilkan kode QR Anda sendiri
- Mengonversi format PNG ke BMP
- Ubah gambar BMP menjadi larik kode HEX
- Diagram Sirkuit
- Penjelasan Kode
Kode "Respon Cepat" atau disingkat kode QR telah menjadi bagian penting dari kehidupan digital kita, kemungkinan besar Anda secara tidak sadar sudah akrab dengan mereka sekarang Anda mungkin telah menjelajahi toko grosir lokal Anda, atau mungkin Anda membaca buku favorit Anda, atau bahkan mungkin Anda melakukan pembayaran online dengan Google Pay, PhonePe atau Paytm, atau menjelajahi web, dll. (Saya kira saya bisa terus dan terus dengan contoh ya?) dan Anda kebetulan datang melintasi benda persegi yang tampak aneh ini dan berpikir, apa sebenarnya kotak ini dan jika Anda belum… yah, jangan khawatir itu pasti akan terjadi cepat atau lambat, jadi untuk memahami topiknya dengan lebih baik kita akan melakukan proyek kecil yang menyenangkan dengan Arduino dan OLED dan mengungkap hal-hal berikut:
- Konsep Dasar kode QR.
- Bagaimana itu bekerja.
- Cara membuat kode QR Anda sendiri menggunakan Arduino.
- Dan terakhir, tampilkan di layar OLED (SSD1306).
Jadi, Apa sih QR Code ini?
Kode QR (Quick Response code) adalah kode matriks 2D untuk membaca data dengan kecepatan tinggi, dikembangkan oleh DENSO WAVE pada tahun 1994 untuk industri otomotif Jepang. Kode QR memampatkan data dengan sangat efisien dibandingkan dengan kode batang standar, untuk mencapai ini menggunakan empat mode pengkodean standar (numerik, alfanumerik, byte / biner, dan kanji), teknologinya dibuat "sumber terbuka" yaitu tersedia untuk semua orang jadi, itu memperoleh popularitas dengan sangat cepat Keuntungan signifikan dari Kode QR dibandingkan kode batang konvensional adalah kapasitas data yang lebih besar dan toleransi kesalahan yang tinggi.
Bagaimana Kode QR Bekerja?
Kode QR (dan kode matriks data lainnya) dirancang untuk dibaca oleh alat khusus, bukan oleh manusia, jadi hanya ada jumlah tertentu yang dapat kita pahami dengan belajar secara visual, meskipun setiap kode berbeda dalam berbagai cara meskipun mengandung beberapa kesamaan yang menarik. fitur dengan mengamati kode QR circuitdigest.com kita akan mempelajari beberapa di antaranya
- Pola Penemu: Kotak persegi besar dengan kotak padat di dalam di tiga sudut kode memudahkan untuk mengonfirmasi bahwa itu adalah kode QR karena hanya ada tiga, jadi cukup jelas ke arah mana kode tersebut berorientasi.
- Alignment Pattern: Ini memastikan bahwa apa pun orientasinya, kode dapat dibaca.
- Timing Pattern: Ini berjalan secara horizontal dan vertikal di antara tiga pola finder , dengan menggunakan garis-garis ini pembaca dapat menentukan ukuran kode.
- Informasi Versi: Saat ini ada 40 versi berbeda dari standar kode QR, bagian kode ini menentukan versi kode QR yang digunakan, untuk versi pemasaran 1-7 digunakan secara normal.
- Informasi Format: Mitra format memiliki informasi tentang toleransi kesalahan dan penyamaran data.
- Area Data: Bagian kode ini berisi semua elemen data dan kode koreksi kesalahan.
- Zona Keluar: Spasi di setiap kode QR adalah wajib untuk membedakan kode dari lingkungannya.
Gambar di bawah ini akan memberi Anda gambaran yang jelas tentang kode tersebut
Bagian lain dari kode tersebut adalah data dan kode redundansi.
Ada sejumlah fitur lain dan topik rumit yang tidak akan saya bahas dalam tutorial ini, jika Anda ingin membaca lebih detail tentang kode QR, ikuti tutorial Kode QR ini oleh Tan Jin Soon, EPCglobal Singapore Council. Jurnal Sintesis, 2008.
Spesifikasi Kode QR
Ukuran Simbol |
Min. 21x21 sel - Maks. 177x177 sel (dengan interval 4 sel) |
|
Jenis dan Volume Informasi |
Karakter Numerik |
7.089 karakter maksimal |
Abjad, Tanda |
4.296 karakter maksimal |
|
Biner (8 bit) |
Maksimal 2.953 karakter |
|
Karakter Kanji |
1.817 karakter maksimal |
|
Efisiensi konversi |
Mode Karakter Numerik |
3,3 sel / karakter |
Mode Alfanumerik / Tanda |
5,5 sel / karakter |
|
Mode Biner (8 bit) |
8 sel / karakter |
|
Mode Karakter Kanji (13 bit) |
13 sel / karakter |
|
Koreksi kesalahan Kegunaan |
Tingkat L |
Approx. 7% dari area simbol dipulihkan maksimal |
Tingkat M |
Approx. 15% dari area simbol dipulihkan maksimal |
|
Tingkat Q |
Approx. 25% dari area simbol dipulihkan maksimal |
|
Tingkat H. |
Approx. 30% dari area simbol dipulihkan maksimal |
|
Fungsi penghubung |
Dapat dibagi menjadi maksimal 16 simbol |
Menghasilkan kode QR Anda sendiri
Ikuti langkah-langkah yang disebutkan di bawah ini untuk membuat kode QR Anda sendiri, dalam contoh ini, kita akan membuat kode QR dari situs web Circuit Digest kesayangan kita.
Untuk menghasilkan kode QR, buka situs web ini dan jika Anda melihat sisi atas situs web Anda dapat melihat daftar opsi, dalam tutorial ini kami membuat kode QR untuk URL, jadi kami akan pergi ke
- Klik pada tab URL dan tempel URL untuk Circuit Digest di bagian Masukkan URL.
- Klik simpan.
- Beri nama file untuk file keluaran.
- Pilih PNG sebagai format file pilihan kami.
- dan klik simpan.
Gambar di bawah ini akan memberi Anda gambaran yang jelas tentang prosesnya
Mikrokontroler tersayang kami "Arduino" tidak cukup cerdas sehingga ia bisa mengkompilasi gambar PNG mentah dan menampilkannya di layar OLED. Jadi, untuk menampilkan kode QR ke OLED kita perlu mengikuti beberapa langkah sederhana dan mengubah gambar PNG menjadi array bitmap yang dapat dibaca oleh Arduino. Konversi ini sebelumnya telah kami lakukan saat menghubungkan SSD1306 OLED dengan Arduino dan menghubungkan LCD Grafis dengan Arduino. Kami juga menghubungkan SSD1306 OLED dengan Raspberry Pi, ESP32, NodeMCU, dan banyak mikrokontroler lainnya. Konversi array bitmap dapat dilakukan dengan dua langkah di bawah ini:
- Mengonversi format PNG ke BMP.
- Ubah gambar BMP menjadi larik kode HEX.
Mengonversi format PNG ke BMP
Untuk mengonversi gambar PNG yang diunduh ke gambar BMP, buka situs web ini dan di bagian konverter gambar dan
- Klik pada menu dropdown dan pilih
- Ubah ke BMP
- Klik Go
Gambar di bawah ini akan memberi Anda gambaran yang jelas tentang prosesnya:
Anda akan disuguhkan tampilan halaman baru seperti gambar di bawah ini:
- Klik pada tab Pilih File dan pilih gambar yang diunduh
- Di pengaturan Opsional, ketik panel ukuran yang Anda inginkan (kami menggunakan OLED 128x64)
- Klik tombol Mulai konversi
Anda akan disajikan dengan halaman berikut dan setelah beberapa detik gambar Anda yang dikonversi akan diunduh jika unduhan tidak dimulai secara otomatis, klik opsi unduh file Anda:
Bagus! Sekarang kami mendapatkan file BMP kami waktunya untuk mengubahnya menjadi serangkaian kode HEX yang dapat dibaca oleh Arduino.
Ubah gambar BMP menjadi larik kode HEX
Untuk mengonversi gambar BMP yang diunduh ke array HEX, buka situs web ini dan klik Alat -> image2cpp
Gambar di bawah ini akan memberi Anda gambaran yang jelas tentang prosesnya
Anda akan disajikan dengan layar yang memiliki empat opsi dan kami akan membahasnya secara rinci
- Pilih gambar
- Pengaturan Gambar
- Pratinjau
- Keluaran
Pilih bagian gambar
Pada bagian ini kita akan memilih gambar yang baru saja kita ubah menjadi BMP:
Bagian Pengaturan Gambar
Di bagian ini, kami akan mengatur ukuran kanvas, warna latar belakang, penskalaan, dan opsi tengah ke nilai yang kami butuhkan.
- Ukuran kanvas (kami atur ke 128x64 karena kami menggunakan OLED dengan kepadatan piksel 128x64).
- Di bagian ini, kita dapat mengatur warna latar belakang OLED (kita memilihnya menjadi putih).
- Penskalaan disetel ke ukuran aslinya.
- Terakhir, di opsi tengah, klik kotak centang horizontal dan vertikal, ini akan membuat gambar muncul di tengah.
Gambar di bawah ini akan memberi Anda gambaran yang jelas
Bagian Pratinjau
Di bagian pratinjau kita dapat melihat pratinjau gambar yang jelas yang akan ditampilkan di OLED seperti yang ditunjukkan di bawah ini:
Bagian Keluaran
Di bagian keluaran kita akan membuat dan menyalin kode yang dihasilkan, untuk melakukannya ikuti langkah-langkah di bawah ini:
- Format keluaran kode (kami menetapkannya sebagai kode Arduino karena kami menggunakannya).
- Identifier (opsi ini menetapkan nama untuk array yang dihasilkan, kami membiarkannya default apa adanya).
- Mode gambar (Kami mengatur opsi mode gambar ke horizontal).
- Dan terakhir, kita klik tombol buat kode ini akan menghasilkan kode keluaran akhir.
Gambar di bawah ini akan memberi Anda gambaran yang jelas
Diagram Sirkuit
Gambar di bawah ini menunjukkan koneksi antarmuka antara Arduino Nano dan SSD1306:
Pin Arduino Nano |
PIN OLED |
GND |
GND |
3.3V |
VCC |
D13 |
CLK |
D11 |
MOSI |
D8 |
RES |
D9 |
SDC |
D10 |
CCS |
Penjelasan Kode
Untuk menampilkan gambar di OLED kita membutuhkan bantuan pustaka Arduino, yang dapat diunduh dari repositori GitHub ini. Unduh perpustakaan versi U8glib-1.19.1.zip dan impor ke Arduino IDE. Jika Anda baru mengenal Arduino, gunakan bantuan tautan ini yang menjelaskan cara mengimpor perpustakaan. Pada bagian di bawah ini kami akan memodifikasi kode untuk menampilkan array HEX yang dihasilkan sebelumnya ke OLED. Kode lengkap dengan video yang berfungsi diberikan di akhir artikel ini. Penjelasan Detail kode diberikan di bawah ini.
Pertama, sertakan perpustakaan yang diunduh.
#include "U8glib.h" // termasuk perpustakaan U8glib
Kemudian tentukan semua pin yang diperlukan untuk OLED.
#menentukan OLED_CLK_PIN 13 // Arduino Digital Pin D13: SCK #define OLED_MOSI_PIN 11 // Arduino Digital Pin D11: MOSI #menentukan OLED_RES_PIN 10 // Arduino Digital Pin D10: SS #menentukan OLED_SDC_PIN 9 // Arduino Digital Pin D9: OC1A #define OLED_CSS_PIN 8 // Arduino Digital Pin D13: ICP1
Inisialisasi Perpustakaan u8glib.
U8GLIB_SH1106_128X64 u8g (OLED_CLK_PIN, OLED_MOSI_PIN, OLED_RES_PIN, OLED_SDC_PIN, OLED_CSS_PIN);
Kemudian Sertakan larik gambar yang dihasilkan.
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, 0xf0, 0x00, 0x1c 0x87, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x0c, 0x01, 0x87, 0xf0, 0x00, 0xff0f, 0xff, 0xff, 0xff0f, 0xff, 0xff, 0x87 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0xf0, 0x7f, 0x31, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0x8f, 0x7f, 0xff, 0x8f, 0x7f 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, 0xf3, 0x01, 0x8f, 0x98x, 0x01 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, …….. ………..
Fungsi Draw digunakan untuk menggambar gambar bitmap (QR code) pada OLED dengan bantuan fungsi u8g.drawBitmapP.
void draw (void) {// perintah grafis untuk menggambar ulang layar lengkap harus ditempatkan di sini u8g.drawBitmapP (0, 0, 16, 64, circuitdigest); ….. ……
Terakhir, dalam fungsi loop () , panggil semua prosedur yang diperlukan untuk membangun image di OLED
void loop () {u8g.firstPage (); // Panggilan ke prosedur ini, menandai awal dari loop gambar. lakukan {draw (); } sementara (u8g.nextPage ()); // Panggilan untuk prosedur ini, menandai akhir dari loop gambar. // membangun kembali gambar setelah beberapa penundaan (1000); }
Setelah menyelesaikan kode, colokkan Arduino di port USB komputer Anda, pilih port COM Anda dan unggah kodenya. Jika Anda telah melakukan semuanya dengan benar, Anda akan memiliki tampilan yang berfungsi dengan kode QR di OLED.
Saya harap Anda menyukai proyek ini dan menikmati belajar sesuatu yang baru, teruslah membaca terus belajar dan sampai jumpa lagi.