Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Implementing a node-based graphical interface?

Tags:

I would like to implement a nodal-interface, basically a DAG where each node performs an operation on it's input connections, and outputs something (which you can connect to another node)

Some example applications:

  • Apples "Shake" - screenshot
  • The Foundrys "Nuke" - screenshot
  • MindNode - screenshot
  • vvvv - screenshots
  • Quartz Composer - screenshot

As a first goal, I would like to have an graphical application with only 2 nodes. A "number" which simply outputs a fixed number, and an "Add" node, which takes two inputs and outputs the sum of the two.

As people have answered so-far, I have a rough idea of how to represent the data in code, for example in Python'y looking pseudo-code:

class Number:     def __init__(self, value):         self.value = value      def eval(self):         return self.value  class Add:     def __init__(self, input1, input2):         self.input1 = input1         self.input2 = input2      def eval(self):         return self.input1.eval() + self.input2.eval()   a = Number(20) b = Number(72)  adder = Add(a, b) print adder.eval() 

How would I got about wrapping a custom GUI around this? Something like the following, but slightly less hand-drawn!

nodal UI mockup

Where would I begin? I currently plan to write it in Objective-C/Cocoa, although I'm more than open to suggestions for other languages.

like image 927
dbr Avatar asked Mar 14 '09 04:03

dbr


1 Answers

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.

like image 200
Ryan Graham Avatar answered Oct 21 '22 17:10

Ryan Graham