Implementing a node-based graphical interface?

Answer 1

I would start by modelling some basic interfaces (in the OOP sense, not the GUI sense). Seems to me you'll have a Node which will accept a collection of inputs and a single output. You didn't give any indication of how broad the data types are, but you'll want some suitable method of representing your inputs/outputs. For your first goal, this could be an integer.

In some generic C style OOP language (hope it makes sense):

class Node<T> {
    Node<T>[] inputs;
    T eval();
}

class AdderNode extends Node<int> {
    int eval() {
        int accum = 0;
        for (inputs : i)
            accum += i.eval();
        return i;
    }
}

class ConstNode<int I> extends Node<int> {
    int eval() { return I; }
}

AdderNode a;
a.inputs.add(ConstNode<2>());
a.inputs.add(ConstNode<3>());
a.eval();

You could expand on this by replacing int with some abstract class, generic, or interface. Actual implementation will vary based on the actual language, of course.

Answer 2

I would start with modeling the interesting operations. Ultimately you will connect them to a UI, but that is the steering wheel and gas pedal, not the engine.

What you are attempting to build has a lot in common with programming languages: variables, values, types, expressions, evaluation, etc. Many of the metaphors are applicable and might provide some guidance.

If you are using .NET 3.5, you have the option of Expression Trees, which allow you to represent and compile code expressions at runtime.

For example, to model your first goal:

using System.Linq.Expressions;

ConstantExpression theNumber2 = Expression.Constant(2);
ConstantExpression theNumber3 = Expression.Constant(3);

BinaryExpression add2And3 = Expression.Add(theNumber2, theNumber3);

To invoke the expression, we need to wrap add2And3 with a method. This is done with a lambda expression:

Expression<Func<int>> add2And3Lambda = Expression.Lambda<Func<int>>(add2And3);

Func<int> represents a method which takes no parameters and returns an int. In C#, the code represented by add2And3Lambda would be:

() => 2 + 3

So what we have is an expression tree whose root is a method. Because a method is callable, we can compile the tree into an instance of the underlying delegate type:

Func<int> add2And3Func = add2And3Lambda.Compile();

Now we can invoke the code we built:

int theNumber5 = add2And3Func();

Every expression available to .NET languages is supported.

Imagine every node in your graph has an Expression associated with it. That might give you an idea of the power of expression trees and how they could help you with this task.

Answer 3

All that node systems have in common that they describe a functional programming language. A function takes multiple parameters and returns a single result, no matter for what purpose it was designed. Some examples:

• Graphics: Blur(Image, Kernel, Radius) -> Image

• Math: Add(Number, Number) -> Number

• Relational: Filter(Table, Predicate) -> Table

Basically that comes down to a function signature like Func<object[], object> (C#).

You will face the question of how to make your node system persistent. Do you want to make the result of a node usable as parameter by only one other node (tree) or by multiple nodes (graph)?

Example of a tree, directly have the parameters a child nodes:

Add(
  Multiply(
    Constant(5),
    Constant(4)
  ),
  Multiply(
    Constant(5),
    Constant(3)
  )
)

Example of a graph, store all nodes in a list and only use references:

A := Constant(5)
B := Constant(4)
C := Constant(3)

D := Func(Multiply, A, B)
E := Func(Multiply, A, C)

F := Func(Add, D, E)

Answer 4

@dbr: Did you find a solution to you question??

I have a similar problem, I'm trying to develop a node based GUI for a couple of programs that I have. But I haven't been able to figure out how to do it. I haven't done much GUI programming.

I noticed that you mentioned vvvv. I'm not very familiar with vvvv but I know its from the same family of Max/MSP/Jitter / PureData. With Max you can develop your own "external objects" in C, then you can use them in Max. As a work around I was thinking of writing some of my code for Max and just using Max as the GUI fronted. I'm not entirely satisfied with the idea, so I'm still looking.

P.S. I tried to leave a comment instead of adding an "Answer" but apparently I don't have enough reputation.

Answer 5

Maybe bwise has something of interest?

On the bottom half of this page shows an example of using bwise to create a multiplication block that takes two numbers as an input.

Answer 6

I found some useful information on implementing such an interface in Cocoa:

• Intro to Quartz and Intro to Quartz II - describes basic drawing in an NSView
• FlowChartView on Cocoadev - pretty much what I was looking for, an implementation of the Quartz Composer interface.