feat(version): release 0.30.3 version

robolaunch · Jan 12, 2024 · 7287478 · 7287478
1 parent ef64c17
commit 7287478
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",

diff --git a/public/css/style.css b/public/css/style.css
@@ -917,6 +917,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -945,10 +949,6 @@ video {
   margin-top: 0.1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -989,6 +989,10 @@ video {
   height: 7rem !important;
 }
 
+.\!h-6 {
+  height: 1.5rem !important;
+}
+
 .\!h-60 {
   height: 15rem !important;
 }
@@ -997,6 +1001,10 @@ video {
   height: 2rem !important;
 }
 
+.\!h-80 {
+  height: 20rem !important;
+}
+
 .\!h-9 {
   height: 2.25rem !important;
 }
@@ -1123,10 +1131,6 @@ video {
   height: 3px;
 }
 
-.h-\[40rem\] {
-  height: 40rem;
-}
-
 .h-\[42rem\] {
   height: 42rem;
 }
@@ -1157,16 +1161,28 @@ video {
   height: 100vh;
 }
 
-.\!h-7 {
-  height: 1.75rem !important;
+.max-h-\[40rem\] {
+  max-height: 40rem;
 }
 
-.\!h-6 {
-  height: 1.5rem !important;
+.\!max-h-full {
+  max-height: 100% !important;
 }
 
-.max-h-\[40rem\] {
-  max-height: 40rem;
+.\!max-h-fit {
+  max-height: -webkit-fit-content !important;
+  max-height: -moz-fit-content !important;
+  max-height: fit-content !important;
+}
+
+.\!max-h-min {
+  max-height: -webkit-min-content !important;
+  max-height: min-content !important;
+}
+
+.\!max-h-max {
+  max-height: -webkit-max-content !important;
+  max-height: max-content !important;
 }
 
 .min-h-4 {
@@ -1177,6 +1193,10 @@ video {
   min-height: 1.25rem;
 }
 
+.min-h-9 {
+  min-height: 2.25rem;
+}
+
 .min-h-\[40rem\] {
   min-height: 40rem;
 }
@@ -1185,10 +1205,6 @@ video {
   min-height: 100vh;
 }
 
-.min-h-9 {
-  min-height: 2.25rem;
-}
-
 .\!w-24 {
   width: 6rem !important;
 }
@@ -1394,10 +1410,6 @@ video {
   width: max-content;
 }
 
-.\!w-60 {
-  width: 15rem !important;
-}
-
 .w-80 {
   width: 20rem;
 }
@@ -1414,6 +1426,10 @@ video {
   min-width: 9rem;
 }
 
+.min-w-9 {
+  min-width: 2.25rem;
+}
+
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -1433,10 +1449,6 @@ video {
   min-width: max-content;
 }
 
-.min-w-9 {
-  min-width: 2.25rem;
-}
-
 .max-w-fit {
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
@@ -2407,6 +2419,10 @@ video {
   padding-left: 1.5rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -2447,14 +2463,6 @@ video {
   padding-top: 2rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2820,6 +2828,14 @@ video {
   opacity: 0.9;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .\!shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;

diff --git a/src/components/BarcodeFinder/BarcodeFinder.tsx b/src/components/BarcodeFinder/BarcodeFinder.tsx
@@ -1,7 +1,7 @@
 import { ReactElement, useState } from "react";
-import { PiMagnifyingGlassBold } from "react-icons/pi";
 import InputText from "../InputText/InputText";
 import useBarcode from "../../hooks/useBarcode";
+import { BsSearch } from "react-icons/bs";
 
 export default function BarcodeFinder(): ReactElement {
   const [isActiveFinder, setIsActiveFinder] = useState<boolean>(false);
@@ -10,13 +10,13 @@ export default function BarcodeFinder(): ReactElement {
 
   return (
     <div
-      className={`transition-500 flex items-center justify-between gap-4 rounded bg-light-100  ${
-        isActiveFinder ? "w-68 pr-2" : "w-fit"
+      className={`transition-500 flex cursor-pointer items-center justify-between gap-2 rounded border border-light-300 bg-light-50 opacity-60 hover:bg-light-100  ${
+        isActiveFinder ? "w-80 pr-2" : "w-fit"
       }`}
     >
       <div className="flex min-h-9 min-w-9 items-center justify-center">
-        <PiMagnifyingGlassBold
-          size={20}
+        <BsSearch
+          size={15}
           onClick={() => {
             setIsActiveFinder(!isActiveFinder);
             setFindBarcodeInput("");

diff --git a/src/components/BarcodeManagementButton/BarcodeManagementButton.tsx b/src/components/BarcodeManagementButton/BarcodeManagementButton.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+
+interface IBarcodeManagementButton {
+  icon: ReactElement;
+  onClick: () => void;
+}
+
+export default function BarcodeManagementButton({
+  icon,
+  onClick,
+}: IBarcodeManagementButton): ReactElement {
+  return (
+    <div
+      className="transition-500 flex h-9 w-9 cursor-pointer items-center justify-center rounded border border-light-300 bg-light-50 opacity-60 hover:bg-light-100"
+      onClick={onClick}
+    >
+      {icon}
+    </div>
+  );
+}
diff --git a/...s/BarcodeModeToggle/BarcodeModeToggle.tsx → ...entControls/BarcodeManagementControls.tsx b/...s/BarcodeModeToggle/BarcodeModeToggle.tsx → ...entControls/BarcodeManagementControls.tsx
@@ -3,6 +3,8 @@ import { BsFullscreen } from "react-icons/bs";
 import useBarcode from "../../hooks/useBarcode";
 import saveAs from "file-saver";
 import BarcodeFinder from "../BarcodeFinder/BarcodeFinder";
+import BarcodeManagementButton from "../BarcodeManagementButton/BarcodeManagementButton";
+import { PiExport } from "react-icons/pi";
 
 interface IBarcodeModeToggle {
   handleFullScreen: any;
@@ -26,25 +28,23 @@ export default function BarcodeModeToggle({
 
   return (
     <div className="absolute bottom-4 left-4 flex flex-col gap-4">
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      <BarcodeManagementButton
+        icon={
+          <span className="text-sm">{activeTab === "2D" ? "3D" : "2D"}</span>
+        }
         onClick={() => setActiveTab(activeTab === "2D" ? "3D" : "2D")}
-      >
-        {activeTab === "2D" ? "3D" : "2D"}
-      </div>
+      />
 
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      <BarcodeManagementButton
+        icon={<BsFullscreen size={20} />}
         onClick={handleFullScreen.enter}
-      >
-        <BsFullscreen size={20} />
-      </div>
-      <div
-        className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-light-100 transition-all duration-300"
+      />
+
+      <BarcodeManagementButton
+        icon={<PiExport size={20} />}
         onClick={handleExportJSON}
-      >
-        E
-      </div>
+      />
+
       <BarcodeFinder />
     </div>
   );

diff --git a/src/contexts/BarcodeContext.tsx b/src/contexts/BarcodeContext.tsx
@@ -1,6 +1,7 @@
 import { createContext, useEffect, useState } from "react";
 import useRobot from "../hooks/useRobot";
 import ROSLIB from "roslib";
+import { IBarcodeItem } from "../interfaces/barcodeInterfaces";
 
 export const BarcodeContext: any = createContext<any>(null);
 
@@ -17,7 +18,7 @@ export default ({ children }: any) => {
     y: 0,
     z: 0,
   });
-  const [barcodeItems, setBarcodeItems] = useState<any[]>([]);
+  const [barcodeItems, setBarcodeItems] = useState<IBarcodeItem[]>([]);
 
   useEffect(() => {
     const barcodes = new ROSLIB.Topic({
@@ -30,8 +31,9 @@ export default ({ children }: any) => {
       barcodes.subscribe(function ({ data }: any) {
         const message = JSON.parse(data);
 
-        setBarcodeItems((prevData: any) => [...prevData, message]);
+        barcodeClustering(message);
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ros]);
 
   useEffect(() => {
@@ -72,6 +74,55 @@ export default ({ children }: any) => {
     return Math.atan2(siny_cosp, cosy_cosp);
   }
 
+  function barcodeClustering(newBarcode: IBarcodeItem) {
+    const clusteringScale = 0.3;
+
+    setBarcodeItems((prevData: IBarcodeItem[]) => {
+      if (prevData.length > 0) {
+        const lastItemWaypoint = {
+          x: Math.abs(prevData[prevData.length - 1]?.waypoint?.x),
+          y: Math.abs(prevData[prevData.length - 1]?.waypoint?.y),
+          z: Math.abs(prevData[prevData.length - 1]?.waypoint?.z),
+        };
+
+        const newItemWaypoint = {
+          x: Math.abs(newBarcode?.waypoint?.x),
+          y: Math.abs(newBarcode?.waypoint?.y),
+          z: Math.abs(newBarcode?.waypoint?.z),
+        };
+
+        const diff = {
+          x: Math.abs(lastItemWaypoint.x - newItemWaypoint.x),
+          y: Math.abs(lastItemWaypoint.y - newItemWaypoint.y),
+          z: Math.abs(lastItemWaypoint.z - newItemWaypoint.z),
+        };
+
+        if (diff.x < clusteringScale && diff.y < clusteringScale) {
+          return [
+            ...prevData,
+            {
+              robotId: newBarcode.robotId,
+              fleetId: newBarcode.fleetId,
+              sensorId: newBarcode.sensorId,
+              barcode: newBarcode.barcode,
+              waypoint: {
+                x: prevData[prevData.length - 1]?.waypoint?.x,
+                y: prevData[prevData.length - 1]?.waypoint?.y,
+                z: newBarcode.waypoint.z,
+                yaw: prevData[prevData.length - 1]?.waypoint?.yaw,
+              },
+            },
+          ];
+        } else {
+          return [...prevData, newBarcode];
+        }
+      } else {
+        // If barcodeItems is initially empty, just return the newBarcode in an array
+        return [newBarcode];
+      }
+    });
+  }
+
   return (
     <BarcodeContext.Provider
       value={{

diff --git a/src/interfaces/barcodeInterfaces.ts b/src/interfaces/barcodeInterfaces.ts
@@ -0,0 +1,12 @@
+export interface IBarcodeItem {
+  robotId: string;
+  fleetId: string;
+  sensorId: string;
+  barcode: string;
+  waypoint: {
+    x: number;
+    y: number;
+    z: number;
+    yaw: number;
+  };
+}