Update static/js/holistic.js

static/js/holistic.js

@@ -3,10 +3,158 @@ import DeviceDetector from "https://cdn.skypack.dev/[email protected]";
 // Client 和 os 是正则表达式。
 // 参见: https://cdn.jsdelivr.net/npm/[email protected]/README.md
 // 了解 client 和 os 的合法值
+// 导入必要的库
+
+// 初始化速度和加速度图表
+let speedChart, accelerationChart;
+let previousPoseData = null;
+let lastTimestamp = 0;
 testSupport([
     { client: 'Chrome' },
 ]);
 
+function initCharts() {
+    const speedChartCtx = document.getElementById('speedChart').getContext('2d');
+    const accelerationChartCtx = document.getElementById('accelerationChart').getContext('2d');
+    
+    speedChart = new Chart(speedChartCtx, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [{
+                label: 'Movement Speed (px/s)',
+                data: [],
+                borderColor: 'rgba(75, 192, 192, 1)',
+                tension: 0.4,
+                borderWidth: 2,
+                fill: false
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: {
+                duration: 0
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Speed'
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Time'
+                    }
+                }
+            }
+        }
+    });
+
+    accelerationChart = new Chart(accelerationChartCtx, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [{
+                label: 'Acceleration (px/s²)',
+                data: [],
+                borderColor: 'rgba(255, 99, 132, 1)',
+                tension: 0.4,
+                borderWidth: 2,
+                fill: false
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: {
+                duration: 0
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Acceleration'
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Time'
+                    }
+                }
+            }
+        }
+    });
+}
+
+// 计算姿态变化的速度和加速度
+function calculateMotionMetrics(currentPose, timestamp) {
+    if (!previousPoseData || !currentPose.poseLandmarks) {
+        previousPoseData = currentPose;
+        lastTimestamp = timestamp;
+        return { speed: 0, acceleration: 0 };
+    }
+
+    const deltaTime = (timestamp - lastTimestamp) / 1000; // 转换为秒
+    if (deltaTime === 0) return { speed: 0, acceleration: 0 };
+
+    // 计算关键点的平均位移
+    let totalDisplacement = 0;
+    let validPoints = 0;
+    
+    currentPose.poseLandmarks.forEach((landmark, index) => {
+        if (previousPoseData.poseLandmarks[index]) {
+            const dx = landmark.x - previousPoseData.poseLandmarks[index].x;
+            const dy = landmark.y - previousPoseData.poseLandmarks[index].y;
+            const displacement = Math.sqrt(dx * dx + dy * dy);
+            totalDisplacement += displacement;
+            validPoints++;
+        }
+    });
+
+    const averageDisplacement = validPoints > 0 ? totalDisplacement / validPoints : 0;
+    const currentSpeed = averageDisplacement / deltaTime;
+
+    // 计算加速度
+    const previousSpeed = speedChart.data.datasets[0].data[speedChart.data.datasets[0].data.length - 1] || 0;
+    const acceleration = (currentSpeed - previousSpeed) / deltaTime;
+
+    // 更新先前数据
+    previousPoseData = currentPose;
+    lastTimestamp = timestamp;
+
+    return { speed: currentSpeed, acceleration: acceleration };
+}
+
+// 更新图表数据
+function updateCharts(metrics) {
+    const timestamp = new Date().toLocaleTimeString();
+    const maxDataPoints = 50; // 限制数据点数量
+
+    // 更新速度图表
+    speedChart.data.labels.push(timestamp);
+    speedChart.data.datasets[0].data.push(metrics.speed);
+    if (speedChart.data.labels.length > maxDataPoints) {
+        speedChart.data.labels.shift();
+        speedChart.data.datasets[0].data.shift();
+    }
+    speedChart.update('none');
+
+    // 更新加速度图表
+    accelerationChart.data.labels.push(timestamp);
+    accelerationChart.data.datasets[0].data.push(metrics.acceleration);
+    if (accelerationChart.data.labels.length > maxDataPoints) {
+        accelerationChart.data.labels.shift();
+        accelerationChart.data.datasets[0].data.shift();
+    }
+    accelerationChart.update('none');
+}
+
 function testSupport(supportedDevices) {
     const deviceDetector = new DeviceDetector();
     const detectedDevice = deviceDetector.parse(navigator.userAgent);
@@ -89,6 +237,7 @@ function connect(ctx, connectors) {
 
 let activeEffect = 'mask';
 
+    
 function onResults(results) {
     // 隐藏旋转器。
     document.body.classList.add('loaded');
@@ -147,6 +296,9 @@ function onResults(results) {
         }
     }
 
+    // 计算并更新动作指标
+    const metrics = calculateMotionMetrics(results, performance.now());
+    updateCharts(metrics);
     // 姿势...
     drawingUtils.drawConnectors(canvasCtx, results.poseLandmarks, mpHolistic.POSE_CONNECTIONS, { color: 'white' });
     drawingUtils.drawLandmarks(canvasCtx, Object.values(mpHolistic.POSE_LANDMARKS_LEFT)
@@ -185,6 +337,39 @@ function onResults(results) {
 
     canvasCtx.restore();
 }
+// 视频上传处理
+function handleVideoUpload(file) {
+    const formData = new FormData();
+    formData.append('video', file);
+
+    // 重置图表数据
+    speedChart.data.labels = [];
+    speedChart.data.datasets[0].data = [];
+    accelerationChart.data.labels = [];
+    accelerationChart.data.datasets[0].data = [];
+    previousPoseData = null;
+    lastTimestamp = 0;
+
+    // 发送视频到服务器
+    fetch('/upload_video', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // 更新视频源
+            videoElement.src = URL.createObjectURL(file);
+            videoElement.play();
+        } else {
+            console.error('Video upload failed:', data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error uploading video:', error);
+    });
+}
+
 
 const holistic = new mpHolistic.Holistic(config);
 holistic.onResults(onResults);
@@ -258,19 +443,46 @@ new controls
     activeEffect = x['effect'];
     holistic.setOptions(options);
 });
+// 初始化函数
+function initialize() {
+    // 初始化图表
+    initCharts();
+
+    // 设置视频上传处理
+    const videoUploadInput = document.querySelector('#video-upload');
+    if (videoUploadInput) {
+        videoUploadInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleVideoUpload(e.target.files[0]);
+            }
+        });
+    }
+
+    // 初始化姿态检测
+    const holistic = new mpHolistic.Holistic(config);
+    holistic.onResults(onResults);
 
-// 添加窗口大小调整事件监听器，以确保画布大小随窗口变化而调整
+    // ... 保持其他原有的初始化逻辑 ...
+}
+
+// 启动应用
+window.addEventListener('load', initialize);
+
+// 保持原有的窗口大小调整逻辑
 window.addEventListener('resize', () => {
     const aspect = videoElement.videoHeight / videoElement.videoWidth;
     let width, height;
     if (window.innerWidth > window.innerHeight) {
         height = window.innerHeight;
         width = height / aspect;
-    }
-    else {
+    } else {
         width = window.innerWidth;
         height = width * aspect;
     }
     canvasElement.width = width;
     canvasElement.height = height;
+    
+    // 重新调整图表大小
+    speedChart.resize();
+    accelerationChart.resize();
 });