feat: update devtools with useful testing features

client/src/lib/Apps/DevTools/DevTools.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
   import AppContainer from '../AppContainer.svelte'
+  import { simulateMotion } from './simulateMotion'
+  import {
+    changeGear,
+    increaseSpeedTo,
+    setStationaryTelemetry,
+  } from './telemetrySimulators'
 </script>
 
 <AppContainer
@@ -16,11 +22,37 @@
     Make sure the entry for this app is commented out in appList.ts before
     building for production.
   </p>
-  <button class="button">Button</button>
+  <button class="button" on:click={setStationaryTelemetry}
+    >Set robot connected defaults</button
+  >
+  <button class="button" on:click={() => changeGear('park')}
+    >Shift to Park</button
+  >
+  <button class="button" on:click={() => changeGear('drive')}
+    >Shift to Drive</button
+  >
+  <button class="button" on:click={() => changeGear('neutral')}
+    >Shift to Neutral</button
+  >
+  <button class="button" on:click={() => changeGear('auto')}
+    >Shift to Auto</button
+  >
+  <button class="button" on:click={() => changeGear('reverse')}
+    >Shift to Reverse</button
+  >
+  <button class="button" on:click={() => changeGear('low')}>Shift to Low</button
+  >
+
+  <button class="button" on:click={() => increaseSpeedTo(4, 4)}
+    >Simulate acceleration to 5.5 m/s</button
+  >
+  <button class="button" on:click={simulateMotion}>
+    Simulate random motion
+  </button>
 </AppContainer>
 
 <style lang="postcss">
   .button {
-    @apply px-4 py-2 bg-blue-500 hover:brightness-75 font-medium rounded-lg w-min;
+    @apply px-4 py-2 bg-blue-500 hover:brightness-75 font-medium rounded-lg flex-grow;
   }
 </style>

client/src/lib/Apps/DevTools/simulateMotion.ts

@@ -0,0 +1,15 @@
+import { get } from 'svelte/store'
+import { telemetryStore } from '../../stores/telemetryStore'
+
+// simulate some turning for testing
+export const simulateMotion = () => {
+  let delay = Math.random() * 4500 + 500
+  let randOffset = Math.random() * 360
+  telemetryStore.update({
+    ...get(telemetryStore),
+    'orientation': randOffset,
+    'chassis-x-speed': Math.random() * 4 * (Math.random() < 0.5 ? -1 : 1),
+    'chassis-y-speed': Math.random() * 4 * (Math.random() < 0.5 ? -1 : 1),
+  })
+  setTimeout(simulateMotion, delay)
+}

client/src/lib/Apps/DevTools/telemetrySimulators.ts

@@ -0,0 +1,70 @@
+import { get } from 'svelte/store'
+import { telemetryStore } from '../../stores/telemetryStore'
+import { tick } from 'svelte'
+
+export const setStationaryTelemetry = () => {
+  telemetryStore.update({
+    'orientation': 0,
+    'chassis-x-speed': 0,
+    'chassis-y-speed': 0,
+    'accx': 0,
+    'accy': 0,
+    'accz': 0,
+    'jerk-x': 0,
+    'jerk-y': 0,
+    'voltage': 12,
+    'acc-profile': 'chill',
+    'gear': 'park',
+    'ebrake': false,
+    'reorient': false,
+    'gpws': false,
+  })
+}
+
+export const increaseSpeedTo = async (targetX: number, targetY: number) => {
+  const setSpeed = (x: number, y: number) => {
+    telemetryStore.update({
+      ...get(telemetryStore),
+      'chassis-x-speed': x,
+      'chassis-y-speed': y,
+    })
+  }
+  const getSpeed = () => {
+    const currentValues = get(telemetryStore)
+    return {
+      x: currentValues['chassis-x-speed'],
+      y: currentValues['chassis-y-speed'],
+    }
+  }
+
+  const delay = () => new Promise(resolve => setTimeout(resolve, 1000)) // Assuming a 100ms tick for demonstration
+  const lerp = (start: number, end: number, alpha: number) =>
+    start + (end - start) * alpha
+
+  let { x: currentX, y: currentY } = getSpeed() // Retrieve initial speeds
+
+  const steps = 20 // Number of steps for the interpolation
+  for (let i = 1; i <= steps; i++) {
+    const alpha = i / steps // Calculate interpolation fraction
+
+    // Interpolate speeds
+    const nextX = lerp(currentX, targetX, alpha)
+    const nextY = lerp(currentY, targetY, alpha)
+
+    setSpeed(nextX, nextY) // Update speeds
+
+    await tick() // Wait for state update synchronization
+    await delay()
+
+    // Update current speeds for the next iteration
+    currentX = nextX
+    currentY = nextY
+  }
+}
+
+export const changeGear = (gear: Gear) => {
+  telemetryStore.update({
+    ...get(telemetryStore),
+    gear: gear,
+  })
+}