5

Guides/QuickStart

Chromum edited this page 2025-05-12 14:52:22 +00:00

Table of Contents

• Image Processing Graph - Getting Started Guide
• 1. Creating a Graph
• 2. Opening a Graph
• 3. Using the Graph
• 3.1 Creating Nodes
• 3.2 Connecting Nodes
• 3.3 Deleting Nodes
• 3.4 Creating a Sticky Note
• 3.5 Running the Graph
• 4. Controls
• Navigation
• Graph Interaction
• Tips & Tricks

Image Processing Graph - Getting Started Guide

Welcome to the Image Processing Graph! This guide will walk you through creating and using graphs within the editor.

---

1. Creating a Graph

To create a new graph:

1. Right-click in the Project View.
2. Navigate to Create → Image Processing Graph → New Graph.
3. Name the asset as desired.

---

2. Opening a Graph

To open an existing graph:

• Double-click the newly created asset or any pre-existing graph asset.
• Alternatively, with a graph asset selected, click the "Open" button in the Inspector.

---

3. Using the Graph

3.1 Creating Nodes

To create a node:

1. Press the "Space" button or Right-click → Create Node to open the node creation window.
2. In the search window that opens, type the name of the node you wish to create and press Enter or double-click on the node name to add it to the graph.
3. You can also use the arrow keys to navigate through the search results in the creation window.

3.2 Connecting Nodes

To connect nodes:

1. Click and drag from one port to another. The ports must be of the same type.
2. Hovering over a port will show its type, making it easier to connect compatible nodes.
3. If you drop a connection in empty space, a contextual search window will open.
4. The contextual search window will only show nodes that can connect to the port you dragged from.

3.3 Deleting Nodes

• To delete a node, you can right-click on the node and select Delete.
• Alternatively, you can press the Delete key after selecting a node.

3.4 Creating a Sticky Note

To create a sticky note:

1. Click on the Options button in the top right of the graph.
2. Select Make Sticky Note from the dropdown menu.
3. A note will appear at the centre of the graph. You can drag it to a more convenient location.
4. To edit the note, click on it and type your text directly inside.
5. Right click the sticky note to change settings such as Font Size.
6. Use sticky notes for adding reminders, comments, or any information relevant to the graph you`re building.

3.5 Running the Graph

To run the graph:

1. Once your nodes are connected and configured, click the Run button in the top toolbar.
2. The graph will begin processing and executing according to the nodes and connections you`ve set up.
3. If there`s an error or issue, the Console will display relevant logs, which can be used to troubleshoot; The node that errors will highlight red.

---

4. Controls

Navigation

• Middle Mouse Drag - Pan view around graph.
• Mouse Scroll - Zoom in and out of the graph.

Graph Interaction

• Spacebar - Open the node creation menu.
• Delete Key - Delete the selected node(s).
• Ctrl + Z - Undo the last action.
• Ctrl + Shift + Z - Redo the last undone action.

---

Tips & Tricks

• Ports and Types: Make sure you connect ports of the same type for proper functionality.
• Contextual Search: Use the contextual search window for more dynamic and flexible node connections.
• Keyboard Shortcuts: Use the Spacebar and Arrow Keys for quick navigation and node creation.

Image Processing Graph Menu

Quick Start Guide

---

Nodes

Image Nodes

Core Image Nodes

• BaseImageNode

Image Processing

• Desaturate
• Get Dimensions
• Invert
• Invert Channel
• RGBA Combine
• RGBASplit
• Single Channel Color

Image Input/Output

• Texture2D Import
• Texture2D Output
• View Image Node
• From Path Node

Variable Nodes

• Variable Node

String Nodes

• Split
• Append
• Replace

Utility Nodes

• Generic Connection

---