Spaces:
Running
Running
File size: 2,495 Bytes
6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<script lang="ts">
import type { Robot } from "../Robot.svelte.js";
interface Props {
robot: Robot;
}
let { robot }: Props = $props();
const joints = $derived(robot.jointArray);
const isManualControlEnabled = $derived(robot.isManualControlEnabled);
function updateJoint(name: string, value: number) {
if (!isManualControlEnabled) return;
robot.updateJoint(name, value);
}
</script>
<div class="space-y-4 rounded-lg border border-slate-600 bg-slate-800 p-4">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-slate-100">
Robot Controls - {robot.id}
</h3>
<div class="flex items-center gap-2">
{#if isManualControlEnabled}
<span class="text-sm text-green-400">Manual Control</span>
{:else}
<span class="text-sm text-orange-400">External Control</span>
{/if}
</div>
</div>
<div class="space-y-4">
{#each joints as joint}
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-slate-200">{joint.name}</span>
<span class="text-sm text-slate-400">
{joint.value.toFixed(1)}%
</span>
</div>
<div class="flex items-center gap-4">
{#if joint.name.toLowerCase() === "jaw" || joint.name.toLowerCase() === "gripper"}
<span class="w-12 text-xs text-slate-400">0% (closed)</span>
<input
type="range"
min="0"
max="100"
step="1"
value={joint.value}
disabled={!isManualControlEnabled}
oninput={(e) => updateJoint(joint.name, parseFloat(e.currentTarget.value))}
class="h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50"
/>
<span class="w-12 text-xs text-slate-400">100% (open)</span>
{:else}
<span class="w-8 text-xs text-slate-400">-100%</span>
<input
type="range"
min="-100"
max="100"
step="1"
value={joint.value}
disabled={!isManualControlEnabled}
oninput={(e) => updateJoint(joint.name, parseFloat(e.currentTarget.value))}
class="h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50"
/>
<span class="w-8 text-xs text-slate-400">+100%</span>
{/if}
</div>
{#if joint.limits}
<div class="text-xs text-slate-500">
URDF limits: {joint.limits.lower}° to {joint.limits.upper}°
</div>
{/if}
</div>
{/each}
</div>
</div>
|