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