Canvas Interactions

This tutorial provides an introductory overview of the Nodey UI, along with key shortcuts to help users quickly become familiar with the platform.

Below are a few essential terms and their definitions to help you better understand the interface and functionality.

• Nodes: An individual point or entity. Additional definitions about each node can be found here: https://magnopus.atlassian.net/wiki/spaces/NODEY/pages/4161863681.

• Graphs: A collection of points and their connections.

• Subgraphs: A smaller portion of a larger graph.

With those definitions in mind, let’s deep-dive into the basics of Nodey.

Exploring the UI

Nodey’s UI includes a variety of icons within the viewport. Let’s break down what each of them represents and how are they used.

Icons and Buttons

	Show Node Library and Extended Menu
	Run Graph
	Save Graph
	Load Graph
	Clear Graph
	Prompt Graph Creation
	Run Subgraph
	Delete Node
	Collapse Node

Basic Interactions & Shortcuts

Now that the viewport is no longer uncharted digital space, let’s walk through a few basic interactions and shortcuts that will facilitate quick and efficient workflow creation.

Basic Interactions

Keybind Menu

Shortcuts

Nodey offers two different control schemes.

• Standard.

• DCC.

Users can change between controls simply by accessing “Settings” on the lower left menu, and updating the “Control Scheme” drop down between the two options.

DCC Shortcuts Only

Media Drag & Drop

Nodes are extremely easy to create within Nodey. Users to instantly generate nodes or entire graph structures by dragging files directly from their OS or browser into the workspace. Here are a few examples on getting started on your workflow.

• Drag & Drop: Create a node by dragging and dropping media.

• Copy & Paste: This is also an effective method to creating nodes. Simply use Ctrl/Cmd + C to copy and Ctrl/Cmd + V to paste.

Supported Formats: This workflow works seamlessly with images, videos, audio files, and sequences, automatically creating the appropriate node type for the media you provide.

Note: Graphs will be generated when inserting properly formatted JSON files.

Media Viewer

Nodey features a high-fidelity visual output system engineered for the professional review of multi-modal assets. This integrated viewer supports the seamless inspection of images, videos, audio, and 3D assets generated directly within the graph.

Key features includes:

• Unified Media Interface: A centralized, tabbed UI that allows users to toggle between all 2D media assets without leaving the current view.

• Node-Specific Image Carousels: Dynamic viewing capabilities for complex nodes (such as "image split"), enabling rapid cycling through multiple outputs within a single interface.

Grouping Nodes - Frames

A spatial organization feature that allows users to cluster related nodes into a labeled, visual container to improve graph legibility and logic management. As graphs grow in complexity the workspace can become cluttered. Grouping encapsulates specific "functional blocks" (e.g., all nodes related to "Audio Processing" or "3D Refinement") into a single colored area.

• Group Creation: Users can quickly encapsulate a selection of multiple nodes by pressing the G shortcut, generating a container frame for improved workspace organization.

• Contextual Framing Options: Right-clicking a frame provides access to management tools, including:

  • Ungrouping: Dissolves the frame while maintaining the current layout and integrity of the underlying nodes.

  • Visual Customization: Supports the assignment of custom color profiles to frames, enabling clear visual hierarchy and rapid identification within the graph.

Align & Collapse Nodes

A set of layout tools designed to streamline graph organization by standardizing node positions and reducing visual footprint.

• Collapse Nodes: Use the small arrow button at the bottom of any node to shrink its size. This clears up space without removing the node from your workflow.

• Align Nodes: You can quickly line up your work by Shift + Clicking multiple nodes. This allows you to snap them into a clean, organized layout.

Tip: Check the Keybind Menu for specific alignment shortcuts.

Graph Append

This is a function that allows a user to import or load another graph into the current viewport, placing it alongside the existing graph rather than overwriting it. The flow for the graph append node prompts users with three options: Replace, Append, or Cancel.

• Replace loads the new graph and frames it within the viewport.

• Append overlays the new graph, allowing users to freely position it anywhere within the viewport.

• Cancel stops the graph from loading into the viewport.

Disabling Nodes & Wires

A workflow management feature that allows users to temporarily deactivate specific nodes or connections, stopping data flow and computation without deleting the logic from the graph.

• Disabling/Enabling: Users can right-click on nodes or connections to disable and re-enable them.

• Inserting Nodes: The right-click menu on a connection can accommodate the disable connection feature. Clicking this option will insert a node and show choices for which nodes to insert.

These are some of the in app basic interactions for Nodey. For further guidance on using the platform to create content, please refer to the step-by-step tutorial in the next section.

Add a comment