1

simulator gif
physical device gif

In my swift app I made a custom chart to display the history of stock prices. A single finger touch will display that specific stock price and date. a two finger touch will display the average across the prices.

My problem is, whenever I execute my app in a simulator it works fine while using two finger(option+mouse). but while executing on a physical device(iPhone 5s) and using 2 fingers the two bars seems to move erratically across and starts to flicker.

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    handleTouch(touches: touches)
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

    if delegate != nil{
        delegate!.chartStopped()
    }

}

private func handleTouch(touches:Set<UITouch>){
    if touches.count == 1{
        if let loc = touches.first?.location(in: self){
            let xRawValue = getClosest(searchValue: Int(loc.x), arrayValue: self.xRaw)
            let yRawValue = self.yRaw[self.xRaw.index(of: xRawValue)!]
            self.date = self.x[self.xRaw.index(of: xRawValue)!]
            self.price = self.y[self.xRaw.index(of: xRawValue)!]
            drawLines(xRawValue: xRawValue, yRawValue: yRawValue,lineLayer: lineLayer,circleLayer: circleLayer)
            //self.lineLayerS.path = UIBezierPath().cgPath
            //self.circleLayerS.path = UIBezierPath().cgPath
            if delegate != nil{
                delegate!.chartMoved(currentPrice: self.price, currentDate: self.date)
            }
        }
    } else if touches.count == 2{
        var touch = touches
        let touchF = touch.popFirst()
        if var loc1 = touchF?.location(in: self), var loc2 = touch.first?.location(in: self){
            if loc1.x > loc2.x{
                swap(&loc1, &loc2)
            }


            let xRawValue1 = getClosest(searchValue: Int(loc1.x), arrayValue: self.xRaw)
            let xIndex1 = self.xRaw.index(of: xRawValue1)!

            let yRawValue1 = self.yRaw[xIndex1]

            let xRawValue2 = getClosest(searchValue: Int(loc2.x), arrayValue: self.xRaw)
            let xIndex2 = self.xRaw.index(of: xRawValue2)!

            let yRawValue2 = self.yRaw[xIndex2]



            var averageSum = 0.0
            for i in xIndex1..<xIndex2{
                averageSum += Double(self.y[i])
            }
            averageSum = averageSum/Double(xIndex2-xIndex1)
            self.date = self.x[xIndex1]+"-"+self.x[xIndex2]
            self.price = Float(averageSum)
            if delegate != nil{
                delegate!.chartMoved(currentPrice: self.price, currentDate: self.date)
            }
            drawLines(xRawValue: xRawValue1, yRawValue: yRawValue1,lineLayer: lineLayer,circleLayer: circleLayer)
            drawLines(xRawValue: xRawValue2, yRawValue: yRawValue2,lineLayer: lineLayerS,circleLayer: circleLayerS)
        }
    }
}


private func drawLines(xRawValue xV:Int,yRawValue yV:Int,lineLayer:CAShapeLayer,circleLayer:CAShapeLayer){
    let line = UIBezierPath(rect: CGRect(x: xV, y:0, width: 1, height: Int(self.frame.height)))
    lineLayer.path = line.cgPath
    lineLayer.strokeColor = UIColor.black.cgColor
    circleLayer.path = UIBezierPath(ovalIn: CGRect(x: xV-4, y: yV-4, width: 8, height: 8)).cgPath;
    circleLayer.strokeColor = Colors.blueDark.cgColor
    circleLayer.fillColor = Colors.blueDark.cgColor
    self.layer.addSublayer(circleLayer)
}

https://www.youtube.com/watch?v=7RiWXxYh9pk&feature=youtu.be <- simulator screen recording https://www.youtube.com/watch?v=NfSb09NKxH4&feature=youtu.be <- physical device screen recording

3

2 Answers 2

0

Here is one way you to solve the problem.

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touch in touches {
        let touch = touch.location(in: self)

        //height --> height of your chart
        let touchArea = SKSpriteNode(color: .clear, size: CGSize(width: 20, height: 200))
        touchArea.position = touch
    }
}

You can create a range in which the first touch is recognized so there should be no problem any longer. The problem is that when your devices recognize a touch from your finger the device can't locate the touch exactly since you are touching several pixels at the same moment.

Apple solves this problem by allowing the position of the line to be only at the edges of the chart as you can see on the stocks app.

Let me know if it worked.

0

touches parameter in touchesMoved method contains only touches that has changed.
You might have two fingers on the screen: one finger is still and the other is moving. In this case there will be only a single UITouch in touches.

What you need is event.allTouches — it contains all existent touches.

Or, event better: event.allTouches.filter {$0.phase != .ended && $0.phase != .cancelled} — to filter out cancelled and finished touches.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.