PopColorPicker

PopColorPicker is an advanced color picker for use with Scene2D. It allows you to mix your own color using HSB or HSL color models. You can also select from preconfigured color swatches or create your own. It is built on top of the PopTable class, so make sure to check the documentation for all the available options.

PopColorPickerStyle

The PopColorPicker is comprised of many component widgets, so the style is fairly large:

You may download the Skin Composer or TextraTypist Playground assets to get started, or you can create your own style:

titleBarBackground

This is the background for the title and buttons along the top of the widget.

labelStyle

This is the style used to draw the majority of labels in the widget.

textButtonStyle

This is the style used for the "OK" and "Cancel" buttons.

fileTextButtonStyle

These are the buttons along the title bar that toggle between "HSB", "HSL", and "Swatches" modes. Make sure to define a checked state for the button so that the currently selected mode can be indicated.

scrollPaneStyle

As the user adds more custom swatches, the list grows with a scrollpane to navigate.

colorSwatch

This should be a box Drawable with a white portion that can easily be tinted. These represent each available swatch in the "swatches" menu.

colorSwatchNew

This is a Drawable that can be clicked by the user to create a new custom swatch in the "swatches" menu.

colorSwatchPopBackground

The background Drawable for the pop up when the user hovers over a selectable swatch.

previewSwatchBackground

The background Drawable for the preview swatch at the bottom of the widget. It will also outline the previewSwatchOld and previewSwatchNew Drawables. This swatch is displayed when the picker is initialized with a starting Color.

previewSwatchOld

The foreground Drawable for the preview swatch at the bottom of the widget. This is the Drawable that will be tinted by the original color passed to the color picker. It is overlayed on top of previewSwatchNew, so make sure that it is designed to be seen through partially. Also make sure to pad with transparent pixels because it is sized to the previewSwatchBackground.

previewSwatchNew

The foreground Drawable for the preview swatch at the bottom of the widget. This is the Drawable that will be tinted by the user's selected color. previewSwatchOld is overlayed on top of this one. Make sure to pad with transparent pixels because it is sized to the previewSwatchBackground.

previewSwatchSingleBackground

The background Drawable for the preview swatch at the bottom of the widget. It will also outline the previewSwatchSingle Drawable. This swatch is displayed when the picker is not initialized with a starting Color.

previewSwatchSingle

The foreground Drawable for the preview swatch at the bottom of the widget. This is the Drawable that will be tinted by the user's selected color.

textFieldStyle

The TextFieldStyle for the numbered color fields.

hexTextFieldStyle

The TextFieldStyle for the hexadecimal field.

colorSwatchPopPreview

The Drawable for the preview swatch when the user hovers over a selectable swatch. It is tinted the color of the associated swatch.

colorSliderBackground

The background Drawable for the HSB, HSL, and alpha model sliders. It will be used in both the horizontal and vertical bars.

colorSliderKnobHorizontal

The knob Drawable for the horizontal HSB, HSL, and alpha model sliders.

colorSliderKnobVertical

The knob Drawable for the vertical HSB, HSL, and alpha model sliders.

colorKnobCircleBackground

This is the background for the knob for the main color graph of the picker. It will serve as the outline for the foreground knob as well.

colorKnobCircleForeground

This is the white part of the knob for the main color graph of the picker. It will be tinted by the selected color. It helps to use the same dimensions as the background and filling the unused pixels with transparency for alignment purposes.

radioButtonStyle

These are the buttons next to each available color display mode. They need to have a checked state to indicate which mode the user has selected.

increaseButtonStyle

These are the buttons next to the color fields that allow the user to increase the value by one step.

decreaseButtonStyle

These are the buttons next to the color fields that allow the user to increase the value by one step.

checkerBackground

This should be a tileable drawable that will serve as the background for any color that shows trans

How to Include PopColorPicker in your Project

PopColorPicker has been moved into a separate project to allow users to use the core Stripe Widgets without forcing them to import the TenPatchDrawable class.

Core Dependency

Add the following to your root build.gradle:

allprojects {
    repositories {
	...
	maven { url 'https://jitpack.io' }
    }
}

Add the dependency to your core project:

dependencies {
    ...
    implementation 'com.github.raeleus.stripe:colorpicker:1.4.0'
}

HTML5 Dependency

Add the dependency to your html project of your root build.gradle if you want HTML5/GWT support:

project(":html") {
    apply plugin: "gwt"
    apply plugin: "war"

    dependencies {
        ...
        implementation 'com.github.raeleus.stripe:colorpicker:1.4.0:sources'
    }
}

Add the following inherits line to your GdxDefinition.gwt.xml in the html project:
<inherits name="com.ray3k.stripe" />

Showing the PopColorPicker

Once you have created the PopColorPickerStyle or added it to your Skin, simply create an instance of the PopColorPicker.

PopColorPicker popColorPicker = new PopColorPicker(originalColor, style);

originalColor is the color that you want the picker to start with. It will be displayed as the "old" color in the interface while the user mixes a new one. If you don't want to display an old color, set originalColor to null.

To display the color picker, call the show(...) method.

popColorPicker.show(stage)

This will fade in the picker. If you want to create your own transition, use the following overloaded method:

picker.show(stage, Actions.sequence(Actions.movetoAligned(0, stage.getHeight / 2, Align.right), Actions.moveToAligned(stage.getWidth / 2, stage.getHeight / 2, Align.center)));

PopColorPickerListener

To react to the user's selection, you must create a PopColorPickerListener and add it to the picker.

colorPicker.addListener(new PopColorPickerListener() {
    picked(Color color) {
        ...
    }

    cancelled() {
        ...
    }
}

The picked(...) method is called when the user selects a color and clicks "OK". The color parameter is the color that user selected. The cancelled() method is called when the user clicks "Cancel".