Views

ImuChartView

6-axis IMU rolling time-series chart — two stacked Canvas plots for accelerometer and gyroscope channels.

Compatible dtypes: imu_6dof (primary) · vector (generic 6-channel)

Purpose

Quantitative IMU monitor in the style of rqt_plot / PlotJuggler / Foxglove. Canvas-based, draws on every clock.on('tick') so you can scrub frame-accurately with no React re-renders per frame. Use this when you want to read exact values and see the shape of the signal over time.

For a qualitative at-a-glance instrument (tilt / shake / rotation), use the companion ImuGizmoView — same data, different presentation.

Props

Prop	Type	Default	Description
`src`	`string`	—	m3u8 playlist URL
`clock`	`TimelineClock \| null`	context	Falls back to `<ClockProvider>`
`className`	`string`	—	Wrapper class
`window`	`number`	`5`	Rolling window width in seconds
`accelRange`	`number`	`12`	Y-axis half-scale for accel (m/s²)
`gyroRange`	`number`	`1.5`	Y-axis half-scale for gyro (rad/s)

Data Schema

Each line of every JSONL chunk must match:

import type { ImuSample } from '@vuer-ai/vuer-m3u';
 
type ImuSample = {
  ts: number;                                        // seconds on playlist timeline
  data: [number, number, number, number, number, number];
  //      ax       ay       az       gx       gy       gz
};

Field	Unit	Notes
`ts`	seconds	Absolute playlist time
`data[0..2]`	m/s² (convention)	Linear acceleration
`data[3..5]`	rad/s (convention)	Angular velocity

Recommended source rate: 50–200 Hz.

Example

One chunk's content (first four rows at 100 Hz):

{"ts": 0.00, "data": [0.12, -0.04, 9.81, 0.001, -0.002, 0.000]}
{"ts": 0.01, "data": [0.14, -0.05, 9.80, 0.002, -0.001, 0.001]}
{"ts": 0.02, "data": [0.15, -0.06, 9.81, 0.001,  0.000, 0.001]}
{"ts": 0.03, "data": [0.17, -0.05, 9.82, 0.000,  0.000, 0.002]}

Usage

Loading demo...

import {
  useTimeline,
  ClockProvider,
  TimelineController,
  ImuChartView,
} from '@vuer-ai/vuer-m3u'

const IMU_URL = '/vuer-m3u-demo/imu/playlist.m3u8'

export function ImuChartViewDemo() {
  const { clock, state, play, pause, seek, setPlaybackRate, setLoop } = useTimeline()

  return (
    <ClockProvider clock={clock}>
      <ImuChartView src={IMU_URL} />
      <TimelineController
        state={state}
        onPlay={play}
        onPause={pause}
        onSeek={seek}
        onSpeedChange={setPlaybackRate}
        onLoopChange={setLoop}
      />
    </ClockProvider>
  )
}

Under the Hood

useMergedTrack(engine).tracks.get('data') provides the merged {times, values, stride=6} arrays. The effect subscribes to clock.on('tick') and redraws two subplots against a rolling [clock.time - window, clock.time] window — no per-frame React reconciliation.