File size: 5,160 Bytes
6ce4ca6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!-- From https://github.com/brean/urdf-viewer -->

<script lang="ts">
	import type IUrdfJoint from "../interfaces/IUrdfJoint";
	import { T } from "@threlte/core";
	import UrdfLink from "./UrdfLink.svelte";
	import { Vector3 } from "three";
	import { Billboard, MeshLineGeometry, Text } from "@threlte/extras";
	import type IUrdfRobot from "../interfaces/IUrdfRobot";
	import { radiansToDegrees } from "@/utils";

	type Props = {
		robot: IUrdfRobot;
		joint: IUrdfJoint;
		showName?: boolean;
		nameHeight?: number;
		jointColor?: string;
		jointIndicatorColor?: string;
		showLine?: boolean;
		opacity?: number;
		isInteractive?: boolean;
		showVisual?: boolean;
		showCollision?: boolean;
		visualOpacity?: number;
		collisionOpacity?: number;
		collisionColor?: string;
		jointNames?: boolean;
		joints?: boolean;
	};

	let {
		robot,
		joint,
		showLine = false,
		nameHeight = 0.02,
		jointColor = "#000000",
		jointIndicatorColor = "#000000",
		opacity = 0.7,
		showName = false,
		showVisual = true,
		showCollision = true,
		visualOpacity = 1,
		collisionOpacity = 1,
		collisionColor = "#000000",
		jointNames = true,
		...restProps
	}: Props = $props();

	// Helper function to get current joint rotation value in degrees
	function getJointRotationValue(joint: IUrdfJoint): number {
		const axis = joint.axis_xyz || [0, 0, 1];
		const rotation = joint.rotation || [0, 0, 0];

		// Find the primary axis and get the rotation value
		for (let i = 0; i < 3; i++) {
			if (Math.abs(axis[i]) > 0.001) {
				return radiansToDegrees(rotation[i] / axis[i]);
			}
		}
		return 0;
	}

	// const ANGLE_RANGES = {
	// 	Elbow: [-196.6593, 1.2308],
	// 	Jaw: [-2.1978, 134.6813],
	// 	Pitch: [-1.0549, 211.8681],
	// 	Wrist_Pitch: [-137.8462, 72.0879],
	// 	Wrist_Roll: [-173.6264, 185.9341],
	// 	Rotation: [-80.3516, 70.6813],
	// };
	// // Look with the so-arm100.urdf lower limit and upper limit
	// // I think 1 in safety_controller = 66 degrees

	// function normalizeAngle(value: number, name: keyof typeof ANGLE_RANGES): number {
	// 	if (!(name in ANGLE_RANGES)) {
	// 		throw new Error(`Unknown angle name: ${name}`);
	// 	}

	// 	const [min, max] = ANGLE_RANGES[name];
	// 	const norm = (value - min) / (max - min); // → [0,1]
	// 	return norm * 200 - 100; // → [-100, 100]
	// }

	

	// function denormalizeAngle(normValue: number, name: keyof typeof ANGLE_RANGES): number {
	// 	if (!(name in ANGLE_RANGES)) {
	// 		throw new Error(`Unknown angle name: ${name}`);
	// 	}

	// 	const [min, max] = ANGLE_RANGES[name];
	// 	const norm = (normValue + 100) / 200; // → [0,1]
	// 	return norm * (max - min) + min;
	// }

	// function normalizeAngle2(value: number): number {
	// 	const limit_lower = joint.limit?.lower || 0;
	// 	const limit_upper = joint.limit?.upper || 0;
	// 	const min = limit_lower*66;
	// 	const max = limit_upper*66;
	// 	const norm = (value - min) / (max - min); // → [0,1]
	// 	return norm * 200 - 100; // → [-100, 100]
	// }

	// function denormalizeAngle2(normValue: number): number {
	// 	const limit_lower = joint.limit?.lower || 0;
	// 	const limit_upper = joint.limit?.upper || 0;
	// 	const min = limit_lower*66;
	// 	const max = limit_upper*66;
	// 	const norm = (normValue + 100) / 200; // → [0,1]
	// 	return norm * (max - min) + min;
	// }
</script>

{@html `<!-- Joint ${joint.name} (${joint.type}) -->`}
<!-- draw line from parent-frame to joint origin -->
{#if showLine}
	<T.Line>
		<MeshLineGeometry
			points={[
				new Vector3(0, 0, 0),
				new Vector3(joint.origin_xyz[0], joint.origin_xyz[1], joint.origin_xyz[2])
			]}
		/>
		<T.LineBasicMaterial color={jointColor} />
	</T.Line>
{/if}
<T.Group position={joint.origin_xyz} rotation={joint.origin_rpy}>
	<T.Group rotation={joint.rotation}>
		{#if joint.child}
			<UrdfLink
				{robot}
				link={joint.child}
				textScale={0.2}
				{showName}
				{showVisual}
				{showCollision}
				{visualOpacity}
				{collisionOpacity}
				{collisionColor}
				jointNames={true}
				joints={true}
				{jointColor}
				{jointIndicatorColor}
				{nameHeight}
				{showLine}
				opacity={1}
				isInteractive={true}
			/>
		{/if}

		{#if showLine}
			<T.Line>
				<MeshLineGeometry points={[new Vector3(0, 0, 0), new Vector3(0, -0.02, 0)]} />
				<T.LineBasicMaterial color={jointIndicatorColor} />
			</T.Line>

			<T.Mesh rotation={[Math.PI / 2, 0, 0]} {...restProps}>
				<T.CylinderGeometry args={[0.004, 0.004, 0.03]} />
				<T.MeshBasicMaterial
					color={jointColor}
					{opacity}
					transparent={opacity < 1.0}
				/>
			</T.Mesh>
		{/if}
	</T.Group>
</T.Group>

{#if showName}
	<Billboard
		position.x={joint.origin_xyz[0] + 0.04}
		position.y={joint.origin_xyz[1] + 0.01}
		position.z={joint.origin_xyz[2] + 0.03}
		renderOrder={999}
		frustumCulled={false}
	>
	<!-- text={joint.name + " " + getJointRotationValue(joint).toFixed(0) + "°" + " (" + normalizeAngle2(getJointRotationValue(joint)).toFixed(0) + ")"} -->
		<Text
			scale={nameHeight}
			color={jointColor}
			text={joint.name + " " + getJointRotationValue(joint).toFixed(0) + "°"}
			characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890°"
			renderOrder={999}
		></Text>
	</Billboard>
{/if}