Color picker

The picker stacks two parts in a column: a saturation and value field, and a hue strip under it. The field is drawn on a canvas as two runs of translucent bands. Vertical strips step the saturation from white on the left to the full hue on the right, and horizontal strips lay black over them, from transparent at the top to opaque at the bottom. These are the same two gradients that the web picker stacks, so the field is a real saturation and value field. A ring crosshair marks the current saturation and value. The strip is the Mob Hue Slider, drawn at the same width. The field is 280 units wide and 170 units high by default.

Both parts are canvas drawings, so a touch arrives as a position. The screen receives {:drag, tag, payload} messages in handle_info/2. One drag on the field carries both axes in a single on_area event, and sv_at/4 converts it to saturation and value. The strip sends on_hue events, and hue_at/2 converts those.

The picker is controlled and stateless. It draws the hue, saturation and value you pass and reports touches, and your screen keeps the numbers. hsv/1 and hex/1 turn the assigns into the two forms you usually store. Hue wraps into range, and saturation and value are clamped to 0 to 100.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob color_picker

The generator registers the component's tag, so you can use it in ~MOB markup. It also adds the shared Color and Event modules it uses, and generates hue_slider, which the picker draws its strip with. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaColorPicker>. Without a prefix the tag is <ColorPicker>.

Both controls are drawings, so the screen receives touch positions. A drag on the square sets saturation and brightness together, which is why on_area sends one event for both axes. The preview box and the two sliders in the screenshot belong to the showcase page. They are not part of the picker.

Color picker field and hue strip

LTR RTL

Preview

Show the whole example Show less

<MishkaColorPicker
  hue={@hue}
  saturation={@sat}
  value={@val}
  on_hue={:hue}
  on_area={:area}
/>

# Both controls ARE the drawing, so what arrives is a touch POSITION.
# Matching on {:change, …} compiles, renders perfectly and never fires.
# One gesture on the square carries BOTH axes, which is why on_area
# replaced the old on_saturation / on_value pair.
def handle_info({:drag, :area, %{x: x, y: y}}, socket) do
  {sat, val} = MishkaColorPicker.sv_at(x, y)
  {:noreply, socket |> assign(:sat, sat) |> assign(:val, val)}
end

# Pass the SAME width the strip was drawn at, or the finger and the
# marker drift apart.
def handle_info({:drag, :hue, %{x: x}}, socket) do
  {:noreply, assign(socket, :hue, MishkaHueSlider.hue_at(x, 280))}
end

def handle_info(_msg, socket), do: {:noreply, socket}

hex/1 returns the picker's color as a hex string, and hsv/1 returns it as an {h, s, v} tuple. Use them to store the color in whichever form your screen needs.

Read the color back from the picker

LTR RTL

Preview

Show the whole example Show less

MishkaColorPicker.hex(%{hue: 0, saturation: 100, value: 100})
#=> "#ff0000"

The module exports five helpers. Call them from your screen. hue_at/2 lives in MishkaHueSlider.

Your screen receives two kinds of {:drag, tag, payload} messages in handle_info/2. on_area carries %{x:, y:} from the field, and on_hue carries %{x:} from the strip.

def handle_info({:drag, :area, %{x: x, y: y}}, socket) do
  {sat, val} = MishkaColorPicker.sv_at(x, y)
  {:noreply, socket |> assign(:sat, sat) |> assign(:val, val)}
end

def handle_info({:drag, :hue, %{x: x}}, socket) do
  {:noreply, assign(socket, :hue, MishkaHueSlider.hue_at(x, 280))}
end

def handle_info(_msg, socket), do: {:noreply, socket}

• Headless Color Picker, the web component this one ports.
• Mob Hue Slider, the strip that picks a hue.
• Mob Color Input, which opens a color picker under a hex field.
• Mob Alpha Slider, an opacity track drawn over a checkerboard.
• Mob components, the full list of native components.