QRCode
A quick and beautiful macOS/iOS/tvOS/watchOS QR Code generator/detector library for SwiftUI, Swift and Objective-C.
Install / Use
/learn @dagronf/QRCodeREADME
QRCode
A quick, stylish and beautiful macOS/iOS/tvOS/watchOS QR Code generator/detector library for SwiftUI, Swift and Objective-C.
<p align="center"> <img src="https://img.shields.io/github/v/tag/dagronf/QRCode" /> <img src="https://img.shields.io/badge/License-MIT-lightgrey" /> <a href="https://swift.org/package-manager"> <img src="https://img.shields.io/badge/spm-compatible-brightgreen.svg?style=flat" alt="Swift Package Manager" /> <img src="https://img.shields.io/badge/pod-compatible-red" /> </a> </p> <p align="center"> <img src="https://img.shields.io/badge/macOS-10.13+-red" /> <img src="https://img.shields.io/badge/iOS-11+-blue" /> <img src="https://img.shields.io/badge/tvOS-13+-orange" /> <img src="https://img.shields.io/badge/watchOS-6+-brightgreen" /> <img src="https://img.shields.io/badge/macCatalyst-1.0+-purple" /> </p> <p align="center"> <img src="https://img.shields.io/badge/Swift-5.4-blueviolet" /> <img src="https://img.shields.io/badge/ObjectiveC-2.0-ff69b4" /> <img src="https://img.shields.io/badge/SwiftUI-2.0+-9cf" /> </p> <p align="center"> <a href="./Examples/basic/index.md"> <img src="./Examples/basic/basic.png" height="80"/> </a> <a href="./Examples/watchos/index.md"> <img src="./Examples/watchos/watchos-qrcode.png" width="80"/> </a> <a href="./Examples/people/index.md"> <img src="./Examples/people/qrcode-with-logo.png" width="80"/> </a> <a href="./Examples/scan/index.md"> <img src="./Examples/scan/qrcode-with-basic-logo.svg" width="80"/> </a> <a href="./Examples/lineargradient/index.md"> <img src="./Examples/lineargradient/linear-background.png" width="80"/> </a> <a href="./Examples/negated/index.md"> <img src="./Examples/negated/design-negated-quiet-space.png" width="80"/> </a> <a href="./Examples/green/index.md"> <img src="./Examples/green/svgExportPixelBackgroundColors.svg" width="80"/> </a> <a href="./Examples/logo-background/logo-background.md"> <img src="./Examples/logo-background/demo-simple-image-background.jpg" width="80"/> </a> <a href="./Examples/red-b/red-b.md"> <img src="./Examples/red-b/qrcode-off-pixels.jpg" width="80"/> </a> <a href="./Examples/wombles/wombles.md"> <img src="./Examples/wombles/demo-wombles.jpg" width="80"/> </a> <a href="./Examples/wwf/index.md"> <img src="./Examples/wwf/wwf.svg" width="80"/> </a> <a href="./Examples/peacock/index.md"> <img src="./Examples/peacock/beach-peacock.jpg" width="80"/> </a> <a href="./Art/images/3d-demo.jpg"> <img src="./Art/images/3d-demo.jpg" width="80"/> </a> <a href="./Examples/blobby/index.md"> <img src="./Examples/blobby/blobby-style.svg" width="80"/> </a> <a href="./Examples/wiki/index.md"> <img src="./Examples/wiki/wiki.png" width="80"/> </a> <a href="./Examples/simple-inner-shadow/index.md"> <img src="./Examples/simple-inner-shadow/basic-inner-shadow.svg" width="80"/> </a> <a href="./Examples/lcd/index.md"> <img src="./Examples/lcd/lcd.svg" width="80"/> </a> <a href="./Examples/ugly-sweater/index.md"> <img src="./Examples/ugly-sweater/ugly-sweater.png" width="80"/> </a> </p>Why?
- It's nice to have a simple drop-in component for displaying a QR code when you need it!
- It's nice to have your app look great!
Features
- Supports Swift, SwiftUI and Objective-C.
- Supports Swift Package Manager
- Generate a QR code without access to a UI.
- Supports all error correction levels.
- Configurable quiet zone
- Load/Save support
- Drop-in live display support for SwiftUI, NSView (macOS) and UIView (iOS/tvOS).
- Generate images, scalable PDFs, scalable SVGs and
CGPathpaths. - Configurable designs.
- Add a logo to a QR code.
- Configurable fill styles (solid, linear gradient, radial gradient) for image generation.
- Configurable corner radius
- Command line tool for generating qr codes from the command line (macOS 10.13+).
- Basic qr code video detection (via importing
QRCodeDetector).
Installing
Methods
<details> <summary>Swift Package Manager</summary> To use in your project, add the following dependency to your Package.swift:.package(url: "https://github.com/dagronf/qrcode.git", from: "20.0.0")
</details>
<details>
<summary>Usage</summary>
The core functionality for generating a nice QR code is found in the QRCode library.
If you want to use the qr code video detection, you'll need to import the QRCodeDetector library. The reason for
separating these out into two different libraries is because video detection requires your app to have a
NSCameraUsageDescription defined in your including app (along with adding an AVFoundation dependency) if you're
putting it on the app store - something that you may not want if your app doesn't need it!
- For QR code generation, link against
QRCode - For QR code video detection, link against
QRCodeDetector
In your source
Swift: import QRCode
Objective-C: @import QRCode;
Using Tuist or similar
QRCode supports Objective-C at its core, allowing usage in both Swift and Objective-C.
While using QRCode directly in Xcode automatically supports this, it's important to make sure that you link against
the Objective-C library. If not, you WILL receive crashes during runtime.
You need to make sure your linker flags OTHER_LDFLAGS contains -ObjC to
For example, using Tuist you will need to add the following …
settings: Settings(
base: [
"OTHER_LDFLAGS": "-ObjC"
],
...
)
</details>
Creating a QR Code
You create a QR Code by creating an instance of QRCode.Document
Using Swift
let doc = try QRCode.Document(utf8String: "This is the content")
// Create a CGImage
let cgImage = try doc.cgImage(dimension: 400)
// Create a PNG image
let pngData = try doc.pngData(dimension: 400)
// Create a PDF (scalable content!)
let pdfData = try doc.pdfData(dimension: 400)
// Create an SVG (scalable content!)
let svgData = try doc.svgData(dimension: 400)
// Create a CGPath
let path = try doc.path(dimension: 400)
<details>
<summary>Objective-C</summary>
Using Objective-C
NSError* error = NULL;
QRCodeDocument* code = [[QRCodeDocument alloc] initWithUtf8String:@"This is the content"
errorCorrection:QRCodeErrorCorrectionHigh
engine:NULL
error:&error];
CGImageRef cgr = [doc cgImageWithDimension:400 error:&error];
</details>
| Bitmap | Vector | |----------|----------| |<a href='./Art/images/basic-doco-md-coreimage.png'><img src="./Art/images/basic-doco-md-coreimage.png" width="80"/></a>|<a href='./Art/images/basic-doco-md-coreimage.pdf'><img src="./Art/images/basic-doco-md-coreimage.png" width="80"/></a>|
Setting the error correction
@objc public var errorCorrection: QRCode.ErrorCorrection = .quantize
The QRCode.Document has 4 different encoding levels
| Error correction | Description | |------------------|:-----------------------------------------------------| | low | Lowest error correction (L - Recovers 7% of data) | | medium | Medium error correction (M - Recovers 15% of data) | | quantize | Quantize error correction (Q - Recovers 25% of data) | | high | High error correction (H - Recovers 30% of data) |
Generating your QR Code
QRCode.Document has many methods and styles for generating a QR Code.
Exportable types
| | |
|:-------------|:-------------|
| Bitmap types | PNG, TIFF, JPEG |
| Vector types | PDF, SVG |
| Path types | CGPath |
| Image Types | CGImage, NSImage, UIImage |
| Text types | json |
Settings
Set the QR code's encoded content
let doc = QRCode.Document("This is a test")
// Setting raw data
doc.data = Data(...)
// Setting text
doc.utf8String = "This is my text"
doc.setText("This is my text")
// Setting a message
doc.setMessage(...)
The higher the error correction level, the larger the QR code will be.
Design
QRCode supports a number of ways of 'designing' your qr code. By default, the qr code will be generated in its traditional form - square, black foreground and white background. By tweaking the design settings of the qr code you can make it a touch fancier.
WARNING
You can style your QR code so much that it can no longer be read by readers.
1. Always check that your QR code can be read **at the size that it will be presented to users**. (hint: use your phone!)
2. Have good contrast between the QR Code and its background
3. If you use 'off' pixels (see below) make sure they are very high contrast to the 'on' pixels.
4. Don't have high contrast between the 'on' pixels and the eye.
The design comprises two components :-
| | Description | |--------|:--------------------------------------------------------------------------| | shape | The shape of each of the individual components within the QR code | | style | The fill styles for each of the individual components within the QR code |
You can individually specify the shape and fill style for each of the components of the QR code.
QR code components
The QRCode is made up of four distinct components
- The 'on' data pixels (
onPixels) - The eye, which is made up of an
eye(the outer part of the eye) and apupil(the inner part). - The 'off' data pixels (
offPixels)
Styling your QR Code
Once you
