new

Author: ANYhackerfort

public/dcv/dcv23.glb

@@ -1,7 +1,20 @@
-import React from "react"
-import { RouterProvider } from "react-router-dom"
-import routers from "./routes"
+import React from "react";
+import { RouterProvider } from "react-router-dom";
+import routers from "./routes";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { createTheme } from "@mui/material/styles";
 
-const App: React.FC = () => <RouterProvider router={routers} />
+const theme = createTheme({
+  palette: {
+    mode: "light", // Set default theme to light
+  },
+});
 
-export default App
+const App: React.FC = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <RouterProvider router={routers} />
+  </ThemeProvider>
+);
+
+export default App;

public/dials/dial_thermoemter6.glb

@@ -16,14 +16,15 @@ import VVR from "../labComponents/FrankHertzMainComp/VariableVoltageRegulator/ma
 import FloatingSquare from "../taskbar/mainBlock.tsx";
 import { CameraProvider } from "../contexts/cameraPositionContext.tsx";
 import Lab1Camera from "./cameras/lab1Camera.tsx";
+import { WebSocketProvider } from '../contexts/websocketContext';
 
 const GraphPaperComponent: React.FC = () => {
   return (
     <Suspense
       fallback={<CornerText position="top-left" text="Loading your Lab..." />}
     >
       <CameraProvider>
-
+      {/* <WebSocketProvider url="ws://localhost:8080/" labID="frankhertz1">  */}
       <div style={{ width: "100vw", height: "100vh", overflow: "hidden" }}>
         <CornerText position="top-left" text="Frank-Hertz Lab" />
         <FloatingSquare />
@@ -36,8 +37,6 @@ const GraphPaperComponent: React.FC = () => {
           }}
         >
           {/* Raycasting Component */}
-          <RaycastingComponent />
-
           {/* Camera and Thermometer */}
           <Lab1Camera/>
 
@@ -49,16 +48,21 @@ const GraphPaperComponent: React.FC = () => {
          {/* <ControlsComponent /> */}
 
           {/* Components: From Bottom to Top*/}
-          <Grid />
-          <TripleOutput position={[-22, -0.3, 22]} />
-          <CurrentInstrument position={[27, 0.5, 0]} />
-          <OakPlank />
-          <FrankHertzMain position={[5, 12, 0]}/>
-          <CurrentRegulator position={[40, 26, 5]}/>
-          <DVM position={[20, 30, 23]} scale={[1.7, 1.7, 1.85]} unique_id="DVM_2"/>
-          <VVR position={[-30, 24, 2]} />
-          <DVM position={[30, 80, 8]} scale={[1.7, 1.7, 1.85]} rotation={[0, Math.PI, 0]} unique_id="DVM_1"/>        </Canvas>
+          <WebSocketProvider url="ws://localhost:8080/" labID="frankhertz1">
+            <RaycastingComponent />
+            <Grid />
+            <TripleOutput position={[-22, -0.3, 22]} />
+            <CurrentInstrument position={[27, 0.5, 0]} />
+            <OakPlank />
+            <FrankHertzMain position={[5, 12, 0]}/>
+            <CurrentRegulator position={[40, 26, 5]}/>
+            <DVM position={[20, 30, 23]} scale={[1.7, 1.7, 1.85]} unique_id="DVM_2"/>
+            <VVR position={[-30, 24, 2]} />
+            <DVM position={[30, 80, 8]} scale={[1.7, 1.7, 1.85]} rotation={[0, Math.PI, 0]} unique_id="DVM_1"/>
+          </WebSocketProvider> 
+        </Canvas>
       </div>
+      {/* </WebSocketProvider> */}
       </CameraProvider>
     </Suspense>
   )

public/dials/dial_thermometer1.glb

@@ -0,0 +1,129 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+  PropsWithChildren,
+} from "react";
+
+interface WebSocketContextType {
+  sendMessage: (message: { type: string; payload?: any }) => void;
+  registerHandler: (type: string, handler: (payload: any) => void) => void;
+}
+
+// Create a WebSocket context
+const WebSocketContext = createContext<WebSocketContextType | null>(null);
+
+interface WebSocketProviderProps {
+  url: string;
+  labID: string; 
+}
+
+export const WebSocketProvider: React.FC<PropsWithChildren<WebSocketProviderProps>> = ({
+  url,
+  labID, 
+  children,
+}) => {
+  const socketRef = useRef<WebSocket | null>(null);
+  const handlersRef = useRef<Map<string, (payload: any) => void>>(new Map());
+
+  useEffect(() => {
+    const ws = new WebSocket(url);
+    socketRef.current = ws;
+
+    ws.onopen = async () => {
+      try {
+        // Make a request to the Django endpoint to get verification token and email
+        const response = await fetch("http://127.0.0.1:8000/auth/get_email_and_verification/", {
+          method: "POST",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ lab_id: labID }),
+        });
+    
+        if (!response.ok) {
+          throw new Error(`Django request failed: ${response.statusText}`);
+        }
+    
+        const data = await response.json();
+
+        ws.send(
+          JSON.stringify({
+            type: "initial_message",
+            payload: {
+              verification_token: data.verification_token,
+              user_email: data.user_email,
+              lab_id: data.lab_id,
+            },
+          })
+        );
+
+      } catch (error) {
+        console.error("Error fetching verification token and email:", error);
+      }
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        if (!event.data || event.data === "null") { // Check if the message is null or empty
+          console.log("state change")
+          return;
+        }
+        const { type, payload } = JSON.parse(event.data);
+        const handler = handlersRef.current.get(type);
+        if (handler) {
+          handler(payload); // Call the registered handler
+        } else {
+          console.warn(`No handler found for type: ${type}`);
+        }
+      } catch (err) {
+        console.error("Error parsing WebSocket message:", err);
+      }
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket Error:", error);
+    };
+
+    ws.onclose = () => {
+      console.log("WebSocket connection closed. Attempting to reconnect...");
+      setTimeout(() => {
+        const newWs = new WebSocket(url);
+        socketRef.current = newWs;
+      }, 3000);
+    };
+
+    return () => {
+      ws.close();
+    };
+  }, [url]);
+
+  const sendMessage = (message: { type: string; payload?: any }) => {
+    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
+      socketRef.current.send(JSON.stringify(message));
+    } else {
+      console.error("WebSocket not connected.");
+    }
+  };
+
+  const registerHandler = (type: string, handler: (payload: any) => void) => {
+    handlersRef.current.set(type, handler); // Update the ref directly
+  };
+
+  return (
+    <WebSocketContext.Provider value={{ sendMessage, registerHandler }}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};
+
+export const useWebSocket = () => {
+  const context = useContext(WebSocketContext);
+  if (!context) {
+    throw new Error("useWebSocket must be used within a WebSocketProvider");
+  }
+  return context;
+};

