diff --git a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx index 41f1d15..be8c561 100644 --- a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx +++ b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx @@ -266,7 +266,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone return ( <> {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && ( - + [p.x, p.y, p.z] as [number, number, number])} color="green" @@ -278,6 +278,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone {/* Green ring */} @@ -285,6 +286,42 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone + {/* Markers at 90°, 180°, 270°, 360° */} + {[90, 180, 270, 360].map((degree, index) => { + const rad = ((degree) * Math.PI) / 180; + const x = CIRCLE_RADIUS * Math.cos(rad); + const z = CIRCLE_RADIUS * Math.sin(rad); + const y = 0; // same plane as the ring (Y axis) + + return ( + + + + + ); + })} + + {[90, 180, 270, 360].map((degree, index) => { + const rad = ((degree) * Math.PI) / 180; + const x = CIRCLE_RADIUS * Math.cos(rad); + const z = CIRCLE_RADIUS * Math.sin(rad); + const y = 0.15; // lift the text slightly above the ring + + return ( + + {degree}° + + ); + })} + + diff --git a/app/src/modules/visualization/widgets/floating/DistanceLines.tsx b/app/src/modules/visualization/widgets/floating/DistanceLines.tsx index 62cfd3b..35d6943 100644 --- a/app/src/modules/visualization/widgets/floating/DistanceLines.tsx +++ b/app/src/modules/visualization/widgets/floating/DistanceLines.tsx @@ -41,7 +41,7 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { transform: "translate(-50%,0%)", }} > - {obj.position.top}px + {obj.position.top.toFixed(1)}px )} @@ -67,7 +67,7 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { transform: "translate(-50%,0%)", }} > - {obj.position.bottom}px + {obj.position.bottom.toFixed(1)}px )} @@ -93,7 +93,7 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { transform: "translate(0,-50%)", }} > - {obj.position.left}px + {obj.position.left.toFixed(1)}px )} @@ -119,7 +119,7 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { transform: "translate(0,-50%)", }} > - {obj.position.right}px + {obj.position.right.toFixed(1)}px )} diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index e01af76..bb43230 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -440,7 +440,7 @@ path { stroke: var(--text-button-color); - strokeWidth: 1.3; + stroke-width: 1.3; } } } @@ -710,7 +710,7 @@ path { stroke: var(--accent-color); - strokeWidth: 1.5px; + stroke-width: 1.5px; } &:hover { @@ -1397,14 +1397,10 @@ .skeleton-wrapper { display: flex; - - .skeleton-content {} - .asset-name { width: 40%; height: 10px; } - .asset { width: 100%; height: 100%; @@ -1417,8 +1413,7 @@ .sidebar-left-wrapper, .sidebar-right-wrapper { height: calc(50vh + 150px); - overflow-y: hidden; - transition: height 0.4s ease-in-out; + transition: height 0.2s ease-in-out; } .sidebar-left-wrapper.closed, diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index b3eafc2..a127ec2 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -65,7 +65,6 @@ overflow: auto; max-width: calc(100% - 500px); - // min-width: 150px; z-index: 3; transform: translate(-50%, -10%); pointer-events: all; @@ -431,7 +430,7 @@ path { stroke: #f65648; - strokewidth: 1.3; + stroke-width: 1.3; } } }