joncardasis/ChromaColorPicker
1
1
Fork 0
mirror of https://github.com/joncardasis/ChromaColorPicker.git synced 2024-11-29 11:15:55 +03:00
Code Issues Projects Releases Wiki Activity

Added new readme for ChromaColorPicker 2. Moved old readme to legacy.

Browse Source
This commit is contained in:
Jonathan Cardasis 2019-04-14 13:45:19 -04:00
parent 1a1179fbe6
commit 777dcbaad3
3 changed files with 149 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.github/Logo.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

125
README-Legacy.md Normal file
View File

@ -0,0 +1,125 @@
# ChromaColorPicker :art:
![Supported Version](https://img.shields.io/badge/Swift-4.2-yellow.svg)
![Platform](https://img.shields.io/badge/platform-iOS-lightgray.svg)
![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Carthage](https://img.shields.io/badge/Carthage-✔-green.svg)
![CocoaPods](https://img.shields.io/badge/CocoaPods-1.7.1-green.svg)
![CocoaPods](https://img.shields.io/badge/CocoaPods-1.7.1-green.svg)
[![Travis CI](https://travis-ci.com/joncardasis/ChromaColorPicker.svg?branch=develop)](https://travis-ci.com/joncardasis/ChromaColorPicker)
*An intuitive iOS color picker built in Swift.*
Supports hue and grayscale modes to make choosing the right color easy and fun!
<div>
<img src="../assets/Screenshot-With-BG.png?raw=true" height="350" style="margin:8px;">
<img src="../assets/Screenshot-Grayscale.png?raw=true" height="350" style="margin:8px;">
</div>
## Installation
### Carthage
```
github "joncardasis/ChromaColorPicker"
```
### Cocoapods
```
pod 'ChromaColorPicker'
```
### Manually
Add all files from the ChromaColorPicker folder to your project.
## Examples
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
neatColorPicker.delegate = self //ChromaColorPickerDelegate
neatColorPicker.padding = 5
neatColorPicker.stroke = 3
neatColorPicker.hexLabel.textColor = UIColor.white
view.addSubview(neatColorPicker)
```
<img src="../assets/demo.gif?raw=true" width="225">
If the ChromaColorPicker or any of its properties are later updated after being added to a view, the `layout()` function should be called to update the view.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.addSubview(neatColorPicker)
neatColorPicker.padding = 0
neatColorPicker.hexLabel.hidden = true
neatColorPicker.layout()
```
You can also set the color of the picker anytime by using the `adjustToColor(color:)` function.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
...
neatColorPicker.adjustToColor(UIColor.green)
...
```
### Enable Grayscale Support
A toggle button can be enabled/disabled to allow for grayscale selections by using the `supportsShadesOfGray` property.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
...
neatColorPicker.supportsShadesOfGray = true // Normally false be default
```
## Customization
<img src="../assets/Design_Breakdown.png?raw=true" width="350">
### Properties
| Property | Description |
| :-------------: |:-------------|
| delegate | ChromaColorPickerDelegate |
| padding | The padding on each side of the view (default=10) |
| stroke | The stroke of the rainbow track (default=1) |
| currentColor | The currently set color by the control. It is displayed in the add button. Use `adjustToColor(color: UIColor)` to update the color.|
| currentAngle | The angle which the handle is currently sitting at. Can be changed and the view can be re-drawn using `layout()` to show the change.
| handleSize | Returns the size of the handle. |
| supportsShadesOfGray | True/False if a toggle for supporting grayscale colors should be shown. |
### Functions
| Function | Description |
| :-------------: |:-------------|
|layout() | Layout the entire picker and all its subviews.|
|adjustToColor(color: ) | Updates the picker to a specific color.|
### Sub-Components
Sub-Components can be hidden and customized to the preferred liking.
| Component | Description |
| :-------------: |:-------------|
| hexLabel | A UILabel which displays the hex value of the current color. |
| shadeSlider | A custom slider which adjusts the shade of the current color. |
| addButton | A custom UIButton in the center of the control. The `colorPickerDidChooseColor(colorPicker: color:)` delegate function is called when this is tapped. |
| handleView | A ChromaHandle (custom UIView) which displays the current color and can be moved around the circle.|
| handleLine | A line which is drawn from the addButton to the handleView. |
| colorToggleButton | A custom UIButton which appears if `supportsShadesOfGray` is set to true and will switch the picker to a grayscale mode if pressed.|
### Supported UIControlEvents
`.touchDown` -> called when the handle is first grabbed
`.touchUpInside` -> called when handle is let go
`.valueChanged` -> called whenever the color has changed hue or shade
`.touchDragInside` -> called when the handle has moved by a drag action
`.editingDidEnd` -> called when either the handle is let go or slider is let go
## Additional Info
Check out the [Wiki](https://github.com/joncardasis/ChromaColorPicker/wiki/Challenges-and-Solutions) if you're interested in reading into how the color wheel was created.
## License
ChromaColorPicker is available under the MIT license. See the LICENSE file for more info.

123
README.md
View File

@ -1,20 +1,19 @@
# ChromaColorPicker :art: <p align="center">
![Supported Version](https://img.shields.io/badge/Swift-4.2-yellow.svg) <img src=".github/Logo.png" width="480" max-width="90%" alt="ChromaColorPicker 2.0" />
![Platform](https://img.shields.io/badge/platform-iOS-lightgray.svg) </p>
![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Carthage](https://img.shields.io/badge/Carthage-✔-green.svg)
![CocoaPods](https://img.shields.io/badge/CocoaPods-1.7.1-green.svg)
![CocoaPods](https://img.shields.io/badge/CocoaPods-1.7.1-green.svg)
[![Travis CI](https://travis-ci.com/joncardasis/ChromaColorPicker.svg?branch=develop)](https://travis-ci.com/joncardasis/ChromaColorPicker)
*An intuitive iOS color picker built in Swift.* <p align="center">
<img src="https://img.shields.io/badge/Swift-5.0-orange.svg" />
<img src="https://img.shields.io/badge/platform-iOS-lightgray.svg" />
<img src="https://img.shields.io/badge/license-MIT-blue.svg" />
<img src="https://img.shields.io/badge/pod-1.7.1-green.svg" />
<img src="https://img.shields.io/badge/Carthage-compatible-green.svg" />
<img src="https://travis-ci.com/joncardasis/ChromaColorPicker.svg?branch=develop" />
</p>
Supports hue and grayscale modes to make choosing the right color easy and fun! An intuitive HSB color picker built in Swift. Supports multiple selection handles and is customizable to your needs.
<div> > TODO: Image / GIF
<img src="../assets/Screenshot-With-BG.png?raw=true" height="350" style="margin:8px;">
<img src="../assets/Screenshot-Grayscale.png?raw=true" height="350" style="margin:8px;">
</div>
## Installation ## Installation
### Carthage ### Carthage
@ -27,99 +26,25 @@ github "joncardasis/ChromaColorPicker"
pod 'ChromaColorPicker' pod 'ChromaColorPicker'
``` ```
### Manually ### Manually
Add all files from the ChromaColorPicker folder to your project. Add all files from the `Source` folder to your project.
## Examples ## Examples
```Swift ```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
neatColorPicker.delegate = self //ChromaColorPickerDelegate
neatColorPicker.padding = 5
neatColorPicker.stroke = 3
neatColorPicker.hexLabel.textColor = UIColor.white
view.addSubview(neatColorPicker)
```
<img src="../assets/demo.gif?raw=true" width="225">
If the ChromaColorPicker or any of its properties are later updated after being added to a view, the `layout()` function should be called to update the view.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.addSubview(neatColorPicker)
neatColorPicker.padding = 0
neatColorPicker.hexLabel.hidden = true
neatColorPicker.layout()
``` ```
You can also set the color of the picker anytime by using the `adjustToColor(color:)` function.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
...
neatColorPicker.adjustToColor(UIColor.green)
...
```
### Enable Grayscale Support
A toggle button can be enabled/disabled to allow for grayscale selections by using the `supportsShadesOfGray` property.
```Swift
let neatColorPicker = ChromaColorPicker(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
...
neatColorPicker.supportsShadesOfGray = true // Normally false be default
```
## Customization
<img src="../assets/Design_Breakdown.png?raw=true" width="350">
### Properties
| Property | Description |
| :-------------: |:-------------|
| delegate | ChromaColorPickerDelegate |
| padding | The padding on each side of the view (default=10) |
| stroke | The stroke of the rainbow track (default=1) |
| currentColor | The currently set color by the control. It is displayed in the add button. Use `adjustToColor(color: UIColor)` to update the color.|
| currentAngle | The angle which the handle is currently sitting at. Can be changed and the view can be re-drawn using `layout()` to show the change.
| handleSize | Returns the size of the handle. |
| supportsShadesOfGray | True/False if a toggle for supporting grayscale colors should be shown. |
### Functions
| Function | Description |
| :-------------: |:-------------|
|layout() | Layout the entire picker and all its subviews.|
|adjustToColor(color: ) | Updates the picker to a specific color.|
### Sub-Components
Sub-Components can be hidden and customized to the preferred liking.
| Component | Description |
| :-------------: |:-------------|
| hexLabel | A UILabel which displays the hex value of the current color. |
| shadeSlider | A custom slider which adjusts the shade of the current color. |
| addButton | A custom UIButton in the center of the control. The `colorPickerDidChooseColor(colorPicker: color:)` delegate function is called when this is tapped. |
| handleView | A ChromaHandle (custom UIView) which displays the current color and can be moved around the circle.|
| handleLine | A line which is drawn from the addButton to the handleView. |
| colorToggleButton | A custom UIButton which appears if `supportsShadesOfGray` is set to true and will switch the picker to a grayscale mode if pressed.|
### Supported UIControlEvents ### Supported UIControlEvents
`.touchDown` -> called when the handle is first grabbed | Event | Description |
| :-----------------:|:-------------|
| `.touchDown` | Called when a handle is first grabbed. |
| `.touchUpInside` | Called when a handle is let go. |
| `.valueChanged` | Called whenever the color has changed. |
| `.touchDragInside` | Called when a handle has moved via a drag action. |
| `.editingDidEnd` | Called when either a handle is let go or slider is let go. |
`.touchUpInside` -> called when handle is let go ##### Example
```Swift
`.valueChanged` -> called whenever the color has changed hue or shade ```
`.touchDragInside` -> called when the handle has moved by a drag action
`.editingDidEnd` -> called when either the handle is let go or slider is let go
## Additional Info
Check out the [Wiki](https://github.com/joncardasis/ChromaColorPicker/wiki/Challenges-and-Solutions) if you're interested in reading into how the color wheel was created.
## License ## License
ChromaColorPicker is available under the MIT license. See the LICENSE file for more info. ChromaColorPicker is available under the MIT license. See the LICENSE file for more info.