# Data Tracks

Data Tracks are timeline lanes with a built-in **SVG curve editor** for keyframe-based animation. You draw a curve directly in the timeline, and Exaplay interpolates values between keyframes and transmits them to external systems (lighting consoles, control systems, custom hardware) over OSC, UDP, TCP, ArtNet, or to the Operator Control Panel.

## What Are Data Tracks?

A Data Track is a timeline lane containing **keyframes**. The lane renders an interactive SVG curve showing the interpolated path between keyframes. At playback time the engine evaluates the curve and transmits the value to the configured output destination.

## Creating a Data Track

1. **Right-click** anywhere in the Timeline dropzone area.
2. Choose **Add Data Track** from the context menu.
3. The new track appears in the Timeline. Open the **Inspector** to configure its properties:
   * **Name** — human-readable label
   * **Color** — track row accent colour
   * **Min / Max Value** — numeric range of the curve
   * **Interpolation** — `Linear` or `Step`
   * **Output** — format, address, port, and protocol-specific settings

## Editing Keyframes with the SVG Curve Editor

The curve editor is embedded directly in the Data Track row in the Timeline.

| Action                             | Result                                                                                 |
| ---------------------------------- | -------------------------------------------------------------------------------------- |
| **Double-click** on the curve area | Adds a new keyframe at that position and value                                         |
| **Click** a keyframe handle        | Selects the keyframe — its frame and value appear in the Inspector for precise editing |
| **Drag** a keyframe handle         | Moves the keyframe in time and value                                                   |
| **Right-click** a keyframe handle  | Removes the keyframe                                                                   |
| **Arrow Left / Right**             | Nudge selected keyframe ±5 frames (hold Shift for ±1 frame)                            |
| **Arrow Up / Down**                | Nudge selected keyframe value ±1 % of range (hold Shift for ±0.1 %)                    |
| **Delete / Backspace**             | Remove the selected keyframe                                                           |
| **Escape**                         | Deselect the current keyframe                                                          |

A value label (e.g. `f30: 0.75`) appears next to the handle while dragging or when a keyframe is selected. Keyframes are always kept sorted by frame number.

### Keyframe Inspector

When a keyframe is selected, the Inspector panel shows:

| Property | Description                                                     |
| -------- | --------------------------------------------------------------- |
| Frame    | The frame number of the keyframe (editable)                     |
| Value    | The value at this keyframe (editable, clamped to track min/max) |

### Track Appearance

* The **track name** is shown prominently in the track's left sidebar panel, coloured with the track's accent colour.
* The **curve line** and **keyframe handles** use the track's accent colour (`ui_color`), which can be changed in the Inspector.

```
  frame 0:  value = 0
  frame 30: value = 1
  frame 60: value = 0
  → value ramps up to 1 and back to 0 over 60 frames
```

## Interpolation Modes

| Mode       | Behaviour                                                        |
| ---------- | ---------------------------------------------------------------- |
| **Linear** | Smooth ramp between keyframe values (Catmull-Rom spline display) |
| **Step**   | Value jumps immediately at each keyframe (no interpolation)      |

## Output Types

| Format            | Description                                                                    |
| ----------------- | ------------------------------------------------------------------------------ |
| **OSC**           | Sends a float to the configured IP, port, and OSC path                         |
| **UDP**           | Sends a raw UDP datagram with the current value                                |
| **TCP**           | Sends a formatted command string over a TCP connection                         |
| **ArtNet**        | Writes the value into an ArtNet universe/channel                               |
| **Control Panel** | Displays the current value as a read-only readout in the Operator Control view |

## Inspector Properties

| Property                | Description                                       |
| ----------------------- | ------------------------------------------------- |
| Name                    | Human-readable track label                        |
| Color                   | Accent colour shown in the track row              |
| Min Value               | Lower bound of the curve range                    |
| Max Value               | Upper bound of the curve range                    |
| Interpolation           | `Linear` or `Step`                                |
| Output › Format         | `OSC`, `UDP`, `TCP`, `ArtNet`, or `Control Panel` |
| Output › Address        | Destination IP address (OSC / UDP / TCP)          |
| Output › Port           | Destination port number                           |
| Output › OSC Path       | OSC message address (e.g. `/fixture/1/dimmer`)    |
| Output › Command        | TCP command template                              |
| Output › Universe       | ArtNet universe number                            |
| Output › Channel        | ArtNet channel number (1–512)                     |
| Output › Control Target | Control Panel item ID                             |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.exaplay.one/v3/features/data-tracks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.