iOS : Crash while Drawing Waveform embedded in UIScrollView - ios

Question

App crashes while drawing the Waveform which is superimposed on a UIScrollView, particularly at two statements alternatively. Following are the statements and errors which I'm encountering on the Draw Method (complete code below)
Note: The below error happens one at a time, not together.
No. 1
if values.count < length {
Thread 79: EXC_BAD_ACCESS (code=1, address=0x11a668008)
No. 2
toDraw.forEach({
Thread 129: EXC_BAD_ACCESS (code=1, address=0x11e23f030)
Complete Draw method with Relevant Properties and methods
import UIKit
final class RecordWaveViewer: UIView {
// MARK: - Properties
var liveLineColor = UIColor.white {
didSet { update() }
}
var savedLineColor = UIColor.gray {
didSet { update() }
}
var lineWidth: Float = 2.0 {
didSet { update() }
}
var lineSeparation: Float = 2.0 {
didSet { update() }
}
var values = [ValueElement]() {
didSet { update() }
}
var replacementValues = [ValueElement]()
var showPlayingProgress = false {
didSet { update() }
}
var playingProgress: CGFloat = 0.0 {
didSet { update() }
}
var playingProgressLineColor = Asset.Colors.yellow.color {
didSet { update() }
}
var offsetX: CGFloat = 0.0 {
didSet { update() }
}
var waveWidth: CGFloat {
CGFloat(values.count) * CGFloat(lineWidth + lineSeparation)
}
var actualWaveWidth: CGFloat {
guard let lastActualIndex = values.lastIndex(where: { $0.type == .live }) else {
return waveWidth
}
return CGFloat(lastActualIndex + 1) * CGFloat(lineWidth + lineSeparation)
}
var sampleWidth: CGFloat {
return CGFloat(lineWidth + lineSeparation)
}
private var replacementStartIndex: Int?
private let fillingPercentage: CGFloat = 0.95
private var tiledLayer: CATiledLayer {
layer as! CATiledLayer
}
override class var layerClass: AnyClass {
CATiledLayer.self
}
override var transform: CGAffineTransform { // Prevent vertical zoom
get { super.transform }
set {
var value = newValue
value.d = 1.0
super.transform = value
}
}
// MARK: - Override
override func layoutSubviews() {
super.layoutSubviews()
// Config tile
tiledLayer.tileSize = CGSize(width: 2048, height: bounds.height * contentScaleFactor)
}
///As per apple recomendation: https://developer.apple.com/library/archive/qa/qa1637/_index.html
override func draw(_ rect: CGRect) {
super.draw(rect)
}
override func draw(_ layer: CALayer, in ctx: CGContext) {
super.draw(layer, in: ctx)
// --------------------------- Lines
let rect = ctx.boundingBoxOfClipPath
let divider = CGFloat(lineWidth + lineSeparation)
let offSet = Int(rect.origin.x / divider)
var length = offSet + Int(rect.width / divider)
if self.values.count < length {
length = self.values.count
}
if (self.values.count > 0 ) {
let toDraw = self.values[offSet..<length]
// Lines offset
var xOffset: CGFloat = self.offsetX + rect.origin.x
// Show lines
toDraw.forEach({
var lineColor: UIColor
switch $0.type {
case .live:
lineColor = self.liveLineColor
case .saved:
lineColor = self.savedLineColor
}
// Line rect
let height = rect.height * CGFloat($0.value) * self.fillingPercentage
let y = (rect.height - height) / 2.0
// Draw line
ctx.setLineWidth(CGFloat(self.lineWidth))
ctx.setLineCap(.round)
ctx.move(to: CGPoint(x: xOffset, y: y))
ctx.addLine(to: CGPoint(x: xOffset, y: y + height))
ctx.setStrokeColor(lineColor.cgColor)
if self.showPlayingProgress && xOffset >= self.playingProgress {
ctx.setStrokeColor(lineColor.withAlphaComponent(0.5).cgColor)
}
ctx.strokePath()
// Add offset
xOffset += CGFloat(self.lineWidth + self.lineSeparation)
})
}
// --------------------------- Playing progress
if showPlayingProgress && playingProgress > 0.0 {
ctx.setLineWidth(CGFloat(lineWidth))
ctx.setStrokeColor(playingProgressLineColor.cgColor)
ctx.setLineCap(.square)
ctx.move(to: CGPoint(x: 1.0 + playingProgress, y: 0.0))
ctx.addLine(to: CGPoint(x: 1.0 + playingProgress, y: rect.height))
ctx.strokePath()
}
}
// MARK: - Custom
private func update() {
DispatchQueue.main.async {
self.setNeedsDisplay()
}
}
func add(value: Float, time: TimeInterval) {
if replacementStartIndex != nil {
addReplacement(value: value, time: time)
} else {
DispatchQueue.main.async {
self.values.append(ValueElement(value, .live, time: time))
}
}
}
func addReplacement(value: Float, time: TimeInterval) {
DispatchQueue.main.async {
let replacementValue = ValueElement(value, .live, time: time)
self.replacementValues.append(replacementValue)
let index = self.replacementValues.count - 1
guard let replacementStartIndex = self.replacementStartIndex,
replacementStartIndex < self.values.count,
index >= 0 else {
return
}
let replacementIndex = replacementStartIndex + index
if replacementIndex < self.values.count {
self.values[replacementIndex] = replacementValue
} else {
self.values.append(replacementValue)
}
}
}
func reset() {
DispatchQueue.main.async {
self.values.removeAll()
}
update()
}
func convertValuesToSaved() {
DispatchQueue.main.async {
self.values = self.values.compactMap({ ValueElement($0.value, .saved, $0.time )})
self.replacementValues.removeAll()
self.replacementStartIndex = nil
}
}
func startReplacement(at time: TimeInterval) {
DispatchQueue.main.async {
self.replacementStartIndex = self.values.firstIndex(where: { $0.time >= time })
}
}
}
// MARK: - Nested types
extension RecordWaveViewer {
typealias ValueElement = (value: Float, type: ValueType, time: TimeInterval)
enum ValueType {
case saved
case live
}
}
Sharing the two other statements outside the RecordWaveViewer Class where the value is getting updated from.
Statement 1:
DispatchQueue.main.async {
self.waveViewer.add(value: value, time: time)
}
Statement 2:
DispatchQueue.main.async {
self.waveViewer.values = values.compactMap({ RecordWaveViewer.ValueElement(value: $0.power, type: .saved, time: $0.time)})
}

Answer 1

You're continuing to interact with values on random threads, which is not permitted. You're using CATiledLayer, which is drawn asynchronously (that's much of its reason for existing). You can see this in the fact that your crashes are not on thread 1. They're on random threads.
Every time you access values, or any other property, in your draw method, you're creating a race condition.
The easiest way to fix all of this is to make your view or layer immutable. Set it up with all its properties (including values), and when any of the properties change, make a new view or layer. For a full example of this approach, see Apple's sample code (Apple no longer publishes this code, and the original was pre-ARC, but this link is an ARC-ified version from iOS 4).
If you can't make the layer immutable, then you need to put locks around the configuration and make sure to access it exactly one time at the start of the draw routine. This most easily done by putting all the configuration together into a single struct so that it can be read and written atomically. (You'll still need a lock or queue to make it thread-safe.)
You can also reconsider using CATiledLayer. You seem to only be using it for horizontal scrolling. For many problems, it's easier to use the common technique of 3-7 views that you rearrange in the scrollview as the user scrolls. For that you can use the simpler CALayer (or even just UIView). A big advantage of CATiledLayer is handling zooming (and particularly changes in detail level as you zoom), and you're not using that here. It's also pretty nice for handling large 2-D canvases (like maps), but you're not using that either.