
|
Downloads
Demos: geexlab-demopack-gl21/d29-imgui/imgui-imnodes/
|
ImNodes support has been added in GeeXLab 0.44+. At the time of writing, ImNodes is supported by Windows and Linux versions of GeeXLab. Raspberry Pi and macOS versions will get ImNodes support after the next compilation.
ImNodes is a node editor library for
ImNodes has four main components:
– the node editor which is essentially the window of the editor with its grid.
– a node
– a link
– a input / output connector (a pin)
Let’s start with the first thing required by ImNodes, the node editor. In the FRAME script, you draw the node editor with:
imgui_frame_begin()
local is_open = imgui_window_begin_pos_size_always("ImNodes demo", winW, winH, 0, 0)
if (is_open == 1) then
gh_imgui.imnodes_begin_node_editor()
...
gh_imgui.imnodes_end_node_editor()
end
gh_imgui.window_end()
imgui_frame_end()
This piece of code will produce:
All node-related components (a node, a pin and a link) are identified by an unique identifier (an ID), a simple integer number.
Let’s draw a node with a title bar and a dummy content:
gh_imgui.imnodes_begin_node_editor()
node1_id = 1
gh_imgui.imnodes_begin_node(node1_id )
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()
gh_imgui.imnodes_end_node_editor()
In order to be able to be connected to other nodes, a node needs input and output connectors, the pins. Let’s add one input pin and one output pin to our node:
gh_imgui.imnodes_begin_node_editor()
ImNodesPinShape_Circle = 0
ImNodesPinShape_CircleFilled = 1
ImNodesPinShape_Triangle = 2
ImNodesPinShape_TriangleFilled = 3
ImNodesPinShape_Quad = 4
ImNodesPinShape_QuadFilled = 5
node1_id = 1
gh_imgui.imnodes_begin_node(node1_id )
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()
node1_input1 = 2
node1_output1 = 3
pin_shape = ImNodesPinShape_CircleFilled
gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()
gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()
gh_imgui.imnodes_end_node_editor()
Now we can draw 2 nodes:
gh_imgui.imnodes_begin_node_editor()
ImNodesPinShape_Circle = 0
ImNodesPinShape_CircleFilled = 1
ImNodesPinShape_Triangle = 2
ImNodesPinShape_TriangleFilled = 3
ImNodesPinShape_Quad = 4
ImNodesPinShape_QuadFilled = 5
node1_id = 1
gh_imgui.imnodes_begin_node(node1_id)
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()
node1_input1 = 2
node1_output1 = 3
pin_shape = ImNodesPinShape_CircleFilled
gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()
gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()
node2_id = 4
gh_imgui.imnodes_begin_node(node2_id)
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node2")
gh_imgui.imnodes_end_node_title_bar()
node2_input1 = 5
node2_output1 = 6
gh_imgui.imnodes_begin_input_attribute(node2_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()
gh_imgui.imnodes_begin_output_attribute(node2_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()
gh_imgui.imnodes_end_node_editor()
The last thing we need for our utltra basic node editor demo, is a link between those nodes. As for other components, the link is identified by an unique ID:
gh_imgui.imnodes_end_node_editor()
gh_imgui.imnodes_begin_node(node1_id)
...
gh_imgui.imnodes_end_node()
gh_imgui.imnodes_begin_node(node2_id)
...
gh_imgui.imnodes_end_node()
link1_2 = 7
gh_imgui.imnodes_link(link1_2, node1_output1, node2_input1)
gh_imgui.imnodes_end_node_editor()
If you want to explore more features of ImNodes, I prepared a demo (geexlab-demopack-gl21/d29-imgui/imgui-imnodes/demo02/ in the OpenGL 2.1 demopack) that allows to dynamically create nodes, pins, and links. Nodes and links can be deleted as well. And the demo shows a minimap too: