EyeTrackingContainer (Next)
EyeTrackingContainer shows where a trainee looked. It has a horizontal chart of gaze share around a 360-degree sweep, a vertical chart of gaze share across high, mid and low zones, and an optional strip of dwell times per named target. The layout names the channels and the labels. The channels carry the numbers.
Use it for viewport or lookout analysis in headset or vehicle training. For the older percentage grid keyed by nearside, offside, near and far, use EyeTracking instead.
Summary
| Value | |
|---|---|
| Layout id | EyeTrackingContainer |
| Widget config | eyeTrackingItem |
| Channel shape | value (three channels) |
| Playback | No |
| Realm filter | No |
| Dual column | No |
Migration status
migrated. There is no maximal reference JSON for this component yet under tools/arbex/reference/next/. The examples on this page are derived from the dashboard source. See Dataservice migration status.
Layout
eyeTrackingItem has three sections. Each names the channel it reads and the items it expects to find in that channel, with a display label for each.
| Field | Required | Description |
|---|---|---|
name, titleContent | Yes | Widget instance name and panel title |
channels | Yes | The three channel ids named below, in any order |
eyeTrackingItem.horizontal.channel | Yes | Id of the channel with horizontal segments |
eyeTrackingItem.horizontal.items[] | Yes | { id, label } per segment, in display order |
eyeTrackingItem.vertical.channel | Yes | Id of the channel with vertical zones |
eyeTrackingItem.vertical.items[] | Yes | { id, label } per zone, in display order |
eyeTrackingItem.targets.channel | No | Id of the channel with per-target dwell times |
eyeTrackingItem.targets.items[] | No | { id, label } per target, in display order |
The JSON schema for eyeTrackingItem marks a legend key as required. The dashboard does not read legend. It reads horizontal, vertical and targets as described here.
Schema: #/$defs/EyeTrackingItemSchema in heat-layout-schema.json.
Layout column example
{
"component": "EyeTrackingContainer",
"colspan": 12,
"configuration": {
"name": "lookout",
"titleContent": "Eye tracking",
"shouldRenderTitle": true,
"channels": ["gaze-horizontal", "gaze-vertical", "gaze-targets"],
"eyeTrackingItem": {
"horizontal": {
"channel": "gaze-horizontal",
"items": [
{ "id": "front", "label": "Front" },
{ "id": "right", "label": "Right" },
{ "id": "rear", "label": "Rear" },
{ "id": "left", "label": "Left" }
]
},
"vertical": {
"channel": "gaze-vertical",
"items": [
{ "id": "high", "label": "High" },
{ "id": "mid", "label": "Mid" },
{ "id": "low", "label": "Low" }
]
},
"targets": {
"channel": "gaze-targets",
"items": [
{ "id": "mirror-left", "label": "Left mirror" },
{ "id": "mirror-right", "label": "Right mirror" }
]
}
}
}
}Data contract
All three channels use shape: "value". In each, data.value is an array of objects, one per items[].id named in the layout. The widget looks each item up by id, so every id in the layout must appear in the channel.
| Channel | data.value[] entry |
|---|---|
| horizontal | { "id": string, "angleStart": number, "angleEnd": number, "percentage": number } |
| vertical | { "id": string, "zone": "high" or "mid" or "low", "percentage": number } |
| targets | { "id": string, "durationMs": number } |
Channel example
[
{
"id": "gaze-horizontal",
"name": "gaze-horizontal",
"groupId": "eyetracking",
"shape": "value",
"data": {
"value": [
{ "id": "front", "angleStart": 315, "angleEnd": 45, "percentage": 58 },
{ "id": "right", "angleStart": 45, "angleEnd": 135, "percentage": 17 },
{ "id": "rear", "angleStart": 135, "angleEnd": 225, "percentage": 6 },
{ "id": "left", "angleStart": 225, "angleEnd": 315, "percentage": 19 }
]
}
},
{
"id": "gaze-vertical",
"name": "gaze-vertical",
"groupId": "eyetracking",
"shape": "value",
"data": {
"value": [
{ "id": "high", "zone": "high", "percentage": 12 },
{ "id": "mid", "zone": "mid", "percentage": 71 },
{ "id": "low", "zone": "low", "percentage": 17 }
]
}
},
{
"id": "gaze-targets",
"name": "gaze-targets",
"groupId": "eyetracking",
"shape": "value",
"data": {
"value": [
{ "id": "mirror-left", "durationMs": 14200 },
{ "id": "mirror-right", "durationMs": 9800 }
]
}
}
]Behaviour notes
- The targets strip is drawn only when the targets channel is configured and returns at least one entry.
- When the horizontal or vertical channel is missing, the widget shows its empty state rather than a partial panel.
- Percentages are shown as published. Round them upstream if the total must read as exactly 100.
Related
- Next components index
- Layout reference
- EyeTracking, the percentage grid variant
- RAG:
tools/arbex/rag/reference/components/EyeTracking.md