Interface Overview¶

Learn your way around the Nodo interface. This guide explains each panel and how they work together.

Main Window Layout¶

The Nodo interface has four main areas:

1. Menu Bar (top) - File operations, edit commands, view options
2. Node Graph (center-bottom) - Visual programming workspace
3. Viewport (center-top) - 3D geometry preview
4. Side Panels (left & right) - Node library and properties

Menu Bar¶

File Menu¶

• New Scene (Ctrl+N) - Start fresh project
• Open Scene (Ctrl+O) - Load existing .nfg file
• Recent Projects - Quick access to recent files
• Save Scene (Ctrl+S) - Save current project
• Save Scene As (Ctrl+Shift+S) - Save with new name
• Exit - Close Nodo

Edit Menu¶

• Undo (Ctrl+Z) - Reverse last action
• Redo (Ctrl+Shift+Z) - Reapply undone action
• Copy (Ctrl+C) - Copy selected nodes to clipboard
• Paste (Ctrl+V) - Paste copied nodes (with 50px offset)
• Duplicate (Ctrl+D) - Duplicate selected nodes with connections
• Delete (Del) - Remove selected nodes
• Select All (A) - Select all nodes in graph
• Deselect All (Shift+A) - Clear selection
• Invert Selection (Ctrl+I) - Invert current selection

View Menu¶

Display toggles for the viewport:

• Show Vertices - Display geometry points
• Show Edges - Display edge wireframe
• Show Vertex Normals (N) - Normal vector arrows at vertices
• Show Face Normals (Shift+N) - Normal vector arrows at face centers
• Show Grid (G) - Ground plane grid
• Show Axes - XYZ axis indicator
• Toggle Wireframe (W) - Wireframe display mode

Panels:

• Graph Parameters Panel - Show/hide graph parameters controls
• Property Panel - Show/hide node properties panel

Help Menu¶

• Documentation (F1) - Opens this documentation site
• Keyboard Shortcuts (Ctrl+/) - Quick reference guide
• About Nodo - Version and credits

Node Graph Panel¶

The heart of Nodo - where you build procedural workflows.

Canvas Navigation¶

Nodes¶

Each node has:

• Title Bar - Node name (double-click to rename)
• Input Pins (left) - Accept geometry from other nodes
• Output Pins (right) - Send geometry to other nodes
• Body - Shows node type and category
• Status Indicator - Green (valid), Red (error), Yellow (warning)

Node States¶

• Selected - Orange highlight, parameters shown in Property Panel
• Error - Red indicator (hover to see error message)
• Disabled - Grayed out (not evaluated)

Connections¶

Creating Connections: 1. Click and drag from an output pin 2. Release on an input pin 3. A curved line appears

Connection Colors: - Gray - Default, inactive - Blue - Hovered (ready to select) - Orange - Selected

Deleting Connections: - Single-click to select, press Del - Right-click → Delete Connection

Context Menu¶

Right-click in the node graph:

• Add Node - Quick node creation menu
• Paste - Paste copied nodes
• Select All - Select all nodes (Ctrl+A)
• Deselect All - Clear selection

Right-click on a node:

• Duplicate (Ctrl+D) - Copy the node with connections
• Delete (Del) - Remove the node
• Bypass (B) - Toggle bypass (node passes input through unchanged)
• Disconnect All (Shift+D) - Remove all connections to/from node
• Rename - Change node name
• Reset Parameters - Restore defaults

Right-click on a connection:

• Delete Connection - Remove the link

Viewport Panel¶

3D preview of your geometry in real-time.

Viewport Toolbar¶

Located at the top of the viewport:

Display Toggles (Left Side)¶

• ● Vertices - Show/hide vertex points
• ─ Edges - Show/hide edge lines
• ↑V Vertex Normals - Display vertex normal arrows
• ↑F Face Normals - Display face normal arrows
• # Point Numbers - Number each vertex
• ⊕ Grid - Toggle ground grid

Viewport Controls (Right Side)¶

• 🔲 Wireframe - Wireframe display mode
• 🔵 Shading - Solid shaded mode
• 🎥 Reset Camera - Return to default view
• 📐 Fit View - Frame all geometry

Camera Navigation¶

Shading Modes¶

Wireframe Mode: - Shows only edges - Good for dense geometry - Toggle with wireframe button

Shaded Mode: - Solid surfaces with lighting - Shows geometry shape - Default mode

Combined Mode: - Both wireframe and shading - Toggle both buttons on

Grid and Axes¶

Grid: - Shows XZ ground plane - 10-unit major divisions - Helps with scale reference

Axes: - Red arrow = X axis - Green arrow = Y axis (up) - Blue arrow = Z axis - Located at origin (0, 0, 0)

Node Library Panel¶

Find and add nodes to your graph.

Organization¶

Nodes are organized by category:

• 📦 Generator (6 nodes) - Create geometry primitives
• 🔧 Modifier (16 nodes) - Transform and deform geometry
• 📋 Array (4 nodes) - Duplicate and distribute
• ⚡ Boolean (2 nodes) - Combine geometries
• 📊 Attribute (5 nodes) - Manage geometry data
• 👥 Group (6 nodes) - Selection and masking
• 💾 IO (2 nodes) - Import/export files
• ⚙️ Utility (7 nodes) - Helper nodes

Using the Node Library¶

