Circular Gauge Color Picker

This is a simple circular color picker for your Ionic 2+ app.

The module can be used on browser and mobile.

!Alt text
(Background color is transparent by default)

Current version is a working beta (0.2.x). Do not hesitate to give me your feedback.

Installation

With node installed, run the following command:

$ npm install --save circular-gauge-color-picker-package

Using this module in an Ionic app

Little description of how to import the component in your Ionic 2 App.

``typescript
// Import the module and component
import {
CircularColorPickerModule,
ColorPickerComponent,
ColorPickerSourceProvider
} from 'circular-gauge-color-picker-package';

@NgModule({
declarations: [
// ...
],
imports: [
// ... ,
CircularColorPickerModule
],
entryComponents: [
// ... ,
ColorPickerComponent
],
providers: [
// ... ,
ColorPickerSourceProvider
]
})
export class AppModule {}
``

$3

Add the module in an ionic page with this line.

`html

`

The module comes with differents and optionals parameters described as follow :

`html
/ ================ INPUTS =================/
[connectingLineColor]="'yellow'" / Connecting line betwen center circle and gauge user click (default : yellow) /

[connectingLineThickness]="5" / Connecting line thickness (default : 5) /

[enable]="true" / Enable or disable color picker (default is true, enabled) /

[outputColorFormat]="'HEX'" / Select output format value (default is 'HEX')(possibilities : 'RGBW' - 'RGB' - 'HEX') /

[imageB64Source]="base64Imagesource"
/* This component allow you to change to background image of circular color picker.
Image should be 300x300px and type of : "data:image/png;base64 ... "
Transparent pixels will be ignored on user selection */

[selectedColor]="#ff0100" / Pre-selected color (no default pre-selected color) /

/ ================= OUTPUTS ================= /
(colorChanged)="newcolor($event)" / Subscribe to event when user as selected a new color /

(isUsed)="func($event)" / Subscribe to event allowing you to know if user is using the color picker ($event is boolean value) /
`

You should take care of colorChanged event. It will be called each time a new color is found (if user slide on color picker, called a lot of times).

You can use the isUsed event output in order to block page scrolling/change in your application.

`typescript
newcolor(color){
selectedColor = color;
}
``

License

Under MIT License. See License file.