Cara membuat kode QR langkah demi langkah

 (nayuki.io)
5 poin oleh GN⁺ 2024-11-19 | 1 komentar | Bagikan ke WhatsApp
  • Anda dapat mengikuti proses internal bagaimana teks diubah menjadi kode QR melalui visualisasi tahap 0~9, sambil memahami cara kerja Nayuki QR Code generator library
  • Input contoh Hello, world! 123 dianalisis sebagai 17 code point Unicode dan dienkode dalam mode Byte, bukan Numeric, Alphanumeric, atau Kanji
  • Hasil penggabungan bit mode, jumlah karakter, data segmen, dan bit terminator menghasilkan 19 codeword data yang pas dengan kapasitas ECC L pada Version 1
  • Kode QR Version 1 menempatkan 19 codeword data dan 7 codeword ECC Reed–Solomon dalam 1 blok, lalu menyusun pola tetap dan modul data
  • Dengan membandingkan penalti dari 8 mask, sistem memilih Mask pattern 3 dengan skor total terendah, sehingga hasil akhir ditentukan bukan hanya oleh encoding sederhana tetapi juga evaluasi kualitas

Tujuan demo dan pemrosesan input

  • Aplikasi web ini memvisualisasikan proses bagaimana string teks dienkode menjadi kode QR secara bertahap
  • Halaman ini menguraikan proses encoding agar Anda dapat memahami cara kerja internal QR Code generator library
  • Item input pengguna terdiri dari string teks, tingkat koreksi kesalahan, pemaksaan Version minimum, dan pemaksaan mask pattern

Tahap 0: Analisis karakter Unicode

  • String contoh adalah Hello, world! 123, dan jumlah code point pada teks input adalah 17
  • Setiap karakter diperiksa apakah dapat dienkode dalam mode Numeric, Alphanumeric, Byte, atau Kanji
  • Kemampuan encoding seluruh string per mode adalah sebagai berikut
    • Numeric: tidak bisa
    • Alphanumeric: tidak bisa
    • Byte: bisa
    • Kanji: tidak bisa
  • Mode segmen yang dipilih untuk menampung seluruh string adalah Byte

Tahap 1: Pembuatan segmen data

  • Setiap karakter diubah menjadi deretan bit
  • Dalam mode Numeric dan Alphanumeric, karakter yang berurutan digabung lalu dienkode
  • Dalam mode Byte, satu karakter menghasilkan salah satu dari 8, 16, 24, atau 32 bit
  • Dalam contoh ini, nilai heksadesimal tiap karakter diubah menjadi 8 bit
    • H: 48 → 01001000
    • e: 65 → 01100101
    • 1: 31 → 00110001
    • 2: 32 → 00110010
    • 3: 33 → 00110011
  • Program demo ini selalu membuat satu segmen tunggal demi penyederhanaan
  • Metode pemisahan optimal untuk mengurangi panjang total bit dibahas terpisah di optimal text segmentation for QR codes

Tahap 2: Menyesuaikan nomor Version

  • Panjang total bit yang dibutuhkan untuk merepresentasikan daftar segmen berbeda menurut rentang Version
    • Version 1~9: 148 bit, 19 codeword
    • Version 10~26: 156 bit, 20 codeword
    • Version 27~40: 156 bit, 20 codeword
  • Codeword didefinisikan sebagai 8 bit, yaitu 1 byte
  • Kapasitas codeword data pada kode QR bergantung pada Version dan tingkat koreksi kesalahan
  • Input contoh muat dalam Version 1 pada tingkat koreksi kesalahan yang dipilih
  • Nomor Version yang akhirnya dipilih adalah 1

Tahap 3: Menggabungkan segmen, padding, dan membuat codeword

  • Beberapa string bit digabung untuk membuat deretan bit data
    • Segment 0 mode: 0100, 4 bit
    • Segment 0 count: 00010001, 8 bit
    • Segment 0 data: 136 bit
    • Terminator: 0000, 4 bit
  • Jumlah bit kumulatif adalah 152 bit
  • Dalam contoh ini, Bit padding dan Byte padding sama-sama 0 bit
  • Seluruh byte codeword data dibagi dalam unit 8 bit dan ditampilkan dalam heksadesimal
    • 41 14 86 56 C6 C6 F2 C2 07 76 F7 26 C6 42 12 03 13 23 30

Tahap 4: Pembagian blok, penambahan ECC, dan interleave

  • Statistik blok untuk contoh ini adalah sebagai berikut
    • Jumlah codeword data: 19
    • Jumlah blok: 1
    • Codeword data per blok pendek: 19
    • Codeword data per blok panjang: tidak ada
    • Codeword ECC per blok: 7
    • Jumlah blok pendek: 1
    • Jumlah blok panjang: 0
  • Urutan codeword data dibagi menjadi blok pendek dan blok panjang, lalu codeword ECC dihitung dan ditambahkan di akhir tiap blok
  • Proses matematis perhitungan kode koreksi kesalahan Reed–Solomon dihilangkan karena panjang, membosankan, dan kurang menarik
  • Urutan codeword final disusun dengan meng-interleave codeword data dan ECC
    • 41 14 86 56 C6 C6 F2 C2 07 76 F7 26 C6 42 12 03 13 23 30 85 A9 5E 07 0A 36 C9
  • Deretan bit final yang akan digambar dalam zigzag scan juga dibuat dari urutan codeword ini

Tahap 5~6: Menempatkan pola tetap dan codeword

  • Pada tahap pola tetap, timing pattern digambar pada baris 6 dan kolom 6
  • Di tiga sudut, masing-masing ditempatkan finder pattern 8×8 termasuk separator
  • Di sekitar finder terdapat dummy format bits sementara
  • Pada tahap penempatan codeword, dihitung zigzag scan yang dimulai dari sudut kanan bawah
  • Zigzag scan melewati function module dan mengunjungi modul yang belum terisi
  • Modul data, ECC, dan remainder digambar sesuai nilai bit codeword final dan urutan zigzag
  • Sebagai contoh, codeword heksadesimal C5 adalah biner 11000101 dan menghasilkan urutan modul [dark, dark, light, light, light, dark, light, dark]

Tahap 7~9: Penerapan mask dan perhitungan penalti

  • Setiap mask pattern hanya memengaruhi non-function module
  • Mask diterapkan ke modul data, ECC, dan remainder dengan XOR
  • Format bits yang sebenarnya digambar di sekitar finder
  • Pencarian penalti memeriksa elemen berikut
    • run horizontal dengan 5 atau lebih modul berwarna sama secara berurutan
    • run vertikal dengan 5 atau lebih modul berwarna sama secara berurutan
    • box 2×2 dengan warna yang sama
    • finder-like pattern horizontal
    • finder-like pattern vertikal
    • keseimbangan modul gelap dan modul terang
  • Ukuran dan rasio warna kode QR contoh adalah sebagai berikut
    • Panjang sisi: 21
    • Total modul: 441
    • Modul terang: 221
    • Modul gelap: 220
    • Rasio modul gelap: 49.887%
    • Deviasi terhadap setengah: −0.113%
  • Total penalti dari 8 mask adalah sebagai berikut
    • Mask 0: 1204
    • Mask 1: 1134
    • Mask 2: 1084
    • Mask 3: 1081
    • Mask 4: 1121
    • Mask 5: 1100
    • Mask 6: 1189
    • Mask 7: 1137
  • Mask dengan total penalti terendah adalah Mask pattern 3

