Skip to content

Latest commit

 

History

History
112 lines (93 loc) · 5.31 KB

README.md

File metadata and controls

112 lines (93 loc) · 5.31 KB

These modules generate SVG for QR Codes and 128 Bar Codes written in pure JavaScript.

Usage

128 BarCode

import {BarCode} from 'https://tool.raha.group/svg/barcode.js';

document.body.append(
	BarCode.generate({
		message: 'https://raha.group',
		width: 320, // 0 is used for auto-width. auto-width depends on the length of generated barcode.
		height: 80, // 0 is used for auto-height.
		horizontalPadding: 20, // in pixel
		verticalPadding: 16, // in pixel
		foreground: '#000', // line color
		background: '#fff',
	})
);
  • horizontalPadding or verticalPadding: Set 0 to discard padding. If (any) padding value is more than relative dimension (width or height) value then barcode will be rotated by 180 degrees respectively.

QRCode

import {QRCode} from 'https://tool.raha.group/svg/qrcode.js';

document.body.append(
	QRCode.generate({
		message: 'https://raha.group',
		size: 256, // in pixel
		padding: 16, // in pixel
		ecl: 'M', // ECL is a short form for "error correction levels" and is used for "recovery capacity" based on "L" = low (7%), "M" = medium (15%), "Q" = quartile (25%) and "H" = high (30%).
		swap: false, // swap the X and Y modules, some users have problems with the QRCode
		foreground: "#000000",
		background: "#f2f4f8",
	})
);

Low-Level Mechanisms of QR Codes and Barcodes

QR Codes and Code 128 barcodes encode data using distinct low-level mechanisms. Below is a detailed breakdown of their structures, encoding processes, and error-handling methods:

Code 128 Barcodes (Linear)

  1. Structure:

    • Bars/Spaces: Each character is represented by 3 bars and 3 spaces, with widths of 1–4 modules (units). Each bar/space is 1–4 modules wide.
    • Character Set: Encodes all 128 ASCII characters via three code sets (A, B, C). Start character (A/B/C) selects the initial set.
    • Symbol Components:
      • Start Character: Determines code set.
      • Data Characters: Encoded sequentially.
      • Checksum: Weighted modulo-103 sum of start + data characters.
      • Stop Character: 13-module pattern (2 bars, 2 spaces).

  2. Encoding Process:

    • Code Set Selection: Choose A (control chars), B (text), or C (numeric pairs for compression).
    • Checksum Calculation:
      • Sum = Start value + Σ (Character value × Position).
      • Checksum = Sum mod 103.
    • Pattern Mapping: Each character maps to a predefined 11-module pattern of bars/spaces.

  3. Error Detection:

    • Checksum validates data integrity. Invalid checksum triggers a rescan.

  4. Scanning:

    • Scanners measure bar/space widths, convert to characters, verify checksum, and output data.

QR Codes (2D Matrix)

  1. Structure:

    • Modules: Black/white squares arranged in a grid. Size depends on version (1–40, up to 177×177 modules).
    • Functional Patterns:
      • Finder Patterns: Three squares at corners for orientation.
      • Alignment Patterns: Smaller squares to correct distortion.
      • Timing Patterns: Alternating modules to calibrate grid size.
    • Data Regions: Encoded data and error correction codewords.

  2. Encoding Process:

    • Data Analysis: Choose mode (numeric, alphanumeric, byte, Kanji) and error correction level (L/M/Q/H).
    • Data Encoding:
      • Convert input to bitstream with mode indicator, character count, and data.
      • Split into blocks for Reed-Solomon error correction.
    • Error Correction: Add Reed-Solomon codewords (per block) based on error correction level.
    • Matrix Construction:
      • Place functional patterns.
      • Fill data codewords in zigzag pattern, avoiding reserved areas.
    • Masking: Apply one of 8 mask patterns to minimize scanning issues (e.g., large blank areas). Format/version info is encoded around finders.

  3. Error Correction:

    • Reed-Solomon codes correct errors/damage. Higher correction levels (e.g., H) allow up to 30% data recovery.

  4. Scanning:

    • Locate finder/alignment patterns to align the grid.
    • Read format/version info to determine masking.
    • Unmask data, decode bitstream, correct errors, and output content.

Key Differences

Aspect Code 128 QR Code
Dimensionality 1D (linear) 2D (matrix)
Data Capacity ~20–25 chars Up to 3KB (numeric)
Error Handling Checksum (detection only) Reed-Solomon (detection + correction)
Use Case Simple text (e.g., product labels) Complex data (URLs, Wi-Fi credentials)
Structure Bars/spaces with start/stop patterns Grid with functional and data modules

Summary

  • Code 128: Linear encoding via bar/space widths, limited capacity, checksum-based validation.
  • QR Code: 2D matrix with functional patterns, high capacity, robust error correction, and Reed-Solomon codes. Both rely on precise low-level pattern mapping and scanning algorithms.

License

This work is licensed by RahaGroup under CC BY-SA 4.0.