feature: add heads-up display with current timestep (#4)

* add timestep display * move helper func into PixiApp * HUD with current timestep
JustinShetty · Jan 6, 2025 · f8f84aa · f8f84aa
1 parent 24b4816
commit f8f84aa
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,11 @@ This is a work-in-progress and has not yet reached feature parity with [Kei18/ma
 - [x] Map plotting
 - [x] Basic solution animation (with and without rotation)
 - [x] Playback control (play, pause, reset, speed adjustment, etc.)
-- [ ] Agent ID display, timestep display
+- [x] Timestep display
+- [ ] Playback control tooltips
+- [ ] Agent ID display
+- [ ] Agent coloring
+- [ ] Per-agent path drawing
 
 ## Features
 

diff --git a/src/AnimationControl.tsx b/src/AnimationControl.tsx
@@ -16,6 +16,7 @@ interface AnimationControlProps {
     onSkipBackward: () => void;
     onSkipForward: () => void;
     onRestart: () => void;
+    speed: number;
     onSpeedChange: (speed: number) => void;
     loopAnimation: boolean,
     onLoopAnimationChange: (loopAnimation: boolean) => void;
@@ -27,6 +28,7 @@ function AnimationControl({
     onSkipBackward, 
     onSkipForward,
     onRestart,
+    speed,
     onSpeedChange,
     loopAnimation,
     onLoopAnimationChange,
@@ -81,7 +83,7 @@ function AnimationControl({
                 justifyContent="center"
             >
                 <Slider
-                    defaultValue={2.0}
+                    value={speed}
                     step={0.2}
                     marks
                     min={0.2}

diff --git a/src/App.tsx b/src/App.tsx
@@ -57,6 +57,7 @@ function App() {
             onSkipBackward={handleSkipBackward}
             onSkipForward={handleSkipForward}
             onRestart={handleRestart}
+            speed={speed}
             onSpeedChange={(speed: number) => setSpeed(speed)}
             loopAnimation={loopAnimation}
             onLoopAnimationChange={(loopAnimation: boolean) => setLoopAnimation(loopAnimation)}

diff --git a/src/ConfigBar.tsx b/src/ConfigBar.tsx
@@ -14,6 +14,7 @@ interface ConfigBarProps {
   onSkipBackward: () => void;
   onSkipForward: () => void;
   onRestart: () => void;
+  speed: number;
   onSpeedChange: (speed: number) => void;
   loopAnimation: boolean,
   onLoopAnimationChange: (loopAnimation: boolean) => void;
@@ -27,6 +28,7 @@ function ConfigBar({
   onSkipBackward,
   onSkipForward,
   onRestart,
+  speed,
   onSpeedChange,
   loopAnimation,
   onLoopAnimationChange,
@@ -44,6 +46,7 @@ function ConfigBar({
         onSkipBackward={onSkipBackward}
         onSkipForward={onSkipForward}
         onRestart={onRestart}
+        speed={speed}
         onSpeedChange={onSpeedChange}
         loopAnimation={loopAnimation}
         onLoopAnimationChange={onLoopAnimationChange}

diff --git a/src/PixiApp.tsx b/src/PixiApp.tsx
@@ -17,11 +17,6 @@ interface PixiAppProps {
     loopAnimation: boolean;
 }
 
-// Scale a position from grid units to pixels
-const scalePosition = (position: number) : number => {
-    return position * GRID_UNIT_TO_PX + GRID_UNIT_TO_PX / 2;
-}
-
 function drawGrid(viewport: Viewport, graph: Graph) : PIXI.Container {
     let grid = viewport.addChild(new PIXI.Container());
 
@@ -58,6 +53,13 @@ const PixiApp = forwardRef(({
     const timestepRef = useRef(0.0); 
     const speedRef = useRef(1.0);
     const loopAnimationRef = useRef(true);
+    const hudRef = useRef<PIXI.Container | null>(null);
+    const timestepTextRef = useRef<PIXI.Text | null>(null);
+
+    // Scale a position from grid units to pixels
+    const scalePosition = (position: number) : number => {
+        return position * GRID_UNIT_TO_PX + GRID_UNIT_TO_PX / 2;
+    }
 
     function stepSize(): number {
         // ticker is called at ~60 Hz
@@ -71,10 +73,11 @@ const PixiApp = forwardRef(({
 
     useImperativeHandle(ref, () => ({
         skipBackward: () => {
-            timestepRef.current = Math.max(0, timestepRef.current - stepSize());
+            timestepRef.current = Math.max(0, speedRef.current);
         },
         skipForward: () => {
-            timestepRef.current += stepSize();
+            console.log(speedRef.current)
+            timestepRef.current += speedRef.current;
         },
         restart: () => {
             resetTimestep();
@@ -168,6 +171,9 @@ const PixiApp = forwardRef(({
                 }
                 return;
             }
+            if (timestepTextRef.current) {
+                timestepTextRef.current.text = `Timestep: ${timestepRef.current.toFixed(1)}`;
+            }
             moveAndRotateSprites(sprites, currentTimestep, interpolationProgress)
         }
         app.ticker.add(animate)
@@ -203,6 +209,16 @@ const PixiApp = forwardRef(({
             } else {
                 if (app.stage.children.length === 0) {
                     app.stage.addChild(viewport);
+                    hudRef.current = app.stage.addChild(new PIXI.Container());
+                    const textStyle = new PIXI.TextStyle({
+                        fontSize: 24,
+                        fill: 0x000000,
+                        stroke: {color: 0xffffff, width: 4},
+                    });
+                    timestepTextRef.current = hudRef.current.addChild(
+                        new PIXI.Text({style: textStyle})
+                    );
+                    timestepTextRef.current.position.set(10, 10);
                 }
                 app.start();
             }