Editor Tool procedural UIs

[JeffR]

Mud asked me about making a topic to discuss the editor, node and webgraph UIs I'd been working on to cover how they work currently, and what work needs done on them, so here we goooooooo.

First, the current repo:

https://github.com/Areloch/Torque3D/tree/NodeGraphUIs

There are 3 new ui controls in here.

guiMainEditorCtrl, guiNodeGraphCtrl and guiWebGraphCtrl

I'll cover the basics of each one

guiMainEditorCtrl

guiMainEditorCtrl was a test into creating a modern, floating/dock based editor UI.

You may remember it from my dev blog, but here's an image or two:

http://ghc-games.com/public/hmm2.png

http://ghc-games.com/public/hmm4.png

http://ghc-games.com/public/hmm5.png

Basically, you have floating windows that can be dragged and docked by dropping them into hotspot areas.

You can create the UI easily enough like so:

 

%editorUI = new guiMainEditorCtrl();

 

Which spawns the blank slate main panel. From there, you can spawn a window:

 

%editorUI.addWindow("Window Name");

 

This spawns a floating window in the main view. Clicking and dragging the window's tab will let you move the window arround, and you'll see white region guide lines. moving the window into one of the quadrants will preview what the window would look like if docked there. Releasing the mouse button will dock the window.

Clicking and dragging the tab will break the window out of the dock, allowing it to be moved around again. You can spawn another window and find that the windows themselves can act as dockable spaces, so you can easily nest windows in complex layouts this way, while still being able to quickly rearrange everything.

The intent would be that the windows are proceduralized via the guiMainEditorCtrl, but then you'd have regular gui controls in the main view area, such as the game view, a scene tree, or whatnot. This control just manages the main layout and drag/docking functionality.

Todo would see the docking finalized, including being able to dock to a window's tab bar, adding it as a tab rather than a split sub-view, and allowing various customization including color, dock guide sizing, and exporting the layout settings for customization reasons.

guiNodeGraphCtrl

guiNodeGraphCtrl is a little more complex than the main editor one, but still follows the same basic design idea to proceduralize the gui stuffs.

It's purpose is to do a nodegraph layout that's usually used in visual programming and the like. An example of the end result would be like UE4's blueprints:

Like the main editor, spawning is easy enough:

 

%nodegraph = new guiNodeGraphCtrl()
{
   extent = "500 500";
};

 

And from there you use the script commands to add nodes, and sockets to those nodes.

 

%nodeGraph.addNode("NodeA");
%nodeGraph.addSocketToNode(0, 0, "In");
 
%nodeGraph.addNode("NodeB");
%nodeGraph.addSocketToNode(1, 1, "In");

 

You can then click nodes and drag them around, click-drag to select multiple nodes, and if you click-drag an out socket(sockets on the right side of the node) you can drag to connect to an 'in' socket on a different node.

guiWebGraphCtrl

guiWebGraphCtrl like the nodegraph, only it's in a web arrangement. In the end it'd be used for state machine editing, and look something akin to this:

http://answers.unity3d.com/storage/temp/14180-mecanim+1.png

Like the others, spawning is easy enough:

 

%webgraph = new guiWebGraphCtrl ()
{
   extent = "500 500";
};

 

And from there you use the script commands to add nodes, and sockets to those nodes.

 

%webgraph.addNode("NodeA");
 
%webgraph.addNode("NodeB");

 

Then you can create a connection to another node like

 

%webgraph.createConnection(0);

 

You'll see this creates a white line from the originating node to the mouse. Clicking onto a second node establishes a connection and draws a wire arrow to inform you the direction the connection goes.

I've got more scripts at home that do pop-up menus I'll get uploaded when I get home tonight, but this should work for a good starting primer for the UIs.

[Mud-H]

Thanks for the explication, Now I understand much better. So the 3 GuiControls are independant? I was trying to use them all together...

I will give it another try. Just a little tought about the guiMainEditorCtrl, I think using the Drag And Drop script system could allow to make the same stuff and with any kind of controls. I was planning to work on a Tab drag n droping system for TorqueLab in close future. For sure a coded Gui solution would be better but I'd suggest that you focus on the NodeGraph and WebGraph thing.

[JeffR]

Heh, yeah, they're separate(though obviously you could conceivably embed the node/web graph uis into a window in the mainEditor.

And yeah, the idea of it being a good framework/backend for all the window management stuffs, and then you just handle the children controls inside it as normal was the plan. Would make control of the overall editor much cleaner without complicating the tools' ui code itself.

For the near term, I agree that the node/web graph uis are probably more important, but feel free to muss with the editor one if you think itd be useful :)

Lemme know if you've got any questions or ideas on the code.