8.18.1.45. Color

Five shapes for picking a color: two inline editors, two pop-out pickers, and one caller-owned swatch:

color_edit3(IDENT, (text = ".."))           // inline RGB row
color_edit4(IDENT, (text = ".."))           // inline RGBA row (+ alpha)
color_picker3(IDENT, (text = ".."))         // full picker wheel, RGB
color_picker4(IDENT, (text = "..",          // same, optional ref swatch
                      flags = ...,
                      ref_col = float4(...),
                      has_ref_col = true))
color_button(IDENT, "##desc", col)          // click-trigger swatch;
                                            //   caller owns `col`

State types:

  • color_edit3 / color_picker3 → ColorState3 (value : float3)

  • color_edit4 / color_picker4 → ColorState4 (value : float4 incl. alpha)

  • color_button → ClickState (color is caller-owned)

Source: modules/dasImgui/examples/tutorial/color.das.

8.18.1.45.1. Walkthrough

  1options gen2
  2options _comment_hygiene = true
  3
  4require imgui
  5require imgui_app
  6require opengl/opengl_boost
  7require live/glfw_live
  8require live/live_api
  9require live/live_commands
 10require live/live_vars
 11require live_host
 12require imgui/imgui_live
 13require imgui/imgui_boost_runtime
 14require imgui/imgui_boost_v2
 15require imgui/imgui_widgets_builtin
 16require imgui/imgui_containers_builtin
 17require imgui/imgui_visual_aids
 18
 19// =============================================================================
 20// TUTORIAL: color — four shapes of color editing + one click trigger.
 21//
 22//   color_edit3(IDENT, (text = ".."))         — inline RGB editor.
 23//   color_edit4(IDENT, (text = ".."))         — inline RGBA (adds alpha row).
 24//   color_picker3(IDENT, (text = ".."))       — popout wheel + RGB sliders.
 25//   color_picker4(IDENT, (text = "..",        — same, plus optional ref swatch.
 26//                         has_ref_col = true,
 27//                         ref_col = float4(...)))
 28//   color_button(IDENT, "##desc", col)        — click-trigger swatch; caller
 29//                                                owns `col`. Use to surface a
 30//                                                style-palette row or to open
 31//                                                a custom picker popup.
 32//
 33// State types:
 34//   - color_edit3 / color_picker3 → ColorState3 (value : float3)
 35//   - color_edit4 / color_picker4 → ColorState4 (value : float4 incl. alpha)
 36//   - color_button                → ClickState  (color is caller-owned)
 37//
 38// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/color.das
 39// LIVE:       daslang-live modules/dasImgui/examples/tutorial/color.das
 40//
 41// DRIVE (when running live):
 42//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"CO_WIN/CO_EDIT3","value":[1.0,0.5,0.0]}}' \
 43//        localhost:9090/command
 44//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"CO_WIN/CO_EDIT4","value":[0.2,0.4,0.9,0.6]}}' \
 45//        localhost:9090/command
 46//   curl -X POST -d '{"name":"imgui_click","args":{"target":"CO_WIN/CO_SWATCH"}}' \
 47//        localhost:9090/command
 48// =============================================================================
 49
 50let SWATCH_COLOR : float4 = float4(0.85f, 0.20f, 0.20f, 1.0f)
 51let REF_COLOR    : float4 = float4(0.10f, 0.55f, 0.95f, 1.0f)
 52
 53[export]
 54def init() {
 55    live_create_window("dasImgui color tutorial", 800, 700)
 56    live_imgui_init(live_window)
 57    let io & = unsafe(GetIO())
 58    GetStyle().FontScaleMain = 1.4
 59}
 60
 61[export]
 62def update() {
 63    if (!live_begin_frame()) return
 64    begin_frame()
 65
 66    ImGui_ImplGlfw_NewFrame()
 67    apply_synth_io_override()
 68    NewFrame()
 69
 70    SetNextWindowPos(ImVec2(20.0f, 20.0f), ImGuiCond.Always)
 71    SetNextWindowSize(ImVec2(760.0f, 660.0f), ImGuiCond.Always)
 72    window(CO_WIN, (text = "color tutorial", closable = false,
 73                    flags = ImGuiWindowFlags.None)) {
 74
 75        text("Four edit shapes + one click trigger.")
 76        text(CO_HINT, (text = "edit_* is inline; picker_* is the open square + hue bar; color_button is a swatch."))
 77        separator()
 78
 79        // ---- Stage 1: color_edit3 — inline RGB ----
 80        color_edit3(CO_EDIT3, (text = "tint (RGB)"))
 81        text("CO_EDIT3.value = ({CO_EDIT3.value.x:.2f}, {CO_EDIT3.value.y:.2f}, {CO_EDIT3.value.z:.2f})")
 82        spacing()
 83
 84        // ---- Stage 2: color_edit4 — inline RGBA ----
 85        color_edit4(CO_EDIT4, (text = "tint (RGBA)"))
 86        text("CO_EDIT4.value.a = {CO_EDIT4.value.w:.2f}  // 4-form adds alpha")
 87        spacing()
 88
 89        // ---- Stage 3: color_picker4 — popout wheel + ref swatch ----
 90        color_picker4(CO_PICKER, (text = "picker",
 91                                  flags = ImGuiColorEditFlags.None,
 92                                  ref_col = REF_COLOR,
 93                                  has_ref_col = true))
 94        text("CO_PICKER.value = ({CO_PICKER.value.x:.2f}, {CO_PICKER.value.y:.2f}, {CO_PICKER.value.z:.2f}, {CO_PICKER.value.w:.2f})")
 95        spacing()
 96
 97        // ---- Stage 4: color_button — caller-owned color, click trigger ----
 98        text("Swatch (click triggers - value is caller-owned, not widget state):")
 99        if (color_button(CO_SWATCH, (desc_id = "##swatch", col = SWATCH_COLOR,
100                                     size = float2(96.0f, 48.0f)))) {
101            // Hook: open a custom picker popup, copy to clipboard, etc.
102        }
103        text("CO_SWATCH clicks = {CO_SWATCH.click_count}")
104    }
105
106    end_of_frame()
107    Render()
108    var w, h : int
109    live_get_framebuffer_size(w, h)
110    glViewport(0, 0, w, h)
111    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
112    glClear(GL_COLOR_BUFFER_BIT)
113    live_imgui_render()
114
115    live_end_frame()
116}
117
118[export]
119def shutdown() {
120    live_imgui_shutdown()
121    live_destroy_window()
122}
123
124[export]
125def main() {
126    init()
127    while (!exit_requested()) {
128        update()
129    }
130    shutdown()
131}

