Designing a Node Editor (Hint: Blender Node Editor)

[Mind Calamity]

Hi everyone.

First let me start off by saying that I've dona a fair amount of research on the subject, but have not found any solid leads, the closest a thread cam to mine was this one, but as you see (if you opened it) there is no solution provided there, thus I decided to re-post, and not bump a 2 year old thread.

Now, here's an example of what I want to do:



Since I use Blender on a daily basis, I'm used to the Node editor and I love it, so for the UI I'm currently designing, I want to implement a widget like that.

First comes to mind the QGraphicsView, which I have begun giving it a try, and am at the beginning of sub-classing it and QGraphicsItem, but I will post the results of my try after I get to a point where it should work.

Other thing that comes to mind is the MDI widget and it's sub-windows, now my problem would be easily solved if I could somehow add slots at the left and right sides of the MDI sub-windows, I haven't taken a look at the diagram scene example yet, but I will try that too, since it's the closest thing that fits at least a portion of what I need.

This thread isn't really a programming problem, but I posted it here since I don't think it's a newbie problem, and I don't think it fits any other forum, if the Moderators here think otherwise, they're welcome to move this thread to the forum they deem appropriate.

And, you're welcome to post your opinions on the problem, even if you don't think they'd be helpful, more is always better when someone's in need of help.

[stampede]

I don't really know what kind of help do you expect, but if you tell me: "Implement something that works and looks like a blender node editor", I'd use Qt graphics utilities (QGraphicsItem, QGraphicsScene, ...).
Compose those elements using smaller classes, for example, you can create a "RectangleItem" class for representing the rectangles, "LabelItem" for displaying the text ("Offs: -4.80", "Size: 4.00" could be both LabelItems), a "ButtonItem" class ("Min" and "Max" btns from the pic), a "PixmapItem" for the image, and a "NodeItem" for the connectable nodes. Since all of them should be derived from QGraphicsItem, RectangleItem could work as a container that holds, organize and displays other QGraphicsItems.
I think it's not that difficult as it may look to implement such display system, just decompose the problem into smaller ones and everything should go smooth.
Btw. I'm a blender fan too, unfortunately not enough artistic skills to make a serious use of it :P

[Mind Calamity]

I don't really know what kind of help do you expect, but if you tell me: "Implement something that works and looks like a blender node editor", I'd use Qt graphics utilities (QGraphicsItem, QGraphicsScene, ...).
Compose those elements using smaller classes, for example, you can create a "RectangleItem" class for representing the rectangles, "LabelItem" for displaying the text ("Offs: -4.80", "Size: 4.00" could be both LabelItems), a "ButtonItem" class ("Min" and "Max" btns from the pic), a "PixmapItem" for the image, and a "NodeItem" for the connectable nodes. Since all of them should be derived from QGraphicsItem, RectangleItem could work as a container that holds, organize and displays other QGraphicsItems.
I think it's not that difficult as it may look to implement such display system, just decompose the problem into smaller ones and everything should go smooth.
Btw. I'm a blender fan too, unfortunately not enough artistic skills to make a serious use of it :P

That's exactly the kind of reply I needed, now all that's left is to put together what you just told me, I'm going to try that later today, or tomorrow.

If anyone has more thoughts on the said "problem", you're more than welcome to post.

[totem]

Ill' go for the QGraphics* API too.

My hint : you should separate the logic and the view.
So if you have a concept of "Node", you'll have a "Node" class (logic) and a "NodeItem" class (view). Then you bind it through signals/slots as usual in Qt.
You'll find it to be much easier to maintain as your project grow.

[woodtluk]

I implemented once something similar. I did it with a QGraphicsScene and different graphics items. There is also a QGraphicsProxyWidget class that lets you include widgets in your graphic items.
For the ports (or slots) I implemented a small class that was basically a pointer to another node. So every node could have a list of input and output ports that could be connected to each other.

Some cues:
- I had a base class for nodes that had a list of input ports and one of output nodes. Either of the list could be empty.
- The ports had some logic so you could't connect output ports with other output ports (or inputs with inputs), and each port knew with which node it's connected.
- If you drag a node all the connections (cables) of the node need to be redrawn.

I can't provide you with the source code since the project was proprietary. And it wasn't very nicely implemented because it was an internship project (basically my first bigger SW project.
But if you need some more details or suggestions, feel free to ask.

If your code is open source I'm interested in the result.

Regards Luke