1. Expand a category by clicking it
2. Click a node to add it to the graph
3. The node appears at the graph center

Graph Parameters Panel¶

Control multiple nodes with shared parameters.

The Graph Parameters panel (View → Panels → Graph Parameters) lets you create master controls that drive multiple nodes at once.

Creating Graph Parameters¶

1. Click the + button in the panel toolbar
2. Enter parameter details:
3. Name: Unique identifier (e.g., base_scale, detail_level)
4. Type: Float, Int, Bool, String, or Vector3
5. Value: Initial value
6. Range (optional): Min/max for numeric types
7. Click OK

Using Graph Parameters¶

Reference graph parameters in any node parameter using expressions:

$param_name                   # Direct reference
$base_scale * 2              # With math
ch("/graph/param_name")      # Explicit path

Example Workflow: 1. Create graph parameter: master_size (Float, default 1.0) 2. In Sphere node, set radius: $master_size 3. In Box node, set size: $master_size * 2 4. Now one slider controls both shapes!

Managing Graph Parameters¶

• Edit: Double-click a parameter in the list
• Delete: Select and click the - button
• Reorder: Drag parameters up/down (future feature)

When you change a graph parameter's value, all nodes using it automatically update.

See Graph Parameters for advanced usage.

Property Panel¶

Edit parameters for the selected node.

Parameter Organization¶

Parameters are grouped by category (collapsible):

• Universal - Common parameters (like primitive type)
• Size - Dimensions and scale
• Resolution - Quality settings
• Transform - Position, rotation, scale
• Settings - Operation-specific options

Parameter Types¶

Number Fields (Int/Float)¶

• Click to edit - Type new value, press Enter
• Drag - Click and drag left/right to scrub value
• Slider - Use slider if visible

Dropdowns (Combo Box)¶

• Click to open menu
• Select option from list

Checkboxes (Boolean)¶

• Click to toggle on/off

Vector Fields (Vec3)¶

• Three number fields for X, Y, Z
• Edit each component separately

Expression Mode¶

Any parameter can use expressions instead of fixed values!

Enable Expression Mode: 1. Click the ≡ button next to the parameter 2. Button changes to # and text input appears 3. Parameter turns blue when expression is valid 4. Type your math expression and press Enter

Example Expressions:

2 + 2              → 4
sin(45) * 2        → Sine of 45°
max(5, 10)         → 10
$radius * 2        → Reference graph parameter
ch("../radius")    → Reference another node's parameter

See Expression Syntax for full details.

Status Bar (Bottom)¶

Shows helpful information:

• Node Count - Number of nodes in graph
• Selection - Currently selected nodes
• Geometry Stats - Vertex/face count for current output
• FPS - Viewport frame rate

Keyboard Shortcuts¶

Essential Shortcuts¶

See Keyboard Shortcuts for complete list.

Workflow Tips¶

Organizing Your Graph¶

Working Efficiently¶

Viewport Optimization¶

For complex scenes: - Toggle off vertex/face normals - Use wireframe mode - Hide grid if not needed

Customization¶

Panel Layout¶

• Drag panel title bars to rearrange
• Resize panels by dragging edges
• Hide/Show panels from View menu

Theme¶

Nodo uses a dark theme optimized for long modeling sessions: - Dark backgrounds reduce eye strain - High contrast text for readability - Color-coded elements for quick recognition

Common Questions¶

Can I detach panels?¶

Not currently, but this is planned for future versions.

Can I use multiple viewports?¶

Not yet, but multi-viewport support is on the roadmap.

How do I zoom in the node graph?¶

Use the scroll wheel or pinch gesture (trackpad).

My parameter panel is blank¶

Make sure a node is selected in the node graph.

The viewport is empty¶

• Check that nodes are connected to Output node
• Press A to frame all geometry
• Ensure nodes don't have error indicators

Next Steps¶

Now that you know the interface:

1. Quick Start Guide - Build your first model
2. Node Reference - Learn what each node does
3. Expression System - Master procedural control

Interface Diagram Reference¶

┌─────────────────────────────────────────────────────────────┐
│  File   Edit   View   Help                     [Menu Bar]   │
├──────────────┬──────────────────────────────┬───────────────┤
│              │                              │               │
│  Node        │       Viewport               │  Property     │
│  Library     │  ┌─────────────────┐        │  Panel        │
│              │  │  Toolbar        │        │               │
│  ┌─────────┐ │  ├─────────────────┤        │  ┌──────────┐ │
│  │Generator│ │  │                 │        │  │Universal │ │
│  │ Sphere  │ │  │   3D View       │        │  │          │ │
│  │ Box     │ │  │                 │        │  │Size      │ │
│  │Cylinder │ │  │                 │        │  │          │ │
│  │         │ │  └─────────────────┘        │  │Transform │ │
│  ├─────────┤ │                              │  │          │ │
│  │Modifier │ ├──────────────────────────────┤  └──────────┘ │
│  │Transform│ │                              │               │
│  │ Extrude │ │   Node Graph                 │               │
│  │         │ │  ┌─────┐    ┌─────┐         │               │
│  └─────────┘ │  │Sphere──→│Trans│         │               │
│              │  └─────┘    └──┬──┘         │               │
│              │                │             │               │
└──────────────┴────────────────┴─────────────┴───────────────┘

Ready to start creating? Head to the Quick Start Guide!