diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx index fcca093..4b17fcf 100644 --- a/src/components/PoseDetector.tsx +++ b/src/components/PoseDetector.tsx @@ -13,7 +13,8 @@ const PoseDetector: React.FC = () => { const [isTextNeck, setIsTextNeck] = useState(null) const [isModelLoaded, setIsModelLoaded] = useState(false) const [mode, setMode] = useState("snapshot") - + const [canInit, setCanInit] = useState(false) + const [isSnapSaved, setIsSnapSaved] = useState(false); const modelRef = useRef(null) const snapRef = useRef(null) const resultRef = useRef(null) @@ -21,6 +22,10 @@ const PoseDetector: React.FC = () => { const timer = useRef(null) const canvasRef = useRef(null) + const dx = useRef(0) + const dy = useRef(0) + const scale = useRef(1) + const { requestNotificationPermission, showNotification } = usePushNotification() const requestApi = (delay: number): Promise => new Promise((resolve) => setTimeout(resolve, delay)) @@ -64,10 +69,23 @@ 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) + if (canvasRef.current) { + drawPose( + results, + canvasRef.current, + dx.current, + dy.current, + scale.current, + canInitCallback, + !!snapRef.current) + } if (snapRef.current) { const _slope = detectSlope(snapRef.current, results, mode === "snapshot") const _isTextNeck = detectTextNeck(snapRef.current, results, mode === "snapshot") @@ -108,7 +126,10 @@ const PoseDetector: React.FC = () => { ) const getInitSnap = (): void => { - if (modelRef && modelRef.current) snapRef.current = resultRef.current + if (modelRef && modelRef.current) { + snapRef.current = resultRef.current + setIsSnapSaved(true) + } } useEffect(() => { @@ -129,6 +150,8 @@ const PoseDetector: React.FC = () => { setIsTextNeck(null) setSlope(null) snapRef.current = null + setIsSnapSaved(false) + setCanInit(false) } const onChangeMode = (e: React.ChangeEvent) => { @@ -138,6 +161,25 @@ const PoseDetector: React.FC = () => { } } + const onChangeTranslation = (e: React.ChangeEvent) => { + const id = e.target.id ; + if(e.target.value){ + const value = Number.parseInt(e.target.value) + switch(id){ + case 'vertical' : + dy.current = value + return + case 'horizontal' : + dx.current = value + return + case 'scale' : + scale.current = value / 100 * 2 + return + default : + } + } + } + const onCancelAutoPoseMonitoring = () => { initializePoseMonitoring() } @@ -164,6 +206,14 @@ const PoseDetector: React.FC = () => { /> {isModelLoaded && ( <> +
+
좌우 이동
+ +
상하 이동
+ +
크기 변경
+ +
본 화면은 좌우가 반대로 보이고 있으니 주의하세요!