NativeScript Color Wheel

NativeScript 6 version of this plugin is available at https://github.com/SergeyMell/nativescript-n6-color-wheel

Description

This plugin is actually a color picker plugin which can be used as a simple component wherever you need it. It allows you to

• pick a color by clicking appropriate position on the color wheel
• render whatever UI as a picker icon customizing it on your own needs
• set an initial color for the plugin
• put the color picker wherever you need it as long it's just a custom element.

Plugin works simultaneously for both iOS and Android platforms and is not based on any additional libraries, CocoaPods etc

Examples

Color wheel with custom selection picker	Color picker in a modal dialog

Installation

ns plugin add @sergeymell/nativescript-color-wheel

Usage

In NativeScript Core applications:

<clw:ColorWheel width="200" height="200" color="#FFB35E"
                            colorSelect="{{colorSelected}}"/>

In NativeScript Angular applications:

1. Add NativeScriptColorWheelModule from @sergeymell/nativescript-color-wheel/angular to the imports section of your Angular module
2. Use the ColorWheel component where you need it

<ColorWheel width="200" height="200" margin="20" (colorSelect)="onColorSelected($event)"></ColorWheel>

TODOs:

• optimize the algorithm of initial color location determination
• make color brightness configurable (at least for Android)
• add support of other color selection area forms (i.e. square)

License

Apache License Version 2.0