Clean up app

2024-03-30 02:50:12 +01:00
parent dc7689793d
commit 14c38a1700
7 changed files with 11 additions and 252 deletions
@@ -1,175 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { BufferGeometry, CanvasTexture, CircleGeometry, CubicBezierCurve3, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, Vector3, type NormalBufferAttributes } from 'three';
-	import socketService from '$lib/services/socket-service';
-	import uzip from 'uzip';
-	import { model } from '$lib/stores';
-	import { footColor, location, toeWorldPositions } from '$lib/utilities';
-    import { isEmbeddedApp } from '$lib/utilities/svelte-utilities';
-	import { fileService } from '$lib/services';
-	import { servoAngles, mpu, jointNames } from '$lib/stores';
-	import SceneBuilder from '$lib/sceneBuilder';
-	import { lerp, degToRad } from 'three/src/math/MathUtils';
-    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-	let sceneManager = new SceneBuilder();
-	let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement;
-	let context: CanvasRenderingContext2D, texture: CanvasTexture;
-
-	let modelAngles: number[] | Int16Array = new Array(12).fill(0);
-	let modelTargetAngles: number[] | Int16Array = new Array(12).fill(0);
-
-    let feet_trace = new Array(4).fill([]);
-    let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
-
-	const videoStream = `//${location}/api/stream`;
-
-	let showStream = false;
-
-    let settings = {
-        'Trace feet':true,
-        'Trace points': 30
-    }
-
-	onMount(async () => {
-        await cacheModelFiles()
-        await createScene();
-        if (!isEmbeddedApp) createPanel();
-	});
-
-	onDestroy(() => {
-		canvas.remove();
-	});
-
-    const createPanel = () => {
-        const panel = new GUI({width: 310});
-        panel.close();
-        panel.domElement.id = 'three-gui-panel';
- 
-        const visibility = panel.addFolder('Visualization');
-        visibility.add(settings, 'Trace feet')
-        visibility.add(settings, 'Trace points', 1, 1000, 1)
-    }
-
-	const cacheModelFiles = async () => {
-		let data = await fetch('/stl.zip').then((data) => data.arrayBuffer());
-
-		var files = uzip.parse(data);
-
-		for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
-			const url = new URL(path, window.location.href);
-			fileService.saveFile(url.toString(), data);
-		}
-	};
-
-	const updateAngles = (name: string, angle: number) => {
-		modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI);
-		socketService.send(
-			JSON.stringify({
-				type: 'kinematic/angle',
-				angle: angle * (180 / Math.PI),
-				id: $jointNames.indexOf(name)
-			})
-		);
-	};
-
-	const createScene = async () => {
-		sceneManager
-			.addRenderer({ antialias: true, canvas: canvas, alpha: true })
-			.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
-			.addOrbitControls(8, 30)
-			.addSky()
-			.addGroundPlane()
-			.addGridHelper({ size: 250, divisions: 125 })
-			.addAmbientLight({ color: 0xffffff, intensity: 0.7 })
-			.addDirectionalLight({ x: 10, y: 100, z: 10, color: 0xffffff, intensity: 1 })
-			.addArrowHelper({ origin: { x: 0, y: 0, z: 0 }, direction: { x: 0, y: -2, z: 0 } })
-			.addFogExp2(0xcccccc, 0.015)
-			.addModel($model)
-			.addDragControl(updateAngles)
-			.handleResize()
-			.addRenderCb(render)
-			.startRenderLoop();
-
-		addVideoStream();
-
-		for (let i = 0; i < 4; i++) {
-			const geometry = new BufferGeometry();
-			const material = new LineBasicMaterial({ color: footColor() });
-			const line = new Line(geometry, material);
-			trace_lines.push(geometry);
-			sceneManager.scene.add(line);
-		}
-	};
-
-	const addVideoStream = () => {
-		context = streamCanvas.getContext('2d')!;
-		texture = new CanvasTexture(stream);
-		const liveStream = new Mesh(
-			new CircleGeometry(35, 32),
-			new MeshBasicMaterial({ map: texture })
-		);
-		liveStream.position.z = -50;
-		liveStream.visible = showStream;
-		sceneManager.scene.add(liveStream);
-	};
-
-	const handleVideoStream = () => {
-		if (!showStream) return;
-		context.drawImage(stream, 0, 0);
-		texture.needsUpdate = true;
-	};
-
-    const renderTraceLines = (foot_positions: Vector3[]) => {
-        if (!settings['Trace feet']) {
-            if (!feet_trace.length) return 
-            trace_lines.forEach((line, i) => line.setFromPoints(feet_trace[i].slice(-1)))
-            feet_trace = new Array(4).fill([])
-            return
-        }
-        
-        trace_lines.forEach((line, i) => {
-            feet_trace[i].push(foot_positions[i])
-            feet_trace[i] = feet_trace[i].slice(-settings['Trace points'])
-            line.setFromPoints(feet_trace[i]);
-        })
-    }
-
-	const render = () => {
-		const robot = sceneManager.model;
-		if (!robot) return;
-
-        const toes = toeWorldPositions(robot)
-
-        renderTraceLines(toes)
-
-		robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y));
-		robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1);
-		modelTargetAngles = $servoAngles;
-
-		handleVideoStream();
-
-		for (let i = 0; i < $jointNames.length; i++) {
-			modelAngles[i] = lerp(
-				(robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
-				modelTargetAngles[i],
-				0.1
-			);
-			robot.joints[$jointNames[i]].setJointValue(degToRad(modelAngles[i]));
-		}
-	};
-</script>
-
-<svelte:window on:resize={sceneManager.handleResize} />
-
-{#if showStream}
-	<img
-		bind:this={stream}
-		src={videoStream}
-		class="hidden"
-		alt="Live stream is down"
-		crossorigin="anonymous"
-	/>
-{/if}
-<canvas bind:this={streamCanvas} class="hidden"></canvas>
-<canvas bind:this={canvas} class="absolute"></canvas>
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-	import { location } from '$lib/utilities';
-
-	let videoStream = `//${location}/api/stream`;
-
-	onDestroy(() => {
-		videoStream = '#';
-	});
-</script>
-
-<div class="w-full h-full">
-	<img
-		src={videoStream}
-		class="absolute object-cover blur-3xl w-full h-full -z-10"
-		alt="Live stream is down"
-	/>
-	<img src={videoStream} class="object-contain w-full h-full" alt="Live stream is down" />
-</div>
@@ -1,11 +0,0 @@
-<script lang="ts">
-    export let active = false
-</script>
-
-<button
-    on:click
-    class={$$restProps.class + ' rounded-md outline outline-2 text-zinc-200 outline-zinc-600 p-2' + 
-        (active ? ' bg-zinc-600' : '')}
->
-<slot/>
-</button>
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte'
-    const dispatch = createEventDispatcher()
-
-	export let value = 50;
-	export let min = 0;
-	export let max = 100;
-	export let label = '';
-
-    const dispatchValueInput = () => {
-        dispatch('value', value)
-    }
-</script>
-
-<div class="">
-	<input
-		id="range"
-		type="range"
-		{min}
-		{max}
-		bind:value
-        on:change
-        on:input={dispatchValueInput}
-		class="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-	/>
-</div>
-<label for="range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label
->
-
@@ -28,8 +28,8 @@
 		}
 		connectToEventSource();
        connectToSocket()
