From bc797ec2dc328ff88c7690ddc2e7c478acbc1a9b Mon Sep 17 00:00:00 2001 From: Chromum Date: Fri, 9 May 2025 11:58:51 +0000 Subject: [PATCH] Add quick-start --- quick-start.-.md | 60 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 quick-start.-.md diff --git a/quick-start.-.md b/quick-start.-.md new file mode 100644 index 0000000..c9bfa60 --- /dev/null +++ b/quick-start.-.md @@ -0,0 +1,60 @@ +# 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. + +--- + +## 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. + +--- + +Enjoy creating and processing your images with the powerful Image Processing Graph tool!