tree_node_ex + image

Two leaf widgets the container-shaped variants don’t cover. tree_node_ex is the explicit-control sibling of the tree_node container; image is the display-only sibling of image_button.

tree_node_ex(IDENT, (text = "..", flags = ...))    // returns open bool
                                                    // caller pairs tree_pop()
image(IDENT, (user_texture_id = tex_id, size = .., // display only
              uv0 = .., uv1 = .., tint_col = ..,    // no ClickState
              border_col = ..))

Source: examples/tutorial/tree_image_misc.das.

Walkthrough

The recording clicks the tree_node_ex header to expand it - the three children appear and the node’s returned open bool flips to true - then moves to the display-only image. The expand is verified against that open flag and the image against its on-screen presence, so a click that failed to open the node would abort the recording.

  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_layout_builtin
 17require imgui/imgui_visual_aids
 18
 19// =============================================================================
 20// TUTORIAL: tree_node_ex + image — two widgets the container-shaped variants
 21// don't cover.
 22//
 23//   tree_node_ex(IDENT, (text = "..", flags = ...))     — leaf form. Returns
 24//                                                          the open bool;
 25//                                                          caller pairs
 26//                                                          TreePop() when
 27//                                                          needed (when no
 28//                                                          NoTreePushOnOpen
 29//                                                          flag).
 30//
 31//   image(IDENT, (user_texture_id = tex_id, size = ..,  — display widget.
 32//                 uv0 = .., uv1 = .., tint_col = ..,      No state-tracked
 33//                 border_col = ..))                       click / hover; cf.
 34//                                                          image_button for
 35//                                                          the click trigger.
 36//
 37// tree_node_ex is the explicit-control sibling of `tree_node` (the
 38// container). Use it when you need the open/closed bool to gate sibling
 39// work, OR when you want NoTreePushOnOpen / Bullet / Leaf flags that
 40// the container form doesn't surface cleanly.
 41//
 42// image is the display-only sibling of image_button — no ClickState, no
 43// frame padding, no click semantics.
 44//
 45// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/tree_image_misc.das
 46// LIVE:       daslang-live modules/dasImgui/examples/tutorial/tree_image_misc.das
 47// =============================================================================
 48
 49[export]
 50def init() {
 51    live_create_window("dasImgui tree_node_ex + image tutorial", 980, 720)
 52    live_imgui_init(live_window)
 53    let io & = unsafe(GetIO())
 54    GetStyle().FontScaleMain = 1.4
 55}
 56
 57[export]
 58def update() {
 59    if (!live_begin_frame()) return
 60    begin_frame()
 61
 62    ImGui_ImplGlfw_NewFrame()
 63    apply_synth_io_override()
 64    NewFrame()
 65
 66    SetNextWindowPos(ImVec2(20.0f, 20.0f), ImGuiCond.Always)
 67    SetNextWindowSize(ImVec2(760.0f, 620.0f), ImGuiCond.Always)
 68    window(TI_WIN, (text = "tree_node_ex + image tutorial", closable = false,
 69                    flags = ImGuiWindowFlags.None)) {
 70
 71        text("Two leaf widgets the container-shaped variants don't cover.")
 72        text(TI_HINT, (text = "tree_node_ex returns the bool; image is display-only (no click)."))
 73        separator()
 74
 75        // ---- Stage 1: tree_node_ex — leaf form, caller controls TreePop ----
 76        text("tree_node_ex (leaf form - caller pairs TreePop):")
 77        if (tree_node_ex(TI_TREE, (text = "Group", flags = ImGuiTreeNodeFlags.None))) {
 78            text("  child A")
 79            text("  child B")
 80            text("  child C")
 81            tree_pop()
 82        }
 83        spacing()
 84
 85        // ---- Stage 2: image — display, no click ----
 86        text("image (display widget - paints a texture; no ClickState):")
 87        let io & = unsafe(GetIO())
 88        if (io.Fonts.TexData != null) {
 89            image(TI_IMG, (user_texture_id = io.Fonts.TexRef,
 90                           size = float2(128.0f, 128.0f),
 91                           uv0 = float2(0.0f, 0.0f),
 92                           uv1 = float2(1.0f, 1.0f),
 93                           tint_col = float4(1.0f, 1.0f, 1.0f, 1.0f),
 94                           border_col = float4(0.6f, 0.6f, 0.6f, 1.0f)))
 95            text("font atlas at 128x128 - no click, no padding; cf image_button.")
 96        }
 97    }
 98
 99    end_of_frame()
100    Render()
101    var w, h : int
102    live_get_framebuffer_size(w, h)
103    glViewport(0, 0, w, h)
104    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
105    glClear(GL_COLOR_BUFFER_BIT)
106    live_imgui_render()
107
108    live_end_frame()
109}
110
111[export]
112def shutdown() {
113    live_imgui_shutdown()
114    live_destroy_window()
115}
116
117[export]
118def main() {
119    init()
120    while (!exit_requested()) {
121        update()
122    }
123    shutdown()
124}

