property reversePercentage and thumbLabelFormatter added to ColorSliderControl to allow for more control over thumb label (slider percentage).

fixed issue #29

Author: Rastislav Mirek

CHANGELOG.md

@@ -2,19 +2,28 @@
 
 All notable changes to this project will be documented in this file.
 
-## 1.4.2 - 2019-5-06
+## 1.4.3 - 2020-6-04
+
+### Added
+- property `reversePercentage` and `thumbLabelFormatter` added to `ColorSliderControl` and property `reverseBrightnessPercentage` added to `DefaultColorPickerViewController` to allow for more control over thumb label (slider percentage).
+- new row added to demo demonstrating use of `reverseBrightnessPercentage` with `DefaultColorPickerViewController`
+
+### Fixed
+Issue  #29: Is it me or is does brightness work backwards?
+
+## 1.4.2 - 2020-5-06
 
 ### Fixed
 Issue #27 that prevented compilation of 1.4.1 when installed via SPM. 
 
-## 1.4.1 - 2019-5-04
+## 1.4.1 - 2020-5-04
 
 WARNING: Do not use this realese. It does not compile when istaled via SPM. Use 1.4.2 instead.
 
 ### Fixed
 Cocoapods pod file version
 
-## 1.4 - 2019-5-03
+## 1.4 - 2020-5-03
 
 ### Added
 - complete support for iOS dark mode

FlexColorPicker.podspec

@@ -9,7 +9,7 @@
 Pod::Spec.new do |s|
   s.name             = 'FlexColorPicker'
   s.module_name      = 'FlexColorPicker'
-  s.version          = '1.4.2'
+  s.version          = '1.4.3'
   s.summary          = 'Modern & flexible full spectrum color picker written in Swift 5. Supports HSB and RGB color models.'
 
   s.description      = <<-DESC

FlexColorPicker/Classes/Controls/ColorSliderControl.swift

