From 01e174f337d81d0deec5e2610543c8dba611ad2a Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 17 May 2025 12:37:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=83=20Adds=20IMU=20orientations=20indi?=
 =?UTF-8?q?cator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrientationIndicator.svelte    |  78 +++
 app/src/routes/peripherals/imu/imu.svelte     | 523 ++++++++----------
 2 files changed, 311 insertions(+), 290 deletions(-)
 create mode 100644 app/src/lib/components/OrientationIndicator.svelte

diff --git a/app/src/lib/components/OrientationIndicator.svelte b/app/src/lib/components/OrientationIndicator.svelte
new file mode 100644
index 0000000..2f024db
--- /dev/null
+++ b/app/src/lib/components/OrientationIndicator.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import * as THREE from 'three'
+  import { imu } from '$lib/stores/imu'
+  import SceneBuilder from '$lib/sceneBuilder'
+
+  let canvas: HTMLCanvasElement = $state()
+  let sceneBuilder: SceneBuilder
+  let cube: THREE.Mesh
+  let targetRotation = new THREE.Euler()
+  let lastUpdateTime = 0
+  const LERP_SPEED = 5 // rotations per second
+
+  const initThreeJS = () => {
+    sceneBuilder = new SceneBuilder()
+      .addRenderer({ canvas: canvas, antialias: true, alpha: true })
+      .addPerspectiveCamera({ x: 2, y: 0, z: 2 })
+      .addOrbitControls(1, 10, false)
+      .addAmbientLight({ color: 0x404040, intensity: 0.5 })
+      .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
+      .fillParent()
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1)
+    const material = new THREE.MeshPhongMaterial({
+      color: 0x00ff00,
+      transparent: true,
+      opacity: 0.8
+    })
+    cube = new THREE.Mesh(geometry, material)
+    sceneBuilder.scene.add(cube)
+
+    sceneBuilder.addRenderCb(() => {
+      if (!cube) return
+      const currentTime = performance.now()
+      const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
+      lastUpdateTime = currentTime
+
+      const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
+      cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
+      cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
+      cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
+    })
+
+    sceneBuilder.startRenderLoop()
+  }
+
+  const updateOrientation = () => {
+    if (!cube) return
+
+    const y = -$imu.x[$imu.x.length - 1] || 0
+    const x = $imu.y[$imu.y.length - 1] || 0
+    const z = -$imu.z[$imu.z.length - 1] || 0
+
+    targetRotation.set(
+      THREE.MathUtils.degToRad(x),
+      THREE.MathUtils.degToRad(y),
+      THREE.MathUtils.degToRad(z)
+    )
+  }
+
+  onMount(() => {
+    initThreeJS()
+  })
+
+  onDestroy(() => {
+    sceneBuilder?.renderer?.dispose()
+  })
+
+  $effect(() => {
+    if ($imu) {
+      updateOrientation()
+    }
+  })
+</script>
+
+<div class="h-60 w-60 border-2 border-base-300 rounded-md">
+  <canvas class="w-full h-full" bind:this={canvas}></canvas>
+</div>
diff --git a/app/src/routes/peripherals/imu/imu.svelte b/app/src/routes/peripherals/imu/imu.svelte
index a0238a7..63d9318 100644
--- a/app/src/routes/peripherals/imu/imu.svelte
+++ b/app/src/routes/peripherals/imu/imu.svelte
@@ -1,310 +1,253 @@
 <script lang="ts">
-	import SettingsCard from "$lib/components/SettingsCard.svelte";
-    import { imu } from '$lib/stores/imu';
-    import { Chart, registerables } from 'chart.js';
-	import { cubicOut } from "svelte/easing";
-	import { slide } from "svelte/transition";
-	import { onDestroy, onMount } from "svelte";
-	import { daisyColor } from "$lib/utilities";
-	import { socket } from "$lib/stores";
-	import type { IMU } from "$lib/types/models";
-	import { useFeatureFlags } from "$lib/stores/featureFlags";
-	import { Rotate3d } from "$lib/components/icons";
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { imu } from '$lib/stores/imu'
+  import { Chart, registerables } from 'chart.js'
+  import { cubicOut } from 'svelte/easing'
+  import { slide } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
+  import { socket } from '$lib/stores'
+  import type { IMU } from '$lib/types/models'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import { Rotate3d } from '$lib/components/icons'
 
-    const features = useFeatureFlags();
+  Chart.register(...registerables)
 
-    Chart.register(...registerables);
+  const features = useFeatureFlags()
+  let intervalId: number
 
