Views

ImuGizmoView

Aviation-style attitude indicator for 6-axis IMU — sky/earth horizon + shake ring + gyro rate bars.

Compatible dtypes: imu_6dof

Purpose

Qualitative instrument-panel presentation of the same IMU stream that ImuChartView consumes. Where the chart view shows values over time, the gizmo shows current state — useful for a heads-up panel, a demo, or a summary card.

Horizon disc — roll (atan2(ay, az)) and pitch (atan2(-ax, √(ay²+az²))) derived from gravity; tilts a blue sky / brown earth split.
Shake ring — pulses orange when |accel| deviates from 1g, proportional to shakeThreshold.
Gyro bars — three signed bars for gX / gY / gZ (amber / violet / cyan), scaled by gyroFullScale.

Props

Prop	Type	Default	Description
`src`	`string`	—	m3u8 playlist URL
`clock`	`TimelineClock \| null`	context	Falls back to `<ClockProvider>`
`className`	`string`	—	Wrapper class
`fps`	`number`	`30`	React render rate
`shakeThreshold`	`number`	`8`	m/s² deviation from 1g at which the ring saturates
`gyroFullScale`	`number`	`3`	rad/s at which a gyro bar fills

Data Schema

Same 6-channel stream as ImuChartView:

type ImuSample = {
  ts: number;
  data: [number, number, number, number, number, number];
  //      ax       ay       az       gx       gy       gz
};

Usage

Loading demo...

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

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

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

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

Tip: compose both views side-by-side inside a single <ClockProvider> to get chart + gizmo in sync on the same IMU stream.

Under the Hood

useMergedTrack(engine).tracks.get('data') → useTrackSample(track, time) to get the current [ax, ay, az, gx, gy, gz] sample. Roll/pitch are computed from accel, shake from |accel| − g, and the three gyro values feed signed bars directly. Pure SVG — no Canvas.