Start with the code from “Create a new project and add PaintAR”.
Copy //
// 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()
}
}
Create an extension and add a variable that provides an array of Color objects.
Copy 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
}
}
Create the required @State variables.
Copy @ObservedObject var model = ARStateModel()
@State private var colorIndex = 0
@State private var showStroke = true
var body: some View {
Copy 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()
}
}
Modify the view body to add the newly created colorPicker view.
Copy var body: some View {
ZStack {
ZStack(alignment: .bottom, content: {
arView
.edgesIgnoringSafeArea(.all)
colorPicker
})
}
.onAppear {
model.pickColor(paint: colorItems[0])
}
}
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.