-    let angleChartElement: HTMLCanvasElement = $state();
-	let angleChart: Chart;
+  let angleChartElement: HTMLCanvasElement = $state()
+  let tempChartElement: HTMLCanvasElement = $state()
+  let altitudeChartElement: HTMLCanvasElement = $state()
 
-    let tempChartElement: HTMLCanvasElement = $state();
-	let tempChart: Chart;
+  let angleChart: Chart
+  let tempChart: Chart
+  let altitudeChart: Chart
 
-    let altitudeChartElement: HTMLCanvasElement = $state();
-	let altitudeChart: Chart;
-
-    const handleImu = (data: IMU) => {
-        console.log(data);
-        
-        imu.addData(data);   
+  const getChartColors = () => {
+    const style = getComputedStyle(document.body)
+    return {
+      primary: style.getPropertyValue('--color-primary'),
+      secondary: style.getPropertyValue('--color-secondary'),
+      accent: style.getPropertyValue('--color-accent'),
+      background: style.getPropertyValue('--color-background')
     }
+  }
 
-    onMount(() => {
-        socket.on('imu', handleImu);
-        angleChart = new Chart(angleChartElement, {
-			type: 'line',
-			data: {
-				datasets: [
-					{
-						label: 'x',
-						borderColor: daisyColor('--p'),
-						backgroundColor: daisyColor('--p', 50),
-						borderWidth: 2,
-						data: $imu.x,
-						yAxisID: 'y'
-					},
-					{
-						label: 'y',
-						borderColor: daisyColor('--s'),
-						backgroundColor: daisyColor('--s', 50),
-						borderWidth: 2,
-						data: $imu.y,
-						yAxisID: 'y'
-					},
-                    {
-						label: 'z',
-						borderColor: daisyColor('--a'),
-						backgroundColor: daisyColor('--a', 50),
-						borderWidth: 2,
-						data: $imu.z,
-						yAxisID: 'y'
-					}
-				]
-			},
-			options: {
-				maintainAspectRatio: false,
-				responsive: true,
-				plugins: {
-					legend: {
-						display: true
-					},
-					tooltip: {
-						mode: 'index',
-						intersect: false
-					}
-				},
-				elements: {
-					point: {
-						radius: 1
-					}
-				},
-				scales: {
-					x: {
-						grid: {
-							color: daisyColor('--bc', 10)
-						},
-						ticks: {
-							color: daisyColor('--bc')
-						},
-						display: false
-					},
-					y: {
-						type: 'linear',
-						title: {
-							display: true,
-							text: 'Angle [°]',
-							color: daisyColor('--bc'),
-							font: {
-								size: 16,
-								weight: 'bold'
-							}
-						},
-						position: 'left',
-						min:  0,
-						max: 10,
-						grid: { color: daisyColor('--bc', 10) },
-						ticks: { color: daisyColor('--bc') },
-						border: { color: daisyColor('--bc', 10) }
-					}
-				}
-			}
-		});
-        tempChart = new Chart(tempChartElement, {
-			type: 'line',
-			data: {
-				datasets: [
-					{
-						label: 'Barometer temperature',
-						borderColor: daisyColor('--s'),
-						backgroundColor: daisyColor('--s', 50),
-						borderWidth: 2,
-						data: $imu.bmp_temp,
-						yAxisID: 'y'
-					}
-				]
-			},
-			options: {
-				maintainAspectRatio: false,
-				responsive: true,
-				plugins: {
-					legend: {
-						display: true
-					},
-					tooltip: {
-						mode: 'index',
-						intersect: false
-					}
-				},
-				elements: {
-					point: {
-						radius: 1
-					}
-				},
-				scales: {
-					x: {
-						grid: {
-							color: daisyColor('--bc', 10)
-						},
-						ticks: {
-							color: daisyColor('--bc')
-						},
-						display: false
-					},
-					y: {
-						type: 'linear',
-						title: {
-							display: true,
-							text: 'Temperature [C°]',
-							color: daisyColor('--bc'),
-							font: {
-								size: 16,
-								weight: 'bold'
-							}
-						},
-						position: 'left',
-						min:  0,
-						max: 10,
-						grid: { color: daisyColor('--bc', 10) },
-						ticks: { color: daisyColor('--bc') },
-						border: { color: daisyColor('--bc', 10) }
-					}
-				}
-			}
-		});
-        altitudeChart = new Chart(altitudeChartElement, {
-			type: 'line',
-			data: {
-				datasets: [
-					{
-						label: 'Altitude',
-						borderColor: daisyColor('--p'),
-						backgroundColor: daisyColor('--p', 50),
-						borderWidth: 2,
-						data: $imu.altitude,
-						yAxisID: 'y'
-					}
-				]
-			},
-			options: {
-				maintainAspectRatio: false,
-				responsive: true,
-				plugins: {
-					legend: {
-						display: true
-					},
-					tooltip: {
-						mode: 'index',
-						intersect: false
-					}
-				},
-				elements: {
-					point: {
-						radius: 1
-					}
-				},
-				scales: {
-					x: {
-						grid: {
-							color: daisyColor('--bc', 10)
-						},
-						ticks: {
-							color: daisyColor('--bc')
-						},
-						display: false
-					},
-					y: {
-						type: 'linear',
-						title: {
-							display: true,
-							text: 'Altitude [M]',
-							color: daisyColor('--bc'),
-							font: {
-								size: 16,
-								weight: 'bold'
-							}
-						},
-						position: 'left',
-						min:  0,
-						max: 10,
-						grid: { color: daisyColor('--bc', 10) },
-						ticks: { color: daisyColor('--bc') },
-						border: { color: daisyColor('--bc', 10) }
-					}
-				}
-			}
-		});
-        setInterval(() => {
-			updateData(), 200;
-		});
+  const createBaseChartConfig = (bgColor: string) => ({
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      legend: { display: true },
+      tooltip: { mode: 'index', intersect: false }
+    },
+    elements: { point: { radius: 1 } },
+    scales: {
+      x: {
+        grid: { color: bgColor },
+        ticks: { color: bgColor },
+        display: false
+      },
+      y: {
+        type: 'linear',
+        position: 'left',
+        min: 0,
+        max: 10,
+        grid: { color: bgColor },
+        ticks: { color: bgColor },
+        border: { color: bgColor }
+      }
+    }
+  })
+
+  const initializeCharts = () => {
+    const colors = getChartColors()
+    const baseConfig = createBaseChartConfig(colors.background)
+
+    angleChart = new Chart(angleChartElement, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: 'x',
+            borderColor: colors.primary,
+            backgroundColor: colors.primary,
+            borderWidth: 2,
+            data: $imu.x,
+            yAxisID: 'y'
+          },
+          {
+            label: 'y',
+            borderColor: colors.secondary,
+            backgroundColor: colors.secondary,
+            borderWidth: 2,
+            data: $imu.y,
+            yAxisID: 'y'
+          },
+          {
+            label: 'z',
+            borderColor: colors.accent,
+            backgroundColor: colors.accent,
+            borderWidth: 2,
+            data: $imu.z,
+            yAxisID: 'y'
+          }
+        ]
+      },
+      options: {
+        ...baseConfig,
+        scales: {
+          ...baseConfig.scales,
+          y: {
+            ...baseConfig.scales.y,
+            title: {
+              display: true,
+              text: 'Angle [°]',
+              color: colors.background,
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
     })
 
-    onDestroy(() => {
-        socket.off('imu', handleImu);
+    tempChart = new Chart(tempChartElement, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: 'Barometer temperature',
+            borderColor: colors.secondary,
+            backgroundColor: colors.secondary,
+            borderWidth: 2,
+            data: $imu.bmp_temp,
+            yAxisID: 'y'
+          }
+        ]
+      },
+      options: {
+        ...baseConfig,
+        scales: {
+          ...baseConfig.scales,
+          y: {
+            ...baseConfig.scales.y,
+            title: {
+              display: true,
+              text: 'Temperature [C°]',
+              color: colors.background,
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
     })
 
-    const updateData = () => {
-        if ($features.imu) {
-            angleChart.data.labels = $imu.x;
-            angleChart.data.datasets[0].data = $imu.x;
-            angleChart.data.datasets[1].data = $imu.y;
-            angleChart.data.datasets[2].data = $imu.z;
-            angleChart.options.scales!.y!.min = Math.min(Math.min(...$imu.x), Math.min(...$imu.y), Math.min(...$imu.z)) - 1;
-            angleChart.options.scales!.y!.max = Math.max(Math.max(...$imu.x), Math.max(...$imu.y), Math.max(...$imu.z)) + 1;
-            angleChart.update('none');
+    altitudeChart = new Chart(altitudeChartElement, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: 'Altitude',
+            borderColor: colors.primary,
+            backgroundColor: colors.primary,
+            borderWidth: 2,
+            data: $imu.altitude,
+            yAxisID: 'y'
+          }
+        ]
+      },
+      options: {
+        ...baseConfig,
+        scales: {
+          ...baseConfig.scales,
+          y: {
+            ...baseConfig.scales.y,
+            title: {
+              display: true,
+              text: 'Altitude [M]',
+              color: colors.background,
+              font: { size: 16, weight: 'bold' }
+            }
+          }
         }
+      }
+    })
+  }
 
-        if ($features.bmp) {
-            tempChart.data.labels = $imu.bmp_temp;
-            tempChart.data.datasets[0].data = $imu.bmp_temp;
-            tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
-            tempChart.options.scales!.y!.max = Math.max(...$imu.bmp_temp) + 1;
-            tempChart.update('none');
-    
-            altitudeChart.data.labels = $imu.altitude;
-            altitudeChart.data.datasets[0].data = $imu.altitude;
-            altitudeChart.options.scales!.y!.min = Math.min(Math.min(...$imu.altitude)) - 1;
-            altitudeChart.options.scales!.y!.max = Math.max(Math.max(...$imu.altitude)) + 1;
-            altitudeChart.update('none');
-        }
+  const updateChartData = (chart: Chart, data: number[], label: string) => {
+    chart.data.labels = data
+    chart.data.datasets[0].data = data
+    chart.options.scales!.y!.min = Math.min(...data) - 1
+    chart.options.scales!.y!.max = Math.max(...data) + 1
+    chart.update('none')
+  }
+
+  const updateData = () => {
+    if ($features.imu) {
+      angleChart.data.labels = $imu.x
+      angleChart.data.datasets[0].data = $imu.x
+      angleChart.data.datasets[1].data = $imu.y
+      angleChart.data.datasets[2].data = $imu.z
+
+      const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
+      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
+      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
+      angleChart.update('none')
     }
 
+    if ($features.bmp) {
+      updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
+      updateChartData(altitudeChart, $imu.altitude, 'Altitude')
+    }
+  }
+
+  onMount(() => {
+    socket.on('imu', (data: IMU) => {
+      console.log(data)
+      imu.addData(data)
+    })
+
+    initializeCharts()
+    intervalId = setInterval(updateData, 200)
+  })
+
+  onDestroy(() => {
+    socket.off('imu')
+    clearInterval(intervalId)
+  })
 </script>
 
 <SettingsCard collapsible={false}>
-    {#snippet icon()}
-		<Rotate3d  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-	{/snippet}
-    {#snippet title()}
-		<span >IMU</span>
-	{/snippet}
-    {#if $features.imu} 
-        <div class="w-full overflow-x-auto">
-            <div
-            class="flex w-full flex-col space-y-1 h-60"
-            transition:slide|local={{ duration: 300, easing: cubicOut }}
-            >
-                <canvas bind:this={angleChartElement}></canvas>
-            </div>
-        </div>
-    {/if}
-    {#if $features.bmp} 
-        <div class="w-full overflow-x-auto">
-            <div
-                class="flex w-full flex-col space-y-1 h-60"
-                transition:slide|local={{ duration: 300, easing: cubicOut }}
-            >
-                <canvas bind:this={tempChartElement}></canvas>
-            </div>
-        </div>
-        <div class="w-full overflow-x-auto">
-            <div
-            class="flex w-full flex-col space-y-1 h-60"
-            transition:slide|local={{ duration: 300, easing: cubicOut }}
-            >
-            <canvas bind:this={altitudeChartElement}></canvas>
-        </div>
+  {#snippet icon()}
+    <Rotate3d class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+  {/snippet}
+  {#snippet title()}
+    <span>IMU</span>
+  {/snippet}
+
+  {#if $features.imu}
+    <div class="w-full overflow-x-auto">
+      <div
+        class="flex w-full flex-col space-y-1 h-60"
+        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        <canvas bind:this={angleChartElement}></canvas>
+      </div>
     </div>
-    {/if}
-    <!-- <IMUSetting /> -->
-</SettingsCard>
\ No newline at end of file
+  {/if}
+
+  {#if $features.bmp}
+    <div class="w-full overflow-x-auto">
+      <div
+        class="flex w-full flex-col space-y-1 h-60"
+        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        <canvas bind:this={tempChartElement}></canvas>
+      </div>
+    </div>
+    <div class="w-full overflow-x-auto">
+      <div
+        class="flex w-full flex-col space-y-1 h-60"
+        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        <canvas bind:this={altitudeChartElement}></canvas>
+      </div>
+    </div>
+  {/if}
+</SettingsCard>