Getting Started

Get your first visualization running quickly.

Initial Setup

Authentication

On first launch, choose your authentication method:

Choose your preferred authentication method.

OAuth Providers

1. Click your provider - GitHub, Google, or Microsoft
2. Authorize in browser - Review permissions and approve
3. Return to app - Authentication completes automatically

The browser shows "Success! You may close this tab" when complete.

Device Code

Eight-character code for device verification.

1. Click "Log in with code"
2. Copy the 8-character code (e.g., T9WKVR2P)
3. Visit https://console.zeloscloud.io/verify on any device
4. Enter code and verify

Codes aren't case-sensitive.

Confirm the device.

Organization Access

You're automatically added to your organization based on your email domain.

After authentication, the app will:

• Create a default workspace - Your starting point for visualization
• Check for updates - Ensure you have the latest features
• Initialize local storage - Set up configuration and cache
• Start the local agent - Enable data reception on port 2300

Interface Overview

The app interface consists of:

• App Rail (far left) - Quick access to workspaces, extensions, and settings
• Left Sidebar (Cmd+B / Ctrl+B) - Browse signals, actions, and extensions
• Main Area - Tabs with panel layouts for visualizations
• Right Sidebar (Cmd+J / Ctrl+J) - Manage layouts and connections
• Timeline (bottom) - Navigate time and control playback

All sidebars are resizable and their states persist across sessions.

Basic Workflow

Step 1: Connect to Data

You have two options for getting data into the app:

Option A: Live Connection

Connect to a running agent streaming real-time data:

1. Click "Connect Live" from the welcome screen
2. The app connects to localhost:2300 by default
3. Your signal tree (left sidebar) populates with available data

Remote Connections:

To connect to a remote agent:

1. Open the right sidebar (Cmd+J / Ctrl+J)
2. Go to the Connections section
3. Click "Add Connection"
4. Enter the agent address (e.g., 192.168.1.100:2300)
5. Press Enter or click "Connect"

Your connection is saved for quick access later.

Option B: Open a Trace File

Load previously recorded data for analysis:

1. Click "Open Trace" from the welcome screen
2. Select your .trz file
3. The timeline adjusts to the trace's time range
4. Workspace switches to Trace mode

Quick Open

Double-click any .trz file to automatically launch the app and load the trace.

Step 2: Visualize Data

Once connected, add signals from the left sidebar to create visualizations:

Adding Signals

The Signals section in the left sidebar shows all available data organized hierarchically:

📁 Source
  └── 📁 Event
      └── 📊 Field

Quick Methods:

Drag & Drop

1. Expand sources and events to find your field
2. Drag a field to the workspace
3. A new panel is created automatically

Double-Click

• Double-click any field to create a new panel with that signal

Multi-Select

• Cmd+Click / Ctrl+Click to select multiple fields
• Drag any selected field to add them all at once

Folder Drag

Drag entire folders to add all signals within. This works at any level (source, event, or folder).

Your first panel appears with the signal plotted over time!

Essential Concepts

Understanding these concepts will accelerate your Zelos mastery:

Workspaces, Tabs, and Panels

• Workspace: Your entire Zelos session, auto-saved continuously
• Tabs: Different views within a workspace (like browser tabs)
• Panels: Individual visualizations within a tab

Workspace
├── Tab 1: "System Overview"
│   ├── Plot Panel: CPU & Memory
│   ├── Table Panel: Current Values
│   └── Log Panel: System Events
└── Tab 2: "Detailed Analysis"
    ├── Plot Panel: All Sensors
    └── Plot Panel: Derived Metrics

Live Mode vs Trace Mode

Aspect	Live Mode	Trace Mode
Data Source	Real-time stream	Recorded file
Time Range	Moving window	Fixed range
Playback	Play/pause current data	Navigate entire recording
Use Case	Active debugging	Post-mortem analysis

Signal Organization

Signals follow a hierarchical structure with support for nested events:

Source (Device/Application)
└── Event (Logical Group, supports nesting)
    └── Field (Individual Value)

Example: robot/motors/left.rpm

• Source: robot
• Event: motors/left (nested events)
• Field: rpm

Events can be nested to organize related data logically.

Account Management

Check Your Status

Click the Settings button in the app rail (left edge) to view account details:

• Display name and email
• Organization membership
• Sign out option

Once signed in, you can:

• Save and share layouts - Cloud storage for team collaboration
• Access team layouts - Use layouts created by your organization
• Sync preferences - Settings persist across devices

Sign Out

1. Click Settings in the app rail
2. Navigate to Account section
3. Click "Log Out"
4. Confirm when prompted

Local Work Preserved

Signing out doesn't delete local workspaces. Your work remains on your computer.

What's Next?

Now that you've created your first visualization, explore these key features:

• Workspace

  Master tabs, modes, and workspace management

• Sidebars

  Discover all sidebar features and shortcuts

• Panels

  Explore Plot, Table, Value, Log, and Action panels

• Layouts

  Save and share panel arrangements with your team

• Timeline

  Navigate time ranges and control playback

• Search

  Use powerful glob patterns to find signals