Add 3d view (#927)

DTTerastar · DTTerastar · commit 335a74694e46 · 2024-12-31T08:40:49.000-05:00
diff --git a/.clinerules b/.clinerules
@@ -1,3 +1,3 @@
 Test via `dotnet watch --project src`
 Don't fix warnings and typescript issues unless it relates to your task
-src/ui is svelete 5 please don't use old syntax
+src/ui is svelete 4
diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -23,6 +23,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@types/d3": "^7.4.3",
 		"@types/node": "^22.9.1",
+		"@types/three": "^0.171.0",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",
 		"autoprefixer": "^10.4.20",
@@ -40,6 +41,7 @@
 		"svelte-check": "^4.1.1",
 		"svelte-eslint-parser": "^0.43.0",
 		"svelte-table": "^0.6.3",
+		"three": "^0.171.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.18.2",
diff --git a/src/ui/src/lib/images/cube.svg b/src/ui/src/lib/images/cube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <path fill="none" stroke="#fff" stroke-width="5" d="M12 48V24l20-12 20 12v24L32 60 12 48m0-24 20 12 20-12M32 36v24"/>
+</svg>
diff --git a/src/ui/src/routes/+layout.svelte b/src/ui/src/routes/+layout.svelte
@@ -12,6 +12,7 @@
 	import devices from '$lib/images/devices.svg';
 	import calibration from '$lib/images/calibration.svg';
 	import settings from '$lib/images/settings.svg';
+	import cube from '$lib/images/cube.svg';
 
 	initializeStores();
 
@@ -25,6 +26,7 @@
 		{ href: '/devices', name: 'devices', icon: devices, alt: 'Devices' },
 		{ href: '/nodes', name: 'nodes', icon: nodes, alt: 'Nodes' },
 		{ href: '/calibration', name: 'calibration', icon: calibration, alt: 'Calibration' },
+		{ href: '/3d', name: '3d', icon: cube, alt: '3D View' },
 	];
 </script>
 
diff --git a/src/ui/src/routes/3d/+page.svelte b/src/ui/src/routes/3d/+page.svelte
