📏 Formats app code
This commit is contained in:
Rune Harlyk
+22
-24
@@ -4,39 +4,37 @@
|
||||
import TopBar from './components/TopBar.svelte';
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import Controller from './routes/Controller.svelte';
|
||||
import fileService from '$lib/services/file-service';
|
||||
import Settings from './routes/Settings.svelte';
|
||||
import { fileService } from '$lib/services';
|
||||
import Settings from './routes/Settings.svelte';
|
||||
import { jointNames, model } from '$lib/store';
|
||||
import { loadModelAsync } from '$lib/utilities';
|
||||
import { socketLocation } from '$lib/utilities';
|
||||
import type { Result } from '$lib/utilities/result';
|
||||
|
||||
export let url = window.location.pathname
|
||||
export let url = window.location.pathname;
|
||||
onMount(async () => {
|
||||
socketService.connect(socketLocation);
|
||||
registerFetchIntercept()
|
||||
const modelRes = await loadModelAsync('/spot_micro.urdf.xacro')
|
||||
|
||||
if (modelRes.isOk()) {
|
||||
const [urdf, JOINT_NAME] = modelRes.inner
|
||||
jointNames.set(JOINT_NAME)
|
||||
model.set(urdf)
|
||||
} else {
|
||||
console.error(modelRes.inner, {"exception": modelRes.exception})
|
||||
}
|
||||
registerFetchIntercept();
|
||||
const modelRes = await loadModelAsync('/spot_micro.urdf.xacro');
|
||||
|
||||
if (modelRes.isOk()) {
|
||||
const [urdf, JOINT_NAME] = modelRes.inner;
|
||||
jointNames.set(JOINT_NAME);
|
||||
model.set(urdf);
|
||||
} else {
|
||||
console.error(modelRes.inner, { exception: modelRes.exception });
|
||||
}
|
||||
});
|
||||
|
||||
const registerFetchIntercept = () => {
|
||||
const { fetch: originalFetch } = window;
|
||||
window.fetch = async (...args) => {
|
||||
const [resource, config] = args;
|
||||
let file: Result<Uint8Array | undefined, string>;
|
||||
file = await fileService.getFile(resource.toString());
|
||||
return file.isOk()
|
||||
? new Response(file.inner)
|
||||
: originalFetch(resource, config)
|
||||
};
|
||||
}
|
||||
const registerFetchIntercept = () => {
|
||||
const { fetch: originalFetch } = window;
|
||||
window.fetch = async (...args) => {
|
||||
const [resource, config] = args;
|
||||
let file: Result<Uint8Array | undefined, string>;
|
||||
file = await fileService.getFile(resource.toString());
|
||||
return file.isOk() ? new Response(file.inner) : originalFetch(resource, config);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<Router {url}>
|
||||
|
||||
@@ -25,12 +25,18 @@
|
||||
});
|
||||
|
||||
left.on('move', (evt, data) => {
|
||||
input.update(o => {o.left = data.vector; return o;})
|
||||
input.update((o) => {
|
||||
o.left = data.vector;
|
||||
return o;
|
||||
});
|
||||
throttle.throttle(updateData, throttle_timing);
|
||||
});
|
||||
|
||||
left.on('end', (evt, data) => {
|
||||
input.update(o => {o.left = { x: 0, y: 0 }; return o;})
|
||||
input.update((o) => {
|
||||
o.left = { x: 0, y: 0 };
|
||||
return o;
|
||||
});
|
||||
throttle.throttle(updateData, throttle_timing);
|
||||
});
|
||||
|
||||
@@ -43,12 +49,18 @@
|
||||
});
|
||||
|
||||
right.on('move', (evt, data) => {
|
||||
input.update(o => {o.right = data.vector; return o;})
|
||||
input.update((o) => {
|
||||
o.right = data.vector;
|
||||
return o;
|
||||
});
|
||||
throttle.throttle(updateData, throttle_timing);
|
||||
});
|
||||
|
||||
right.on('end', (evt, data) => {
|
||||
input.update(o => {o.right = { x: 0, y: 0 }; return o;})
|
||||
input.update((o) => {
|
||||
o.right = { x: 0, y: 0 };
|
||||
return o;
|
||||
});
|
||||
throttle.throttle(updateData, throttle_timing);
|
||||
});
|
||||
});
|
||||
@@ -62,11 +74,10 @@
|
||||
data[5] = $input.height;
|
||||
data[6] = $input.speed;
|
||||
|
||||
outControllerData.set(data)
|
||||
outControllerData.set(data);
|
||||
|
||||
if(!$emulateModel) socketService.send(data);
|
||||
if (!$emulateModel) socketService.send(data);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 left-0 w-screen h-screen">
|
||||
|
||||
@@ -2,76 +2,83 @@
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
|
||||
import { emulateModel } from '$lib/store';
|
||||
import { Link, useLocation } from 'svelte-routing'
|
||||
import { Link, useLocation } from 'svelte-routing';
|
||||
|
||||
const views = ["Virtual environment", "Robot camera"]
|
||||
const modes = ["Drive", "Choreography"]
|
||||
const views = ['Virtual environment', 'Robot camera'];
|
||||
const modes = ['Drive', 'Choreography'];
|
||||
|
||||
const location = useLocation()
|
||||
const location = useLocation();
|
||||
|
||||
let selected_view = views[0];
|
||||
let selected_modes = modes[0];
|
||||
let settingOpen = window.location.pathname.includes('/settings')
|
||||
let isConnected = socketService.isConnected
|
||||
let settingOpen = window.location.pathname.includes('/settings');
|
||||
let isConnected = socketService.isConnected;
|
||||
|
||||
$: emulateModel.set(selected_view === views[0])
|
||||
$: settingOpen = $location.pathname.includes('/settings')
|
||||
$: emulateModel.set(selected_view === views[0]);
|
||||
$: settingOpen = $location.pathname.includes('/settings');
|
||||
|
||||
const stop = () => {
|
||||
if ($isConnected) {
|
||||
socketService.send(JSON.stringify({type:"system/stop"}))
|
||||
}
|
||||
}
|
||||
const stop = () => {
|
||||
if ($isConnected) {
|
||||
socketService.send(JSON.stringify({ type: 'system/stop' }));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
|
||||
<div class="flex gap-2 p-2">
|
||||
{#if settingOpen}
|
||||
<Link to="/">
|
||||
<Icon src={XMark} size="32" />
|
||||
</Link>
|
||||
{:else}
|
||||
<Link to="/settings">
|
||||
<Icon src={Bars3} size="32" />
|
||||
</Link>
|
||||
{/if}
|
||||
<select bind:value={selected_modes} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
|
||||
{#each modes as mode}
|
||||
<option>{mode}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<select bind:value={selected_view} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
|
||||
{#each views as view}
|
||||
<option>{view}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 p-2">
|
||||
{#if settingOpen}
|
||||
<Link to="/">
|
||||
<Icon src={XMark} size="32" />
|
||||
</Link>
|
||||
{:else}
|
||||
<Link to="/settings">
|
||||
<Icon src={Bars3} size="32" />
|
||||
</Link>
|
||||
{/if}
|
||||
<select
|
||||
bind:value={selected_modes}
|
||||
class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
|
||||
>
|
||||
{#each modes as mode}
|
||||
<option>{mode}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<div class="flex gap-2 p-2">
|
||||
<button class="action_button bg-zinc-600">
|
||||
<Icon src={Power} size="24" />
|
||||
</button>
|
||||
<button class="action_button"><Icon src={Battery100} size="24" /></button>
|
||||
<button class="action_button"><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="h-full w-20 bg-red-600 text-white" on:click={stop}>STOP</button>
|
||||
</div>
|
||||
<select
|
||||
bind:value={selected_view}
|
||||
class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
|
||||
>
|
||||
{#each views as view}
|
||||
<option>{view}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 p-2">
|
||||
<button class="action_button bg-zinc-600">
|
||||
<Icon src={Power} size="24" />
|
||||
</button>
|
||||
<button class="action_button"><Icon src={Battery100} size="24" /></button>
|
||||
<button class="action_button"
|
||||
><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<button class="h-full w-20 bg-red-600 text-white" on:click={stop}>STOP</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
height: 50px;
|
||||
}
|
||||
.action_button {
|
||||
border-radius: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: 1px solid #52525b;
|
||||
}
|
||||
</style>
|
||||
.topbar {
|
||||
height: 50px;
|
||||
}
|
||||
.action_button {
|
||||
border-radius: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: 1px solid #52525b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,149 +1,184 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { CanvasTexture, CircleGeometry, Mesh, MeshBasicMaterial} from 'three';
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import { lerp } from '$lib/utilities';
|
||||
import uzip from 'uzip';
|
||||
import { model, outControllerData } from '$lib/store';
|
||||
import { ForwardKinematics } from '$lib/kinematic';
|
||||
import { location } from '$lib/utilities';
|
||||
import FileService from '$lib/services/file-service';
|
||||
import SceneBuilder from '$lib/sceneBuilder';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { CanvasTexture, CircleGeometry, Mesh, MeshBasicMaterial } from 'three';
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import { lerp } from '$lib/utilities';
|
||||
import uzip from 'uzip';
|
||||
import { model, outControllerData } from '$lib/store';
|
||||
import { ForwardKinematics } from '$lib/kinematic';
|
||||
import { location } from '$lib/utilities';
|
||||
import { fileService } from '$lib/services';
|
||||
import SceneBuilder from '$lib/sceneBuilder';
|
||||
|
||||
const angles = socketService.angles
|
||||
const mpu = socketService.mpu
|
||||
const angles = socketService.angles;
|
||||
const mpu = socketService.mpu;
|
||||
|
||||
let sceneManager:SceneBuilder
|
||||
let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement
|
||||
let context: CanvasRenderingContext2D, texture: CanvasTexture
|
||||
let sceneManager: 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 modelAngles: number[] | Int16Array = new Array(12).fill(0);
|
||||
let modelTargetAngles: number[] | Int16Array = new Array(12).fill(0);
|
||||
|
||||
let modelBodyAngles:EulerAngle = { omega: 0, phi: 0, psi: 0 }
|
||||
let modelTargeBodyAngles:EulerAngle = { omega: 0, phi: 0, psi: 0 }
|
||||
let modelBodyAngles: EulerAngle = { omega: 0, phi: 0, psi: 0 };
|
||||
let modelTargeBodyAngles: EulerAngle = { omega: 0, phi: 0, psi: 0 };
|
||||
|
||||
const videoStream = `//${location}/api/stream`;
|
||||
const videoStream = `//${location}/api/stream`;
|
||||
|
||||
let showModel = true, showStream = false
|
||||
let showModel = true,
|
||||
showStream = false;
|
||||
|
||||
const servoNames = [
|
||||
"front_left_shoulder", "front_left_leg", "front_left_foot",
|
||||
"front_right_shoulder", "front_right_leg", "front_right_foot",
|
||||
"rear_left_shoulder", "rear_left_leg", "rear_left_foot",
|
||||
"rear_right_shoulder", "rear_right_leg", "rear_right_foot"
|
||||
]
|
||||
const servoNames = [
|
||||
'front_left_shoulder',
|
||||
'front_left_leg',
|
||||
'front_left_foot',
|
||||
'front_right_shoulder',
|
||||
'front_right_leg',
|
||||
'front_right_foot',
|
||||
'rear_left_shoulder',
|
||||
'rear_left_leg',
|
||||
'rear_left_foot',
|
||||
'rear_right_shoulder',
|
||||
'rear_right_leg',
|
||||
'rear_right_foot'
|
||||
];
|
||||
|
||||
interface EulerAngle {
|
||||
omega: number;
|
||||
phi: number;
|
||||
psi: number;
|
||||
}
|
||||
interface EulerAngle {
|
||||
omega: number;
|
||||
phi: number;
|
||||
psi: number;
|
||||
}
|
||||
|
||||
const degToRad = (val:number) => val * (Math.PI / 180)
|
||||
const degToRad = (val: number) => val * (Math.PI / 180);
|
||||
|
||||
onMount(async () => {
|
||||
await cacheModelFiles()
|
||||
await createScene()
|
||||
onMount(async () => {
|
||||
await cacheModelFiles();
|
||||
await createScene();
|
||||
|
||||
outControllerData.subscribe(data => {
|
||||
socketService.send(JSON.stringify({
|
||||
type: "kinematic/bodystate",
|
||||
angles:[0, (data[1]-128)/3, (data[2]-128) / 4],
|
||||
position:[(data[4]-128)/2, data[5], (data[3]-128)/2]}))
|
||||
})
|
||||
});
|
||||
outControllerData.subscribe((data) => {
|
||||
socketService.send(
|
||||
JSON.stringify({
|
||||
type: 'kinematic/bodystate',
|
||||
angles: [0, (data[1] - 128) / 3, (data[2] - 128) / 4],
|
||||
position: [(data[4] - 128) / 2, data[5], (data[3] - 128) / 2]
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
canvas.remove()
|
||||
})
|
||||
onDestroy(() => {
|
||||
canvas.remove();
|
||||
});
|
||||
|
||||
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 cacheModelFiles = async () => {
|
||||
let data = await fetch('/stl.zip').then((data) => data.arrayBuffer());
|
||||
|
||||
const updateAngles = (name:string, angle:number) => {
|
||||
modelTargetAngles[servoNames.indexOf(name)] = angle * (180/Math.PI)
|
||||
socketService.send(JSON.stringify({type:"kinematic/angle", angle:angle * (180/Math.PI), id:servoNames.indexOf(name)}))
|
||||
}
|
||||
var files = uzip.parse(data);
|
||||
|
||||
const createScene = async () => {
|
||||
sceneManager = new SceneBuilder()
|
||||
.addRenderer({ antialias: true, canvas: canvas, alpha: true})
|
||||
.addPerspectiveCamera({x:-0.5, y:0.5, z:1})
|
||||
.addOrbitControls(10, 30)
|
||||
.addSky()
|
||||
.addGroundPlane({x:0, y:-2, z:0})
|
||||
.addGridHelper({size:250, divisions:125, y:-2})
|
||||
.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()
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
addVideoStream()
|
||||
}
|
||||
const updateAngles = (name: string, angle: number) => {
|
||||
modelTargetAngles[servoNames.indexOf(name)] = angle * (180 / Math.PI);
|
||||
socketService.send(
|
||||
JSON.stringify({
|
||||
type: 'kinematic/angle',
|
||||
angle: angle * (180 / Math.PI),
|
||||
id: servoNames.indexOf(name)
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
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 createScene = async () => {
|
||||
sceneManager = new SceneBuilder()
|
||||
.addRenderer({ antialias: true, canvas: canvas, alpha: true })
|
||||
.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
|
||||
.addOrbitControls(10, 30)
|
||||
.addSky()
|
||||
.addGroundPlane({ x: 0, y: -2, z: 0 })
|
||||
.addGridHelper({ size: 250, divisions: 125, y: -2 })
|
||||
.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();
|
||||
|
||||
const handleVideoStream = () => {
|
||||
if(!showStream) return
|
||||
context.drawImage(stream, 0, 0)
|
||||
texture.needsUpdate = true;
|
||||
}
|
||||
addVideoStream();
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
const robot = sceneManager.model
|
||||
if(!robot) return
|
||||
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 forwardKinematics = new ForwardKinematics()
|
||||
const handleVideoStream = () => {
|
||||
if (!showStream) return;
|
||||
context.drawImage(stream, 0, 0);
|
||||
texture.needsUpdate = true;
|
||||
};
|
||||
|
||||
const points = forwardKinematics.calculateFootpoints(modelAngles.map(ang => degToRad(ang)) as number[])
|
||||
robot.position.y = Math.max(...points.map(coord => coord[0] / 100)) - 2.7
|
||||
robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1)
|
||||
modelTargetAngles = $angles
|
||||
|
||||
handleVideoStream()
|
||||
const render = () => {
|
||||
const robot = sceneManager.model;
|
||||
if (!robot) return;
|
||||
|
||||
for (let i = 0; i < servoNames.length; i++) {
|
||||
modelAngles[i] = lerp(robot.joints[servoNames[i]].angle * (180/Math.PI), modelTargetAngles[i], 0.1)
|
||||
robot.joints[servoNames[i]].setJointValue(degToRad(modelAngles[i]));
|
||||
}
|
||||
const forwardKinematics = new ForwardKinematics();
|
||||
|
||||
modelBodyAngles.omega = lerp(robot.rotation.x * (180/Math.PI), modelTargeBodyAngles.omega - 90, 0.1)
|
||||
modelBodyAngles.phi = lerp(robot.rotation.y * (180/Math.PI), modelTargeBodyAngles.phi, 0.1)
|
||||
modelBodyAngles.psi = lerp(robot.rotation.z * (180/Math.PI), modelTargeBodyAngles.psi + 90, 0.1)
|
||||
}
|
||||
const points = forwardKinematics.calculateFootpoints(
|
||||
modelAngles.map((ang) => degToRad(ang)) as number[]
|
||||
);
|
||||
robot.position.y = Math.max(...points.map((coord) => coord[0] / 100)) - 2.7;
|
||||
robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1);
|
||||
modelTargetAngles = $angles;
|
||||
|
||||
handleVideoStream();
|
||||
|
||||
for (let i = 0; i < servoNames.length; i++) {
|
||||
modelAngles[i] = lerp(
|
||||
robot.joints[servoNames[i]].angle * (180 / Math.PI),
|
||||
modelTargetAngles[i],
|
||||
0.1
|
||||
);
|
||||
robot.joints[servoNames[i]].setJointValue(degToRad(modelAngles[i]));
|
||||
}
|
||||
|
||||
modelBodyAngles.omega = lerp(
|
||||
robot.rotation.x * (180 / Math.PI),
|
||||
modelTargeBodyAngles.omega - 90,
|
||||
0.1
|
||||
);
|
||||
modelBodyAngles.phi = lerp(robot.rotation.y * (180 / Math.PI), modelTargeBodyAngles.phi, 0.1);
|
||||
modelBodyAngles.psi = lerp(
|
||||
robot.rotation.z * (180 / Math.PI),
|
||||
modelTargeBodyAngles.psi + 90,
|
||||
0.1
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={sceneManager.handleResize}></svelte:window>
|
||||
|
||||
<svelte:window on:resize={sceneManager.handleResize} />
|
||||
|
||||
{#if showStream}
|
||||
<img
|
||||
bind:this={stream}
|
||||
src={videoStream}
|
||||
class="hidden"
|
||||
alt="Live stream is down"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
{/if}
|
||||
<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>
|
||||
<canvas bind:this={canvas} class="absolute"></canvas>
|
||||
|
||||
@@ -2,43 +2,43 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { jointNames } from '../../lib/store';
|
||||
|
||||
type Servo = {
|
||||
id: number;
|
||||
name: string;
|
||||
minPWM: number;
|
||||
maxPWM: number;
|
||||
pwmFor180: number;
|
||||
};
|
||||
type Servo = {
|
||||
id: number;
|
||||
name: string;
|
||||
minPWM: number;
|
||||
maxPWM: number;
|
||||
pwmFor180: number;
|
||||
};
|
||||
|
||||
let servos: any[] = [];
|
||||
|
||||
onMount(() => {
|
||||
jointNames.subscribe(data => {
|
||||
servos = data.map((name:string, i:number) => {
|
||||
return {
|
||||
id: i,
|
||||
name,
|
||||
minPWM: 0,
|
||||
maxPWM: 0,
|
||||
pwmFor180: 0
|
||||
};
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
jointNames.subscribe((data) => {
|
||||
servos = data.map((name: string, i: number) => {
|
||||
return {
|
||||
id: i,
|
||||
name,
|
||||
minPWM: 0,
|
||||
maxPWM: 0,
|
||||
pwmFor180: 0
|
||||
};
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
let selectedServo: number | null = null;
|
||||
|
||||
function updateServoValue(index: number, field: keyof Servo, value: number): void {
|
||||
servos[index] = { ...servos[index], [field]: value };
|
||||
}
|
||||
function updateServoValue(index: number, field: keyof Servo, value: number): void {
|
||||
servos[index] = { ...servos[index], [field]: value };
|
||||
}
|
||||
|
||||
const formatServo = (servo:Servo) => {
|
||||
const string = servo.name
|
||||
const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
|
||||
return `${servo.id} ${name}`
|
||||
}
|
||||
const formatServo = (servo: Servo) => {
|
||||
const string = servo.name;
|
||||
const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
|
||||
return `${servo.id} ${name}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="servo-selector">
|
||||
<label for="servo-select">Select Servo:</label>
|
||||
@@ -49,23 +49,36 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if selectedServo !== null}
|
||||
<div class="mt-5">
|
||||
<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
|
||||
<label for="minPWM">Min PWM:</label>
|
||||
<input type="number" id="minPWM" class="bg-zinc-800"
|
||||
value={servos[selectedServo].minPWM}
|
||||
on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))} />
|
||||
{#if selectedServo !== null}
|
||||
<div class="mt-5">
|
||||
<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
|
||||
<label for="minPWM">Min PWM:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="minPWM"
|
||||
class="bg-zinc-800"
|
||||
value={servos[selectedServo].minPWM}
|
||||
on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))}
|
||||
/>
|
||||
|
||||
<label for="maxPWM">Max PWM:</label>
|
||||
<input type="number" id="maxPWM" class="bg-zinc-800"
|
||||
value={servos[selectedServo].maxPWM}
|
||||
on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))} />
|
||||
<label for="maxPWM">Max PWM:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="maxPWM"
|
||||
class="bg-zinc-800"
|
||||
value={servos[selectedServo].maxPWM}
|
||||
on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))}
|
||||
/>
|
||||
|
||||
<label for="pwmFor180">PWM for 180°:</label>
|
||||
<input type="number" id="pwmFor180" class="bg-zinc-800"
|
||||
value={servos[selectedServo].pwmFor180}
|
||||
on:blur={(event) => updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))} />
|
||||
</div>
|
||||
{/if}
|
||||
<label for="pwmFor180">PWM for 180°:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="pwmFor180"
|
||||
class="bg-zinc-800"
|
||||
value={servos[selectedServo].pwmFor180}
|
||||
on:blur={(event) =>
|
||||
updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
<script lang="ts">
|
||||
import socketService from "$lib/services/socket-service";
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
let isConnected = socketService.isConnected
|
||||
let settings = socketService.settings
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({type: 'system/settings'})
|
||||
socketService.send(message)
|
||||
}
|
||||
})
|
||||
let isConnected = socketService.isConnected;
|
||||
let settings = socketService.settings;
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({ type: 'system/settings' });
|
||||
socketService.send(message);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full">
|
||||
<div>
|
||||
{#each Object.entries($settings) as entry}
|
||||
<div class="flex gap-8">
|
||||
<div class="w-32">{entry[0]}:</div>
|
||||
<div>{entry[1]}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{#each Object.entries($settings) as entry}
|
||||
<div class="flex gap-8">
|
||||
<div class="w-32">{entry[0]}:</div>
|
||||
<div>{entry[1]}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { humanFileSize } from "$lib/utilities";
|
||||
import { onMount } from 'svelte';
|
||||
import { humanFileSize } from '$lib/utilities';
|
||||
import socketService from '$lib/services/socket-service';
|
||||
|
||||
let isConnected = socketService.isConnected
|
||||
let settings = socketService.settings
|
||||
let systemInfo = socketService.systemInfo
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({type: 'system/info'})
|
||||
socketService.send(message)
|
||||
}
|
||||
})
|
||||
let isConnected = socketService.isConnected;
|
||||
let settings = socketService.settings;
|
||||
let systemInfo = socketService.systemInfo;
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({ type: 'system/info' });
|
||||
socketService.send(message);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full">
|
||||
<div class="w-1/3">
|
||||
{#each Object.entries($systemInfo ?? {}) as entry}
|
||||
<div class="flex gap-8">
|
||||
<div class="w-32">{entry[0]}:</div>
|
||||
{#if entry[0].includes("Size") || entry[0].includes("Free") || entry[0].includes("Min")}
|
||||
<div>{humanFileSize(entry[1])}</div>
|
||||
{:else}
|
||||
<div>{entry[1]}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
{#each Object.entries($systemInfo ?? {}) as entry}
|
||||
<div class="flex gap-8">
|
||||
<div class="w-32">{entry[0]}:</div>
|
||||
{#if entry[0].includes('Size') || entry[0].includes('Free') || entry[0].includes('Min')}
|
||||
<div>{humanFileSize(entry[1])}</div>
|
||||
{:else}
|
||||
<div>{entry[1]}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<script lang="ts">
|
||||
import socketService from "$lib/services/socket-service";
|
||||
import { onMount } from 'svelte'
|
||||
import socketService from '$lib/services/socket-service';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isConnected = socketService.isConnected
|
||||
let log = socketService.log
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({type: 'system/logs'})
|
||||
socketService.send(message)
|
||||
}
|
||||
})
|
||||
let isConnected = socketService.isConnected;
|
||||
let log = socketService.log;
|
||||
|
||||
onMount(() => {
|
||||
if ($isConnected) {
|
||||
const message = JSON.stringify({ type: 'system/logs' });
|
||||
socketService.send(message);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full">
|
||||
{#each $log as entry}
|
||||
<div>{entry}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each $log as entry}
|
||||
<div>{entry}</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
+383
-371
@@ -1,381 +1,393 @@
|
||||
export default class Kinematic {
|
||||
private l1: number;
|
||||
private l2: number;
|
||||
private l3: number;
|
||||
private l4: number;
|
||||
|
||||
private L: number;
|
||||
private W: number;
|
||||
|
||||
constructor() {
|
||||
this.l1 = 50;
|
||||
this.l2 = 20;
|
||||
this.l3 = 120;
|
||||
this.l4 = 155;
|
||||
|
||||
this.L = 140;
|
||||
this.W = 75;
|
||||
}
|
||||
|
||||
bodyIK(omega: number, phi: number, psi: number, xm: number, ym: number, zm: number): number[][][] {
|
||||
const { cos, sin } = Math;
|
||||
|
||||
const Rx: number[][] = [
|
||||
[1, 0, 0, 0],
|
||||
[0, cos(omega), -sin(omega), 0],
|
||||
[0, sin(omega), cos(omega), 0],
|
||||
[0, 0, 0, 1],
|
||||
];
|
||||
const Ry: number[][] = [
|
||||
[cos(phi), 0, sin(phi), 0],
|
||||
[0, 1, 0, 0],
|
||||
[-sin(phi), 0, cos(phi), 0],
|
||||
[0, 0, 0, 1],
|
||||
];
|
||||
const Rz: number[][] = [
|
||||
[cos(psi), -sin(psi), 0, 0],
|
||||
[sin(psi), cos(psi), 0, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 0, 1],
|
||||
];
|
||||
const Rxyz: number[][] = this.matrixMultiply(this.matrixMultiply(Rx, Ry), Rz);
|
||||
|
||||
const T: number[][] = [
|
||||
[0, 0, 0, xm],
|
||||
[0, 0, 0, ym],
|
||||
[0, 0, 0, zm],
|
||||
[0, 0, 0, 0],
|
||||
];
|
||||
const Tm: number[][] = this.matrixAdd(T, Rxyz);
|
||||
|
||||
const sHp = sin(Math.PI / 2);
|
||||
const cHp = cos(Math.PI / 2);
|
||||
const L = this.L;
|
||||
const W = this.W;
|
||||
|
||||
return [
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, W / 2],
|
||||
[0, 0, 0, 1],
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, -W / 2],
|
||||
[0, 0, 0, 1],
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, -L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, W / 2],
|
||||
[0, 0, 0, 1],
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, -L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, -W / 2],
|
||||
[0, 0, 0, 1],
|
||||
]),
|
||||
];
|
||||
}
|
||||
|
||||
private legIK(point: number[]): number[] {
|
||||
const [x, y, z] = point;
|
||||
const { atan2, cos, sin, sqrt, acos } = Math;
|
||||
const { l1, l2, l3, l4 } = this;
|
||||
|
||||
let F;
|
||||
private l1: number;
|
||||
private l2: number;
|
||||
private l3: number;
|
||||
private l4: number;
|
||||
|
||||
try {
|
||||
F = sqrt(x ** 2 + y ** 2 - l1 ** 2);
|
||||
if(isNaN(F)) throw new Error("F is NaN")
|
||||
} catch (error) {
|
||||
//console.log(error)
|
||||
F = l1
|
||||
}
|
||||
const G = F - l2;
|
||||
const H = sqrt(G ** 2 + z ** 2);
|
||||
private L: number;
|
||||
private W: number;
|
||||
|
||||
const theta1 = -atan2(y, x) - atan2(F, -l1);
|
||||
const D = (H ** 2 - l3 ** 2 - l4 ** 2) / (2 * l3 * l4);
|
||||
let theta3: number
|
||||
try {
|
||||
theta3 = acos(D);
|
||||
if(isNaN(theta3)) throw new Error("theta3 is NaN")
|
||||
} catch (error) {
|
||||
theta3 = 0
|
||||
}
|
||||
const theta2 = atan2(z, G) - atan2(l4 * sin(theta3), l3 + l4 * cos(theta3));
|
||||
constructor() {
|
||||
this.l1 = 50;
|
||||
this.l2 = 20;
|
||||
this.l3 = 120;
|
||||
this.l4 = 155;
|
||||
|
||||
return [theta1, theta2, theta3];
|
||||
}
|
||||
|
||||
matrixMultiply(a: number[][], b: number[][]): number[][] {
|
||||
const result: number[][] = [];
|
||||
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < b[0].length; j++) {
|
||||
let sum = 0;
|
||||
|
||||
for (let k = 0; k < a[i].length; k++) {
|
||||
sum += a[i][k] * b[k][j];
|
||||
}
|
||||
|
||||
row.push(sum);
|
||||
}
|
||||
|
||||
result.push(row);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
this.L = 140;
|
||||
this.W = 75;
|
||||
}
|
||||
|
||||
multiplyVector(matrix: number[][], vector: number[]): number[] {
|
||||
const rows = matrix.length;
|
||||
const cols = matrix[0].length;
|
||||
const vectorLength = vector.length;
|
||||
|
||||
if (cols !== vectorLength) {
|
||||
throw new Error("Matrix and vector dimensions do not match for multiplication.");
|
||||
}
|
||||
|
||||
const result = [];
|
||||
|
||||
for (let i = 0; i < rows; i++) {
|
||||
let sum = 0;
|
||||
|
||||
for (let j = 0; j < cols; j++) {
|
||||
sum += matrix[i][j] * vector[j];
|
||||
}
|
||||
|
||||
result.push(sum);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private matrixAdd(a: number[][], b: number[][]): number[][] {
|
||||
const result: number[][] = [];
|
||||
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < a[i].length; j++) {
|
||||
row.push(a[i][j] + b[i][j]);
|
||||
}
|
||||
|
||||
result.push(row);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
public calcLegPoints(angles: number[]): number[][] {
|
||||
const [theta1, theta2, theta3] = angles;
|
||||
const theta23 = theta2 + theta3;
|
||||
|
||||
const T0: number[] = [0, 0, 0, 1];
|
||||
const T1: number[] = this.vectorAdd(
|
||||
T0,
|
||||
[-this.l1 * Math.cos(theta1), this.l1 * Math.sin(theta1), 0, 0]
|
||||
);
|
||||
const T2: number[] = this.vectorAdd(
|
||||
T1,
|
||||
[-this.l2 * Math.sin(theta1), -this.l2 * Math.cos(theta1), 0, 0]
|
||||
);
|
||||
const T3: number[] = this.vectorAdd(
|
||||
T2,
|
||||
[
|
||||
-this.l3 * Math.sin(theta1) * Math.cos(theta2),
|
||||
-this.l3 * Math.cos(theta1) * Math.cos(theta2),
|
||||
this.l3 * Math.sin(theta2),
|
||||
0,
|
||||
]
|
||||
);
|
||||
const T4: number[] = this.vectorAdd(
|
||||
T3,
|
||||
[
|
||||
-this.l4 * Math.sin(theta1) * Math.cos(theta23),
|
||||
-this.l4 * Math.cos(theta1) * Math.cos(theta23),
|
||||
this.l4 * Math.sin(theta23),
|
||||
0,
|
||||
]
|
||||
);
|
||||
|
||||
return [T0, T1, T2, T3, T4];
|
||||
}
|
||||
|
||||
public calcIK(Lp: number[][], angles: number[], center: number[]): number[][] {
|
||||
const [omega, phi, psi] = angles;
|
||||
const [xm, ym, zm] = center;
|
||||
|
||||
const [Tlf, Trf, Tlb, Trb] = this.bodyIK(omega, phi, psi, xm, ym, zm);
|
||||
|
||||
const Ix: number[][] = [
|
||||
[-1, 0, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 0, 1],
|
||||
];
|
||||
bodyIK(
|
||||
omega: number,
|
||||
phi: number,
|
||||
psi: number,
|
||||
xm: number,
|
||||
ym: number,
|
||||
zm: number
|
||||
): number[][][] {
|
||||
const { cos, sin } = Math;
|
||||
|
||||
return [
|
||||
this.legIK(this.multiplyVector(this.matrixInverse(Tlf), Lp[0])),
|
||||
this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trf), Lp[1]))),
|
||||
this.legIK(this.multiplyVector(this.matrixInverse(Tlb), Lp[2])),
|
||||
this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trb), Lp[3]))),
|
||||
];
|
||||
}
|
||||
|
||||
private vectorAdd(a: number[], b: number[]): number[] {
|
||||
return a.map((val, index) => val + b[index]);
|
||||
}
|
||||
|
||||
private matrixInverse(matrix: number[][]): number[][] {
|
||||
const det = this.determinant(matrix);
|
||||
const adjugate = this.adjugate(matrix);
|
||||
const scalar = 1 / det;
|
||||
const inverse: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
row.push(adjugate[i][j] * scalar);
|
||||
}
|
||||
|
||||
inverse.push(row);
|
||||
}
|
||||
|
||||
return inverse;
|
||||
}
|
||||
|
||||
private determinant(matrix: number[][]): number {
|
||||
if (matrix.length !== matrix[0].length) {
|
||||
throw new Error("The matrix is not square.");
|
||||
}
|
||||
|
||||
if (matrix.length === 2) {
|
||||
return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
|
||||
}
|
||||
|
||||
let det = 0;
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const sign = i % 2 === 0 ? 1 : -1;
|
||||
const subMatrix: number[][] = [];
|
||||
|
||||
for (let j = 1; j < matrix.length; j++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let k = 0; k < matrix.length; k++) {
|
||||
if (k !== i) {
|
||||
row.push(matrix[j][k]);
|
||||
}
|
||||
}
|
||||
|
||||
subMatrix.push(row);
|
||||
}
|
||||
|
||||
det += sign * matrix[0][i] * this.determinant(subMatrix);
|
||||
}
|
||||
|
||||
return det;
|
||||
}
|
||||
|
||||
private adjugate(matrix: number[][]): number[][] {
|
||||
if (matrix.length !== matrix[0].length) {
|
||||
throw new Error("The matrix is not square.");
|
||||
}
|
||||
|
||||
const adjugate: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
const sign = (i + j) % 2 === 0 ? 1 : -1;
|
||||
const subMatrix: number[][] = [];
|
||||
|
||||
for (let k = 0; k < matrix.length; k++) {
|
||||
if (k !== i) {
|
||||
const subRow: number[] = [];
|
||||
|
||||
for (let l = 0; l < matrix.length; l++) {
|
||||
if (l !== j) {
|
||||
subRow.push(matrix[k][l]);
|
||||
}
|
||||
}
|
||||
|
||||
subMatrix.push(subRow);
|
||||
}
|
||||
}
|
||||
|
||||
const cofactor = sign * this.determinant(subMatrix);
|
||||
row.push(cofactor);
|
||||
}
|
||||
|
||||
adjugate.push(row);
|
||||
}
|
||||
|
||||
return this.transpose(adjugate);
|
||||
}
|
||||
|
||||
private transpose(matrix: number[][]): number[][] {
|
||||
const transposed: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
row.push(matrix[j][i]);
|
||||
}
|
||||
|
||||
transposed.push(row);
|
||||
}
|
||||
|
||||
return transposed;
|
||||
}
|
||||
}
|
||||
const Rx: number[][] = [
|
||||
[1, 0, 0, 0],
|
||||
[0, cos(omega), -sin(omega), 0],
|
||||
[0, sin(omega), cos(omega), 0],
|
||||
[0, 0, 0, 1]
|
||||
];
|
||||
const Ry: number[][] = [
|
||||
[cos(phi), 0, sin(phi), 0],
|
||||
[0, 1, 0, 0],
|
||||
[-sin(phi), 0, cos(phi), 0],
|
||||
[0, 0, 0, 1]
|
||||
];
|
||||
const Rz: number[][] = [
|
||||
[cos(psi), -sin(psi), 0, 0],
|
||||
[sin(psi), cos(psi), 0, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 0, 1]
|
||||
];
|
||||
const Rxyz: number[][] = this.matrixMultiply(this.matrixMultiply(Rx, Ry), Rz);
|
||||
|
||||
const T: number[][] = [
|
||||
[0, 0, 0, xm],
|
||||
[0, 0, 0, ym],
|
||||
[0, 0, 0, zm],
|
||||
[0, 0, 0, 0]
|
||||
];
|
||||
const Tm: number[][] = this.matrixAdd(T, Rxyz);
|
||||
|
||||
const sHp = sin(Math.PI / 2);
|
||||
const cHp = cos(Math.PI / 2);
|
||||
const L = this.L;
|
||||
const W = this.W;
|
||||
|
||||
return [
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, W / 2],
|
||||
[0, 0, 0, 1]
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, -W / 2],
|
||||
[0, 0, 0, 1]
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, -L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, W / 2],
|
||||
[0, 0, 0, 1]
|
||||
]),
|
||||
this.matrixMultiply(Tm, [
|
||||
[cHp, 0, sHp, -L / 2],
|
||||
[0, 1, 0, 0],
|
||||
[-sHp, 0, cHp, -W / 2],
|
||||
[0, 0, 0, 1]
|
||||
])
|
||||
];
|
||||
}
|
||||
|
||||
private legIK(point: number[]): number[] {
|
||||
const [x, y, z] = point;
|
||||
const { atan2, cos, sin, sqrt, acos } = Math;
|
||||
const { l1, l2, l3, l4 } = this;
|
||||
|
||||
let F;
|
||||
|
||||
try {
|
||||
F = sqrt(x ** 2 + y ** 2 - l1 ** 2);
|
||||
if (isNaN(F)) throw new Error('F is NaN');
|
||||
} catch (error) {
|
||||
//console.log(error)
|
||||
F = l1;
|
||||
}
|
||||
const G = F - l2;
|
||||
const H = sqrt(G ** 2 + z ** 2);
|
||||
|
||||
const theta1 = -atan2(y, x) - atan2(F, -l1);
|
||||
const D = (H ** 2 - l3 ** 2 - l4 ** 2) / (2 * l3 * l4);
|
||||
let theta3: number;
|
||||
try {
|
||||
theta3 = acos(D);
|
||||
if (isNaN(theta3)) throw new Error('theta3 is NaN');
|
||||
} catch (error) {
|
||||
theta3 = 0;
|
||||
}
|
||||
const theta2 = atan2(z, G) - atan2(l4 * sin(theta3), l3 + l4 * cos(theta3));
|
||||
|
||||
return [theta1, theta2, theta3];
|
||||
}
|
||||
|
||||
matrixMultiply(a: number[][], b: number[][]): number[][] {
|
||||
const result: number[][] = [];
|
||||
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < b[0].length; j++) {
|
||||
let sum = 0;
|
||||
|
||||
for (let k = 0; k < a[i].length; k++) {
|
||||
sum += a[i][k] * b[k][j];
|
||||
}
|
||||
|
||||
row.push(sum);
|
||||
}
|
||||
|
||||
result.push(row);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
multiplyVector(matrix: number[][], vector: number[]): number[] {
|
||||
const rows = matrix.length;
|
||||
const cols = matrix[0].length;
|
||||
const vectorLength = vector.length;
|
||||
|
||||
if (cols !== vectorLength) {
|
||||
throw new Error('Matrix and vector dimensions do not match for multiplication.');
|
||||
}
|
||||
|
||||
const result = [];
|
||||
|
||||
for (let i = 0; i < rows; i++) {
|
||||
let sum = 0;
|
||||
|
||||
for (let j = 0; j < cols; j++) {
|
||||
sum += matrix[i][j] * vector[j];
|
||||
}
|
||||
|
||||
result.push(sum);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private matrixAdd(a: number[][], b: number[][]): number[][] {
|
||||
const result: number[][] = [];
|
||||
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < a[i].length; j++) {
|
||||
row.push(a[i][j] + b[i][j]);
|
||||
}
|
||||
|
||||
result.push(row);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
public calcLegPoints(angles: number[]): number[][] {
|
||||
const [theta1, theta2, theta3] = angles;
|
||||
const theta23 = theta2 + theta3;
|
||||
|
||||
const T0: number[] = [0, 0, 0, 1];
|
||||
const T1: number[] = this.vectorAdd(T0, [
|
||||
-this.l1 * Math.cos(theta1),
|
||||
this.l1 * Math.sin(theta1),
|
||||
0,
|
||||
0
|
||||
]);
|
||||
const T2: number[] = this.vectorAdd(T1, [
|
||||
-this.l2 * Math.sin(theta1),
|
||||
-this.l2 * Math.cos(theta1),
|
||||
0,
|
||||
0
|
||||
]);
|
||||
const T3: number[] = this.vectorAdd(T2, [
|
||||
-this.l3 * Math.sin(theta1) * Math.cos(theta2),
|
||||
-this.l3 * Math.cos(theta1) * Math.cos(theta2),
|
||||
this.l3 * Math.sin(theta2),
|
||||
0
|
||||
]);
|
||||
const T4: number[] = this.vectorAdd(T3, [
|
||||
-this.l4 * Math.sin(theta1) * Math.cos(theta23),
|
||||
-this.l4 * Math.cos(theta1) * Math.cos(theta23),
|
||||
this.l4 * Math.sin(theta23),
|
||||
0
|
||||
]);
|
||||
|
||||
return [T0, T1, T2, T3, T4];
|
||||
}
|
||||
|
||||
public calcIK(Lp: number[][], angles: number[], center: number[]): number[][] {
|
||||
const [omega, phi, psi] = angles;
|
||||
const [xm, ym, zm] = center;
|
||||
|
||||
const [Tlf, Trf, Tlb, Trb] = this.bodyIK(omega, phi, psi, xm, ym, zm);
|
||||
|
||||
const Ix: number[][] = [
|
||||
[-1, 0, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 0, 1]
|
||||
];
|
||||
|
||||
return [
|
||||
this.legIK(this.multiplyVector(this.matrixInverse(Tlf), Lp[0])),
|
||||
this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trf), Lp[1]))),
|
||||
this.legIK(this.multiplyVector(this.matrixInverse(Tlb), Lp[2])),
|
||||
this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trb), Lp[3])))
|
||||
];
|
||||
}
|
||||
|
||||
private vectorAdd(a: number[], b: number[]): number[] {
|
||||
return a.map((val, index) => val + b[index]);
|
||||
}
|
||||
|
||||
private matrixInverse(matrix: number[][]): number[][] {
|
||||
const det = this.determinant(matrix);
|
||||
const adjugate = this.adjugate(matrix);
|
||||
const scalar = 1 / det;
|
||||
const inverse: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
row.push(adjugate[i][j] * scalar);
|
||||
}
|
||||
|
||||
inverse.push(row);
|
||||
}
|
||||
|
||||
return inverse;
|
||||
}
|
||||
|
||||
private determinant(matrix: number[][]): number {
|
||||
if (matrix.length !== matrix[0].length) {
|
||||
throw new Error('The matrix is not square.');
|
||||
}
|
||||
|
||||
if (matrix.length === 2) {
|
||||
return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
|
||||
}
|
||||
|
||||
let det = 0;
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const sign = i % 2 === 0 ? 1 : -1;
|
||||
const subMatrix: number[][] = [];
|
||||
|
||||
for (let j = 1; j < matrix.length; j++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let k = 0; k < matrix.length; k++) {
|
||||
if (k !== i) {
|
||||
row.push(matrix[j][k]);
|
||||
}
|
||||
}
|
||||
|
||||
subMatrix.push(row);
|
||||
}
|
||||
|
||||
det += sign * matrix[0][i] * this.determinant(subMatrix);
|
||||
}
|
||||
|
||||
return det;
|
||||
}
|
||||
|
||||
private adjugate(matrix: number[][]): number[][] {
|
||||
if (matrix.length !== matrix[0].length) {
|
||||
throw new Error('The matrix is not square.');
|
||||
}
|
||||
|
||||
const adjugate: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
const sign = (i + j) % 2 === 0 ? 1 : -1;
|
||||
const subMatrix: number[][] = [];
|
||||
|
||||
for (let k = 0; k < matrix.length; k++) {
|
||||
if (k !== i) {
|
||||
const subRow: number[] = [];
|
||||
|
||||
for (let l = 0; l < matrix.length; l++) {
|
||||
if (l !== j) {
|
||||
subRow.push(matrix[k][l]);
|
||||
}
|
||||
}
|
||||
|
||||
subMatrix.push(subRow);
|
||||
}
|
||||
}
|
||||
|
||||
const cofactor = sign * this.determinant(subMatrix);
|
||||
row.push(cofactor);
|
||||
}
|
||||
|
||||
adjugate.push(row);
|
||||
}
|
||||
|
||||
return this.transpose(adjugate);
|
||||
}
|
||||
|
||||
private transpose(matrix: number[][]): number[][] {
|
||||
const transposed: number[][] = [];
|
||||
|
||||
for (let i = 0; i < matrix.length; i++) {
|
||||
const row: number[] = [];
|
||||
|
||||
for (let j = 0; j < matrix[i].length; j++) {
|
||||
row.push(matrix[j][i]);
|
||||
}
|
||||
|
||||
transposed.push(row);
|
||||
}
|
||||
|
||||
return transposed;
|
||||
}
|
||||
}
|
||||
|
||||
export class ForwardKinematics {
|
||||
private l1: number;
|
||||
private l2: number;
|
||||
private l3: number;
|
||||
private l4: number;
|
||||
|
||||
constructor() {
|
||||
this.l1 = 50;
|
||||
this.l2 = 20;
|
||||
this.l3 = 120;
|
||||
this.l4 = 155;
|
||||
}
|
||||
|
||||
public calculateFootpoint(theta1: number, theta2: number, theta3: number): number[] {
|
||||
const { cos, sin } = Math;
|
||||
|
||||
const x = this.l1 * cos(theta1) + this.l2 * cos(theta1) + this.l3 * cos(theta1 + theta2) + this.l4 * cos(theta1 + theta2 + theta3);
|
||||
const y = this.l1 * sin(theta1) + this.l2 * sin(theta1) + this.l3 * sin(theta1 + theta2) + this.l4 * sin(theta1 + theta2 + theta3);
|
||||
const z = 0;
|
||||
|
||||
return [x, y, z];
|
||||
}
|
||||
private l1: number;
|
||||
private l2: number;
|
||||
private l3: number;
|
||||
private l4: number;
|
||||
|
||||
public calculateFootpoints(angles: number[]): number[][] {
|
||||
const footpoints: number[][] = [];
|
||||
|
||||
for (let i = 0; i < angles.length; i += 3) {
|
||||
const theta1 = angles[i];
|
||||
const theta2 = angles[i + 1];
|
||||
const theta3 = angles[i + 2];
|
||||
const footpoint = this.calculateFootpoint(theta1, theta2, theta3);
|
||||
footpoints.push(footpoint);
|
||||
}
|
||||
|
||||
return footpoints;
|
||||
}
|
||||
}
|
||||
constructor() {
|
||||
this.l1 = 50;
|
||||
this.l2 = 20;
|
||||
this.l3 = 120;
|
||||
this.l4 = 155;
|
||||
}
|
||||
|
||||
public calculateFootpoint(theta1: number, theta2: number, theta3: number): number[] {
|
||||
const { cos, sin } = Math;
|
||||
|
||||
const x =
|
||||
this.l1 * cos(theta1) +
|
||||
this.l2 * cos(theta1) +
|
||||
this.l3 * cos(theta1 + theta2) +
|
||||
this.l4 * cos(theta1 + theta2 + theta3);
|
||||
const y =
|
||||
this.l1 * sin(theta1) +
|
||||
this.l2 * sin(theta1) +
|
||||
this.l3 * sin(theta1 + theta2) +
|
||||
this.l4 * sin(theta1 + theta2 + theta3);
|
||||
const z = 0;
|
||||
|
||||
return [x, y, z];
|
||||
}
|
||||
|
||||
public calculateFootpoints(angles: number[]): number[][] {
|
||||
const footpoints: number[][] = [];
|
||||
|
||||
for (let i = 0; i < angles.length; i += 3) {
|
||||
const theta1 = angles[i];
|
||||
const theta2 = angles[i + 1];
|
||||
const theta3 = angles[i + 2];
|
||||
const footpoint = this.calculateFootpoint(theta1, theta2, theta3);
|
||||
footpoints.push(footpoint);
|
||||
}
|
||||
|
||||
return footpoints;
|
||||
}
|
||||
}
|
||||
|
||||
+273
-248
@@ -1,293 +1,318 @@
|
||||
import { Mesh,
|
||||
PerspectiveCamera,
|
||||
PlaneGeometry,
|
||||
Scene,
|
||||
ShadowMaterial,
|
||||
WebGLRenderer,
|
||||
AmbientLight,
|
||||
DirectionalLight,
|
||||
PCFSoftShadowMap,
|
||||
GridHelper,
|
||||
ArrowHelper,
|
||||
Vector3,
|
||||
LoaderUtils,
|
||||
Object3D,
|
||||
FogExp2,
|
||||
CanvasTexture,
|
||||
type ColorRepresentation,
|
||||
type WebGLRendererParameters,
|
||||
MeshPhongMaterial,
|
||||
EquirectangularReflectionMapping,
|
||||
ACESFilmicToneMapping,
|
||||
MathUtils,
|
||||
} from "three";
|
||||
import {
|
||||
Mesh,
|
||||
PerspectiveCamera,
|
||||
PlaneGeometry,
|
||||
Scene,
|
||||
ShadowMaterial,
|
||||
WebGLRenderer,
|
||||
AmbientLight,
|
||||
DirectionalLight,
|
||||
PCFSoftShadowMap,
|
||||
GridHelper,
|
||||
ArrowHelper,
|
||||
Vector3,
|
||||
LoaderUtils,
|
||||
Object3D,
|
||||
FogExp2,
|
||||
CanvasTexture,
|
||||
type ColorRepresentation,
|
||||
type WebGLRendererParameters,
|
||||
MeshPhongMaterial,
|
||||
EquirectangularReflectionMapping,
|
||||
ACESFilmicToneMapping,
|
||||
MathUtils
|
||||
} from 'three';
|
||||
import { Sky } from 'three/addons/objects/Sky.js';
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
||||
import { type URDFMimicJoint } from "urdf-loader";
|
||||
import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
import { type URDFMimicJoint } from 'urdf-loader';
|
||||
import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
|
||||
|
||||
export const addScene = () => new Scene()
|
||||
export const addScene = () => new Scene();
|
||||
|
||||
interface position {
|
||||
x?: number,
|
||||
y?: number,
|
||||
z?: number
|
||||
x?: number;
|
||||
y?: number;
|
||||
z?: number;
|
||||
}
|
||||
|
||||
interface light {
|
||||
color?: ColorRepresentation,
|
||||
intensity?: number
|
||||
color?: ColorRepresentation;
|
||||
intensity?: number;
|
||||
}
|
||||
|
||||
interface gridOptions {
|
||||
divisions?: number,
|
||||
size?: number,
|
||||
divisions?: number;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
interface arrowOptions {
|
||||
origin:position,
|
||||
direction:position,
|
||||
length?:number,
|
||||
color?:ColorRepresentation
|
||||
origin: position;
|
||||
direction: position;
|
||||
length?: number;
|
||||
color?: ColorRepresentation;
|
||||
}
|
||||
|
||||
type directionalLight = position & light
|
||||
type directionalLight = position & light;
|
||||
|
||||
type gridHelperOptions = gridOptions & position
|
||||
type gridHelperOptions = gridOptions & position;
|
||||
|
||||
function calculateCurrentSunElevation() {
|
||||
let now = new Date();
|
||||
let decimalTime = now.getHours() + now.getMinutes() / 60;
|
||||
let normalizedTime = ((decimalTime - 6) % 12) / 6 - 1;
|
||||
return 10 * Math.sin(normalizedTime * Math.PI);
|
||||
let now = new Date();
|
||||
let decimalTime = now.getHours() + now.getMinutes() / 60;
|
||||
let normalizedTime = (decimalTime % 12) / 6 - 1;
|
||||
return 10 * Math.sin(normalizedTime * Math.PI);
|
||||
}
|
||||
|
||||
export default class SceneBuilder {
|
||||
public scene: Scene
|
||||
public camera: PerspectiveCamera
|
||||
public ground: Mesh
|
||||
public renderer:WebGLRenderer
|
||||
public controls:OrbitControls
|
||||
public callback:Function
|
||||
public gridHelper: GridHelper;
|
||||
public model: Object3D<Event>
|
||||
public liveStreamTexture: CanvasTexture
|
||||
private fog:FogExp2
|
||||
private isLoaded:boolean = false
|
||||
highlightMaterial: any;
|
||||
public scene: Scene;
|
||||
public camera: PerspectiveCamera;
|
||||
public ground: Mesh;
|
||||
public renderer: WebGLRenderer;
|
||||
public controls: OrbitControls;
|
||||
public callback: Function;
|
||||
public gridHelper: GridHelper;
|
||||
public model: Object3D<Event>;
|
||||
public liveStreamTexture: CanvasTexture;
|
||||
private fog: FogExp2;
|
||||
private isLoaded: boolean = false;
|
||||
highlightMaterial: any;
|
||||
|
||||
constructor() {
|
||||
this.scene = new Scene()
|
||||
if (this.scene.environment?.mapping) {
|
||||
this.scene.environment.mapping = EquirectangularReflectionMapping;
|
||||
}
|
||||
return this
|
||||
}
|
||||
constructor() {
|
||||
this.scene = new Scene();
|
||||
if (this.scene.environment?.mapping) {
|
||||
this.scene.environment.mapping = EquirectangularReflectionMapping;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
public addRenderer = (parameters?: WebGLRendererParameters) => {
|
||||
this.renderer = new WebGLRenderer(parameters);
|
||||
this.renderer.outputColorSpace = "srgb";
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = PCFSoftShadowMap;
|
||||
this.renderer.toneMapping = ACESFilmicToneMapping;
|
||||
this.renderer.toneMappingExposure = 0.85;
|
||||
document.body.appendChild(this.renderer.domElement);
|
||||
return this
|
||||
}
|
||||
public addRenderer = (parameters?: WebGLRendererParameters) => {
|
||||
this.renderer = new WebGLRenderer(parameters);
|
||||
this.renderer.outputColorSpace = 'srgb';
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = PCFSoftShadowMap;
|
||||
this.renderer.toneMapping = ACESFilmicToneMapping;
|
||||
this.renderer.toneMappingExposure = 0.85;
|
||||
document.body.appendChild(this.renderer.domElement);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addSky = () => {
|
||||
const sky = new Sky();
|
||||
sky.scale.setScalar(450000);
|
||||
this.scene.add(sky);
|
||||
const effectController = {
|
||||
turbidity: 10,
|
||||
rayleigh: 3,
|
||||
mieCoefficient: 0.005,
|
||||
mieDirectionalG: 0.7,
|
||||
elevation: calculateCurrentSunElevation(),
|
||||
azimuth: 180,
|
||||
exposure: this.renderer.toneMappingExposure
|
||||
};
|
||||
const uniforms = sky.material.uniforms;
|
||||
uniforms['turbidity'].value = effectController.turbidity;
|
||||
uniforms['rayleigh'].value = effectController.rayleigh;
|
||||
uniforms['mieCoefficient'].value = effectController.mieCoefficient;
|
||||
uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
|
||||
this.renderer.toneMappingExposure = 0.5;
|
||||
const phi = MathUtils.degToRad( 90 - effectController.elevation );
|
||||
const theta = MathUtils.degToRad( effectController.azimuth );
|
||||
const sun = new Vector3();
|
||||
public addSky = () => {
|
||||
const sky = new Sky();
|
||||
sky.scale.setScalar(450000);
|
||||
this.scene.add(sky);
|
||||
const effectController = {
|
||||
turbidity: 10,
|
||||
rayleigh: 3,
|
||||
mieCoefficient: 0.005,
|
||||
mieDirectionalG: 0.7,
|
||||
elevation: calculateCurrentSunElevation(),
|
||||
azimuth: 180,
|
||||
exposure: this.renderer.toneMappingExposure
|
||||
};
|
||||
const uniforms = sky.material.uniforms;
|
||||
uniforms['turbidity'].value = effectController.turbidity;
|
||||
uniforms['rayleigh'].value = effectController.rayleigh;
|
||||
uniforms['mieCoefficient'].value = effectController.mieCoefficient;
|
||||
uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
|
||||
this.renderer.toneMappingExposure = 0.5;
|
||||
const phi = MathUtils.degToRad(90 - effectController.elevation);
|
||||
const theta = MathUtils.degToRad(effectController.azimuth);
|
||||
const sun = new Vector3();
|
||||
|
||||
sun.setFromSphericalCoords( 1, phi, theta );
|
||||
uniforms[ 'sunPosition' ].value.copy( sun );
|
||||
return this
|
||||
}
|
||||
sun.setFromSphericalCoords(1, phi, theta);
|
||||
uniforms['sunPosition'].value.copy(sun);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addPerspectiveCamera = (options:position) => {
|
||||
this.camera = new PerspectiveCamera();
|
||||
this.camera.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.scene.add(this.camera);
|
||||
return this
|
||||
}
|
||||
public addPerspectiveCamera = (options: position) => {
|
||||
this.camera = new PerspectiveCamera();
|
||||
this.camera.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.scene.add(this.camera);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addGroundPlane = (options:position) => {
|
||||
this.ground = new Mesh( new PlaneGeometry(), new ShadowMaterial({side: 2}));
|
||||
this.ground.rotation.x = -Math.PI / 2;
|
||||
this.ground.scale.setScalar(30);
|
||||
this.ground.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.ground.receiveShadow = true;
|
||||
this.scene.add(this.ground);
|
||||
return this
|
||||
}
|
||||
public addGroundPlane = (options: position) => {
|
||||
this.ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ side: 2 }));
|
||||
this.ground.rotation.x = -Math.PI / 2;
|
||||
this.ground.scale.setScalar(30);
|
||||
this.ground.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.ground.receiveShadow = true;
|
||||
this.scene.add(this.ground);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addOrbitControls = (minDistance:number, maxDistance:number) => {
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.controls.minDistance = minDistance;
|
||||
this.controls.maxDistance = maxDistance;
|
||||
this.controls.update();
|
||||
return this
|
||||
}
|
||||
public addOrbitControls = (minDistance: number, maxDistance: number) => {
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.controls.minDistance = minDistance;
|
||||
this.controls.maxDistance = maxDistance;
|
||||
this.controls.update();
|
||||
return this;
|
||||
};
|
||||
|
||||
public addAmbientLight = (options:light) => {
|
||||
const ambientLight = new AmbientLight(options.color, options.intensity);
|
||||
this.scene.add(ambientLight);
|
||||
return this
|
||||
}
|
||||
public addAmbientLight = (options: light) => {
|
||||
const ambientLight = new AmbientLight(options.color, options.intensity);
|
||||
this.scene.add(ambientLight);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addDirectionalLight = (options:directionalLight) => {
|
||||
const directionalLight = new DirectionalLight(options.color, options.intensity);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.setScalar(2048);
|
||||
directionalLight.shadow.mapSize.width = 1024;
|
||||
directionalLight.shadow.mapSize.height = 1024;
|
||||
directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
directionalLight.shadow.radius = 5
|
||||
this.scene.add(directionalLight);
|
||||
return this
|
||||
}
|
||||
public addDirectionalLight = (options: directionalLight) => {
|
||||
const directionalLight = new DirectionalLight(options.color, options.intensity);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.setScalar(2048);
|
||||
directionalLight.shadow.mapSize.width = 1024;
|
||||
directionalLight.shadow.mapSize.height = 1024;
|
||||
directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
directionalLight.shadow.radius = 5;
|
||||
this.scene.add(directionalLight);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addGridHelper = (options:gridHelperOptions) => {
|
||||
this.gridHelper = new GridHelper(options.size, options.divisions);
|
||||
this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.gridHelper.material.opacity = 0.2;
|
||||
this.gridHelper.material.depthWrite = false;
|
||||
this.gridHelper.material.transparent = true;
|
||||
this.scene.add(this.gridHelper);
|
||||
return this
|
||||
}
|
||||
public addGridHelper = (options: gridHelperOptions) => {
|
||||
this.gridHelper = new GridHelper(options.size, options.divisions);
|
||||
this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
|
||||
this.gridHelper.material.opacity = 0.2;
|
||||
this.gridHelper.material.depthWrite = false;
|
||||
this.gridHelper.material.transparent = true;
|
||||
this.scene.add(this.gridHelper);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addFogExp2 = (color:ColorRepresentation, density?:number) => {
|
||||
this.scene.fog = new FogExp2(color, density);
|
||||
return this
|
||||
}
|
||||
public addFogExp2 = (color: ColorRepresentation, density?: number) => {
|
||||
this.scene.fog = new FogExp2(color, density);
|
||||
return this;
|
||||
};
|
||||
|
||||
public handleResize = () => {
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
return this
|
||||
}
|
||||
public handleResize = () => {
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
return this;
|
||||
};
|
||||
|
||||
public addRenderCb = (callback:Function) => {
|
||||
this.callback = callback
|
||||
return this
|
||||
}
|
||||
public addRenderCb = (callback: Function) => {
|
||||
this.callback = callback;
|
||||
return this;
|
||||
};
|
||||
|
||||
public startRenderLoop = () => {
|
||||
this.renderer.setAnimationLoop(() => {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.handleRobotShadow()
|
||||
if(this.callback) this.callback()
|
||||
if(!this.liveStreamTexture) return
|
||||
});
|
||||
return this
|
||||
}
|
||||
public startRenderLoop = () => {
|
||||
this.renderer.setAnimationLoop(() => {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.handleRobotShadow();
|
||||
if (this.callback) this.callback();
|
||||
if (!this.liveStreamTexture) return;
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
public addArrowHelper = (options?:arrowOptions) => {
|
||||
const dir = new Vector3(options?.direction.x ?? 0, options?.direction.y ?? 0, options?.direction.z ?? 0);
|
||||
const origin = new Vector3(options?.origin.x ?? 0, options?.origin.y ?? 0, options?.origin.z ?? 0);
|
||||
const arrowHelper = new ArrowHelper( dir, origin, options?.length ?? 1.5, options?.color ?? 0xff0000 );
|
||||
this.scene.add( arrowHelper );
|
||||
return this
|
||||
}
|
||||
public addArrowHelper = (options?: arrowOptions) => {
|
||||
const dir = new Vector3(
|
||||
options?.direction.x ?? 0,
|
||||
options?.direction.y ?? 0,
|
||||
options?.direction.z ?? 0
|
||||
);
|
||||
const origin = new Vector3(
|
||||
options?.origin.x ?? 0,
|
||||
options?.origin.y ?? 0,
|
||||
options?.origin.z ?? 0
|
||||
);
|
||||
const arrowHelper = new ArrowHelper(
|
||||
dir,
|
||||
origin,
|
||||
options?.length ?? 1.5,
|
||||
options?.color ?? 0xff0000
|
||||
);
|
||||
this.scene.add(arrowHelper);
|
||||
return this;
|
||||
};
|
||||
|
||||
private setJointValue(jointName:string, angle:number) {
|
||||
if (!this.model) return;
|
||||
if (!this.model.joints[jointName]) return;
|
||||
this.model.joints[jointName].setJointValue(angle)
|
||||
}
|
||||
private setJointValue(jointName: string, angle: number) {
|
||||
if (!this.model) return;
|
||||
if (!this.model.joints[jointName]) return;
|
||||
this.model.joints[jointName].setJointValue(angle);
|
||||
}
|
||||
|
||||
isJoint = j => j.isURDFJoint && j.jointType !== 'fixed';
|
||||
isJoint = (j) => j.isURDFJoint && j.jointType !== 'fixed';
|
||||
|
||||
highlightLinkGeometry = (m: URDFMimicJoint, revert:boolean, material: MeshPhongMaterial) => {
|
||||
const traverse = c => {
|
||||
if (c.type === 'Mesh') {
|
||||
if (revert) {
|
||||
c.material = c.__origMaterial;
|
||||
delete c.__origMaterial;
|
||||
} else {
|
||||
c.__origMaterial = c.material;
|
||||
c.material = material;
|
||||
}
|
||||
}
|
||||
highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
|
||||
const traverse = (c) => {
|
||||
if (c.type === 'Mesh') {
|
||||
if (revert) {
|
||||
c.material = c.__origMaterial;
|
||||
delete c.__origMaterial;
|
||||
} else {
|
||||
c.__origMaterial = c.material;
|
||||
c.material = material;
|
||||
}
|
||||
}
|
||||
|
||||
if (c === m || !this.isJoint(c)) {
|
||||
for (let i = 0; i < c.children.length; i++) {
|
||||
const child = c.children[i];
|
||||
if (!child.isURDFCollider) {
|
||||
traverse(c.children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
traverse(m);
|
||||
};
|
||||
if (c === m || !this.isJoint(c)) {
|
||||
for (let i = 0; i < c.children.length; i++) {
|
||||
const child = c.children[i];
|
||||
if (!child.isURDFCollider) {
|
||||
traverse(c.children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
traverse(m);
|
||||
};
|
||||
|
||||
public addModel = (model: any) => {
|
||||
this.model = model
|
||||
this.scene.add(model)
|
||||
return this
|
||||
}
|
||||
public addModel = (model: any) => {
|
||||
this.model = model;
|
||||
this.scene.add(model);
|
||||
return this;
|
||||
};
|
||||
|
||||
public addDragControl = (updateAngle:any) => {
|
||||
const highlightColor = '#FFFFFF'
|
||||
const highlightMaterial =
|
||||
new MeshPhongMaterial({
|
||||
shininess: 10,
|
||||
color: highlightColor,
|
||||
emissive: highlightColor,
|
||||
emissiveIntensity: 0.25,
|
||||
});
|
||||
|
||||
const dragControls = new PointerURDFDragControls(this.scene, this.camera, this.renderer.domElement);
|
||||
dragControls.updateJoint = (joint:URDFMimicJoint, angle:number) => {
|
||||
this.setJointValue(joint.name, angle);
|
||||
updateAngle(joint.name, angle)
|
||||
};
|
||||
dragControls.onDragStart = () => this.controls.enabled = false;
|
||||
dragControls.onDragEnd = () => this.controls.enabled = true;
|
||||
dragControls.onHover = (joint:URDFMimicJoint) => this.highlightLinkGeometry(joint, false, highlightMaterial);
|
||||
dragControls.onUnhover = (joint:URDFMimicJoint) => this.highlightLinkGeometry(joint, true, highlightMaterial);
|
||||
public addDragControl = (updateAngle: any) => {
|
||||
const highlightColor = '#FFFFFF';
|
||||
const highlightMaterial = new MeshPhongMaterial({
|
||||
shininess: 10,
|
||||
color: highlightColor,
|
||||
emissive: highlightColor,
|
||||
emissiveIntensity: 0.25
|
||||
});
|
||||
|
||||
this.renderer.domElement.addEventListener('touchstart', (data) => dragControls._mouseDown(data.touches[0]));
|
||||
this.renderer.domElement.addEventListener('touchmove', (data) => dragControls._mouseMove(data.touches[0]))
|
||||
this.renderer.domElement.addEventListener('touchup', (data) => dragControls._mouseUp(data.touches[0]));
|
||||
return this
|
||||
}
|
||||
const dragControls = new PointerURDFDragControls(
|
||||
this.scene,
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
|
||||
this.setJointValue(joint.name, angle);
|
||||
updateAngle(joint.name, angle);
|
||||
};
|
||||
dragControls.onDragStart = () => (this.controls.enabled = false);
|
||||
dragControls.onDragEnd = () => (this.controls.enabled = true);
|
||||
dragControls.onHover = (joint: URDFMimicJoint) =>
|
||||
this.highlightLinkGeometry(joint, false, highlightMaterial);
|
||||
dragControls.onUnhover = (joint: URDFMimicJoint) =>
|
||||
this.highlightLinkGeometry(joint, true, highlightMaterial);
|
||||
|
||||
public toggleFog = () => {
|
||||
this.scene.fog = this.scene.fog ? null : this.fog;
|
||||
}
|
||||
this.renderer.domElement.addEventListener('touchstart', (data) =>
|
||||
dragControls._mouseDown(data.touches[0])
|
||||
);
|
||||
this.renderer.domElement.addEventListener('touchmove', (data) =>
|
||||
dragControls._mouseMove(data.touches[0])
|
||||
);
|
||||
this.renderer.domElement.addEventListener('touchup', (data) =>
|
||||
dragControls._mouseUp(data.touches[0])
|
||||
);
|
||||
return this;
|
||||
};
|
||||
|
||||
private handleRobotShadow = () => {
|
||||
if(this.isLoaded) return
|
||||
const intervalId = setInterval(() => {
|
||||
this.model?.traverse(c => c.castShadow = true);
|
||||
}, 10);
|
||||
setTimeout(() => {
|
||||
clearInterval(intervalId)
|
||||
}, 1000);
|
||||
this.isLoaded = true;
|
||||
}
|
||||
}
|
||||
public toggleFog = () => {
|
||||
this.scene.fog = this.scene.fog ? null : this.fog;
|
||||
};
|
||||
|
||||
private handleRobotShadow = () => {
|
||||
if (this.isLoaded) return;
|
||||
const intervalId = setInterval(() => {
|
||||
this.model?.traverse((c) => (c.castShadow = true));
|
||||
}, 10);
|
||||
setTimeout(() => {
|
||||
clearInterval(intervalId);
|
||||
}, 1000);
|
||||
this.isLoaded = true;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,72 +1,71 @@
|
||||
import { Result } from '$lib/utilities/result';
|
||||
|
||||
class FileService {
|
||||
private dbName = 'fileStorageDB';
|
||||
private dbVersion = 1;
|
||||
private storeName = 'files';
|
||||
private dbPromise: Promise<Result<IDBDatabase, string>>;
|
||||
private dbName = 'fileStorageDB';
|
||||
private dbVersion = 1;
|
||||
private storeName = 'files';
|
||||
private dbPromise: Promise<Result<IDBDatabase, string>>;
|
||||
|
||||
constructor() {
|
||||
this.dbPromise = this.openDatabase();
|
||||
}
|
||||
constructor() {
|
||||
this.dbPromise = this.openDatabase();
|
||||
}
|
||||
|
||||
private async openDatabase(): Promise<Result<IDBDatabase, string>> {
|
||||
return new Promise((resolve) => {
|
||||
const request = indexedDB.open(this.dbName, this.dbVersion);
|
||||
private async openDatabase(): Promise<Result<IDBDatabase, string>> {
|
||||
return new Promise((resolve) => {
|
||||
const request = indexedDB.open(this.dbName, this.dbVersion);
|
||||
|
||||
request.onerror = () => resolve(Result.err("Error opening database"));
|
||||
request.onerror = () => resolve(Result.err('Error opening database'));
|
||||
|
||||
request.onsuccess = () => resolve(Result.ok(request.result));
|
||||
request.onsuccess = () => resolve(Result.ok(request.result));
|
||||
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = request.result;
|
||||
if (!db.objectStoreNames.contains(this.storeName)) {
|
||||
db.createObjectStore(this.storeName);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = request.result;
|
||||
if (!db.objectStoreNames.contains(this.storeName)) {
|
||||
db.createObjectStore(this.storeName);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
|
||||
const dbResult = await this.dbPromise;
|
||||
if (dbResult.isErr()) {
|
||||
return Result.err("Database not initialized properly");
|
||||
}
|
||||
const db = dbResult.inner;
|
||||
const transaction = db.transaction(this.storeName, mode);
|
||||
return Result.ok(transaction.objectStore(this.storeName));
|
||||
}
|
||||
private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
|
||||
const dbResult = await this.dbPromise;
|
||||
if (dbResult.isErr()) {
|
||||
return Result.err('Database not initialized properly');
|
||||
}
|
||||
const db = dbResult.inner;
|
||||
const transaction = db.transaction(this.storeName, mode);
|
||||
return Result.ok(transaction.objectStore(this.storeName));
|
||||
}
|
||||
|
||||
public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
|
||||
const storeResult = await this.getStore("readwrite");
|
||||
if (storeResult.isErr()) {
|
||||
return Result.err("Failed to access object store for writing");
|
||||
}
|
||||
const store = storeResult.inner;
|
||||
public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
|
||||
const storeResult = await this.getStore('readwrite');
|
||||
if (storeResult.isErr()) {
|
||||
return Result.err('Failed to access object store for writing');
|
||||
}
|
||||
const store = storeResult.inner;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const request = store.put(file, key);
|
||||
request.onsuccess = () => resolve(Result.ok(request.result));
|
||||
request.onerror = () => resolve(Result.err("Failed to save file"));
|
||||
});
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
const request = store.put(file, key);
|
||||
request.onsuccess = () => resolve(Result.ok(request.result));
|
||||
request.onerror = () => resolve(Result.err('Failed to save file'));
|
||||
});
|
||||
}
|
||||
|
||||
public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
|
||||
const storeResult = await this.getStore("readonly");
|
||||
if (storeResult.isErr()) {
|
||||
return Result.err("Failed to access object store for reading");
|
||||
}
|
||||
const store = storeResult.inner;
|
||||
public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
|
||||
const storeResult = await this.getStore('readonly');
|
||||
if (storeResult.isErr()) {
|
||||
return Result.err('Failed to access object store for reading');
|
||||
}
|
||||
const store = storeResult.inner;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const request = store.get(key);
|
||||
|
||||
request.onsuccess = () =>
|
||||
resolve(request.result ? Result.ok(request.result) : Result.err("File content not found"))
|
||||
request.onerror = () =>
|
||||
resolve(Result.err("Failed to retrieve file"));
|
||||
});
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
const request = store.get(key);
|
||||
|
||||
request.onsuccess = () =>
|
||||
resolve(request.result ? Result.ok(request.result) : Result.err('File content not found'));
|
||||
request.onerror = () => resolve(Result.err('Failed to retrieve file'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new FileService();
|
||||
export default new FileService();
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export * from './file-service'
|
||||
export * from './socket-service'
|
||||
export { default as fileService } from './file-service';
|
||||
export { default as socketService } from './socket-service';
|
||||
|
||||
@@ -1,89 +1,100 @@
|
||||
import { Result, Ok } from '$lib/utilities';
|
||||
import { writable, type Writable } from 'svelte/store';
|
||||
|
||||
type WebsocketData = string | ArrayBufferLike | Blob | ArrayBufferView
|
||||
type WebsocketData = string | ArrayBufferLike | Blob | ArrayBufferView;
|
||||
|
||||
// TODO
|
||||
/**
|
||||
* MOVE THE store to a store.ts file
|
||||
*
|
||||
* Make an object on the class that encapsulate all the stores
|
||||
*
|
||||
* Make the handle message function look up the type and set the value, to simplify the code
|
||||
*/
|
||||
|
||||
class SocketService {
|
||||
public isConnected = writable(false);
|
||||
public angles = writable(new Int16Array(12).fill(0));
|
||||
public log = writable([] as string[]);
|
||||
public battery = writable({});
|
||||
public mpu = writable({ heading: 0 });
|
||||
public distances = writable({});
|
||||
public settings = writable({});
|
||||
public systemInfo = writable({} as number);
|
||||
public dataBuffer = writable(new Float32Array(13));
|
||||
public servoBuffer: Writable<Int16Array | number[]> = writable(new Int16Array(12));
|
||||
public data = writable();
|
||||
private socket!: WebSocket;
|
||||
|
||||
public isConnected = writable(false);
|
||||
public angles = writable(new Int16Array(12).fill(0));
|
||||
public log = writable([] as string[]);
|
||||
public battery = writable({});
|
||||
public mpu = writable({ heading: 0 });
|
||||
public distances = writable({});
|
||||
public settings = writable({});
|
||||
public systemInfo = writable({} as number);
|
||||
public dataBuffer = writable(new Float32Array(13));
|
||||
public servoBuffer: Writable<Int16Array | number[]> = writable(new Int16Array(12));
|
||||
public data = writable();
|
||||
private socket!: WebSocket;
|
||||
constructor() {}
|
||||
|
||||
constructor() {}
|
||||
public connect(url: string): void {
|
||||
this.socket = new WebSocket(url);
|
||||
this.socket.binaryType = 'arraybuffer';
|
||||
this.socket.onopen = () => this.handleConnected();
|
||||
this.socket.onclose = () => this.handleDisconnected();
|
||||
this.socket.onmessage = (event: unknown) => this.handleMessage(event);
|
||||
}
|
||||
|
||||
public connect(url: string): void {
|
||||
this.socket = new WebSocket(url);
|
||||
this.socket.binaryType = "arraybuffer";
|
||||
this.socket.onopen = () => this.handleConnected();
|
||||
this.socket.onclose = () => this.handleDisconnected();
|
||||
this.socket.onmessage = (event: unknown) => this.handleMessage(event);
|
||||
}
|
||||
public send(data: WebsocketData): Result<void, string> {
|
||||
if (this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(data);
|
||||
return Ok.void();
|
||||
}
|
||||
return Result.err('The connection is not open');
|
||||
}
|
||||
|
||||
public send(data: WebsocketData): Result<void, string> {
|
||||
if (this.socket.readyState === WebSocket.OPEN){
|
||||
this.socket.send(data)
|
||||
return Ok.void()
|
||||
}
|
||||
return Result.err("The connection is not open")
|
||||
}
|
||||
private handleConnected(): void {
|
||||
this.isConnected.set(true);
|
||||
}
|
||||
|
||||
private handleConnected(): void {
|
||||
this.isConnected.set(true);
|
||||
}
|
||||
private handleDisconnected(): void {
|
||||
this.isConnected.set(false);
|
||||
}
|
||||
|
||||
private handleDisconnected(): void {
|
||||
this.isConnected.set(false);
|
||||
}
|
||||
|
||||
private handleMessage(event: any): void {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
let buffer = new Int8Array(event.data);
|
||||
if (buffer.length === 44) {
|
||||
this.dataBuffer.set(new Float32Array(buffer.buffer));
|
||||
}
|
||||
} else {
|
||||
let data = event.data;
|
||||
try {
|
||||
data = JSON.parse(event.data);
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
switch (data.type) {
|
||||
case "angles":
|
||||
this.angles.set(data.angles);
|
||||
break;
|
||||
case "logs":
|
||||
this.log.set(data.logs);
|
||||
break;
|
||||
case "log":
|
||||
this.log.update(entries => { entries.push(data.log); return entries; });
|
||||
break;
|
||||
case "settings":
|
||||
this.settings.set(data.settings);
|
||||
case "info":
|
||||
this.systemInfo.set(data.info);
|
||||
break;
|
||||
case "mpu":
|
||||
this.mpu.set(data.mpu);
|
||||
break;
|
||||
case "distances":
|
||||
this.distances.set(data.distances);
|
||||
break;
|
||||
case "battery":
|
||||
this.battery.set(data.battery);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
private handleMessage(event: any): void {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
let buffer = new Int8Array(event.data);
|
||||
if (buffer.length === 44) {
|
||||
this.dataBuffer.set(new Float32Array(buffer.buffer));
|
||||
}
|
||||
} else {
|
||||
let data = event.data;
|
||||
try {
|
||||
data = JSON.parse(event.data);
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
switch (data.type) {
|
||||
case 'angles':
|
||||
this.angles.set(data.angles);
|
||||
break;
|
||||
case 'logs':
|
||||
this.log.set(data.logs);
|
||||
break;
|
||||
case 'log':
|
||||
this.log.update((entries) => {
|
||||
entries.push(data.log);
|
||||
return entries;
|
||||
});
|
||||
break;
|
||||
case 'settings':
|
||||
this.settings.set(data.settings);
|
||||
case 'info':
|
||||
this.systemInfo.set(data.info);
|
||||
break;
|
||||
case 'mpu':
|
||||
this.mpu.set(data.mpu);
|
||||
break;
|
||||
case 'distances':
|
||||
this.distances.set(data.distances);
|
||||
break;
|
||||
case 'battery':
|
||||
this.battery.set(data.battery);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new SocketService();
|
||||
export default new SocketService();
|
||||
|
||||
@@ -3,10 +3,15 @@ import { persistentStore } from '$lib/utilities';
|
||||
|
||||
export const emulateModel = writable(true);
|
||||
|
||||
export const input = writable({left:{x:0, y:0}, right:{x:0, y:0}, height:70, speed:0});
|
||||
export const input = writable({
|
||||
left: { x: 0, y: 0 },
|
||||
right: { x: 0, y: 0 },
|
||||
height: 70,
|
||||
speed: 0
|
||||
});
|
||||
|
||||
export const outControllerData = writable(new Uint8Array([0, 128, 128, 128, 128, 70, 0]));
|
||||
|
||||
export const jointNames = persistentStore("joint_names", [])
|
||||
export const jointNames = persistentStore('joint_names', []);
|
||||
|
||||
export const model = writable()
|
||||
export const model = writable();
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
export class throttler {
|
||||
private _throttlePause: boolean;
|
||||
constructor() {
|
||||
this._throttlePause = false;
|
||||
}
|
||||
throttle = (callback:Function, time:number) => {
|
||||
if (this._throttlePause) return;
|
||||
|
||||
this._throttlePause = true;
|
||||
setTimeout(() => {
|
||||
callback();
|
||||
this._throttlePause = false;
|
||||
}, time);
|
||||
};
|
||||
}
|
||||
private _throttlePause: boolean;
|
||||
constructor() {
|
||||
this._throttlePause = false;
|
||||
}
|
||||
throttle = (callback: Function, time: number) => {
|
||||
if (this._throttlePause) return;
|
||||
|
||||
this._throttlePause = true;
|
||||
setTimeout(() => {
|
||||
callback();
|
||||
this._throttlePause = false;
|
||||
}, time);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export * from './result'
|
||||
export * from './string-utilities'
|
||||
export * from './svelte-utilities'
|
||||
export * from './math-utilities'
|
||||
export * from './buffer-utilities'
|
||||
export * from './model-utilities'
|
||||
export * from './location-utilities'
|
||||
export * from './result';
|
||||
export * from './string-utilities';
|
||||
export * from './svelte-utilities';
|
||||
export * from './math-utilities';
|
||||
export * from './buffer-utilities';
|
||||
export * from './model-utilities';
|
||||
export * from './location-utilities';
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
const forWeb = import.meta.env.MODE === "WEB"
|
||||
const mock = import.meta.env.MODE === "MOCK"
|
||||
const forWeb = import.meta.env.MODE === 'WEB';
|
||||
const mock = import.meta.env.MODE === 'MOCK';
|
||||
|
||||
export const location = mock ? `${window.location.hostname}:2096` : "leika.local"
|
||||
export const location = mock ? `${window.location.hostname}:2096` : 'leika.local';
|
||||
|
||||
export const socketLocation = forWeb ? `wss://${window.location.hostname}:2096` : `ws://${location}`
|
||||
export const socketLocation = forWeb
|
||||
? `wss://${window.location.hostname}:2096`
|
||||
: `ws://${location}`;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export const lerp = (start: number, end: number, amt: number) => {
|
||||
return (1 - amt) * start + amt * end;
|
||||
return (1 - amt) * start + amt * end;
|
||||
};
|
||||
|
||||
@@ -1,32 +1,38 @@
|
||||
import { LoaderUtils } from "three";
|
||||
import URDFLoader, { type URDFRobot } from "urdf-loader"
|
||||
import { XacroLoader } from "xacro-parser"
|
||||
import { Result } from "$lib/utilities";
|
||||
import { LoaderUtils } from 'three';
|
||||
import URDFLoader, { type URDFRobot } from 'urdf-loader';
|
||||
import { XacroLoader } from 'xacro-parser';
|
||||
import { Result } from '$lib/utilities';
|
||||
|
||||
export const loadModelAsync = async (url:string):Promise<Result<[URDFRobot, string[]], string>> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xacroLoader = new XacroLoader();
|
||||
|
||||
xacroLoader.load(url, async (xml) => {
|
||||
const urdfLoader = new URDFLoader();
|
||||
|
||||
urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
|
||||
|
||||
try {
|
||||
const model = urdfLoader.parse(xml);
|
||||
model.rotation.x = -Math.PI / 2;
|
||||
model.rotation.z = Math.PI / 2;
|
||||
model.traverse(c => c.castShadow = true);
|
||||
model.updateMatrixWorld(true);
|
||||
model.scale.setScalar(10);
|
||||
const joints = Object.entries(model.joints)
|
||||
.filter(joint => joint[1].jointType !== 'fixed')
|
||||
.map(joint => joint[0])
|
||||
export const loadModelAsync = async (
|
||||
url: string
|
||||
): Promise<Result<[URDFRobot, string[]], string>> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xacroLoader = new XacroLoader();
|
||||
|
||||
resolve(Result.ok([model, joints]));
|
||||
} catch (error) {
|
||||
resolve(Result.err("Failed to load model", error));
|
||||
}
|
||||
}, (error) => reject(error));
|
||||
});
|
||||
}
|
||||
xacroLoader.load(
|
||||
url,
|
||||
async (xml) => {
|
||||
const urdfLoader = new URDFLoader();
|
||||
|
||||
urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
|
||||
|
||||
try {
|
||||
const model = urdfLoader.parse(xml);
|
||||
model.rotation.x = -Math.PI / 2;
|
||||
model.rotation.z = Math.PI / 2;
|
||||
model.traverse((c) => (c.castShadow = true));
|
||||
model.updateMatrixWorld(true);
|
||||
model.scale.setScalar(10);
|
||||
const joints = Object.entries(model.joints)
|
||||
.filter((joint) => joint[1].jointType !== 'fixed')
|
||||
.map((joint) => joint[0]);
|
||||
|
||||
resolve(Result.ok([model, joints]));
|
||||
} catch (error) {
|
||||
resolve(Result.err('Failed to load model', error));
|
||||
}
|
||||
},
|
||||
(error) => reject(error)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
export class Err<T, U> {
|
||||
#inner: T
|
||||
#exception?: U
|
||||
#inner: T;
|
||||
#exception?: U;
|
||||
|
||||
constructor(inner: T, exception?: U) {
|
||||
this.#inner = inner
|
||||
this.#exception = exception
|
||||
}
|
||||
constructor(inner: T, exception?: U) {
|
||||
this.#inner = inner;
|
||||
this.#exception = exception;
|
||||
}
|
||||
|
||||
get inner(): T {
|
||||
return this.#inner
|
||||
}
|
||||
get inner(): T {
|
||||
return this.#inner;
|
||||
}
|
||||
|
||||
get exception(): U | undefined {
|
||||
return this.#exception;
|
||||
}
|
||||
get exception(): U | undefined {
|
||||
return this.#exception;
|
||||
}
|
||||
|
||||
/**
|
||||
* Type guard for `Ok`
|
||||
* @returns `true` if `Ok`; `false` if `Err`
|
||||
*/
|
||||
isOk(): false {
|
||||
return false
|
||||
}
|
||||
/**
|
||||
* Type guard for `Ok`
|
||||
* @returns `true` if `Ok`; `false` if `Err`
|
||||
*/
|
||||
isOk(): false {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Type guard for `Err`
|
||||
* @returns `true` if `Err`; `false` if `Ok`
|
||||
*/
|
||||
isErr(): this is Err<T, U> {
|
||||
return true
|
||||
}
|
||||
/**
|
||||
* Type guard for `Err`
|
||||
* @returns `true` if `Err`; `false` if `Ok`
|
||||
*/
|
||||
isErr(): this is Err<T, U> {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an `Err`
|
||||
* @param inner
|
||||
* @returns `Err(inner)`
|
||||
*/
|
||||
static new<E, F>(inner: E, exception: F): Err<E, F> {
|
||||
return new Err<E, F>(inner, exception)
|
||||
}
|
||||
/**
|
||||
* Create an `Err`
|
||||
* @param inner
|
||||
* @returns `Err(inner)`
|
||||
*/
|
||||
static new<E, F>(inner: E, exception: F): Err<E, F> {
|
||||
return new Err<E, F>(inner, exception);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './err'
|
||||
export * from './ok'
|
||||
export * from './result'
|
||||
export * from './err';
|
||||
export * from './ok';
|
||||
export * from './result';
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
export class Ok<T> {
|
||||
#inner: T
|
||||
#inner: T;
|
||||
|
||||
constructor(inner: T) {
|
||||
this.#inner = inner
|
||||
}
|
||||
constructor(inner: T) {
|
||||
this.#inner = inner;
|
||||
}
|
||||
|
||||
get inner(): T {
|
||||
return this.#inner
|
||||
}
|
||||
get inner(): T {
|
||||
return this.#inner;
|
||||
}
|
||||
|
||||
/**
|
||||
* Type guard for `Ok`
|
||||
* @returns `true` if `Ok`; `false` if `Err`
|
||||
*/
|
||||
isOk(): this is Ok<T> {
|
||||
return true
|
||||
}
|
||||
/**
|
||||
* Type guard for `Ok`
|
||||
* @returns `true` if `Ok`; `false` if `Err`
|
||||
*/
|
||||
isOk(): this is Ok<T> {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Type guard for `Err`
|
||||
* @returns `true` if `Err`; `false` if `Ok`
|
||||
*/
|
||||
isErr(): false {
|
||||
return false
|
||||
}
|
||||
/**
|
||||
* Type guard for `Err`
|
||||
* @returns `true` if `Err`; `false` if `Ok`
|
||||
*/
|
||||
isErr(): false {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an `Ok`
|
||||
* @param inner
|
||||
* @returns `Ok(inner)`
|
||||
*/
|
||||
static new<T>(inner: T): Ok<T> {
|
||||
return new Ok<T>(inner)
|
||||
}
|
||||
/**
|
||||
* Create an `Ok`
|
||||
* @param inner
|
||||
* @returns `Ok(inner)`
|
||||
*/
|
||||
static new<T>(inner: T): Ok<T> {
|
||||
return new Ok<T>(inner);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an empty `Ok`
|
||||
* @returns `Ok(void)`
|
||||
*/
|
||||
static void(): Ok<void> {
|
||||
return new Ok(undefined)
|
||||
}
|
||||
/**
|
||||
* Create an empty `Ok`
|
||||
* @returns `Ok(void)`
|
||||
*/
|
||||
static void(): Ok<void> {
|
||||
return new Ok(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { Err } from './err'
|
||||
import { Ok } from './ok'
|
||||
import { Err } from './err';
|
||||
import { Ok } from './ok';
|
||||
|
||||
export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>
|
||||
export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>;
|
||||
|
||||
export namespace Result {
|
||||
/**
|
||||
* @returns `Ok<T>`
|
||||
*/
|
||||
export function ok<T = unknown>(value: T) {
|
||||
return Ok.new(value)
|
||||
}
|
||||
/**
|
||||
* @returns `Ok<T>`
|
||||
*/
|
||||
export function ok<T = unknown>(value: T) {
|
||||
return Ok.new(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns `Err<E, F>`
|
||||
*/
|
||||
export function err<E = unknown, F = unknown>(error: E, exception?: F) {
|
||||
return Err.new(error, exception)
|
||||
}
|
||||
/**
|
||||
* @returns `Err<E, F>`
|
||||
*/
|
||||
export function err<E = unknown, F = unknown>(error: E, exception?: F) {
|
||||
return Err.new(error, exception);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const humanFileSize = (size:number):string => {
|
||||
const units = ['B', 'kB', 'MB', 'GB', 'TB']
|
||||
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i];
|
||||
}
|
||||
export const humanFileSize = (size: number): string => {
|
||||
const units = ['B', 'kB', 'MB', 'GB', 'TB'];
|
||||
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i];
|
||||
};
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const persistentStore = (key:string, initialValue:any) => {
|
||||
const savedValue = JSON.parse(localStorage.getItem(key) as string);
|
||||
const data = savedValue !== null ? savedValue : initialValue;
|
||||
const store = writable(data);
|
||||
|
||||
store.subscribe(value => {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
});
|
||||
|
||||
return store;
|
||||
}
|
||||
export const persistentStore = (key: string, initialValue: any) => {
|
||||
const savedValue = JSON.parse(localStorage.getItem(key) as string);
|
||||
const data = savedValue !== null ? savedValue : initialValue;
|
||||
const store = writable(data);
|
||||
|
||||
store.subscribe((value) => {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
});
|
||||
|
||||
return store;
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<script lang="ts">
|
||||
import Stream from '$components/Views/Stream.svelte';
|
||||
import Model from '$components/Views/Model.svelte';
|
||||
import Model from '$components/Views/Model.svelte';
|
||||
import Controls from '$components/Controls.svelte';
|
||||
import { emulateModel } from '$lib/store';
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-center w-full h-full">
|
||||
{#if $emulateModel}
|
||||
<Model />
|
||||
{:else}
|
||||
<Stream />
|
||||
{/if}
|
||||
{#if $emulateModel}
|
||||
<Model />
|
||||
{:else}
|
||||
<Stream />
|
||||
{/if}
|
||||
<Controls />
|
||||
</div>
|
||||
|
||||
@@ -3,54 +3,63 @@
|
||||
import Info from '../components/settings/Info.svelte';
|
||||
import Log from '../components/settings/Log.svelte';
|
||||
import Configuration from '../components/settings/Configuration.svelte';
|
||||
import { Icon, Wifi, CommandLine, InformationCircle, BookOpen, AdjustmentsVertical, Cog6Tooth, Newspaper } from 'svelte-hero-icons';
|
||||
import {
|
||||
Icon,
|
||||
Wifi,
|
||||
CommandLine,
|
||||
InformationCircle,
|
||||
BookOpen,
|
||||
AdjustmentsVertical,
|
||||
Cog6Tooth,
|
||||
Newspaper
|
||||
} from 'svelte-hero-icons';
|
||||
import Calibration from '../components/settings/Calibration.svelte';
|
||||
|
||||
export const page = ""
|
||||
export const page = '';
|
||||
|
||||
const menu = [
|
||||
{
|
||||
title: 'Calibration',
|
||||
path: '/calibration',
|
||||
icon: AdjustmentsVertical,
|
||||
icon: AdjustmentsVertical,
|
||||
component: Calibration
|
||||
},
|
||||
{
|
||||
title: 'System info',
|
||||
title: 'System info',
|
||||
path: '/info',
|
||||
icon: InformationCircle,
|
||||
icon: InformationCircle,
|
||||
component: Info
|
||||
},
|
||||
{
|
||||
title: 'Log',
|
||||
{
|
||||
title: 'Log',
|
||||
path: '/log',
|
||||
icon: BookOpen,
|
||||
icon: BookOpen,
|
||||
component: Log
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
path: '/settings',
|
||||
icon: Cog6Tooth,
|
||||
component: Configuration
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
path: '/settings',
|
||||
icon: Cog6Tooth,
|
||||
component: Configuration
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="pt-14 flex h-full">
|
||||
<nav class="w-1/6 flex flex-col">
|
||||
{#each menu as link}
|
||||
<Link to={'/settings'+link.path}>
|
||||
<div class="px-4 py-2 flex gap-2 items-center">
|
||||
<Icon src={link.icon} size="24" />{link.title}
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/settings' + link.path}>
|
||||
<div class="px-4 py-2 flex gap-2 items-center">
|
||||
<Icon src={link.icon} size="24" />{link.title}
|
||||
</div>
|
||||
</Link>
|
||||
{/each}
|
||||
</nav>
|
||||
<main class="w-full h-full">
|
||||
<Router>
|
||||
{#each menu as link}
|
||||
<Route path={link.path} component={link.component}></Route>
|
||||
{/each}
|
||||
</Router>
|
||||
<Router>
|
||||
{#each menu as link}
|
||||
<Route path={link.path} component={link.component}></Route>
|
||||
{/each}
|
||||
</Router>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user