circular-gauge-color-picker-package

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.

(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.

// 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 {}

Used this module in ionic page

Add the module in an ionic page with this line.

<color-picker [connectingLineColor]="'yellow'" (colorChanged)="newcolor($event)" ></color-picker>

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

/* ================ 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.

newcolor(color){
 selectedColor = color;
}

License

Under MIT License. See License file.