Node-based interface

Hello, everyone!

I'm thinking over use JUCE as a backbone for a new application we want to deliver within the next year. The application is supposed to have a node-based interface where you have an endless viewport and you can put nodes and connect them with wires in a way very similar to what Magic VJ software has. I'm wondering if it's something that in a way can be done with a "ready-made" components or it's something that should be heavily coded over an empty base component? 

It would be super nice if someone could outline the best way to do that in JUCE, just point a direction to correct place in API reference.

Have you looked at the plugin host demo?

But it's not a trivial thing to do, and isn't something where you're going to find any ready-made code that would magically do most of the work for you. Not sure what high level advice to give, other than to use a ValueTree to store your data model.

I was thinking the same thing a while ago. I could imagine more than one program I'd want to write that involved connecting nodes with wires. So I wondered if it would make sense to have some basic node framework first. Then you could more quickly put such programs together. In fact I did start to make one.

But in the end I decided---at least for one program---that it wouldn't be appropriate. The problem was that the way I wanted to make the nodes work was too specific to the application, and so there wasn't much to be gained out of some general node/edge framework. At least I couldn't think of a way. Maybe someone else could.

One program I'm working on is an editor for one of my synths, which has very modular capabilities. I think you can get to a screenshot here:

The nodes just derive from Component and override the paint() function to paint themselves. The nodes contain child components that are the controls on each node, which in my case are mostly sliders. The connectors (wires) are also derived from the Component class. JUCE makes these easy because of the drawing tools available. I use the Path class to draw them, specifically the Path::quadraticTo() function. I can also easily select the connectors with the mouse---for example, to delete them---by overriding the Component::hitTest() function. In that function I use Path::getNearestPoint() to see if the mouse click is close to the connector. I was able to easily zoom (scale) the entire scene in and out. All nodes and connectors are children of a "surface" which is also derived from Component. I just make one call to the surface's Component::setTransform() function and everything scales.

There are other, newer languages I'd rather use than C++ (for example, D or C#). But I don't know of any other GUI library that let's me do this kind of stuff and is cross-platform. So I stick with C++ for this reason.

1 Like

Yeah, people have asked before for library classes for this kind of thing, but I just don't think it's possible to write something that's both generic enough for people to customise, and also high-level enough to actually be useful.