8.19.36. Color button hover

color_button is a click trigger — its ClickState records click counts and the clicked per-frame flag. Some call sites want the swatch’s geometry only, with no click bookkeeping; the hover variant covers that:

let hovered = color_button_hover(SWATCH,
    (desc_id = "##red", col = float4(0.85f, 0.20f, 0.20f, 1.0f),
     size = float2(96.0f, 64.0f), flags = ImGuiColorEditFlags.NoTooltip))
if (hovered) {
    // per-frame side-effect, e.g. SetNextFrameWantCaptureMouse(...)
}

EmptyMarkerState backs the widget; the return value is the per-frame hover bool (ImGui::IsItemHovered() of the just-drawn swatch).

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

8.19.36.1. Walkthrough

  1options gen2
  2options _comment_hygiene = true
  3options gc
  4
  5require imgui
  6require imgui_app
  7require opengl/opengl_boost
  8require live/glfw_live
  9require live/live_api
 10require live/live_commands
 11require live/live_vars
 12require live_host
 13require imgui/imgui_live
 14require imgui/imgui_boost_runtime
 15require imgui/imgui_boost_v2
 16require imgui/imgui_widgets_builtin
 17require imgui/imgui_containers_builtin
 18require imgui/imgui_visual_aids
 19
 20// =============================================================================
 21// TUTORIAL: color_button_hover — hover-target variant of color_button.
 22//
 23//   color_button(IDENT, (col = ...))        — click trigger (ClickState).
 24//   color_button_hover(IDENT, (col = ...))  — hover only (EmptyMarkerState);
 25//                                              returns true while ImGui
 26//                                              considers the swatch hovered.
 27//
 28// Use the hover variant when the swatch is the surface on which a
 29// hover-driven side-effect is mounted (e.g. "while hovering this swatch,
 30// override io.WantCaptureMouse"); the click form would force the caller to
 31// distinguish click vs hover at every site.
 32//
 33// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/color_button_hover.das
 34// LIVE:       daslang-live modules/dasImgui/examples/tutorial/color_button_hover.das
 35// =============================================================================
 36
 37var private STATE_MESSAGE = "Hover any swatch."
 38
 39[export]
 40def init() {
 41    live_create_window("dasImgui color_button_hover tutorial", 640, 380)
 42    live_imgui_init(live_window)
 43    let io & = unsafe(GetIO())
 44    GetStyle().FontScaleMain = 1.4
 45}
 46
 47[export]
 48def update() {
 49    if (!live_begin_frame()) return
 50    begin_frame()
 51
 52    ImGui_ImplGlfw_NewFrame()
 53    apply_synth_io_override()
 54    NewFrame()
 55
 56    SetNextWindowPos(ImVec2(40.0f, 40.0f), ImGuiCond.Always)
 57    SetNextWindowSize(ImVec2(560.0f, 300.0f), ImGuiCond.Always)
 58    window(CBH_WIN, (text = "color_button_hover", closable = false,
 59                     flags = ImGuiWindowFlags.None)) {
 60        text("color_button_hover returns true while ImGui considers the")
 61        text("just-drawn swatch hovered. No click state, no toggle.")
 62        separator()
 63
 64        let swatch_flags = (ImGuiColorEditFlags.NoTooltip | ImGuiColorEditFlags.NoDragDrop)
 65        let red = color_button_hover(CBH_RED,
 66            (desc_id = "##red", col = float4(0.85f, 0.20f, 0.20f, 1.0f),
 67             size = float2(96.0f, 64.0f), flags = swatch_flags))
 68        same_line(CBH_SL_1)
 69        let green = color_button_hover(CBH_GREEN,
 70            (desc_id = "##green", col = float4(0.20f, 0.85f, 0.30f, 1.0f),
 71             size = float2(96.0f, 64.0f), flags = swatch_flags))
 72        same_line(CBH_SL_2)
 73        let blue = color_button_hover(CBH_BLUE,
 74            (desc_id = "##blue", col = float4(0.20f, 0.40f, 0.85f, 1.0f),
 75             size = float2(96.0f, 64.0f), flags = swatch_flags))
 76
 77        if (red) {
 78            STATE_MESSAGE = "Hovering: red"
 79        } elif (green) {
 80            STATE_MESSAGE = "Hovering: green"
 81        } elif (blue) {
 82            STATE_MESSAGE = "Hovering: blue"
 83        }
 84
 85        text(CBH_STATUS, (text = STATE_MESSAGE))
 86    }
 87
 88    end_of_frame()
 89    Render()
 90    var w, h : int
 91    live_get_framebuffer_size(w, h)
 92    glViewport(0, 0, w, h)
 93    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
 94    glClear(GL_COLOR_BUFFER_BIT)
 95    live_imgui_render()
 96
 97    live_end_frame()
 98}
 99
100[export]
101def shutdown() {
102    live_imgui_shutdown()
103    live_destroy_window()
104}
105
106[export]
107def main() {
108    init()
109    while (!exit_requested()) {
110        update()
111        maybe_collect_gc()
112    }
113    shutdown()
114}

8.19.36.1.1. Requires

Same baseline as color_button — already in imgui/imgui_widgets_builtin (re-exported by imgui/imgui_boost_v2).

8.19.36.1.2. When to reach for it

When the swatch is a surface, not a trigger:

  • examples/imgui_demo/inputs.das — the WantCapture-override panel uses a hover-target swatch to override io.WantCaptureMouse / io.WantCaptureKeyboard while the swatch is hovered. The ClickState of the regular color_button would force the caller to distinguish click vs hover.

  • Style previews where moving the mouse over the swatch shows a tooltip or status line — the hover bool is the natural drive signal.

8.19.36.1.3. Click vs hover

The two variants share the same call shape but pick the right state shape for the call site:

  • color_button(IDENT, (desc_id, col, size, flags)) — returns bool clicked, records state.click_count and state.clicked.

  • color_button_hover(IDENT, (desc_id, col, size, flags)) — returns bool hovered, no click bookkeeping.

desc_id and col are mandatory in both; size and flags default to float2(0, 0) and ImGuiColorEditFlags.None.

A site that needs both (click triggers an action, hover updates a preview) should use the regular color_button and read IsItemHovered() after the call — the post-item hover query is allowed by the lint as a pure read.

8.19.36.1.4. Standalone vs live

Same convention as the other widget tutorials.

See also

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

Integration test: modules/dasImgui/tests/test_color_button_hover.das.

Boost macros — the macro layer.