ColorPalette

ColorPalette provides fine or coarse interaction with RGB, HSV, or custom color data.


Screenshot of component ColorPalette horizontal-layout

Usage

Color Picker is the base component, color channels are passed in, along with a writer.

This component and pipeline only support 8-bit color. This example assumes the hardware exposes individual messages r, g and b for the color channels. For structured data, normal accessor syntax applies.

Screenshot of component ColorPalette basic
import { ColorPalette } from '@electricui/components-desktop'
 
<ColorPalette
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>

Under the hood, this component creates a CSS gradient, and provides logic/calculations for the handle positions.

Debouncing

Set the minimum duration between state pushes to hardware (in milliseconds) with throttleDuration. The duration counts down from the last user input event, and writes the value once the delay elapses.

<ColorPalette
throttleDuration={100}
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>

OnRelease or Continuous Send

For many lighting systems it is desirable to immediately reflect user interaction in the hardware system.

By default, the ColorPalette will only commit the color values to the device once the handle has been released (mouse/touch up).

Manually specify the boolean sendOnlyOnRelease to set this behaviour.

<ColorPalette
sendOnlyOnRelease={false}
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>

Size

Manually specify sizing behaviour by passing a number to the width and/or height properties.

Screenshot of component ColorPalette manual-size
<ColorPalette
width={100}
height={100}
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>

The component needs to be reloaded for height or width changes to take effect.

Setting color by slider

Ready-made slider variants simplify hooking up hue, alpha and color controls.

These are separate components from the ColorPalette and can be put anywhere in the layout.

Screenshot of component ColorPalette hue-slider
import { HueSlider } from '@electricui/components-desktop'
 
<HueSlider
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>
Screenshot of component ColorPalette alpha-slider
import { AlphaSlider } from '@electricui/components-desktop'
 
<AlphaSlider
red="r"
green="g"
blue="b"
alpha="a"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
state.a = color.a
}}
/>

These slider components should not be parented by a ColorPalette, they are standalone components.

Orientation

The vertical property controls the orientation of the HueSlider and AlphaSlider components.

Screenshot of component ColorPalette slider-vertical
<HueSlider
vertical
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>
<AlphaSlider
vertical
red="r"
green="g"
blue="b"
alpha="a"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
state.a = color.a
}}
/>

Size

Both the HueSlider and AlphaSlider components support properties for width and height.

Screenshot of component ColorPalette slider-width
<HueSlider
width={100}
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>
 
<AlphaSlider
width={200}
red="r"
green="g"
blue="b"
alpha="a"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
state.a = color.a
}}
/>
Screenshot of component ColorPalette slider-height
<HueSlider
height={100}
vertical
red="r"
green="g"
blue="b"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
}}
/>
 
<AlphaSlider
height={200}
vertical
red="r"
green="g"
blue="b"
alpha="a"
writer={(state, color) => {
state.r = color.r
state.g = color.g
state.b = color.b
state.a = color.a
}}
/>

Both height and width props apply to normal and vertical sliders