Adding Movable Markers to the Diagrams
For the marker we need a user interface element that allows for the easy input of a value between 0 and 1. UIKit provides the class UISlider, which perfectly fits this task. Open Main.storyboard and use the shortcut ⇧⌘L to open the library. Search for Slider and drag one above the button at the same horizontal level as the button. If the slider is located in the diagram stack view or the lower diagram view, delete it and try again. Drag another slider between the existing slider and the button.
We also need a label to display the result—the length of the swing—in the user interface. Search the library for Label and drag one above the first slider such that it is at the same hierarchical level as the two sliders. The resulting storyboard structure overview should look like the following image:
Before we connect the new user interface elements with the code, we need to adjust a few settings to make the user interface more pleasing to the eye. Select the label and open the attribute inspector using ⌥⌘5. Replace the content of the label with a hyphen and select the symbol for centering from the Alignment options. You should see the updated label in the scene of the storyboard.
Then select the outer stack view, open the attribute inspector with ⌥⌘5, and set the spacing to 5. These small changes improve the user interface a lot.
Next, select the first slider and change its value in the attribute inspector to 0. With this setting the slider thumb is all the way to the left when the view is loaded because the minimum of the slider is also set to 0. Set the value of the second slider to 1. Because the maximum of the slider is also set to 1, a value of 1 means that the slider thumb is all the way to the right when the view is loaded.
Now we can connect the label and the two sliders with the code. For the label we need an outlet (resultLabel), and for the sliders we need outlets (lowerBoundSlider and upperBoundSlider) and an action (sliderChanged). One action is enough, as we’ll differentiate the two sliders using their outlets. Before you read on, think about how you would do this.
Welcome back. Did you remember how this is done? Did you try to do it yourself? If you need to remove a connection because you made a mistake, press and hold control, click the corresponding element, and then click on the x of the connection you want to remove.
Here are the steps to connect the label and the sliders with the code. Open the assistant editor using ⌃⌥⌘↩. Press and hold control and drag a connection from the label to below the existing properties in MeasurementViewController. Type in the name resultLabel, make sure Connection is set to Outlet, and click Connect. Do the same for the two sliders and type in the names lowerBoundSlider and upperBoundSlider, respectively. Xcode adds lines for the properties like those highlighted in the following code:
| | @IBOutlet var xDiagramView: DiagramView! |
| | @IBOutlet var yDiagramView: DiagramView! |
| | @IBOutlet var zDiagramView: DiagramView! |
| » | @IBOutlet var resultLabel: UILabel! |
| » | @IBOutlet var lowerBoundSlider: UISlider! |
| » | @IBOutlet var upperBoundSlider: UISlider! |
Now let’s add the action for the sliders. Press and hold control and drag from the first slider below the last method in MeasurementViewController. Type in the name sliderChanged, make sure Connection is set to Action, change Type to UISlider, and then click Connect.
Press and hold control and drag a connection from the second slider to the name of the newly created method. Before you release the drag, Xcode should show a colored overlay on the method to inform us that this connection will go to this method rather than creating a new method. Release the drag. You can check the connection by hovering with the mouse pointer over the circle in the cutter of the code editor. Interface Builder shows the connected user interface elements with a colored overlay.
We’ll use vertical lines as a marker in the diagram views. To keep track of where the marker should be positioned, we need two properties. Add the following properties to DiagramView:
| | var lineOnePosition: CGFloat = 0.0 { |
| | didSet { |
| | setNeedsDisplay() |
| | } |
| | } |
| | var lineTwoPosition: CGFloat = 1.0 { |
| | didSet { |
| | setNeedsDisplay() |
| | } |
| | } |
All we need to know to draw the vertical lines is the position of the line. For the position we use a value between 0 and 1 corresponding to the left and right edges of the diagram view. As we did for the dataArray property, we call setNeedsDisplay when the property is changed. This triggers the execution of the draw(_:) method.
Next, we need to add the drawing code that uses these properties to draw vertical lines. Add the following method at the end of the class DiagramView:
| | func drawVerticalLine(at position: CGFloat, |
| | width: CGFloat, |
| | height: CGFloat) { |
| | |
| | let linePath = UIBezierPath() |
| | linePath.move(to: CGPoint(x: width * position, y: 0)) |
| | linePath.addLine(to: CGPoint(x: width * position, y: height)) |
| | |
| | UIColor.red.setStroke() |
| | linePath.lineWidth = 1 |
| | linePath.stroke() |
| | } |
In this code we create an instance of UIBezierPath and set the start and end point for the path such that we get a vertical line. The position parameter is given as a fraction of the width of the diagram view. In the last three lines we set the draw color and the line width, and then we draw the vertical line.
We need to call this method within the draw(_:) method for the two marker positions. Add the following code to the end of the draw(_:) method:
| | drawVerticalLine(at: lineOnePosition, width: width, height: height) |
| | drawVerticalLine(at: lineTwoPosition, width: width, height: height) |
As we’re already in the draw(_:) method in DiagramView, let’s add some code that draws a zero line into the diagram. Add the following code to the end of draw(_:):
| | let zeroPath = UIBezierPath() |
| | zeroPath.move(to: CGPoint(x: 0, y: y0)) |
| | zeroPath.addLine(to: CGPoint(x: width, y: y0)) |
| | |
| | UIColor.gray.setStroke() |
| | zeroPath.lineWidth = 1 |
| | zeroPath.stroke() |
This code draws a horizontal line from the left edge of the diagram view to the right edge at the vertical position y0.
Now that the diagram view can draw red vertical lines, open MeasurementViewController and add the following code in sliderChanged(_:):
| | @IBAction func sliderChanged(_ sender: UISlider) { |
| » | let value = CGFloat(sender.value) |
| » | if sender == lowerBoundSlider { |
| » | xDiagramView.lineOnePosition = value |
| » | yDiagramView.lineOnePosition = value |
| » | zDiagramView.lineOnePosition = value |
| » | } else if sender == upperBoundSlider { |
| » | xDiagramView.lineTwoPosition = value |
| » | yDiagramView.lineTwoPosition = value |
| » | zDiagramView.lineTwoPosition = value |
| » | } |
| | } |
This code converts the value of the slider to a CGFloat and assigns it to the line position property of the diagram views. It uses the slider passed into sliderChanged(_:) to decide which line position property should be set.
Build and run the app on your iPhone, and then collect motion data and try to move the markers. If the marker doesn’t move when you change the slider values, make sure that the sliders are correctly connected to the code and that the drawing code is set up correctly.