Kode sumber

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-19
Komentar Hacker News
  • Sayang sekali penjelasan tentang kode QR di mana pun di internet tampaknya selalu melewatkan perhitungan koreksi kesalahan Reed-Solomon
    Di sini pun penulis menyebutnya “panjang, membosankan, dan tidak terlalu menarik”, tetapi karena semua orang berpikir begitu, sekarang bagian ini jadi cukup sulit ditemukan
    • Saat pascasarjana saya mengambil mata kuliah teori pengodean; itu kelas paling rigor yang pernah saya ikuti dan sulit bagi kami berlima, tetapi saya merasa beruntung telah mengambilnya
      Reed-Solomon dibahas sedikit setelah pertengahan semester, dan intinya adalah berbasis polinomial. Jika ada cukup titik, polinomial bisa ditentukan secara tepat, jadi jika kita menambahkan titik ekstra, data tetap bisa dipulihkan meskipun sebagian titik hilang
      Sisanya adalah cara menerapkannya pada data biner, yaitu bagian yang memakai medan hingga; secara matematis indah, tetapi menjadi cukup rumit
    • Perhitungan koreksi kesalahan dijelaskan oleh dua tutorial ini
      https://www.thonky.com/qr-code-tutorial/error-correction-cod...
      https://dev.to/maxart2501/let-s-develop-a-qr-code-generator-...
    • https://www.quaxio.com/an_artisanal_qr_code.html dan PagedOut! Issue #2 memuat cara membuat kode QR dari nol, termasuk perhitungan koreksi kesalahan dengan pembagian panjang
    • Memang panjang dan membosankan, tetapi sebenarnya itu bagian paling menarik dari keseluruhan proses
    • Ada artikel Wikipedia terkait
  • Video Veritasium terbaru I used to hate QR codes. But they're actually genius juga membahas topik ini
    https://www.youtube.com/watch?v=w5ebcowAJD8
  • Kumpulan masukan yang diterima penulis cukup menarik: https://www.nayuki.io/page/poor-feedback-from-readers
    • Mengejek orang yang bahasa Inggrisnya kurang baik dan memberi komentar yang merendahkan seluruh negara seolah-olah para pengirim email itu adalah sampel representatif negaranya lebih banyak menunjukkan tentang pemilik blog daripada tentang para pengirimnya
      Dari komentarnya terasa kuat nuansa elitis. Saya sempat melihat-lihat blognya; ia meminta donasi Bitcoin sambil menyarankan $3, tetapi sepertinya tidak mempertimbangkan bahwa sebagian besar bisa habis untuk biaya transaksi
    • Meski menerima pesan yang tidak disukai, sebaiknya saat menyampaikan keluhan tidak mencampurnya dengan rasisme ringan dan kritik terhadap kemampuan bahasa Inggris penulisnya
    • Mengolok-olok bahasa Inggris yang buruk selalu merupakan tanda kebodohan. Orang pintar pun bisa bersikap bodoh
    • Maaf, tetapi penulis blog itu terlihat seperti orang yang cukup tidak menyenangkan
      Kesan yang muncul kira-kira seperti, “Tidak, kamu tidak boleh memakai kode dari repositori GitHub saya untuk chatbot proyek kampusmu. Standar coding-mu tidak memenuhi standar saya. Dan bahasa Inggrismu juga payah”
    • Saya bisa memahami betapa melelahkannya mengelola blog pribadi. Harus berurusan dengan bermacam-macam orang
      Untungnya ia juga membagikan masukan yang baik secara terpisah: https://www.nayuki.io/page/decent-feedback-from-readers
  • Cukup bagus. Saya juga ingin melihat decoder dengan pendekatan yang sama
    • Anda mungkin juga akan menyukai panduan Piko dan blinry tentang cara membaca kode QR tanpa komputer: https://qr.blinry.org/
    • Setuju. Saya selalu takjub melihat ponsel bisa mendekode kode QR yang gelap, buram, dan sekitar seperempatnya keluar dari layar secepat itu
    • Saya terus mencari panduan untuk mengimplementasikan pembaca QR dari nol
      Saya tidak menginginkan model seperti yang muncul di Google, “cukup colokkan library computer vision ini dan masukkan gambar, lalu hasilnya keluar”
      Saya mencari panduan yang berasumsi kita sudah punya data gambar mentah yang telah didekode, lalu mengimplementasikan semua algoritma yang diperlukan
  • Senang ada penjelasannya. Secara pribadi saya hanya ingin membuatnya dengan cepat, tetapi hasil pencarian berisi situs penuh iklan atau situs yang “harus daftar dulu baru bisa dipakai”
    Saya juga menemukan beberapa di GitHub, tetapi ada masalah lain, jadi saya membuatnya sendiri dengan cepat memakai library yang dirancang dengan baik yang pernah saya gunakan sebelumnya, dan butuh sekitar 15 menit
    https://greggman.github.io/qr-code/
    Bisa saja menambahkan lebih banyak opsi, tetapi sebenarnya sebagian besar pengguna sepertinya tidak membutuhkan opsi-opsi itu
    • Senang itu berguna. Saya juga sudah lama ingin mencoba menulis implementasi sendiri, tetapi yang bisa saya temukan hanya paket jadi untuk Python atau Golang
      Saya ingin tahu jika ada materi berguna untuk memahami bagian koreksi kesalahan terkait kode QR
  • Dulu saya membuat implementasi Rust
    https://github.com/aabiji/qr
  • Jika artikelnya bukan dari tahun berjalan, praktik yang baik adalah menambahkan tahun artikel pada judul; dalam kasus ini 2018
    • Setuju. Menurut saya tautan aslinya tidak mencantumkan tanggal, dan sekarang sudah tidak bisa diedit lagi
  • Bagus. Mempelajari cara kerja kode QR sudah lama ada di daftar tugas saya, dan ini tulisan pengantar yang bagus
  • Sekarang setelah tahu cara kerjanya, Anda juga bisa memakainya dalam kueri SQL: https://github.com/Florents-Tselai/pgQR