Section 2 - Add a color picker

Add a color picker to select colors for Remodel-AR.

Step 1

Start with the code from “Create a new project and add PaintAR”.

//
//  ContentView.swift
//  Painty
//

import RemodelAR
import SwiftUI

struct ContentView: View {
    @ObservedObject var model = ARStateModel()

    var body: some View {
        arView
            .edgesIgnoringSafeArea(.all)
    }
}

private extension ContentView {
    var arView: ARView {
        RemodelARLib.makeARView(model: model, arMethod: .Lidar)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Step 2

Create an extension and add a variable that provides an array of Color objects.

private extension ContentView {
    var colorItems: [WallPaint] {
        let numHues = 20
        var colors = [WallPaint]()
        for i in 0..<numHues {
            let color_8_8 = Color(hue: Double(i)/Double(numHues),
                                  saturation: 0.8,
                                  brightness: 0.8)
            let color_8_6 = Color(hue: Double(i)/Double(numHues),
                                  saturation: 0.8,
                                  brightness: 0.6)
            let color_8_4 = Color(hue: Double(i)/Double(numHues),
                                  saturation: 0.8,
                                  brightness: 0.4)
            let color_8_2 = Color(hue: Double(i)/Double(numHues),
                                  saturation: 0.8,
                                  brightness: 0.2)

            colors.append(WallPaint(id: "\(i * 4 + 1)", color: color_8_8.uiColor()))
            colors.append(WallPaint(id: "\(i * 4 + 2)", color: color_8_6.uiColor()))
            colors.append(WallPaint(id: "\(i * 4 + 3)", color: color_8_4.uiColor()))
            colors.append(WallPaint(id: "\(i * 4 + 4)", color: color_8_2.uiColor()))
        }
        return colors
    }
}

Step 3

Create the required @State variables.

    @ObservedObject var model = ARStateModel()

    @State private var colorIndex = 0
    @State private var showStroke = true

    var body: some View {

Step 4

Add a variable to the extension that creates a color picker view

    var colorPicker: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0..<colorItems.count) { i in
                    Button(action: {
                        showStroke = true
                        colorIndex = i
                        model.pickColor(paint: colorItems[i])
                    }) {
                        RoundedRectangle(cornerRadius: 17)
                            .strokeBorder(lineWidth: (showStroke && i == colorIndex) ? 5 : 0)
                            .foregroundColor(.white)
                            .background(Color(colorItems[i].color))
                            .clipShape(RoundedRectangle(cornerRadius: 17))
                            .frame(width: 74, height: 74)
                            .animation(Animation.interpolatingSpring(stiffness: 60, damping: 15))
                    }
                    .onTapGesture {
                        self.showStroke = true
                    }
                }
            }
            .padding()
        }
    }

Step 5

Modify the view body to add the newly created colorPicker view.

    var body: some View {
        ZStack {
            ZStack(alignment: .bottom, content: {
                arView
                    .edgesIgnoringSafeArea(.all)
                colorPicker
            })
        }
        .onAppear {
            model.pickColor(paint: colorItems[0])
        }
    }

Step 6

Build and run your project. You will see a color picker has been added to the view. Scroll through the color picker and select different colors before tapping on the walls. You should be able to paint walls different colors now.

If at any point you need help from the Passio team, please reach out to us at [e-mail]