From acf4efde4ce85ddad9915dc9b92495ae4488827d Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Wed, 31 Jul 2024 23:08:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=BA=EF=B8=8F=20Adds=20lidar=20visualiz?=
 =?UTF-8?q?ation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/Lidar.svelte    | 77 ++++++++++++++++++++++++++
 app/src/routes/controller/+page.svelte | 10 +++-
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 app/src/lib/components/Lidar.svelte

diff --git a/app/src/lib/components/Lidar.svelte b/app/src/lib/components/Lidar.svelte
new file mode 100644
index 0000000..fdeed2a
--- /dev/null
+++ b/app/src/lib/components/Lidar.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+    function getIntersection(angle:number, size:number):number {
+            const sinAngle = Math.sin(angle);
+            const cosAngle = Math.cos(angle);
+
+            let x, y;
+            if (Math.abs(cosAngle) > Math.abs(sinAngle)) {
+                x = size * Math.sign(cosAngle);
+                y = x * sinAngle / cosAngle;
+            } else {
+                y = size * Math.sign(sinAngle);
+                x = y * cosAngle / sinAngle;
+            }
+
+            return Math.sqrt(x**2 + y**2);
+        }
+
+    export let points:[number, number][] = new Array(360)
+    .fill(5000) // 5m in mm as that allow us to use uint16 (2 bytes)
+    .map((distance, angle) => [angle, getIntersection(angle, distance)])
+
+    let canvas:HTMLCanvasElement
+    let ctx
+
+
+    onMount(() => {
+        ctx = canvas.getContext("2d")
+        resize()      
+    })
+
+    const draw = () => {
+        const centerX = canvas.width / 2
+        const centerY = canvas.height / 2
+        
+        const scale = 0.05
+
+        const offsetDistance = 200;
+        const offset = offsetDistance * scale;
+
+        if (!ctx) return
+        for (let i = 0; i < points.length; i++){
+            const [angle, distance] = points[i]
+            
+            const startX = centerX + offset * Math.cos(angle);
+            const startY = centerY + offset * Math.sin(angle);
+            const endX = centerX + (offset + distance * scale) * Math.cos(angle);
+            const endY = centerY + (offset + distance * scale) * Math.sin(angle);
+
+            ctx.beginPath();
+            ctx.moveTo(startX, startY);
+            ctx.lineTo(endX, endY);
+            ctx.strokeStyle = "grey"
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc(endX, endY, 3, 0, Math.PI * 2);
+            ctx.fillStyle = "#1bfc06"
+            ctx.fill();
+        }
+    }
+
+    const resize = () => {
+        const parentElement = canvas.parentElement;
+		if (parentElement) {
+			canvas.width = parentElement.clientWidth
+            canvas.height = parentElement.clientHeight
+		}
+        draw()
+    }
+
+</script>
+
+<svelte:window on:resize={resize}></svelte:window>
+
+<canvas bind:this={canvas} class="w-full h-full"></canvas>
\ No newline at end of file
diff --git a/app/src/routes/controller/+page.svelte b/app/src/routes/controller/+page.svelte
index a30d935..dc2e65d 100644
--- a/app/src/routes/controller/+page.svelte
+++ b/app/src/routes/controller/+page.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
     import Visualization from "$lib/components/Visualization.svelte";
+    import Lidar from "$lib/components/Lidar.svelte";
 </script>
 
 <div class="grow flex">
-    <div class="absolute h-screen w-full top-0">
-        <Visualization debug />
+    <div class="absolute h-screen w-full top-0 flex">
+        <div class="flex-1 overflow-hidden">
+            <Visualization debug />
+        </div>
+        <div class="flex-1">
+            <Lidar />
+        </div>
     </div>
 </div> 
\ No newline at end of file