8.18.1.48. 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: modules/dasImgui/examples/tutorial/tree_image_misc.das.

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

8.18.1.48.1.1. Requires

  • imgui/imgui_widgets_builtin — tree_node_ex and image.

  • imgui/imgui_layout_builtin — tree_pop().

  • imgui/imgui_boost_runtime — TreeNodeState / ImageState.

8.18.1.48.1.2. 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.

8.18.1.48.1.3. 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.

8.18.1.48.1.4. 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: modules/dasImgui/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: modules/dasImgui/examples/features/display_image.das.

Boost macros — the macro layer.