Interface Overview

Understand the RobolaWeb editor layout.

Main Layout

The editor consists of five main areas:

    ┌───┬─────────────────────────────────────────────────────┐
    │   │               Toolbar (Top)                         │
    | T ├──────────┬──────────────────────────┬───────────────┤
    │ o │          │                          │               │
    │ o │  Model   │     3D Viewport          │   Properties  │
    │ l │  Tree    │     (Center)             │   Panel       │
    │ b │  (Left)  │                          │   (Right)     │
    │ a │          │                          │               │
    | r |          ├──────────────────────────┤               │
    │   │          |   Asset Bar (Bottom)     │               │
    └───┴──────────┴──────────────────────────┴───────────────┘

This is the Robola Web Editor as seen in the current UI snapshot. The workspace organizes around a top toolbar, a left-side model tree, a central 3D viewport, a bottom asset ribbon, and a right-hand properties pane.

📋 Left Model Tree

A collapsible hierarchical tree showing the model's structure:

• Header: Summary statistics count (bodies, joints, geoms, sides, etc.)

• Search box: Filter nodes by name

• Hierarchy view:

  • Bodies, joints, geoms, sites, cameras, lights nested by parent-child relationships

  • Special sections: Tendons, Equalities, Contact pairs, Excludes, Keys, Actuators, Sensors

• Right-click menu: Quick actions (delete, focus, etc.)

• Add new: Add all sections

• Visual icons: Disable visibility for geoms

🎥 Center Viewport (Main Canvas)

The largest region showing a real-time 3D preview of your model:

• Rendering: Shaded display of the assembled model with interactive gizmos

• Selection highlight: Selected geoms/bodies appear highlighted (yellow in the screenshot)

• Coordinate axes: RGB gizmo in top-left corner (X=red, Y=green, Z=blue)

• Grid: Reference plane for spatial orientation

• Camera interaction:

  • Left-drag: Orbit camera around target

  • Left-click: Highlight Geom/Site with parent body frame

  • Right-drag: Move camera

  • Right-click: Cancle Highlight

  • Scroll: Zoom in/out

• Gizmo handles: When an object is selected, 3D manipulation handles appear for translate/rotate

⚙️ Right Properties Panel

A context-sensitive panel displaying editable properties of the currently selected element detail:

• Header: Element name and type badge (e.g., "geom_2_", "Mesh")

• Metadata section:

  • Body assignment and group number

  • Material and mesh references

  • Quick links to related components

• Transform section (Position & Orientation):

  • X, Y, Z coordinate fields

  • Euler angles (rotation in degrees)

  • Real-time preview updates in viewport

• Physics section: Collision settings, visibility toggles, contact flags

• Component-specific sections: Varies based on selected element type

  • Geoms: size, type, friction, collision parameters

  • Lights: intensity, direction, color

  • Sensors: sensor type, range

  • etc.

📦 Bottom Asset Bar

A tabbed interface for managing imported assets:

• Meshes tab:

  • Import new mesh files

  • Shows all imported mesh files (OBJ, STL)

  • Double-click card to edit and preview

• Materials tab:

  • Import new material

  • Edit texture assignments

  • Edit PBR Material

• Textures tab:

  • Imported image files (PNG)

  • Texture type and dimensions

  • Edit mujoco Built-in texture

🎛️ Top Toolbar

The toolbar spans the full width and contains:

• Left section: Editor title and scene name

• Center section:

  • WebSocket connection status (port number, Reconnect button)

  • Simulation controls: Run, Pause, Stop buttons

  • Simulation state indicator ("Idle", "running", "paused")

• Right section:

  • Global Settings menu

  • Save button

📌 Left Toolbar (Vertical Icon Bar)

A thin vertical bar on the far left edge with Collapse/expand, trans/rotation and visiable controls:

• Panel toggle buttons:

  • Collapse/expand the left model tree

  • Collapse/expand the right properties panel

  • Collapse/expand the bottom asset panel

• Visiable controls: Switch between different visualization group

• Tool selection: Quick access to editing tools move or rotation

• Redo button

---