- Change the circularSlider's value to function as the generic UIKit slider's value

- Enhance min/max values to support any range positive, negative or both.
- Enhance the label's text display by specifying decimal places or completely override it and set your own text.

KnobFramework.xcodeproj/project.pbxproj

@@ -89,8 +89,8 @@
 			isa = PBXGroup;
 			children = (
 				AF4F27CB21BC3B3200D39C60 /* KnobFramework.h */,
-				AF4F27D421BC3DD000D39C60 /* CircularLayer.swift */,
 				AF4F27D321BC3DD000D39C60 /* CircularSlider.swift */,
+				AF4F27D421BC3DD000D39C60 /* CircularLayer.swift */,
 				AF4F27D521BC3DD000D39C60 /* DotLayer.swift */,
 				AF4F27D921BC3DD000D39C60 /* DotView.swift */,
 				AF4F27D721BC3DD000D39C60 /* Extensions.swift */,

KnobFramework/CircularSlider.swift

@@ -227,21 +227,24 @@ open class CircularSlider: UIControl {
         set { renderer.miniDotView.highlightColor = newValue ? highlightColor : nil }
     }
 
-    @IBInspectable open var minimumValue: CGFloat {
-        get { return CGFloat(renderer.minimumValue) }
+    /**
+     This value will be pinned to minimumValue/maximumValue
+     The default value of this property is 0.0.
+     */
+    @IBInspectable open var value: CGFloat {        // always min <= value <= max
+        get { return CGFloat(renderer.value) * (maximumValue - minimumValue) + minimumValue }
         set {
-            renderer.minimumValue = Float(newValue)
-            setValue(value, isPercentage: true)
+            guard maximumValue >= minimumValue else {
+                fatalError("`maximumValue` should be greater then `minimumValue`.")
+            }
+            let rangedValue = min(maximumValue, max(minimumValue, newValue))
+            renderer.value = Float((rangedValue - minimumValue) / (maximumValue - minimumValue))
         }
     }
 
-    @IBInspectable open var maximumValue: CGFloat {
-        get { return CGFloat(renderer.maximumValue) }
-        set {
-            renderer.maximumValue = Float(newValue)
-            setValue(value, isPercentage: true)
-        }
-    }
+    @IBInspectable open var minimumValue: CGFloat = 0
+
+    @IBInspectable open var maximumValue: CGFloat = 100
 
     @IBInspectable open var startAngle: CGFloat {
         get { return renderer.startAngle.toDegree }
@@ -258,29 +261,34 @@ open class CircularSlider: UIControl {
         set { renderer.isClockwise = newValue }
     }
 
+    @IBInspectable open var isNegative: Bool {
+        get { return renderer.isNegative }
+        set { renderer.isNegative = newValue }
+    }
+
+    @IBInspectable open var labelDecimalPlaces: Int = 0
+
     // MARK: - Private Properties
 
     lazy private var renderer = Renderer(with: self)
     private var lastTouchAngle: CGFloat = 0
-    open private (set) var value: Float = 0      // 0 <= value <= 1
-
     private var centerPoint: CGPoint { return CGPoint(x: bounds.midX, y: bounds.midY) }
 
     // MARK: - Functions
 
     override public init(frame: CGRect) {
         super.init(frame: frame)
-        setValue(renderer.minimumValue)
+        value = minimumValue
     }
 
     required public init?(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
-        setValue(renderer.minimumValue)
+        value = minimumValue
     }
 
     override open func layoutSubviews() {
         super.layoutSubviews()
-        renderer.update(bounds, value: value)
+        renderer.updateUI(in: bounds)
     }
 
     // MARK: - Touches
@@ -291,6 +299,7 @@ open class CircularSlider: UIControl {
 
         let distanceToOrigin = location - centerPoint
         lastTouchAngle = atan2(distanceToOrigin.y, distanceToOrigin.x).toDegree
+        sendActions(for: .editingDidBegin)
     }
 
     override open func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
@@ -307,42 +316,32 @@ open class CircularSlider: UIControl {
 
         let angelDeltaAsPercentage = Float(angelDelta / angleRange)
         guard abs(angelDeltaAsPercentage) < 1 else { return }
-        let newValue  = isClockwise ? value + angelDeltaAsPercentage : value - angelDeltaAsPercentage
-        setValue(newValue, isPercentage: true)
+        let newValue = renderer.value + (isClockwise ? angelDeltaAsPercentage : -angelDeltaAsPercentage)
+        renderer.value = max(0, min(newValue, 1))
 
-        sendActions(for: .valueChanged)
     }
-    
+
+    open override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesEnded(touches, with: event)
+        sendActions(for: .editingDidEnd)
+    }
+
     // MARK: - Public
 
-    open func setValue(_ newValue: Float, isPercentage: Bool = false) {
-        guard maximumValue > minimumValue else {
-            fatalError("`maximumValue` should be greater then `minimumValue`.")
-        }
-
-        if isPercentage {
-            value = min(1, max(0, newValue))
-        } else {
-            // convert to percentage
-            let rangedValue = min(renderer.maximumValue, max(renderer.minimumValue, newValue))
-            value = (rangedValue - renderer.minimumValue) / (renderer.maximumValue - renderer.minimumValue)
-        }
-
-        // updates
-        renderer.updateText(with: value)
-        renderer.updatePointerView(in: bounds, value: value)
-        renderer.maxiDotView.updateColors(using: value)
-    }
-
-    open func setTextFont(named: String, textColor: UIColor, multiplier: CGFloat) {
+    open func setLabelFont(named: String, textColor: UIColor, multiplier: CGFloat) {
         textFontSizeMultiplier = multiplier
         let textSize = bounds.height * multiplier
         renderer.setTextFont(named: named, textColor: textColor, textSize: textSize)
     }
 
-    open func setTextShadow(color: UIColor, opacity: Float = 1, offset: CGSize = CGSize(width: 1, height: 1), radius: CGFloat = 0) {
+    open func setLabelShadow(color: UIColor, opacity: Float = 1, offset: CGSize = CGSize(width: 1, height: 1), radius: CGFloat = 0) {
         renderer.setTextShadow(color: color, opacity: opacity, offset: offset, radius: radius)
     }
+
+    open func setLabelText(_ text: String?) {
+        renderer.textField.text = text
+    }
+
 }
 
 class Renderer {
@@ -363,6 +362,11 @@ class Renderer {
             maxiDotView.isClockwise = isClockwise
         }
     }
+    fileprivate var isNegative: Bool = false {
+        didSet {
+
+        }
+    }
     fileprivate var textFieldIsHidden: Bool = false
     fileprivate var fontSizeMultiplier: CGFloat = 0.5
 
@@ -383,9 +387,18 @@ class Renderer {
         }
     }
 
-    fileprivate var minimumValue: Float = 0.0
-    fileprivate var maximumValue: Float = 100.0
+    fileprivate var value: Float = 0.0 {      // 0 <= renderer.value <= 1
+        didSet {
+            // updates
+            updateText()
+            if let bounds = circularSlider?.bounds {
+                updatePointerView(in: bounds)
+            }
+            maxiDotView.updateColors(using: value)
 
+            circularSlider?.sendActions(for: .valueChanged)
+        }
+    }
 
     // MARK: - Init
 
@@ -394,8 +407,8 @@ class Renderer {
         commonInit()
     }
 
-    func update(_ bounds: CGRect, value: Float) {
-        updatePointerView(in: bounds, value: value)
+    func updateUI(in bounds: CGRect) {
+        updatePointerView(in: bounds)
         updateTextField(in: bounds)
         updateDotViews(in: bounds)
     }
@@ -474,13 +487,14 @@ private extension Renderer {
 
     @objc func keyboardDoneButtonTapped() {
         textField.endEditing(true)
-        guard let circularSlider = circularSlider else { return }
         guard let text = textField.text, let newValue = Int(text) else {
-            updateText(with: circularSlider.value, isPercentage: true)
+            updateText()
             return
         }
-        circularSlider.setValue(Float(newValue))
-        maxiDotView.layoutSubviews()
+        circularSlider?.value = CGFloat(newValue)
+        circularSlider?.sendActions(for: .editingDidEnd)
+
+        //maxiDotView.setNeedsLayout()
     }
 
     // MARK: - Updates
@@ -510,20 +524,28 @@ private extension Renderer {
         textField.isHidden = textFieldIsHidden
     }
 
-    func updateText(with newValue: Float, isPercentage: Bool = true) {
-        var value = Int(newValue)
-        if isPercentage {
-            // convert value (0...1) to a value within proposed range
-            value = Int(newValue * (maximumValue - minimumValue) + minimumValue)
+    func updateText() {
+        guard let circularSlider = circularSlider else { return }
+
+        let minimum = Float(circularSlider.minimumValue)
+        let maximum = Float(circularSlider.maximumValue)
+        let _value = Float(circularSlider.value)
+
+        var decimalPlaces = circularSlider.labelDecimalPlaces
+        if value != 0 && _value.rounded(.towardZero) == 0 && decimalPlaces == 0 {
+            decimalPlaces = 2
         }
-        switch value {
-        case Int(minimumValue): textField.text = "MIN"
-        case Int(maximumValue): textField.text = "MAX"
-        default: textField.text = "\(value)"
+
+        guard let newValue = Float(String(format: "%.\(decimalPlaces)f", _value)) else { return }
+
+        switch newValue {
+        case minimum: textField.text = "MIN"
+        case maximum: textField.text = "MAX"
+        default: textField.text = String(format: "%.\(decimalPlaces)f", newValue)
         }
     }
 
-    func updatePointerView(in bounds: CGRect, value: Float) {
+    func updatePointerView(in bounds: CGRect) {
 
         let angleRange = angleDifferenceInDegree(from: startAngle.toDegree, to: endAngle.toDegree, isClockwise: isClockwise)
         let angle = isClockwise ? startAngle.toDegree + (angleRange * CGFloat(value)) : startAngle.toDegree - (angleRange * CGFloat(value))

KnobFramework/DotView.swift

@@ -162,3 +162,4 @@ private extension DotView {
         }
     }
 }
+

KnobFramework/Extensions.swift

@@ -24,6 +24,13 @@ extension FloatingPoint {
         let degree = self * 180 / .pi
         return degree >= 0 ? degree : 360 + degree
     }
+
+    public func roundedDown(toPlaces places: Int) -> Self {
+        let rounded = self.rounded(.down)
+        let power = Self(Int(powf(10, Float(places))))
+        let decimal = ((self - rounded) * power).rounded(.down)
+        return rounded + (decimal / power)
+    }
 }
 
 extension CGPoint {
@@ -53,3 +60,4 @@ extension CALayer {
         return UIBezierPath(ovalIn: bounds.insetBy(dx: bounds.width * multiplier, dy: bounds.height * multiplier))
     }
 }
+

KnobFramework/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>FMWK</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.2</string>
+	<string>2.0.0</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 </dict>

README.md

@@ -57,34 +57,58 @@ circularSlider.isClockwise = false
 ```
 These are just few of the many params you can configure for the slider.
 
-The slider's `value` property is read-only.
+The slider's  min/max values are IBInspectable and default to 0.0 and 100.0 respectively.
+They also support negative and positive values or a mixture of them. 
+
 ```swift
-/**
-returns a value in the range 0.0 (minimumValue) to 1.0 (maximumValue). 
-The default value of this property is 0.0. 
-*/
-open private (set) var value: Float = 0
+@IBInspectable open var minimumValue: CGFloat = 0
+@IBInspectable open var maximumValue: CGFloat = 100
 ```
 
-To set the slider's value use the following:
+The slider's `value` property is both { get set } and it is designed to work similarly to the familiar value property of UIKit's generic UISlider.
+
 ```swift
 /**
-Set the `value`.
-- parameter newValue:      if `isPercentage` then new value must be in the range 0.0 to 1.0
-- parameter isPercentage:  specifies if newValue is in the range [0.0, 1.0] or not
+This value will be pinned to minimumValue/maximumValue
+The default value of this property is 0.0. 
 */
-open func setValue(_ newValue: Float, isPercentage: Bool = false)
+@IBInspectable open var value: CGFloat  // { get set }
+
 ```
 
 In order to get value change notifications, use the `Target-Action` pattern which is an inherent part of UIControl, like so:
 ``` swift
-circularSlider.addTarget(target: Any?, action: Selector, for: UIControl.valueChanged)
+/**
+Add target/action for particular event.
+- parameter target:     The object whose action method is called
+- parameter action:     A selector identifying the action method to be called
+- parameter Event:      The control-specific events for which the action method is called
+So far I've only implemented the following:
+
+UIControl.Event.valueChanged
+UIControl.Event.editingDidBegin
+UIControl.Event.editingDidEnd
+*/
+circularSlider.addTarget(target: Any?, action: Selector, for: UIControl.Event)
+
 ```
 
-To Control the text's appearance, use these:
+To Control the appearance of the label displaying the value, use these:
 ```swift
-open func setTextFont(named: String, textColor: UIColor, multiplier: CGFloat)
-open func setTextShadow(color: UIColor, opacity: Float = 1, offset: CGSize = CGSize(width: 1, height: 1), radius: CGFloat = 0)
+open func setLabelFont(named: String, textColor: UIColor, multiplier: CGFloat)
+open func setLabelShadow(color: UIColor, opacity: Float = 1, offset: CGSize = CGSize(width: 1, height: 1), radius: CGFloat = 0)
+```
+
+You can also specify the number of decimal places this label should show. 
+The default is 0.0 unless for example the value is within [0.0, 1.0]
+```swift
+@IBInspectable open var labelDecimalPlaces: Int = 0
+```
+If you need to override the text in the label, then just implement the following function inside the selector of the `Target-Action`
+method for the event `UIControl.Event.valueChanged`
+
+```swift
+open func setLabelText(_ text: String?)
 ```
 
 ## References