feat: 시연 위한 guideline 제거

DDD-Community · Aug 3, 2024 · 9bc36ed · 9bc36ed
1 parent d441630
commit 9bc36ed
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 40 deletions.
diff --git a/src/components/ControlPanel.tsx b/src/components/ControlPanel.tsx
@@ -7,7 +7,7 @@ interface ControlPanelProps {
 export default function ControlPanel(props: ControlPanelProps) {
   const { onChangeTranslation } = props
   return (
-    <div>
+    <div style={{display : 'none'}}>
       <div>
         <div>좌우 이동</div>
         <input id="horizontal" type="range" min={-100} max={100} onChange={onChangeTranslation}></input>

diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx
@@ -14,7 +14,7 @@ const PoseDetector: React.FC = () => {
   const [isTextNeck, setIsTextNeck] = useState<boolean | null>(null)
   const [isModelLoaded, setIsModelLoaded] = useState<boolean>(false)
   const [mode, setMode] = useState<string>("snapshot")
-  const [canInit, setCanInit] = useState<boolean>(false)
+  const [, setCanInit] = useState<boolean>(false)
   const [isSnapSaved, setIsSnapSaved] = useState<boolean>(false)
   const modelRef = useRef<any>(null)
   const snapRef = useRef<pose[] | null>(null)
@@ -70,15 +70,11 @@ const PoseDetector: React.FC = () => {
     await window.ml5.setBackend("webgl")
   }
 
-  const canInitCallback = (canInit: boolean) => {
-    setCanInit(canInit)
-  }
-
   const detect = useCallback(
     (results: pose[]): void => {
       resultRef.current = results
       if (canvasRef.current) {
-        drawPose(results, canvasRef.current, dx.current, dy.current, scale.current, canInitCallback, !!snapRef.current)
+        drawPose(results, canvasRef.current, dx.current, dy.current, scale.current)
       }
       if (snapRef.current) {
         const _slope = detectSlope(snapRef.current, results, mode === "snapshot")
@@ -212,8 +208,7 @@ const PoseDetector: React.FC = () => {
                       paddingTop: "5px",
                     }}
                   >
-                    {canInit ? (
-                      isSnapSaved ? (
+                    {isSnapSaved ? (
                         <button
                           className="rounded bg-blue-500 px-4 py-2 font-bold text-white"
                           onClick={initializePoseMonitoring}
@@ -224,12 +219,7 @@ const PoseDetector: React.FC = () => {
                         <button className="rounded bg-blue-500 px-4 py-2 font-bold text-white" onClick={getInitSnap}>
                           올바른 자세를 촬영한 후 자세 측정 시작!
                         </button>
-                      )
-                    ) : (
-                      <div className="font-bold text-red-500">
-                        스냅샷을 찍을 수 없습니다. 가이드 라인에 맞게 자세를 잡아주세요.
-                      </div>
-                    )}
+                      )}
                   </div>
                 )}
                 {mode === "skeleton" && (

diff --git a/src/utils/detector.ts b/src/utils/detector.ts
@@ -130,7 +130,7 @@ export const detectTextNeck = (refer: pose[], comp: pose[], isSnapShotMode: bool
   const referEearsDistance = getDistance(referLeftEar, referRightEar)
   const compDistance = getDistanceFromLine(compLeftShoulder, compRightShoulder, getMidPoint(compLeftEar, compRightEar))
   const compEearsDistance = getDistance(compLeftEar, compRightEar)
-  if (referDistance * 0.98 > compDistance && referEearsDistance < compEearsDistance) return true
+  if (referDistance * 0.95 > compDistance && referEearsDistance < compEearsDistance) return true
   else return false
 }
 

diff --git a/src/utils/drawer.ts b/src/utils/drawer.ts
@@ -2,48 +2,47 @@ import type { pose } from "@/utils/detector"
 import { getSymmetricPointFromY, getTranslatedPoint, getScaledPoint } from "./calculator";
 import { guideLinePoints } from "./guideLine";
 
-export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, dx : number = 0, dy : number = 0, scale : number = 1, canInitCallback : (canInit : boolean) => void, isInit : boolean) : void => {
+export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, dx : number = 0, dy : number = 0, scale : number = 1) : void => {
 
   const ctx = canvas.getContext("2d")
 
   if (ctx) {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-    const guideLine = new Path2D()
+    // const guideLine = new Path2D()
     const origin = {x : canvas.width / 2, y : canvas.height}
 
     // canavs 좌표계 기준으로 가이드 라인 정렬 (가이드 라인의 기준은 (canvas.width / 2, canvas.height))
     let _guideLinePoints = guideLinePoints.map(point => getSymmetricPointFromY(point,canvas.height / 2.))
     if(dx!==0 || dy!==0) _guideLinePoints = _guideLinePoints.map(point => getTranslatedPoint(point,dx,dy))
     if(scale!==1) _guideLinePoints = _guideLinePoints.map(point=>getScaledPoint(point, origin.x, origin.y, scale))
-    guideLine.moveTo(_guideLinePoints[0].x, _guideLinePoints[0].y)
-    for (let i = 1; i < _guideLinePoints.length; i++) {
-      guideLine.lineTo(_guideLinePoints[i].x, _guideLinePoints[i].y)
-    }
-    guideLine.closePath()
-    ctx.strokeStyle = 'blue'
-    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
-    ctx.stroke(guideLine)
-    ctx.fill(guideLine)
+    // guideLine.moveTo(_guideLinePoints[0].x, _guideLinePoints[0].y)
+    // for (let i = 1; i < _guideLinePoints.length; i++) {
+    //   guideLine.lineTo(_guideLinePoints[i].x, _guideLinePoints[i].y)
+    // }
+    // guideLine.closePath()
+    // ctx.strokeStyle = 'blue'
+    // ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
+    // ctx.stroke(guideLine)
+    // ctx.fill(guideLine)
 
     poses.forEach((pose) => {
+
       const leftShoulder = pose.keypoints.find((kp) => kp.name === "left_shoulder")
       const rightShoulder = pose.keypoints.find((kp) => kp.name === "right_shoulder")
-      const leftEar = pose.keypoints.find((kp) => kp.name === "left_ear")
-      const rightEar = pose.keypoints.find((kp) => kp.name === "right_ear")
 
       // 
-      if(leftShoulder && rightShoulder && leftEar && rightEar){
-        if(!isInit){
-          if(
-            ctx.isPointInPath(guideLine,leftShoulder?.x, leftShoulder?.y) &&
-            ctx.isPointInPath(guideLine,rightShoulder?.x, rightShoulder?.y) &&
-            ctx.isPointInPath(guideLine,leftEar?.x, leftEar?.y) &&
-            ctx.isPointInPath(guideLine,rightEar?.x, rightEar?.y)
-          ) canInitCallback(true)
-          else canInitCallback(false)
-        }
-      }
+      // if(leftShoulder && rightShoulder && leftEar && rightEar){
+      //   if(!isInit){
+      //     if(
+      //       ctx.isPointInPath(guideLine,leftShoulder?.x, leftShoulder?.y) &&
+      //       ctx.isPointInPath(guideLine,rightShoulder?.x, rightShoulder?.y) &&
+      //       ctx.isPointInPath(guideLine,leftEar?.x, leftEar?.y) &&
+      //       ctx.isPointInPath(guideLine,rightEar?.x, rightEar?.y)
+      //     ) canInitCallback(true)
+      //     else canInitCallback(false)
+      //   }
+      // }
 
       // 왼쪽과 오른쪽 어깨 이어주는 선 그리기
       if (leftShoulder && rightShoulder && leftShoulder.confidence > 0.2 && rightShoulder.confidence > 0.2) {