feat: make panels resizable, and udpate general css

alberto-abarzua · Nov 30, 2023 · 8d10352 · 8d10352
1 parent 3adb43c
commit 8d10352
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 92 deletions.
diff --git a/arm_docs/Dockerfile b/arm_docs/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20
+FROM node:20.2.0-alpine3.16
 
 # Create app directory
 WORKDIR /app/

diff --git a/arm_docs/docusaurus.config.js b/arm_docs/docusaurus.config.js
@@ -101,7 +101,6 @@ const config = {
         ],
       },
       footer: {
-        style: "dark",
         links: [
           {
             title: "Docs",

diff --git a/controller/src/ribot/utils/algebra.py b/controller/src/ribot/utils/algebra.py
@@ -101,21 +101,22 @@ def extract_euler_angles(R: np.ndarray) -> list[float]:
         raise ValueError("R must be a 3x3 matrix.")
 
     if R[2, 0] != 1 and R[2, 0] != -1:
-        pitch = -np.arcsin(R[2, 0])
 
-        roll = np.arctan2(R[2, 1] / np.cos(pitch), R[2, 2] / np.cos(pitch))
+        roll = np.arctan2(R[2, 1], R[2, 2])
+
+        pitch = -np.arcsin(R[2, 0])
 
-        yaw = np.arctan2(R[1, 0] / np.cos(pitch), R[0, 0] / np.cos(pitch))
+        yaw = np.arctan2(R[1, 0], R[0, 0])
 
         return [float(roll), float(pitch), float(yaw)]
     else:
         yaw = 0
         if R[2, 0] == -1:
             pitch = np.pi / 2.0
-            roll = yaw + np.arctan2(R[0, 1], R[0, 2])
+            roll = np.arctan2(R[0, 1], R[0, 2])
         else:
             pitch = -np.pi / 2.0
-            roll = -yaw + np.arctan2(-R[0, 1], -R[0, 2])
+            roll = np.arctan2(-R[0, 1], -R[0, 2])
 
         return [float(roll), float(pitch), float(yaw)]
 

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,11 +1,11 @@
-FROM node:20
+FROM node:20.2.0-alpine3.16
 
 WORKDIR /app
 
 COPY package.json .
 COPY package-lock.json .
 
-RUN npm install
+RUN npm install --verbose
 
 COPY . .
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,6 +46,7 @@
         "prettier": "^3.0.2",
         "prop-types": "^15.8.1",
         "rdndmb-html5-to-touch": "^8.0.3",
+        "re-resizable": "^6.9.11",
         "react": "18.2.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
@@ -54,6 +55,7 @@
         "react-dom": "18.2.0",
         "react-dropzone": "^14.2.3",
         "react-redux": "^8.1.2",
+        "react-resizable-panels": "^0.0.63",
         "react-router-dom": "^6.19.0",
         "redux-saga": "^1.2.3",
         "shadcn-ui": "^0.4.1",

diff --git a/frontend/src/components/actions/ActionsPanel.jsx b/frontend/src/components/actions/ActionsPanel.jsx
@@ -23,6 +23,7 @@ const ActionPanel = () => {
     const { toast } = useToast();
     const dispatch = useDispatch();
 
+    console.log('rendering action panel');
     const actionSlice = useSelector(state => state.actionList);
 
     const isHomed = useSelector(state => state.armPose.isHomed);

diff --git a/frontend/src/components/actions/BaseAction.jsx b/frontend/src/components/actions/BaseAction.jsx
@@ -124,11 +124,13 @@ const BaseAction = ({ icon, children, className, action, ...props }) => {
             <AutorenewIcon className="animate-spin text-4xl transition-all duration-300 group-hover:text-gray-600" />
         ) : (
             <div className="p-3" onMouseDown={e => e.stopPropagation()} ref={drag}>
-                <DragIndicatorIcon className="mx-3 scale-150 transform transition-all duration-300 hover:text-slate-300" />
+                <DragIndicatorIcon className="mx-2 -translate-x-1 scale-150 transform transition-all duration-300 hover:text-slate-300" />
             </div>
         )
     ) : (
-        <ErrorIcon className="scale-150 transform text-red-500 transition-all duration-300 group-hover:text-gray-600" />
+        <div className="tranform animate-bounce">
+            <ErrorIcon className="scale-[1.6] transform text-red-600 transition-all duration-300 group-hover:text-red-600" />
+        </div>
     );
 
     if (!isDragging) {
@@ -137,8 +139,8 @@ const BaseAction = ({ icon, children, className, action, ...props }) => {
                 <ContextMenuTrigger>
                     <div
                         className={`transform transition-all ${
-                            valid ? '' : 'bg-red-900'
-                        } duration-100 ${className} group relative flex w-full shrink-0 items-center justify-center space-x-4 overflow-hidden rounded-md px-6 py-3 text-white shadow`}
+                            valid ? '' : ' bg-opacity-70'
+                        } duration-100 ${className} group relative flex w-full shrink-0 items-center justify-center space-x-2 overflow-hidden rounded-md px-3 py-3 text-white shadow`}
                         {...props}
                         ref={ref}
                         data-handler-id={handlerId}
@@ -168,8 +170,8 @@ const BaseAction = ({ icon, children, className, action, ...props }) => {
                                         setMenuOpen(true);
                                     }}
                                 >
-                                    <div className="absolute -bottom-2 right-0 mt-10 flex cursor-pointer items-center justify-center rounded-tl-md p-3 text-white transition-all duration-300 hover:bg-gray-100 hover:text-gray-500">
-                                        <MoreHorizIcon className="relative -right-1  scale-150 transform" />
+                                    <div className="absolute bottom-0 right-0 flex cursor-pointer items-center justify-center rounded-tl-md p-1 px-2 text-white transition-all duration-300 hover:bg-gray-100 hover:text-gray-500">
+                                        <MoreHorizIcon className=" scale-150 transform" />
                                     </div>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>

diff --git a/frontend/src/components/controls/AxisControls.jsx b/frontend/src/components/controls/AxisControls.jsx
@@ -36,19 +36,19 @@ const AxisControls = () => {
     };
 
     return (
-        <div className="flex flex-wrap items-center gap-4 p-4">
-            <div className="flex flex-1 flex-col rounded-md bg-slate-200 p-4 shadow-md">
-                <div>
-                    <h3 className="mb-2 text-lg font-medium">Coordinates Control</h3>
-                </div>
-                <div className="w-2/3">
+        <div className="flex flex-wrap items-center gap-2 p-2">
+            <div className="flex flex-1 flex-col rounded-md bg-slate-200 p-2 shadow-md">
+                <div className="flex justify-between ">
+                    <h3 className="mb-2text-lg font-medium">Coordinates Control</h3>
+
                     <TextVariableInfo
                         label="Step Size"
                         value={coordsStep}
                         setValue={setCoordsStep}
                         infoText={'The amount the arm moves for coordinate changes'}
                     ></TextVariableInfo>
                 </div>
+
                 <div className="flex flex-row justify-center">
                     <MoveAxis
                         label="X"
@@ -71,11 +71,9 @@ const AxisControls = () => {
                 </div>
             </div>
 
-            <div className="flex flex-1 flex-col rounded-md bg-slate-200 p-4 shadow-md">
-                <div>
+            <div className="flex flex-1 flex-col rounded-md bg-slate-200 p-2 shadow-md">
+                <div className="flex justify-between ">
                     <h3 className="mb-2 text-lg font-medium">Angles Control</h3>
-                </div>
-                <div className="w-2/3">
                     <TextVariableInfo
                         label="Step Size"
                         value={anglesStep}

diff --git a/frontend/src/components/controls/JointsControls.jsx b/frontend/src/components/controls/JointsControls.jsx
@@ -18,19 +18,17 @@ const JointsControls = () => {
     };
 
     return (
-        <div className="flex w-fit flex-wrap items-center  gap-4 p-4">
+        <div className="flex w-fit flex-wrap items-center  gap-4 p-2">
             <div className="flex flex-1 flex-col rounded-md bg-slate-200 p-4 shadow-md">
-                <div>
+                <div className="flex w-1/2 justify-between">
                     <h3 className="mb-2 text-lg font-medium">Joint Controls</h3>
-                </div>
-                <div className="w-2/3">
                     <TextVariableInfo
                         label="Step Size"
                         value={angleStep}
                         setValue={setAngleStep}
                         infoText={'The amount each joint will move'}
                     ></TextVariableInfo>
-                </div>{' '}
+                </div>
                 <div className="flex flex-row justify-center gap-2">
                     {' '}
                     {currentAngles.map((_, index) => (

diff --git a/frontend/src/components/controls/MoveAxis.jsx b/frontend/src/components/controls/MoveAxis.jsx
@@ -12,11 +12,11 @@ const MoveAxis = ({ label, value, setValue, step_amount = 10 }) => {
     };
 
     return (
-        <div className="inline-flex h-36 w-24 flex-col items-center justify-start gap-2 px-1">
+        <div className="m-0 flex h-36 w-24 flex-col items-center justify-center gap-y-1 p-0">
             <div className="text-base font-bold text-black">{label}</div>
             <button
                 onClick={upValue}
-                className="flex h-7 w-20 flex-col items-center justify-center gap-2.5 rounded bg-slate-400 p-2.5 text-white shadow hover:bg-slate-600"
+                className="flex h-7 w-20 items-center  justify-center  rounded-sm bg-slate-400 p-1 text-white shadow hover:bg-slate-600"
             >
                 +
             </button>
@@ -27,7 +27,7 @@ const MoveAxis = ({ label, value, setValue, step_amount = 10 }) => {
             </div>
             <button
                 onClick={downValue}
-                className="flex h-7  w-20 flex-col items-center justify-center gap-2.5 rounded-sm bg-slate-400 p-2.5 text-white shadow hover:bg-slate-600"
+                className="flex h-7 w-20 items-center  justify-center  rounded-sm bg-slate-400 p-1 text-white shadow hover:bg-slate-600"
             >
                 -
             </button>

diff --git a/frontend/src/components/controls/ToolControls.jsx b/frontend/src/components/controls/ToolControls.jsx
@@ -14,19 +14,16 @@ const ToolControls = () => {
     const [toolStep, setToolStep] = useState(10);
 
     return (
-        <div className="flex flex-col  rounded-md bg-slate-200 p-4 shadow-md ">
-            <div>
+        <div className="flex flex-col  rounded-md bg-slate-200 p-2 shadow-md ">
+            <div className="flex flex-col justify-between">
                 <h3 className="mb-2 text-lg font-medium">Tool Control</h3>
-            </div>
-            <div className="w-2/3">
                 <TextVariableInfo
                     label="Step Size"
                     value={toolStep}
                     setValue={setToolStep}
                     infoText={'The amount the tool will move (not precise)'}
                 ></TextVariableInfo>
             </div>
-
             <div className="flex flex-row justify-center">
                 <MoveAxis
                     label="Tool Value"

diff --git a/frontend/src/components/general/layout/SideNav.jsx b/frontend/src/components/general/layout/SideNav.jsx
@@ -1,6 +1,7 @@
 import LogoSVG from '@/assets/logo.svg';
 import Tutorial from '@/components/general/tutorial/Tutorial';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import TurnSlightLeftIcon from '@mui/icons-material/TurnSlightLeft';
 import { useState } from 'react';
 
 const SideNav = () => {
@@ -14,7 +15,7 @@ const SideNav = () => {
 
     return (
         <>
-            <div className="fixed z-40 h-full w-16 bg-gray-100">
+            <div className="fixed h-full w-16 bg-gray-100">
                 <a href="https://ribot.dev">
                     <div className="relative left-0 top-0 mx-auto mt-8 flex h-12 w-14 items-center justify-center rounded-full bg-slate-700">
                         <img src={LogoSVG} alt="logo" className="w-20"></img>
@@ -30,6 +31,14 @@ const SideNav = () => {
                             wasTutorialShown ? '' : 'animate-bounce'
                         } `}
                     ></InfoOutlinedIcon>
+                    {!wasTutorialShown && (
+                        <div className="absolute bottom-9 left-8 flex gap-0 ">
+                            <TurnSlightLeftIcon className="translate-x-1 -rotate-90 scale-150 transform text-green-500"></TurnSlightLeftIcon>
+                            <p className=" flex items-center justify-center whitespace-nowrap rounded-sm  bg-green-500 px-2 text-xs text-white shadow-sm shadow-gray-600">
+                                Info!
+                            </p>
+                        </div>
+                    )}
                 </div>
             </div>