UI Overview
This guide introduces the main areas of the Rackula interface. Understanding the layout helps you work faster and find features quickly.
Main areas
Section titled “Main areas”The Rackula interface has four main areas:
| Area | Location | Purpose |
|---|---|---|
| Toolbar | Top | Main controls and actions |
| Sidebar | Left | Device library and navigation |
| Canvas | Centre | Rack display and editing |
| Edit panel | Right (when active) | Device and rack properties |
Toolbar
Section titled “Toolbar”The toolbar provides quick access to common actions.
Left section
Section titled “Left section”| Button | Action | Shortcut |
|---|---|---|
| Logo | Return to welcome screen | — |
| New Rack | Create a new rack | — |
| Load | Load a saved layout | Ctrl+O |
| Save | Export current layout | Ctrl+S |
Centre section
Section titled “Centre section”| Button | Action | Shortcut |
|---|---|---|
| Undo | Undo last action | Ctrl+Z |
| Redo | Redo undone action | Ctrl+Shift+Z |
| Front/Rear | Toggle rack view | — |
Right section
Section titled “Right section”| Button | Action | Shortcut |
|---|---|---|
| Display mode | Toggle label/image mode | I |
| Zoom controls | Zoom in/out, fit all | +/−/F |
| Share | Generate share link | — |
| Export | Export to file | Ctrl+E |
| Theme | Toggle dark/light mode | — |
| Help | Show keyboard shortcuts | ? |
Sidebar
Section titled “Sidebar”The sidebar contains the device library and rack list.
Device library
Section titled “Device library”Browse and search available devices:
- Search box — Filter devices by name
- Category groups — Devices organised by type
- Device cards — Drag to add to rack
Rack tabs
Section titled “Rack tabs”When you have multiple racks, tabs appear at the bottom of the sidebar:
- Click a tab to switch racks
- Drag tabs to reorder
- Right-click for options (duplicate, delete)
Canvas
Section titled “Canvas”The canvas is the main working area where your rack appears.
Rack display
Section titled “Rack display”| Element | Description |
|---|---|
| U numbers | Position labels along the sides |
| Devices | Placed equipment in the rack |
| Grid lines | Visual guides for U positions |
| 5U markers | Every 5th U is highlighted |
Interacting with devices
Section titled “Interacting with devices”| Action | How to |
|---|---|
| Select | Click a device |
| Multi-select | Shift+click additional devices |
| Move | Drag selected device, or use ↑/↓ keys |
| Edit | Double-click, or select and press Enter |
| Delete | Select and press Delete |
Zoom and pan
Section titled “Zoom and pan”| Action | How to |
|---|---|
| Zoom in | Click +, or Ctrl++ |
| Zoom out | Click −, or Ctrl+− |
| Fit all | Click fit button, or press F |
| Pan | Drag empty canvas area |
| Reset zoom | Click zoom percentage, select 100% |
Edit panel
Section titled “Edit panel”The edit panel appears on the right when you select a device or edit rack properties.
Device properties
Section titled “Device properties”| Section | Fields |
|---|---|
| Basic | Name, category, notes |
| Physical | U height, weight, full-depth |
| Appearance | Colour, custom images |
| Advanced | Power, network ports |
Rack properties
Section titled “Rack properties”| Field | Description |
|---|---|
| Name | Display label for the rack |
| Height | Total U height (1–100) |
| Width | 10“, 19“, or 23“ |
| Form factor | 2-post, 4-post, cabinet, etc. |
| Numbering | Ascending or descending U order |
Display modes
Section titled “Display modes”Rackula offers three display modes. Toggle with the I key or toolbar button.
Devices show their names as text. Best for documentation and clarity.
- Clear device identification
- Compact display
- Works at all zoom levels
Devices show their images only. Best for realistic visualisation.
- Manufacturer device images
- Front and rear views
- Placeholder for devices without images
Devices show images with name overlay. Best of both worlds.
- Visual identification
- Name labelling
- Good for presentations
Themes
Section titled “Themes”Rackula supports dark and light themes.
| Theme | Description |
|---|---|
| Dracula (dark) | Default. Purple accents on dark background. |
| Alucard (light) | Warm cream background with purple accents. |
Toggle themes using the moon/sun icon in the toolbar. Your preference is saved.
Keyboard shortcuts
Section titled “Keyboard shortcuts”Press ? to see all keyboard shortcuts. Key shortcuts include:
| Shortcut | Action |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| Delete | Delete selected |
| I | Toggle display mode |
| F | Fit all |
| ? | Show help |
See Keyboard Shortcuts for the complete reference.
Mobile experience
Section titled “Mobile experience”Rackula works on tablets but is optimised for desktop use. On smaller screens:
- Sidebar becomes a drawer (tap hamburger menu)
- Touch and drag to position devices
- Long-press for context menus
- Pinch to zoom on touch devices
Next steps
Section titled “Next steps”- First Rack Walkthrough — Create your first layout
- Device Management — Customise devices in detail
- Keyboard Shortcuts — Full shortcut reference