Databases
StackOverflow2013
Postsdbo
POImplementing a node-based graphical interface?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImplementing a node-based graphical interface?
    text
    copied!<p>I would like to implement a nodal-interface, basically a <a href="http://en.wikipedia.org/wiki/Directed_acyclic_graph" rel="noreferrer">DAG</a> where each node performs an operation on it's input connections, and outputs something (which you can connect to another node)</p> <p>Some example applications:</p> <ul> <li><a href="http://www.apple.com/shake/" rel="noreferrer">Apples "Shake"</a> - <a href="http://images.apple.com/es/shake/images/index_hero.jpg" rel="noreferrer">screenshot</a></li> <li><a href="http://www.thefoundry.co.uk/pkg_overview.aspx?ui=CBC2593A-2C9F-4EF9-84BE-C198B0171453" rel="noreferrer">The Foundrys "Nuke"</a> - <a href="http://upload.wikimedia.org/wikipedia/en/5/5a/Nuke_screenshot.png" rel="noreferrer">screenshot</a></li> <li><a href="http://www.mindnode.com/" rel="noreferrer">MindNode</a> - <a href="http://www.mindnode.com/wordpress/wp-content/uploads/2007/12/mn-screen-2.png" rel="noreferrer">screenshot</a></li> <li><a href="http://vvvv.org/" rel="noreferrer">vvvv</a> - <a href="http://vvvv.org/tiki-index.php?page=screenshots" rel="noreferrer">screenshots</a></li> <li><a href="http://developer.apple.com/graphicsimaging/quartz/quartzcomposer.html" rel="noreferrer">Quartz Composer</a> - <a href="http://img24.imageshack.us/img24/8969/quartzcomposer.png" rel="noreferrer">screenshot</a></li> </ul> <hr> <p>As a first goal, I would like to have an <em>graphical application</em> 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.</p> <p>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:</p> <pre><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() </code></pre> <p>How would I got about wrapping a custom GUI around this? Something like the following, but slightly less hand-drawn!</p> <p><img src="https://i.stack.imgur.com/h0l6N.png" alt="nodal UI mockup"></p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload