Skip to content

Commit

Permalink
teleop webrtc relay (#531)
Browse files Browse the repository at this point in the history
* teleop webrtc relay

* stuff

* refactor a bunch of stuff

* wip

* asdf

* auto rotation

* auto rotation

* update teleop

* webrtc version

* add

* fix lint

* move more stuff around

* update api

* update types + fix tests

* missed a spot
  • Loading branch information
codekansas authored Nov 8, 2024
1 parent f19af5a commit 68aa7e0
Show file tree
Hide file tree
Showing 35 changed files with 844 additions and 521 deletions.
9 changes: 6 additions & 3 deletions frontend/src/components/auth/LoginForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ const LoginForm = () => {

const onSubmit: SubmitHandler<LoginType> = async (data: LoginType) => {
try {
const { data: response, error } = await auth.client.POST("/auth/login", {
body: data,
});
const { data: response, error } = await auth.client.POST(
"/auth/email/login",
{
body: data,
},
);

if (error) {
addErrorAlert(error);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/auth/SignupForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
}

try {
const { error } = await auth.client.POST("/auth/signup", {
const { error } = await auth.client.POST("/auth/email/signup", {
body: {
signup_token_id: signupTokenId,
email: data.email,
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/auth/SignupWithEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,14 @@ const SignupWithEmail = () => {
});

const onSubmit = async ({ email }: EmailSignupType) => {
const { data, error } = await auth.client.POST("/email/signup/create", {
body: {
email,
const { data, error } = await auth.client.POST(
"/auth/email/signup/create",
{
body: {
email,
},
},
});
);

if (error) {
addErrorAlert(error);
Expand Down
88 changes: 74 additions & 14 deletions frontend/src/components/files/URDFRenderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
FaCompress,
FaExpand,
FaPlay,
FaSync,
FaUndo,
} from "react-icons/fa";

Expand All @@ -29,14 +30,6 @@ interface URDFInfo {

type Theme = "light" | "dark";

interface Props {
urdfContent: string;
files: UntarredFile[];
useControls?: boolean;
showWireframe?: boolean;
supportedThemes?: Theme[];
}

interface ThemeColors {
background: string;
text: string;
Expand All @@ -60,12 +53,22 @@ const getThemeColors = (theme: Theme): ThemeColors => {
}
};

interface Props {
urdfContent: string;
files: UntarredFile[];
useControls?: boolean;
showWireframe?: boolean;
supportedThemes?: Theme[];
overrideColor?: string | null;
}

const URDFRenderer = ({
urdfContent,
files,
useControls = true,
showWireframe = false,
supportedThemes = ["light", "dark"],
overrideColor = null,
}: Props) => {
const containerRef = useRef<HTMLDivElement>(null);
const sceneRef = useRef<THREE.Scene | null>(null);
Expand All @@ -91,6 +94,9 @@ const URDFRenderer = ({
const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
const controlsRef = useRef<OrbitControls | null>(null);

// Add new state/refs for auto-rotation
const [isAutoRotating, setIsAutoRotating] = useState(false);

useEffect(() => {
const handleFullScreenChange = () => {
const isNowFullScreen = !!document.fullscreenElement;
Expand All @@ -115,7 +121,7 @@ const URDFRenderer = ({
metalness: 0.4,
roughness: 0.5,
wireframe: isWireframe,
color: originalColor,
color: overrideColor ? new THREE.Color(overrideColor) : originalColor,
});
}
});
Expand Down Expand Up @@ -184,6 +190,7 @@ const URDFRenderer = ({
controlsRef.current = controls;
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.autoRotateSpeed = 1.0;

scene.children.forEach((child) => {
if (child instanceof THREE.Light) {
Expand Down Expand Up @@ -287,11 +294,14 @@ const URDFRenderer = ({

// Setup the animation loop.
const animate = () => {
requestAnimationFrame(animate);
const animationId = requestAnimationFrame(animate);
controls.update();

renderer.render(scene, camera);
return animationId;
};
animate();

const animationId = animate();

// Handle window resizing.
const handleResize = () => {
Expand Down Expand Up @@ -326,11 +336,37 @@ const URDFRenderer = ({
updateMaterials();

return () => {
if (animationId) {
cancelAnimationFrame(animationId);
}

scene.traverse((object) => {
if (object instanceof THREE.Mesh) {
if (object.geometry) {
object.geometry.dispose();
}
if (object.material) {
if (Array.isArray(object.material)) {
object.material.forEach((material) => material.dispose());
} else {
object.material.dispose();
}
}
}
});

if (renderer) {
renderer.dispose();
}

if (containerRef.current) {
containerRef.current.removeChild(renderer.domElement);
}
if (controlsRef.current) {
controlsRef.current.autoRotate = false;
controlsRef.current.dispose();
}
window.removeEventListener("resize", handleResize);
rendererRef.current = null;
document.removeEventListener("fullscreenchange", handleFullScreenChange);
};
}, [urdfContent, files]);
Expand Down Expand Up @@ -360,7 +396,7 @@ const URDFRenderer = ({

const startPositions = jointControls.map((joint) => joint.value);
const startTime = Date.now();
const duration = 3000; // Changed from 10000 to 3000 (3 seconds)
const duration = 3000;

const animate = () => {
const elapsedTime = Date.now() - startTime;
Expand All @@ -378,15 +414,25 @@ const URDFRenderer = ({
if (progress < 1) {
animationRef.current = requestAnimationFrame(animate);
} else {
// Reset to original positions
jointControls.forEach((_joint, index) => {
handleJointChange(index, startPositions[index]);
});
setIsCycling(false);
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
animationRef.current = null;
}
}
};

animationRef.current = requestAnimationFrame(animate);

return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
animationRef.current = null;
}
};
}, [jointControls, handleJointChange]);

const resetJoints = useCallback(() => {
Expand All @@ -408,6 +454,14 @@ const URDFRenderer = ({
}
}, []);

const toggleAutoRotate = useCallback(() => {
const newIsAutoRotating = !isAutoRotating;
if (controlsRef.current) {
controlsRef.current.autoRotate = newIsAutoRotating;
}
setIsAutoRotating(newIsAutoRotating);
}, [isAutoRotating]);

return (
<div
ref={parentRef}
Expand All @@ -426,6 +480,12 @@ const URDFRenderer = ({
>
<FaChevronUp />
</button>
<button
onClick={toggleAutoRotate}
className="bg-purple-500 hover:bg-purple-600 text-white font-bold w-8 h-8 rounded-full shadow-md flex items-center justify-center"
>
<FaSync className={isAutoRotating ? "animate-pulse" : ""} />
</button>
<button
onClick={toggleFullScreen}
className={
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pages/EmailSignup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";

type GetEmailSignUpTokenResponse =
paths["/email/signup/get/{id}"]["get"]["responses"][200]["content"]["application/json"];
paths["/auth/email/signup/get/{id}"]["get"]["responses"][200]["content"]["application/json"];

const EmailSignup = () => {
const navigate = useNavigate();
Expand All @@ -28,7 +28,7 @@ const EmailSignup = () => {

try {
const { data, error } = await auth.client.GET(
"/email/signup/get/{id}",
"/auth/email/signup/get/{id}",
{
params: {
path: { id },
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/pages/Logout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Logout = () => {

useEffect(() => {
(async () => {
const { error } = await auth.client.DELETE("/auth/logout");
const { error } = await auth.client.DELETE("/auth/api/logout");
if (error) {
addErrorAlert(error);
} else {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/terminal/TerminalRobotModel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const TerminalRobotModel = ({ listingId }: Props) => {
supportedThemes={["dark"]}
showWireframe={true}
useControls={false}
overrideColor={"#00ff00"}
/>
);
};
Expand Down
Loading

0 comments on commit 68aa7e0

Please sign in to comment.