Purpose

UMG Color Palettes is a set of UMG Blueprints widgets intended to serve as a color chooser among predefined colors.

Content description

After adding to project, you will find all UMG Color Palettes content in a folder named UMG_ColorPalettes This folder contains the following sub-folders:

• Blueprints
• Data
• Demo
• Materials
• Textures

Integration

There are two ColorPalette widget that you can use and integrate in your own widgets:

• ColorPalette_Widget, which is the main ColorPalette Widget where the list of colors to display is to be provided as input
• ColorPaletteHSV_Widget where the list of colors to display is calculated from input parameters that will be described below.

You can also use predefined RAL color palettes.

In UMG Designer

The ColorPalette_Widget, ColorPaletteHSV_Widget and RAL color palettes widgets are located under UMG_ColorPalettes/Blueprints

Examples of integration in other widgets can be found in the Demo folder.

To integrate, look for ColorPalette_Widget, ColorPaletteHSV_Widget or any RAL Palette in the UMG Palette: they're located under Color Palettes category.

Then drag the palette you want to the widget hierarchy. You can customize your color palette in the details panel. Depending on the selected palette, 1 or more section specific to Color Palettes are available:

• Color Palettes Options

• HSV Color Palettes Options (only for ColorPaletteHSV_Widget)

See Options section later on this page for details.

1 event is also available to implement in the events section. (see usage section for details):

In blueprint graph

A new color palette can be created in any blueprint graph by calling the create widget node and selecting one of the ColorPalette_Widget classes:

Options

The following options can be modified in the Color Palettes Options section when creating a new color palette:

Subsection Slot:

Color Slot Shape

Every slot shape in the palette: there 3 options available:

• Square
• Rounded Square
• Circle

In Designer, this option effect is immediately visible in the designer upon change.

Color Slot Style (Introduced in V1.1.0)

Every slot style in the palette: 3 styles are available :

• Flat
• Glass => comes in a clear and dark variants
• Sketch => comes in 2 variants

In Designer, this option effect is immediately visible in the designer upon change.

Color Name Display Type

If and how a color name should be displayed in the color slot. There are 4 options:

• None: Nothing is not displayed
• Name: Name of the color as defined in the color data input is displayed in the slot
• Hexa: Hexadecimal code of the color is displayed in the slot
• HSV: Hue/Saturation/Value values of the color are displayed in the slot
• RGB: Red/Green/Blue values of the color are displayed in the slot

In Designer, this option effect is immediately visible in the designer upon change.

Tooltip Display Type

If and how a color name should be displayed in this slot tooltip. Same options as above are available.

Display border on selected

If checked, a border will be displayed around the selected color slot.

Slot Padding

Spacing between slots.

In Designer, this option effect is immediately visible in the designer when change is committed.

Slot Width and Slot Height

• Please Note that these options are only effective if Panel Type option is set to wrapbox in the Panel subsection.

The values set the width and height of every slot in the color palette when Panel Type is set to Wrapbox.

In Designer, this option effect is immediately visible in the designer when change is committed.

Slot Border Color

The color to use to draw the border if Display Border on Selected is checked.

Colors

Color Table

Allows to choose a data table listing the colors to display in this palette. The product comes with 14 data table to use or to serve as example.

Please Note that if a Color Table is selected, Color list option is ignored.

Color List

If no data table is selected, you can set the color list to display in the palette by adding the colors in this list. Every element in the list is a CP Color Struct, a struct with 2 members : a Color and a Text (serving as the color name)

Randomize Placement

If checked, colors are placed in the palette randomly. If unchecked, they are placed following the same order they were inserted in the data table or the color list.

In Designer, this option effect is immediately visible in the designer upon click.

Panel

Panel Type

Which type of container to user for the palette. 2 Options are available:

• Grid : in that case, the container is a UniformGridPanel
• Wrapbox: in that case, the container is a Wrapbox widget.

Max Col

If the Panel Type is Grid, set the number of columns this palette should have.

HSV Color Palette Options

The following options can be modified in the HSV Color Palettes Options section when creating a new HSV Color Palette:

Hue Count

How many colums this palette will count: hue in every column is calculated as : hueRange / hueCount

In Designer, this option effect is immediately visible in the designer upon change.

Sat/Value Count

How many sat/value this palette will count: this value will define how many rows the palette will have.

Rows count = (SatValueCount)² or (SatValueCount)² + 1 if option 'Include Greys Variants row' is set to true

In Designer, this option effect is immediately visible in the designer upon change.

Include Greys Variants row

If checked, a row including greys variants ranging from white to black is included at the top.

In Designer, this option effect is immediately visible in the designer upon change.

Lower Hue & Higher Hue

Lower Hue and Higher hue options allows the user to define a range of hue to limit the palette to. For example, you could use these values to display only a range of blue colors.

Default values are 0 and 360 and include the full hue spectre.

Please note that if Lower Hue is set to a higher value than Higher Hue, values will be switched to calculate the actual range.

In Designer, this option effect is immediately visible in the designer upon change.

Usage

The ColorPalette widgets come with a 'OnColorClicked' event dispatcher that you can use to get the selected color. This dispatcher returns two informations:

• the selected color as a LinearColor Structure
• the color name as a text : this is the name of the color as it was defined in the widget inputs.

Specifying colors

Main Case

Colors to display on the color palette may be specified in 2 ways for the main color palette ie ColorPalette_Widget blueprint:

• by providing a data table listing all the colors or
• by providing a list of colors

Both lists CP_ColorStruct items. A CP_ColorStruct is a struct with 2 members:

• a color
• a color name

You may leave the name empty if you don't need to display the color name in your palette.

The CP_ColorStruct blueprint can be found in UMG_ColorPalettes/Blueprints/Utils

Data tables

14 data tables are provided as examples for your convenience in the UMG_ColorPalettes/Data folder

They include basic color sets and color sets from the RAL color charts.

You can create your own data table based on the CP_ColorStruct to define your color list and then select it in the Color Table option.

HSV Color Palette Case

When creating a HSVColorPalette_Widget, colors provided in the ColorTable et ColorList options are ignored. Colors to display are calculated according to the rules defined in the HSV Color Palettes Options sections.

See HSV Color Options for details above

Release Notes

• V1.0 : Initial release
• V1.1.0 :
  • Added color slot styles : colors can now be displayed as flat, glassy or sketchy.