8.18.1.45.1.1. Requires

Already in the baseline boost layer:

  • imgui/imgui_widgets_builtin — color_edit3/4 / color_picker3/4 / color_button rails.

  • imgui/imgui_boost_runtime — ColorState3 / ColorState4 / ClickState structs.

8.18.1.45.1.2. edit vs picker

The two families differ in shape, not in semantics:

  • color_edit* — inline row: small swatch + numeric fields. Clicking the swatch pops up ImGui’s stock picker. Best for “tweak a value beside other inputs.”

  • color_picker* — always-visible wheel + RGB sliders. Heavier on screen; best for “this dialog is for picking a color.”

Both write to state.value (float3 / float4). state.changed mirrors ImGui’s per-frame “did it change” return — same in both families.

The 3 vs 4 suffix is alpha:

  • 3 → float3, no alpha row.

  • 4 → float4 (.a is the alpha row), and the picker variant takes optional ref_col + has_ref_col = true to surface a comparison swatch alongside the new color.

8.18.1.45.1.3. color_button — click trigger, caller-owned color

The asymmetry: color_button does NOT have a ColorState — it takes the color inline as col : float4 and stores only click bookkeeping. Use it for cells in a palette grid or as the trigger for a custom picker popup:

let RED : float4 = float4(0.85f, 0.20f, 0.20f, 1.0f)
if (color_button(SWATCH, (desc_id = "##red", col = RED,
                           size = float2(96.0f, 48.0f)))) {
    // open a custom popup, set the active palette index, etc.
}

desc_id is the ImGui label (typically "##name" to suppress visible text). size = (0, 0) lets ImGui pick a default square.

For a swatch that reports hover without click bookkeeping, see Color button hover.

8.18.1.45.1.4. Flags

flags : ImGuiColorEditFlags carries the standard edit-mode toggles — NoAlpha, NoPicker, NoOptions, NoSmallPreview, NoInputs, NoTooltip, NoLabel, NoSidePreview, NoDragDrop, NoBorder, AlphaBar, AlphaPreview, AlphaPreviewHalf, HDR, plus display-mode bits (DisplayRGB / DisplayHSV / DisplayHex) and input-mode bits (InputRGB / InputHSV). Composable via |:

color_edit4(TINT, (text = "tint",
                   flags = ImGuiColorEditFlags.NoInputs |
                           ImGuiColorEditFlags.AlphaBar))

8.18.1.45.1.5. Driving from outside

# RGB editor / picker — 3-element value
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"CO_WIN/CO_EDIT3","value":[1.0,0.5,0.0]}}' \
     localhost:9090/command
# RGBA editor / picker — 4-element value
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"CO_WIN/CO_EDIT4","value":[0.2,0.4,0.9,0.6]}}' \
     localhost:9090/command
# color_button — click trigger
curl -X POST -d '{"name":"imgui_click","args":{"target":"CO_WIN/CO_SWATCH"}}' \
     localhost:9090/command

8.18.1.45.1.6. Caller-owned variants

For sites where the value lives on an external float3 / float4, use the edit_* rails — they take a T? pointer via safe_addr and skip the state-struct allocation:

var g_tint : float4 = float4(1.0f, 1.0f, 1.0f, 1.0f)
edit_color_edit4(safe_addr(g_tint), (id = "TINT", text = "tint"))

See External-pointer editing rail.

See also

Full source: modules/dasImgui/examples/tutorial/color.das

Hover variant: Color button hover — swatch as a per-frame hover surface, no click bookkeeping.

Sibling tutorial: Buttons (the broader click-trigger family).

Boost macros — the macro layer.