Requires

  • imgui/imgui_widgets_builtin — tree_node_ex and image.

  • imgui/imgui_layout_builtin — tree_pop().

  • imgui/imgui_boost_runtime — TreeNodeState / ImageState.

tree_node_ex vs tree_node (container)

The container form (tree_node(IDENT, (text, flags)) { ... }) is what you reach for 90% of the time: it auto-pairs TreePush / TreePop, the body block carries the children:

// Container form — body is the open-state branch:
tree_node(GROUP, (text = "Group", flags = ImGuiTreeNodeFlags.None)) {
    text("  child A")
    text("  child B")
}

tree_node_ex is the leaf form: it returns the open bool, and the caller decides what to do with it. Use it when:

  • You want to render sibling content outside the open-state branch (a row of inline controls that should appear next to the header regardless of open state).

  • You’re passing NoTreePushOnOpen — that skips the TreePush, so a matching tree_pop() would underflow the stack. The leaf form makes the asymmetry explicit.

  • The flag set you want (Leaf, Bullet, SpanAllColumns, etc.) doesn’t compose well with the container body shape.

if (tree_node_ex(GROUP, (text = "Group",
                         flags = ImGuiTreeNodeFlags.None))) {
    text("  child A")
    text("  child B")
    tree_pop()
}

The matching tree_pop() is YOUR responsibility — easy to forget when refactoring. Prefer tree_node unless one of the cases above applies.

image vs image_button

  • image — display widget. Paints a texture; no ClickState, no frame padding, no click semantics.

  • image_button — click trigger. Texture-faced button with ClickState for accumulating clicks. See Buttons.

Pick by intent: if the texture is content (an avatar, a preview, an icon strip), use image. If it’s an interactive surface, use image_button.

let io & = unsafe(GetIO())
let font_tex = io.Fonts.TexID
if (font_tex != null) {
    image(AVATAR, (user_texture_id = font_tex,
                   size = float2(128.0f, 128.0f),
                   uv0 = float2(0.0f, 0.0f),
                   uv1 = float2(1.0f, 1.0f),
                   tint_col = float4(1.0f, 1.0f, 1.0f, 1.0f),
                   border_col = float4(0.6f, 0.6f, 0.6f, 1.0f)))
}

uv0 / uv1 slice into the texture (use for sprite sheets); tint_col modulates the rendered face; border_col draws a 1-pixel frame around it (transparent for no border).

The font atlas (io.Fonts.TexID) is always available and works as a no-setup demo texture. Real apps load via stbi or whatever your GL/Vulkan texture pipeline provides; pass the opaque ImTextureID (typed void? on the daslang side) as texture.

Driving from outside

Both widgets surface their payload via imgui_snapshot — no imgui_force_set channels (the texture is caller-owned, the open state is local to tree_node_ex’s call site):

curl -X POST -d '{"name":"imgui_snapshot"}' localhost:9090/command \
    | jq '.globals."TI_WIN/TI_TREE".payload, .globals."TI_WIN/TI_IMG".payload'

See also

Full source: examples/tutorial/tree_image_misc.das

Container sibling: Tree node (and Collapsing header for the unbordered-open variant).

Click sibling: Buttons (image_button section).

Features-side demo: examples/features/display_image.das.

Boost macros — the macro layer.