Color input

The control row has a 30 by 30 swatch of the current color, a text field with the placeholder #rrggbb, and a ▾ trigger that shows ▴ while the panel is open. Tapping the swatch and tapping the trigger send the same on_toggle event, so a finger that goes for the colored square opens the panel too.

On the web, the picker opens in a popover anchored to the field. On a phone the panel opens in the layout, directly under the control row. A floating picker would cover the field you type the hex into on a 390 point wide screen. The panel holds the Mob Color Picker in a bordered box.

The field holds the text, and the picker holds hue, saturation and value. The component keeps both on purpose: converting the typed hex to HSV on every keystroke would rewrite what you are halfway through typing. Your screen keeps the draft text and receives the events in handle_info/2. commit/2 decides when the text becomes a color. It returns {:ok, {h, s, v}} once the text parses and :incomplete until then. A half-typed #3b82 is not committed. #3b8 is, because three digits are valid CSS shorthand and name a real color.

While the text does not parse, the swatch shows a neutral surface color instead of a misleading one. The panel follows the color of the field unless you pass hue, saturation or value_pct. The disabled prop mutes the control and wires no handlers on the field, the swatch and the trigger.

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

mix mishka.ui.gen.mob color_input

The generator registers the component's tag, so you can use it in ~MOB markup. It also adds the shared Anchored, Color and Event modules it uses, and generates color_picker, which the panel shows, and hue_slider, which the picker needs. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaColorInput>. Without a prefix the tag is <ColorInput>.

Type a hex value, or open the panel with the swatch or the ▾ trigger and drag. The screen accepts typed text as a color only once it parses, because every keystroke on the way to #3b82f6 would otherwise repaint the panel from a half-written color. The code calls assign_hsv/3 without defining it. Write that function in your screen, or use commit/2 as shown under Events. The two panel controls are dragged, so on_hue and on_area carry positions. Pass 280 to hue_at/2, the width of the picker in the panel.

Type or pick a color

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A picker opens beneath the hex field.

<MishkaColorInput
  value={@hex}
  open={@open}
  on_change={:hex}
  on_toggle={:toggle}
  on_hue={:hue}
  on_area={:area}
  hue={@hue}
  saturation={@sat}
  value_pct={@val}
/>

# Typed text. Only accept it once it parses, or every keystroke on the
# way to "#3b82f6" would repaint the panel from a half-written colour.
def handle_info({:change, :hex, text}, socket) do
  case Color.parse(text) do
    {:ok, rgb} -> {:noreply, assign_hsv(socket, text, rgb)}
    :error -> {:noreply, assign(socket, :hex, text)}
  end
end

# The swatch and the ▾ trigger both send this.
def handle_info({:tap, :toggle}, socket) do
  {:noreply, assign(socket, :open, not socket.assigns.open)}
end

# The panel's two canvases are dragged, so both carry a POSITION.
def handle_info({:drag, :hue, %{x: x}}, socket) do
  {:noreply, sync(socket, :hue, MishkaHueSlider.hue_at(x, 280))}
end

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

# hue/saturation/value_pct and the hex field are one colour in two
# notations — write the hex back or the text and the panel disagree.
defp sync(socket, key, value) do
  socket = assign(socket, key, value)
  %{hue: h, sat: s, val: v} = socket.assigns
  assign(socket, :hex, Color.hsv_to_hex(h, s, v))
end

Set disabled to mute the control. The field, the swatch and the ▾ trigger get no handlers, so your screen receives nothing from them.

Disabled color input

LTR RTL

Preview

Show the whole example Show less

# No handlers: disabled wires neither the field nor the two ways in
# (the swatch and the trigger), so there is nothing to receive.
<MishkaColorInput value={"#64748b"} disabled={true} />

The module exports one helper.

Your screen receives four messages in handle_info/2: {:change, tag, text} for typing, {:tap, tag} for the trigger and the swatch, {:drag, tag, %{x:}} for the hue strip and {:drag, tag, %{x:, y:}} for the field. Use commit/2 in the typing handler to decide when the text becomes a color.

def handle_info({:change, :hex, text}, socket) do
  socket = Mob.Socket.assign(socket, :hex, text)

  case MishkaColorInput.commit(text) do
    {:ok, {h, s, v}} ->
      {:noreply,
       socket
       |> Mob.Socket.assign(:hue, h)
       |> Mob.Socket.assign(:sat, s)
       |> Mob.Socket.assign(:val, v)}

    :incomplete ->
      {:noreply, socket}
  end
end

The Mob version differs from the web input in these ways:

• The picker opens in the layout under the control row, where the web version shows a popover anchored to the field.
• name, form and id are not ported.
• Click-away and Escape dismissal are not ported, because a panel in the layout has nothing to click away from. Your screen closes the panel by changing open.

• Headless Color Input, the web component this one ports.
• Mob Color Picker, a saturation and value field above a hue strip.
• Mob Hue Slider, the strip that picks a hue.
• Mob Color Swatch, a block of one color, with a checkerboard behind translucent colors.
• Mob components, the full list of native components.