public/dials/dial_thermometer5.glb

@@ -19,7 +19,7 @@ const OvenKnob: React.FC<OvenKnobProps> = ({
   const groupRef = useRef<THREE.Group | null>(null)
 
   // Load GLTF
-  const gltf = useLoader(GLTFLoader, "/knobs/oven_knob1.glb")
+  const gltf = useLoader(GLTFLoader, "/knobs/vvrKnob22.glb")
   const [model, setModel] = useState<THREE.Object3D | null>(null)
 
   useEffect(() => {
@@ -28,6 +28,7 @@ const OvenKnob: React.FC<OvenKnobProps> = ({
 
       clonedScene.traverse((child) => {
         if ((child as THREE.Mesh).isMesh) {
+          console.log(child)
           const mesh = child as THREE.Mesh
           mesh.userData.unique_id = unique_id
           mesh.userData.type = "VVR_knob"

public/knobs/currentKnob.glb

@@ -1,8 +1,10 @@
 import React, { useRef, useEffect, useState } from "react"
+import { useFrame } from "@react-three/fiber"
 import { useLoader } from "@react-three/fiber"
-import { GLTFLoader } from "three-stdlib"
+import { GLTFLoader, PLYLoader } from 'three-stdlib';
 import * as THREE from "three"
 import OvenKnob from "./knob"
+import { useWebSocket } from "../../../contexts/websocketContext"
 
 interface VVRProps {
   position: [number, number, number]
@@ -20,7 +22,10 @@ const VVR: React.FC<VVRProps> = ({
   // Load GLTF
   const gltf = useLoader(GLTFLoader, "/vvr/vvr6.glb")
   const [model, setModel] = useState<THREE.Object3D | null>(null)
-
+  const { sendMessage, registerHandler } = useWebSocket(); // Use WebSocket context
+  const [angle, setAngle] = useState<number>(0);
+  const cooldownRef = useRef(0); // Time accumulator for cooldown
+  
   useEffect(() => {
     if (gltf.scene) {
       const clonedScene = gltf.scene.clone()
@@ -36,10 +41,27 @@ const VVR: React.FC<VVRProps> = ({
     }
   }, [gltf])
 
+  // useEffect(() => {
+  //   registerHandler("dial_vvr_1_angle", (payload) => {
+  //     console.log('received payload', payload)
+  //     setAngle(payload.angle);
+  //     console.log(payload.id)
+  //   });
+  // }, []);
+
+  // useFrame((_, delta) => {
+    // cooldownRef.current += delta; // Increment by elapsed time since last frame
+    // if (cooldownRef.current >= 1) { // 1-second cooldown
+      // sendMessage({ type: "dial_vvr_1_angle", payload: { get: true } });
+      // cooldownRef.current = 0; // Reset cooldown accumulator
+    // }
+  // });
+
+
   return (
     <group ref={groupRef} position={position} rotation={rotation} scale={scale}>
       {model && <primitive object={model} />}
-      <OvenKnob rotation={[0, Math.PI / 2.7, 0]} position={[5, 20.5, -7]} unique_id="oven_knob_1" scale={[0.9, 0.9, 0.9]}/>
+      <OvenKnob rotation={[0, 0, 0]} position={[5, 20.5, -7]} unique_id="oven_knob_1" scale={[0.9, 0.9, 0.9]}/>
     </group>
   )
 }

public/knobs/vvrKnob.fbx

@@ -17,7 +17,7 @@ const FrankHertzMain: React.FC<FrankHertzMainProps> = ({
   unique_id,
   scale = [0.5, 0.5, 0.5],
 }) => {
-  const gltf = useLoader(GLTFLoader, "/dcv/dcv4.glb")
+  const gltf = useLoader(GLTFLoader, "/dcv/dcv23.glb")
   const [model, setModel] = useState<THREE.Object3D | null>(null)
   const groupRef = useRef<THREE.Group | null>(null)
 

public/knobs/vvrKnob15.glb

@@ -41,7 +41,7 @@ const FrankHertzMain: React.FC<FrankHertzMainProps> = ({
   return (
     <group ref={groupRef} position={position} rotation={rotation} scale={scale}>
       {model && <primitive object={model} scale={[0.65, 0.65, 0.65]} />}
-      <CircularTherm position={[2, 53.5, -15]} />
+      <CircularTherm position={[4, 49.2, -13.5]} />
     </group>
   )
 }

public/knobs/vvrKnob17.glb

@@ -4,6 +4,7 @@ import { useLoader } from "@react-three/fiber"
 import { useState, useEffect } from "react"
 import { GLTFLoader } from "three-stdlib"
 import LightSwitch from "../../../clickables/VVR_switch/switchAndCasing"
+import RadioDial from "../../SmallInstruments/circularTherm/radioDial"
 
 interface TripleOutputProps {
   position: [number, number, number] // Position prop
@@ -42,6 +43,8 @@ const TripleOutput: React.FC<TripleOutputProps> = ({
       {model && <primitive object={model} scale={[1.25, 1.25, 1.25]} />}{" "}
       <LightSwitch position={[20, 17, 0.6]} unique_id = "triple_output_switch1" />
       <LightSwitch position={[-22, 17, 0.6]} unique_id = "triple_output_switch2" />
+      <RadioDial position={[11.69, 11.5, 0.01]} unique_id="tops_dial2" scale={[0.3, 0.3, 0.42]} rotation={[Math.PI / 2, 0.75, 0]}/>
+      <RadioDial position={[-11.46, 11.5, 0.01]} unique_id="tops_dial1" scale={[0.3, 0.3, 0.42]} rotation={[Math.PI / 2, 0.75, 0]}/>
     </group>
   )
 }