refactor(3d-barcodecontext): 🎉 update 3d functions

src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx → src/components/LayoutTabSwitcher/LayoutTabSwitcher.tsx

@@ -1,29 +1,31 @@
-import { ReactElement } from "react";
+import { Dispatch, ReactElement, SetStateAction } from "react";
 import Card from "../Card/Card";
 
-interface ICodeEditorSwitcher {
-  activeTabCodeEditor: number;
-  setActiveTabCodeEditor: any;
+interface ILayoutTabSwitcher {
+  tabs: string[];
+  activeTab: string;
+  setActiveTab: Dispatch<SetStateAction<any>>;
 }
 
-export default function CodeEditorSwitcher({
-  activeTabCodeEditor,
-  setActiveTabCodeEditor,
-}: ICodeEditorSwitcher): ReactElement {
+export default function LayoutTabSwitcher({
+  tabs,
+  activeTab,
+  setActiveTab,
+}: ILayoutTabSwitcher): ReactElement {
   return (
     <Card className="!h-fit flex-none p-3 !pb-0">
       <ul className=" flex w-full justify-center  gap-6 rounded ">
-        {["Cloud IDE", "Physical IDE"].map((tab: any, index: number) => {
+        {tabs?.map((tab: string, index: number) => {
           return (
             <li
               className="flex w-full cursor-pointer flex-col items-center gap-3"
-              onClick={() => setActiveTabCodeEditor(index + 1)}
+              onClick={() => setActiveTab(tab)}
               key={index}
             >
               <div
                 className={`flex min-w-max items-center gap-1 px-2 text-xs font-medium transition-all duration-500 hover:scale-90
                         ${
-                          index + 1 === activeTabCodeEditor
+                          tab === activeTab
                             ? "text-primary-500"
                             : "text-light-500"
                         } `}
@@ -32,11 +34,7 @@ export default function CodeEditorSwitcher({
               </div>
               <div
                 className={`h-[2px] w-full transition-all duration-500 
-                  ${
-                    index + 1 === activeTabCodeEditor
-                      ? "bg-primary-500"
-                      : "bg-light-100"
-                  } `}
+                  ${tab === activeTab ? "bg-primary-500" : "bg-light-100"} `}
               />
             </li>
           );

src/components/Machine3D/Machine3D.tsx

@@ -1,6 +1,6 @@
 import { Html, useCursor } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
-import React, { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import MachineBarcode from "../MachineBarcode/MachineBarcode";
 

src/components/ModeSwitcher/ModeSwitcher.tsx

@@ -10,19 +10,17 @@ export default function ModeSwitcher(): ReactElement {
   const dispatch = useAppDispatch();
 
   return (
-    <>
-      <Toggle
-        defaultChecked={applicationMode}
-        icons={false}
-        className={`toggle-color`}
-        disabled={!envSwitchableMode}
-        onChange={(e) => {
-          setTimeout(() => {
-            dispatch(setApplicationMode(e.target.checked));
-            window.location.reload();
-          }, 1000);
-        }}
-      />
-    </>
+    <Toggle
+      defaultChecked={applicationMode}
+      icons={false}
+      className={`toggle-color`}
+      disabled={!envSwitchableMode}
+      onChange={(e) => {
+        setTimeout(() => {
+          dispatch(setApplicationMode(e.target.checked));
+          window.location.reload();
+        }, 1000);
+      }}
+    />
   );
 }

src/components/Robot3D/Robot3D.tsx

@@ -12,7 +12,7 @@ export default function Robot3D() {
   useMemo(() => {
     const loader = new GLTFLoader();
     loader.load(
-      "https://github.com/robolaunch/ui-models/raw/main/robot.glb",
+      "/models/robot.glb",
       (gltf: any) => {
         console.log("Robot model loaded:", gltf);
         setRobotModel(gltf.scene);

src/contexts/BarcodeContext.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, useEffect, useState } from "react";
-import ROSLIB from "roslib";
+import { createContext, useEffect, useState } from "react";
 import useRobot from "../hooks/useRobot";
+import ROSLIB from "roslib";
 
 export const BarcodeContext: any = createContext<any>(null);
 
@@ -26,8 +26,10 @@ export default ({ children }: any) => {
     });
 
     ros &&
-      barcodes.subscribe(function (barcode: any) {
-        console.log("barcode", barcode);
+      barcodes.subscribe(function (message: any) {
+        const messageWithScannerId = JSON.parse(message?.data);
+
+        handleBarcodeSetters(messageWithScannerId);
       });
   }, [ros]);
 
@@ -40,7 +42,6 @@ export default ({ children }: any) => {
 
     ros &&
       poseTopic.subscribe(function (pose: any) {
-        console.log(pose);
         setRobotLocation({
           ...pose?.pose?.position,
           z: quaternionToEuler(pose?.pose?.orientation),
@@ -53,6 +54,40 @@ export default ({ children }: any) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ros]);
 
+  function handleBarcodeSetters(message: any) {
+    setBarcodeItems((prevBarcodeItems: any) => {
+      const updatedBarcodeItems = [...prevBarcodeItems];
+
+      const barcodeIndex = prevBarcodeItems.findIndex(
+        (barcodeItem: any) =>
+          barcodeItem.coordinates &&
+          Math.sqrt(
+            Math.pow(barcodeItem.coordinates.x - message?.coordinates.x, 2) +
+              Math.pow(barcodeItem.coordinates.y - message?.coordinates.y, 2),
+          ) < 0.02,
+      );
+
+      if (barcodeIndex !== -1) {
+        updatedBarcodeItems[barcodeIndex] = {
+          ...prevBarcodeItems[barcodeIndex],
+          barcodes: prevBarcodeItems[barcodeIndex].barcodes.map(
+            (barcode: any, index: number) =>
+              index === message?.scannerId ? message?.barcode : barcode,
+          ),
+        };
+      } else {
+        updatedBarcodeItems.push({
+          barcodes: Array.apply(null, Array(3)).map((_, index: number) =>
+            index === message?.scannerId ? message?.barcode : "",
+          ),
+          coordinates: message?.coordinates,
+        });
+      }
+
+      return updatedBarcodeItems;
+    });
+  }
+
   function quaternionToEuler(q: {
     x: number;
     y: number;

src/layouts/TaskManagementLayout.tsx

@@ -1,7 +1,7 @@
 import MissionManagement from "../pages/EnvironmentPage/TaskManagement/MissionManagement";
 import BarcodeManagement from "../pages/EnvironmentPage/TaskManagement/BarcodeManagement";
+import LayoutTabSwitcher from "../components/LayoutTabSwitcher/LayoutTabSwitcher";
 import { Fragment, ReactElement, useState } from "react";
-import Card from "../components/Card/Card";
 import useRobot from "../hooks/useRobot";
 
 export default function TaskManagementLayout(): ReactElement {
@@ -13,37 +13,11 @@ export default function TaskManagementLayout(): ReactElement {
 
   return (
     <Fragment>
-      <Card className="!h-fit flex-none p-3 !pb-0">
-        <ul className="flex  overflow-x-auto text-center">
-          {[{ name: "Mission Management" }, { name: "Barcode Management" }].map(
-            (tab: any, index: number) => {
-              return (
-                <div
-                  className="flex w-full cursor-pointer flex-col gap-3"
-                  onClick={() => setActiveTab(tab?.name)}
-                  key={index}
-                >
-                  <li
-                    className={`min-w-max px-2 text-xs font-medium transition-all duration-500 hover:scale-90  ${
-                      tab.name === activeTab
-                        ? "text-primary-500"
-                        : "text-light-500"
-                    } `}
-                  >
-                    {tab.name}
-                  </li>
-                  <div
-                    className={`h-[2px] w-full transition-all duration-500 
-                  ${
-                    tab.name === activeTab ? "bg-primary-500" : "bg-light-100"
-                  } `}
-                  />
-                </div>
-              );
-            },
-          )}
-        </ul>
-      </Card>
+      <LayoutTabSwitcher
+        tabs={["Mission Management", "Barcode Management"]}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+      />
       {(() => {
         switch (activeTab) {
           case "Mission Management":

src/pages/EnvironmentPage/CodeEditor/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import CodeEditorSwitcher from "../../../components/CodeEditorSwitcher/CodeEditorSwitcher";
+import LayoutTabSwitcher from "../../../components/LayoutTabSwitcher/LayoutTabSwitcher";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import ControlBar from "../../../components/ControlBar/ControlBar";
 import useCreateRobot from "../../../hooks/useCreateRobot";
@@ -8,7 +8,9 @@ import Card from "../../../components/Card/Card";
 import useRobot from "../../../hooks/useRobot";
 
 export default function CodeEditor(): ReactElement {
-  const [activeTabCodeEditor, setActiveTabCodeEditor] = useState<1 | 2>(1);
+  const [activeTabCodeEditor, setActiveTabCodeEditor] = useState<
+    "Virtual IDE" | "Physical IDE"
+  >("Virtual IDE");
 
   const handleFullScreen = useFullScreenHandle();
 
@@ -27,9 +29,10 @@ export default function CodeEditor(): ReactElement {
       }
     >
       {robotData.step1.services.physicalIde?.isEnabled && (
-        <CodeEditorSwitcher
-          activeTabCodeEditor={activeTabCodeEditor}
-          setActiveTabCodeEditor={setActiveTabCodeEditor}
+        <LayoutTabSwitcher
+          tabs={["Virtual IDE", "Physical IDE"]}
+          activeTab={activeTabCodeEditor}
+          setActiveTab={setActiveTabCodeEditor}
         />
       )}
       <Card loading className="relative">
@@ -43,15 +46,21 @@ export default function CodeEditor(): ReactElement {
                 title="Virtual IDE"
                 allow="clipboard-read"
                 className={`animate-fadeIn h-full w-full
-                ${activeTabCodeEditor === 2 && "absolute -top-[9999px]"}
+                ${
+                  activeTabCodeEditor === "Physical IDE" &&
+                  "absolute -top-[9999px]"
+                }
                 ${handleFullScreen?.active && "!h-screen"}`}
                 src={urls?.ide || robotData.step1.services.ide?.httpsEndpoint}
               />
               <iframe
                 title="Physical IDE"
                 allow="clipboard-read"
                 className={`animate-fadeIn h-full w-full
-                ${activeTabCodeEditor === 1 && "absolute -top-[9999px]"}
+                ${
+                  activeTabCodeEditor === "Virtual IDE" &&
+                  "absolute -top-[9999px]"
+                }
                 ${handleFullScreen?.active && "!h-screen"}`}
                 src={robotData.step1.services.physicalIde?.httpsEndpoint}
               />

src/toolkit/RobotSlice.ts

@@ -400,7 +400,7 @@ export const RobotSlice = createSlice({
     urls: {
       vdi: isProduction ? "" : "ws://localhost:8080/",
       ide: isProduction ? "" : "https://robolaunch.io",
-      ros: isProduction ? "" : "",
+      ros: isProduction ? "" : "ws://localhost:9090",
     },
   },
   reducers: {},