@@ -42,6 +42,24 @@ open class ColorSliderControl: ColorControlWithThumbView {
     public let gradientBackgroundView = UIImageView()
     /// Previews color options avaialable va chnaging value of the slider in form of linear gradient.
     public let gradientView = GradientView()
+    
+    /// When `true` the thumb shows 100% label for left-most possition of the slider and 0% for right-most possition. Default is `false` (0% is displayed on left). Has no effect if `thumbLabelFormatter` is set.
+    ///
+    /// This is usefull e.g. when "physically correct" percentage label behaviour of `BrightnessSliderControl` is preferred (as the most "bright" color is on the left of the slider in that case).
+    public var reversePercentage: Bool = false {
+        didSet {
+            let (value, _, _) = sliderDelegate.valueAndGradient(for: selectedHSBColor)
+            updatePercentageLabel(for: value)
+        }
+    }
+    
+    /// When set to non-nil value it will be used to generate label text of `thumbView` directly instead of via setting `thumbView`s `percentage` property. setting this overrides `percentage` property.
+    public var thumbLabelFormatter: ((CGFloat) -> String)? {
+        didSet {
+            let (value, _, _) = sliderDelegate.valueAndGradient(for: selectedHSBColor)
+            updatePercentageLabel(for: value)
+        }
+    }
 
     /// Whether to display default thin border around the slider.
     @IBInspectable
@@ -109,11 +127,18 @@ open class ColorSliderControl: ColorControlWithThumbView {
     open override func updateSelectedColor(at point: CGPoint, isInteractive: Bool) {
         let gradientLength = contentBounds.width - thumbView.colorIdicatorRadius * 2
         let value = max(0, min(1, (point.x - thumbView.colorIdicatorRadius) / gradientLength))
-        thumbView.percentage = Int(round(value * 100))
+        updatePercentageLabel(for: value)
         setSelectedHSBColor(sliderDelegate.modifiedColor(from: selectedHSBColor, with: min(max(0, value), 1)), isInteractive: isInteractive)
         sendActions(for: .valueChanged)
     }
 
+    public func updatePercentageLabel(for value: CGFloat) {
+        thumbView.percentage = Int(round((reversePercentage ? 1 - value : value) * 100))
+        if let thumbLabelFormatter = thumbLabelFormatter {
+            thumbView.percentageLabel.text = thumbLabelFormatter(value)
+        }
+    }
+    
     /// Updates  border color of the color slider control when interface is changed to dark or light mode.
     open override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         super.traitCollectionDidChange(previousTraitCollection)

FlexColorPicker/Classes/Controls/ComponentSliderControls.swift

@@ -40,7 +40,20 @@ final public class SaturationSliderControl: ColorSliderControl {
 /// Color slider that allows to change brightness (in terms of HSB color model) of currently selected color by panning the slider line or by tapping it.
 ///
 /// Tapping left end of the slider will select slider's current color modified to have 100% brightness. Tapping right edge of the slider will select current color modified to have 0% brightness.
+///
+/// - Note: Unlike other provided sliders, this slider's default thumb label percentage shown does not correspond to actual physical properties of the selected color.
+/// When thumb is on lift-most side of the slider it shows 0% while the color brightness is actually 100% (and vice-versa for the right-most thumb position). This is intentional as most users expect such behaviour.
+/// If "physically correct" percentage label behaviour is preferred (this is usually the case when you your UI labels this slider as "Brightness:" or when your user base might be more knowleadgable about colors theory) set property `reversePercentage` to true.
 final public class BrightnessSliderControl: ColorSliderControl {
+    
+    /// When `true` the thumb shows 100% label for left-most possition of the slider and 0% for right-most possition. Default is `false` (0% is displayed on left). Has no effect if `thumbLabelFormatter` is set.
+    ///
+    /// This is usefull when "physically correct" percentage label behaviour is preferred (as the most "bright" color is on the left of the slider).
+    @IBInspectable
+    public override var reversePercentage: Bool {
+        didSet {} // override only to add inspectable
+    }
+    
     public override func commonInit() {
         sliderDelegate = BrightnessSliderDelegate()
         super.commonInit()

FlexColorPicker/Classes/DefaultColorPickerViewController.swift

@@ -91,6 +91,19 @@ open class DefaultColorPickerViewController: UIViewController, ColorPickerContro
             (colorPalette as? RectangularPaletteControl)?.borderOn = rectangularPaletteBorderOn
         }
     }
+    
+    /// When `true` the brightness slider label shows 100% for the left-most possition of the slider thumb and 0% for right-most possition. Default is `false` (0% is displayed on left).
+    ///
+    /// This is usefull when "physically correct" percentage label behaviour of `BrightnessSliderControl` is preffered (as the most "bright" color is on the left of the slider). However, default value corresponds to the behaviour most users expect.
+    @IBInspectable
+    public var reverseBrightnessPercentage: Bool {
+        get {
+            return brightnessSlider.reversePercentage
+        }
+        set {
+            brightnessSlider.reversePercentage = newValue
+        }
+    }
 
     /// Color picker delegate that gets called when selected color is updated or confirmed. The delegate is not retained. This is just convinience property and getting or setting it is equivalent to getting or setting `colorPicker.delegate`.
     open var delegate: ColorPickerDelegate? {

FlexColorPicker/Classes/Views/ColorPickerThumbView.swift

@@ -45,6 +45,9 @@ private let percentageTextFont = UIFont.monospacedDigitSystemFont(ofSize: 14, we
 open class ColorPickerThumbView: UIViewWithCommonInit {
     public let borderView: CircleShapedView = LimitedGestureCircleView()
     public let colorView: CircleShapedView = LimitedGestureCircleView()
+    /// The label with thumb text visible while user is repositioning this thumbView.
+    ///
+    /// Typically used to show slider percentage or other selected value. See also `showPercentage`.
     public let percentageLabel = UILabel()
     /// When `true` the border automatically darken when color is too bright to be contrast enought with white border.
     public var autoDarken: Bool = true
@@ -68,6 +71,9 @@ open class ColorPickerThumbView: UIViewWithCommonInit {
     }
     private(set) open var color: UIColor = defaultSelectedColor.toUIColor()
 
+    /// The percentage displayed in `percentageLabel` unless overriden by dirrectly setting `percentageLabel.text` after setting this property.
+    ///
+    /// Note: In `ColorSliderControl`s this typically corresponds to value of the slider but must not correspond to actual text displayed in `thumbLabel` if `ColorSliderControl.thumbLabelFormatter` is set.
     open var percentage: Int = 0 {
         didSet {
             updatePercentage(percentage)

FlexColorPicker/FlexColorPicker.xcodeproj/project.pbxproj

@@ -432,7 +432,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 23;
+				CURRENT_PROJECT_VERSION = 24;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = UWF3VQ79QJ;
 				DYLIB_COMPATIBILITY_VERSION = 1;
@@ -446,7 +446,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.4.2;
+				MARKETING_VERSION = 1.4.3;
 				PRODUCT_BUNDLE_IDENTIFIER = com.typesoft.FlexColorPicker;
 				PRODUCT_NAME = "$(TARGET_NAME:c99extidentifier)";
 				SKIP_INSTALL = YES;
@@ -463,7 +463,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 23;
+				CURRENT_PROJECT_VERSION = 24;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = UWF3VQ79QJ;
 				DYLIB_COMPATIBILITY_VERSION = 1;
@@ -477,7 +477,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.4.2;
+				MARKETING_VERSION = 1.4.3;
 				PRODUCT_BUNDLE_IDENTIFIER = com.typesoft.FlexColorPicker;
 				PRODUCT_NAME = "$(TARGET_NAME:c99extidentifier)";
 				SKIP_INSTALL = YES;