Is there a way to make QRCode.Document live and getting it working inside a SwiftUI View?

[vicvoh]

Hi Darren!

I've been trying to make a view that only displays a QR-code which you can call in a different View. The code looks like this:

import SwiftUI
import QRCode

struct StyleableQRCode: View {
    
    @State var data: String
    
    @State var pixelColor: String
    @State var eyeColor: String
    @State var pupilColor: String
    
    @State var backgroundColor: String
    
    @State var pixelStyle: Int
    @State var eyeStyle: Int
    @State var pupilStyle: Int
    
    @State var errorCorrection: Int
    
    @State var quietSpace: UInt
    @State var cornerRadius: Int
    
    @State var errorCorrectionScale: QRCode.ErrorCorrection = .default
    
    @State var exportType: Int
    
    //@State var imageType: ImageExportType = .png()
    
    var body: some View {
        
        let doc = try? QRCode.Document(utf8String: data)
        
        doc?.errorCorrection = errorCorrectionScale
        
        doc?.design.style.background = QRCode.FillStyle.Solid(hexString: backgroundColor)
        
        doc?.design.additionalQuietZonePixels = quietSpace
        
        doc?.design.style.backgroundFractionalCornerRadius = CGFloat(cornerRadius)
        
        doc?.design.shape.onPixels = QRCode.PixelShape.Square()
        doc?.design.style.onPixels = QRCode.FillStyle.Solid(hexString: pixelColor)
        
        doc?.design.shape.eye = QRCode.EyeShape.Square()
        doc?.design.style.eye = QRCode.FillStyle.Solid(hexString: eyeColor)
            //.offPixels.shape(QRCode.PixelShape.Circle(insetFraction: 0.3))
            //.offPixels.style(QRCode.FillStyle.Solid(0, 0, 0, alpha: 0.1))
        let png = try! doc!.pngData(dimension: 1024)
        
        QRCodeDocumentUIView(document: doc?)
    }
}

#Preview {
    StyleableQRCode(
        data: "Test",
        pixelColor: "000000",
        eyeColor: "000000",
        pupilColor: "000000",
        backgroundColor: "FFFFFF",
        pixelStyle: 0,
        eyeStyle: 0,
        pupilStyle: 0,
        errorCorrection: 0,
        quietSpace: 0,
        cornerRadius: 0,
        exportType: 0
    )
}

Thanks! 😊

[dagronf]

Hey mate,

The library provides the SwiftUI class QRCodeViewUI which might be good enough for what you're trying to do?

import SwiftUI
import QRCode

struct ContentView: View {

   @State var content: String = "test"
   @State var errorCorrection: QRCode.ErrorCorrection = .quantize

   @State var foregroundColor: Color = .black
   @State var backgroundColor: Color = .white

   @State var quietSpace: Double = 0

   var body: some View {
      HStack {
         Form {
            TextField("content", text: $content)
            Picker("Error correction", selection: $errorCorrection) {
               Text("Low").tag(QRCode.ErrorCorrection.low)
               Text("Medium").tag(QRCode.ErrorCorrection.medium)
               Text("Quantize").tag(QRCode.ErrorCorrection.quantize)
               Text("High").tag(QRCode.ErrorCorrection.high)
            }

            ColorPicker("Foreground Color", selection: $foregroundColor)
            ColorPicker("Background Color", selection: $backgroundColor)

            Slider(value: $quietSpace, in: 0 ... 6) {
               Text("Quiet space")
            }
         }
         QRCodeViewUI(
            content: content,
            errorCorrection: errorCorrection,
            foregroundColor: foregroundColor.cgColor ?? .black,
            backgroundColor: backgroundColor.cgColor ?? .white,
            additionalQuietZonePixels: UInt(quietSpace.rounded(.towardZero))
         )
      }
      .padding()
   }
}

#Preview {
   ContentView()
}

[vicvoh]

Oh, I know this one, the problem is that I don't find it possible to customise it as much as the QRCode.Document or QRCode.Build. For example, changing the pupil color isn't possible. Maybe you could add more functions or just make it more simple by only needing to apply modifiers, here's an example:

QRCodeViewUI(string: "Example")
     .pixelColor(CGColor())
     .errorCorrection(.default)
      // And so on...

Sorry for the delayed response.

[dagronf]

Version 23.1.0 now has all of the settings pushed through the QRCodeViewUI initializer

See how you go

[dagronf]

@vicvoh Did you close this?

[dagronf]

If you're happy with this, please mark it as 'answered' before closing so that it doesn't look like I've just ignored it.