Help

Description of the UI :

• On the top a simple header with buttons allowing you to save to and load from a json file, as well as access the present document.
• In the bottom a footer in which error messages are displayed.
• On the left, the node graph. It is empty when the app is launched.
• On the right, a sidebar which is used to display and modify the parameters of any selected node.

How to use :

Press space to bring up the node selector, allowing you to add a node in the graph. There are 45 types of node at the time of writing. Some are purely input/generator nodes (image, color, grayscale, linear gradient, bricks, checkers, shape, noises...), others a pure filters (blurs, sharpen, transform, wraps, blend, ...).

Any newly created node is automatically selected, allowing you to see its parameters in the sidebar.

The box in the middle of the node is a thumbnail of the node output. You can see a full-window preview of the output of the node by double clicking on it. This still allows you to modify the node parameters in the sidebar. It is possible to drag the view around and to zoom inside it by scrolling. This preview mode can be quit by pressing ESC or double clicking on it.

The circles on the left of the node are its inputs. Some nodes have no input, some have more than one.

The circles on the right of the node are its outputs. Some nodes have no output, some have more than one (ie the channel splitter which has an output for each color channel).

You can create a connection between two nodes by dragging from one node output to another node input.

You can delete a connection by clicking on it and pressing DELETE or BACKSPACE. Likewise, nodes can also be deleted in the same fashion.

You can organize the graph by dragging the nodes with the mouse. Dragging the nodes while pressing SHIFT will snap them to a grid. A button in the corner of the graph allow you to permanently enable this.

You can browse the graph by clicking on an empty space and dragging with the mouse.

The unselect a node or connection, press ESC.

Tips :

A few things to know to use the tool more efficiently :

• When creating a new node (with at least one input) while having a node (with at least one output) selected, the new node will be placed on the right of the selected node and they will be automatically connected.
• When creating a new node (with at least one input and one output) while having a connection selected, the new node will be placed at the middle of connection, connecting itself at both of the connection's nodes.
• You can easily share a graph by saving it as json, creating a public gist containing the save file and appending ?gist=URL_OF_YOUR_GIST to the application url. Example: http://www.kchapelier.com/graph.ical/?gist=https://gist.github.com/kchapelier/69c85cb68ee4610a30548facf69e8bf9