xichil.dev

ColorPicker

ColorPicker is a color setting button with a swatch that opens an editor screen with RGB or ARGB sliders and a hex field, with Done and Cancel.

Last updated

On this page

A color setting: a button "label: #RRGGBB" with a swatch of the color on it. Pressing it opens an editor screen where the player sets the color with red, green and blue sliders (and alpha, if enabled) or types it as hex.

ColorPicker.builder("highlight")
        .label(Text.translatable("mymod.highlight", "Highlight"))
        .value(() -> config.highlightColor)       // 0xRRGGBB
        .onChange(c -> config.highlightColor = c)
        .build();

ColorPicker.builder("overlay")
        .label(Text.translatable("mymod.overlay", "Overlay"))
        .alpha(true)                               // 0xAARRGGBB, with an alpha slider
        .value(() -> config.overlayColor)
        .onChange(c -> config.overlayColor = c)
        .build();

Builder#

Method Required Default Notes
label(Supplier<Text>) / label(Text) yes the text before ": #RRGGBB", and the editor's title
value(IntSupplier) yes your current color
onChange(IntConsumer) yes stores the color when the player presses Done in the editor
alpha(boolean) no false adds an alpha slider; the hex form becomes #AARRGGBB and the swatch is drawn translucent
enabled, tooltip, visible no options every widget has

Colors#

Colors are ints: 0xRRGGBB, or 0xAARRGGBB with alpha(true). Without alpha, the top byte is ignored when reading and cleared before onChange.

ColorPicker.parseHex(text, alpha) parses hex the way the editor does, which is handy for config files. It accepts a leading #, surrounding spaces and any case, and returns null for text that isn't a color: parseHex("#ff8800", false) is 0xFF8800, parseHex("80FF8800", true) is 0x80FF8800.

The editor screen#

Part Id
the screen, titled with the label <id>.editor
a preview: a disabled copy of the picker <id>.preview
0 – 255 sliders <id>.red, <id>.green, <id>.blue, and <id>.alpha with alpha
a hex field <id>.hex
Done and Cancel in the footer <id>.done, <id>.cancel

The sliders and the hex field edit a draft. Done passes it to onChange; Cancel (and Escape) drops it. So onChange runs at most once per visit to the editor. Keep those ids free on your screen.

Behaviour#

Test it#

host.click("highlight");                              // opens "highlight.editor"
host.slide("highlight.red", 255).click("highlight.done");

Rendered as [color highlight] Highlight: #FF8800.

See also#