-        addPublisher(outControllerData)
-        addPublisher(mode)
+        addPublisher(outControllerData, "controller")
+        addPublisher(mode, "mode")
        addPublisher(servoAngles as unknown as Writable<WebsocketOutData>, "angles")
 	});

@@ -59,8 +59,6 @@

    const addPublisher = (store: Writable<WebsocketOutData>, type?: string) => {
        const publish = (data: WebsocketOutData) => {
-            console.log('Got updated', data);
-            
            if (socket.readyState === WebSocket.OPEN)
            throttle.throttle(
                () => socket.send(type ? JSON.stringify({ type, data }) : data), 
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Controls from '$lib/components/Controls.svelte';
+	import Controls from './Controls.svelte';
 	import { isConnected } from '$lib/stores';
 </script>
 <div>
@@ -4,8 +4,6 @@
 	import { capitalize, throttler, toInt8 } from '$lib/utilities';
 	import { input, outControllerData, mode, modes, type Modes } from '$lib/stores';
 	import type { vector } from '$lib/models';
-    import Range from './input/Range.svelte';
-	import Button from './input/Button.svelte';

 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;
@@ -69,7 +67,7 @@
 		throttle.throttle(updateData, throttle_timing);
 	};

-    const handleRange = (event:CustomEvent, key: 'speed' | 'height') => {
+    const handleRange = (event:Event, key: 'speed' | 'height') => {
        const value:number = event.detail
        input.update((inputData) => {
 			inputData[key] = value;
@@ -91,20 +89,17 @@
 	</div>
 	<div class="absolute bottom-0 z-10 p-4 gap-4 flex items-end">
 		{#each modes as modeValue}
-			<div>
-				<Button
-					on:click={() => changeMode(modeValue)}
-					active={$mode === modeValue}
-				>
-					{capitalize(modeValue)}
-				</Button>
-			</div>
+            <button class="btn btn-outline" class:btn-active={$mode === modeValue} on:click={() => changeMode(modeValue)}>
+                {capitalize(modeValue)}
+            </button>
 		{/each}
        <div>
            {#if $mode === 'walk'}
-			    <Range label="Speed" on:value={(e) => handleRange(e, 'speed')}></Range>
+                <label for="speed">Speed</label>
+                <input type="range" name="speed" min="0" max="100" on:input={(e) => handleRange(e, 'speed')} class="range range-sm" />
            {/if}
-            <Range label="Height" on:value={(e) => handleRange(e, 'height')}></Range>
+            <label for="height">Height</label>
+            <input type="range" name="height" min="0" max="100" on:input={(e) => handleRange(e, 'height')} class="range range-sm" />
        </div>
 	</div>
 </div>