Introduction to ImNodes (Node Editor)

Downloads OpenGL 2.1 Demopack Demos: geexlab-demopack-gl21/d29-imgui/imgui-imnodes/ All GeeXLab downloads Forum feedback / bug-report thread

 
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 github repository is here). And once you have understood its logic, ImNodes is easy to use.

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: