init
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
@@ -0,0 +1,228 @@
|
||||
{
|
||||
"lockfileVersion": 1,
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "pendulum_analyze",
|
||||
"dependencies": {
|
||||
"@techstark/opencv-js": "^4.10.0-release.1",
|
||||
"gsap": "^3.13.0",
|
||||
"vite-plugin-singlefile": "^2.2.0",
|
||||
"vue": "^3.5.13",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^2.2.8",
|
||||
},
|
||||
},
|
||||
},
|
||||
"packages": {
|
||||
"@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
|
||||
|
||||
"@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.27.1", "", {}, "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="],
|
||||
|
||||
"@babel/parser": ["@babel/parser@7.27.2", "", { "dependencies": { "@babel/types": "^7.27.1" }, "bin": "./bin/babel-parser.js" }, "sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw=="],
|
||||
|
||||
"@babel/types": ["@babel/types@7.27.1", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q=="],
|
||||
|
||||
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.4", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q=="],
|
||||
|
||||
"@esbuild/android-arm": ["@esbuild/android-arm@0.25.4", "", { "os": "android", "cpu": "arm" }, "sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ=="],
|
||||
|
||||
"@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.4", "", { "os": "android", "cpu": "arm64" }, "sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A=="],
|
||||
|
||||
"@esbuild/android-x64": ["@esbuild/android-x64@0.25.4", "", { "os": "android", "cpu": "x64" }, "sha512-TVhdVtQIFuVpIIR282btcGC2oGQoSfZfmBdTip2anCaVYcqWlZXGcdcKIUklfX2wj0JklNYgz39OBqh2cqXvcQ=="],
|
||||
|
||||
"@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g=="],
|
||||
|
||||
"@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-CJsry8ZGM5VFVeyUYB3cdKpd/H69PYez4eJh1W/t38vzutdjEjtP7hB6eLKBoOdxcAlCtEYHzQ/PJ/oU9I4u0A=="],
|
||||
|
||||
"@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.4", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-yYq+39NlTRzU2XmoPW4l5Ifpl9fqSk0nAJYM/V/WUGPEFfek1epLHJIkTQM6bBs1swApjO5nWgvr843g6TjxuQ=="],
|
||||
|
||||
"@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-0FgvOJ6UUMflsHSPLzdfDnnBBVoCDtBTVyn/MrWloUNvq/5SFmh13l3dvgRPkDihRxb77Y17MbqbCAa2strMQQ=="],
|
||||
|
||||
"@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.4", "", { "os": "linux", "cpu": "arm" }, "sha512-kro4c0P85GMfFYqW4TWOpvmF8rFShbWGnrLqlzp4X1TNWjRY3JMYUfDCtOxPKOIY8B0WC8HN51hGP4I4hz4AaQ=="],
|
||||
|
||||
"@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ=="],
|
||||
|
||||
"@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.4", "", { "os": "linux", "cpu": "ia32" }, "sha512-yTEjoapy8UP3rv8dB0ip3AfMpRbyhSN3+hY8mo/i4QXFeDxmiYbEKp3ZRjBKcOP862Ua4b1PDfwlvbuwY7hIGQ=="],
|
||||
|
||||
"@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.4", "", { "os": "linux", "cpu": "none" }, "sha512-NeqqYkrcGzFwi6CGRGNMOjWGGSYOpqwCjS9fvaUlX5s3zwOtn1qwg1s2iE2svBe4Q/YOG1q6875lcAoQK/F4VA=="],
|
||||
|
||||
"@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.4", "", { "os": "linux", "cpu": "none" }, "sha512-IcvTlF9dtLrfL/M8WgNI/qJYBENP3ekgsHbYUIzEzq5XJzzVEV/fXY9WFPfEEXmu3ck2qJP8LG/p3Q8f7Zc2Xg=="],
|
||||
|
||||
"@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-HOy0aLTJTVtoTeGZh4HSXaO6M95qu4k5lJcH4gxv56iaycfz1S8GO/5Jh6X4Y1YiI0h7cRyLi+HixMR+88swag=="],
|
||||
|
||||
"@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.4", "", { "os": "linux", "cpu": "none" }, "sha512-i8JUDAufpz9jOzo4yIShCTcXzS07vEgWzyX3NH2G7LEFVgrLEhjwL3ajFE4fZI3I4ZgiM7JH3GQ7ReObROvSUA=="],
|
||||
|
||||
"@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-jFnu+6UbLlzIjPQpWCNh5QtrcNfMLjgIavnwPQAfoGx4q17ocOU9MsQ2QVvFxwQoWpZT8DvTLooTvmOQXkO51g=="],
|
||||
|
||||
"@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.4", "", { "os": "linux", "cpu": "x64" }, "sha512-6e0cvXwzOnVWJHq+mskP8DNSrKBr1bULBvnFLpc1KY+d+irZSgZ02TGse5FsafKS5jg2e4pbvK6TPXaF/A6+CA=="],
|
||||
|
||||
"@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.4", "", { "os": "none", "cpu": "arm64" }, "sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ=="],
|
||||
|
||||
"@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.4", "", { "os": "none", "cpu": "x64" }, "sha512-XAg8pIQn5CzhOB8odIcAm42QsOfa98SBeKUdo4xa8OvX8LbMZqEtgeWE9P/Wxt7MlG2QqvjGths+nq48TrUiKw=="],
|
||||
|
||||
"@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.4", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A=="],
|
||||
|
||||
"@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.4", "", { "os": "openbsd", "cpu": "x64" }, "sha512-xAGGhyOQ9Otm1Xu8NT1ifGLnA6M3sJxZ6ixylb+vIUVzvvd6GOALpwQrYrtlPouMqd/vSbgehz6HaVk4+7Afhw=="],
|
||||
|
||||
"@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.4", "", { "os": "sunos", "cpu": "x64" }, "sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q=="],
|
||||
|
||||
"@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ=="],
|
||||
|
||||
"@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg=="],
|
||||
|
||||
"@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.4", "", { "os": "win32", "cpu": "x64" }, "sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ=="],
|
||||
|
||||
"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
|
||||
|
||||
"@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.40.2", "", { "os": "android", "cpu": "arm" }, "sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg=="],
|
||||
|
||||
"@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.40.2", "", { "os": "android", "cpu": "arm64" }, "sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw=="],
|
||||
|
||||
"@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.40.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w=="],
|
||||
|
||||
"@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.40.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ=="],
|
||||
|
||||
"@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.40.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ=="],
|
||||
|
||||
"@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.40.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q=="],
|
||||
|
||||
"@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.40.2", "", { "os": "linux", "cpu": "arm" }, "sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q=="],
|
||||
|
||||
"@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.40.2", "", { "os": "linux", "cpu": "arm" }, "sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg=="],
|
||||
|
||||
"@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.40.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg=="],
|
||||
|
||||
"@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.40.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg=="],
|
||||
|
||||
"@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.40.2", "", { "os": "linux", "cpu": "none" }, "sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw=="],
|
||||
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": ["@rollup/rollup-linux-powerpc64le-gnu@4.40.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q=="],
|
||||
|
||||
"@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.40.2", "", { "os": "linux", "cpu": "none" }, "sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg=="],
|
||||
|
||||
"@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.40.2", "", { "os": "linux", "cpu": "none" }, "sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg=="],
|
||||
|
||||
"@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.40.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ=="],
|
||||
|
||||
"@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.40.2", "", { "os": "linux", "cpu": "x64" }, "sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng=="],
|
||||
|
||||
"@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.40.2", "", { "os": "linux", "cpu": "x64" }, "sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA=="],
|
||||
|
||||
"@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.40.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg=="],
|
||||
|
||||
"@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.40.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA=="],
|
||||
|
||||
"@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.40.2", "", { "os": "win32", "cpu": "x64" }, "sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA=="],
|
||||
|
||||
"@techstark/opencv-js": ["@techstark/opencv-js@4.10.0-release.1", "", {}, "sha512-S4XELidRiQeA0q1s9VQLo540wCxUo24r1O4C+LqZ6llX+sPCXvZCPv3Ice8dEIr0uavyZ8YZeKXSBdDgMXSXjw=="],
|
||||
|
||||
"@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
|
||||
|
||||
"@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
|
||||
|
||||
"@volar/language-core": ["@volar/language-core@2.4.14", "", { "dependencies": { "@volar/source-map": "2.4.14" } }, "sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w=="],
|
||||
|
||||
"@volar/source-map": ["@volar/source-map@2.4.14", "", {}, "sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ=="],
|
||||
|
||||
"@volar/typescript": ["@volar/typescript@2.4.14", "", { "dependencies": { "@volar/language-core": "2.4.14", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw=="],
|
||||
|
||||
"@vue/compiler-core": ["@vue/compiler-core@3.5.14", "", { "dependencies": { "@babel/parser": "^7.27.2", "@vue/shared": "3.5.14", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA=="],
|
||||
|
||||
"@vue/compiler-dom": ["@vue/compiler-dom@3.5.14", "", { "dependencies": { "@vue/compiler-core": "3.5.14", "@vue/shared": "3.5.14" } }, "sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug=="],
|
||||
|
||||
"@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.14", "", { "dependencies": { "@babel/parser": "^7.27.2", "@vue/compiler-core": "3.5.14", "@vue/compiler-dom": "3.5.14", "@vue/compiler-ssr": "3.5.14", "@vue/shared": "3.5.14", "estree-walker": "^2.0.2", "magic-string": "^0.30.17", "postcss": "^8.5.3", "source-map-js": "^1.2.1" } }, "sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA=="],
|
||||
|
||||
"@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.14", "", { "dependencies": { "@vue/compiler-dom": "3.5.14", "@vue/shared": "3.5.14" } }, "sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q=="],
|
||||
|
||||
"@vue/compiler-vue2": ["@vue/compiler-vue2@2.7.16", "", { "dependencies": { "de-indent": "^1.0.2", "he": "^1.2.0" } }, "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A=="],
|
||||
|
||||
"@vue/language-core": ["@vue/language-core@2.2.10", "", { "dependencies": { "@volar/language-core": "~2.4.11", "@vue/compiler-dom": "^3.5.0", "@vue/compiler-vue2": "^2.7.16", "@vue/shared": "^3.5.0", "alien-signals": "^1.0.3", "minimatch": "^9.0.3", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw=="],
|
||||
|
||||
"@vue/reactivity": ["@vue/reactivity@3.5.14", "", { "dependencies": { "@vue/shared": "3.5.14" } }, "sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw=="],
|
||||
|
||||
"@vue/runtime-core": ["@vue/runtime-core@3.5.14", "", { "dependencies": { "@vue/reactivity": "3.5.14", "@vue/shared": "3.5.14" } }, "sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag=="],
|
||||
|
||||
"@vue/runtime-dom": ["@vue/runtime-dom@3.5.14", "", { "dependencies": { "@vue/reactivity": "3.5.14", "@vue/runtime-core": "3.5.14", "@vue/shared": "3.5.14", "csstype": "^3.1.3" } }, "sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw=="],
|
||||
|
||||
"@vue/server-renderer": ["@vue/server-renderer@3.5.14", "", { "dependencies": { "@vue/compiler-ssr": "3.5.14", "@vue/shared": "3.5.14" }, "peerDependencies": { "vue": "3.5.14" } }, "sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w=="],
|
||||
|
||||
"@vue/shared": ["@vue/shared@3.5.14", "", {}, "sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ=="],
|
||||
|
||||
"@vue/tsconfig": ["@vue/tsconfig@0.7.0", "", { "peerDependencies": { "typescript": "5.x", "vue": "^3.4.0" }, "optionalPeers": ["typescript", "vue"] }, "sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg=="],
|
||||
|
||||
"alien-signals": ["alien-signals@1.0.13", "", {}, "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg=="],
|
||||
|
||||
"balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
|
||||
|
||||
"brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
|
||||
|
||||
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
|
||||
|
||||
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
|
||||
|
||||
"de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
|
||||
|
||||
"entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
|
||||
|
||||
"esbuild": ["esbuild@0.25.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.4", "@esbuild/android-arm": "0.25.4", "@esbuild/android-arm64": "0.25.4", "@esbuild/android-x64": "0.25.4", "@esbuild/darwin-arm64": "0.25.4", "@esbuild/darwin-x64": "0.25.4", "@esbuild/freebsd-arm64": "0.25.4", "@esbuild/freebsd-x64": "0.25.4", "@esbuild/linux-arm": "0.25.4", "@esbuild/linux-arm64": "0.25.4", "@esbuild/linux-ia32": "0.25.4", "@esbuild/linux-loong64": "0.25.4", "@esbuild/linux-mips64el": "0.25.4", "@esbuild/linux-ppc64": "0.25.4", "@esbuild/linux-riscv64": "0.25.4", "@esbuild/linux-s390x": "0.25.4", "@esbuild/linux-x64": "0.25.4", "@esbuild/netbsd-arm64": "0.25.4", "@esbuild/netbsd-x64": "0.25.4", "@esbuild/openbsd-arm64": "0.25.4", "@esbuild/openbsd-x64": "0.25.4", "@esbuild/sunos-x64": "0.25.4", "@esbuild/win32-arm64": "0.25.4", "@esbuild/win32-ia32": "0.25.4", "@esbuild/win32-x64": "0.25.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q=="],
|
||||
|
||||
"estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
|
||||
|
||||
"fdir": ["fdir@6.4.4", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg=="],
|
||||
|
||||
"fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
|
||||
|
||||
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
|
||||
|
||||
"gsap": ["gsap@3.13.0", "", {}, "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="],
|
||||
|
||||
"he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
|
||||
|
||||
"is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
|
||||
|
||||
"magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
|
||||
|
||||
"micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
|
||||
|
||||
"minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
|
||||
|
||||
"muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
|
||||
|
||||
"nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
|
||||
|
||||
"path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
|
||||
|
||||
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
|
||||
|
||||
"picomatch": ["picomatch@4.0.2", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
|
||||
|
||||
"postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
|
||||
|
||||
"rollup": ["rollup@4.40.2", "", { "dependencies": { "@types/estree": "1.0.7" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.40.2", "@rollup/rollup-android-arm64": "4.40.2", "@rollup/rollup-darwin-arm64": "4.40.2", "@rollup/rollup-darwin-x64": "4.40.2", "@rollup/rollup-freebsd-arm64": "4.40.2", "@rollup/rollup-freebsd-x64": "4.40.2", "@rollup/rollup-linux-arm-gnueabihf": "4.40.2", "@rollup/rollup-linux-arm-musleabihf": "4.40.2", "@rollup/rollup-linux-arm64-gnu": "4.40.2", "@rollup/rollup-linux-arm64-musl": "4.40.2", "@rollup/rollup-linux-loongarch64-gnu": "4.40.2", "@rollup/rollup-linux-powerpc64le-gnu": "4.40.2", "@rollup/rollup-linux-riscv64-gnu": "4.40.2", "@rollup/rollup-linux-riscv64-musl": "4.40.2", "@rollup/rollup-linux-s390x-gnu": "4.40.2", "@rollup/rollup-linux-x64-gnu": "4.40.2", "@rollup/rollup-linux-x64-musl": "4.40.2", "@rollup/rollup-win32-arm64-msvc": "4.40.2", "@rollup/rollup-win32-ia32-msvc": "4.40.2", "@rollup/rollup-win32-x64-msvc": "4.40.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg=="],
|
||||
|
||||
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
|
||||
|
||||
"tinyglobby": ["tinyglobby@0.2.13", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw=="],
|
||||
|
||||
"to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
|
||||
|
||||
"typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
|
||||
|
||||
"vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
|
||||
|
||||
"vite-plugin-singlefile": ["vite-plugin-singlefile@2.2.0", "", { "dependencies": { "micromatch": "^4.0.8" }, "peerDependencies": { "rollup": "^4.35.0", "vite": "^5.4.11 || ^6.0.0" } }, "sha512-Ik1wXmJaGzeQtUeIV7JprDUqqy6DlLzXAY27Blei5peE4c9VJF+Kp9xWDJeuX0RJUZmFbIAuw1/RAh06A+Ql7w=="],
|
||||
|
||||
"vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
|
||||
|
||||
"vue": ["vue@3.5.14", "", { "dependencies": { "@vue/compiler-dom": "3.5.14", "@vue/compiler-sfc": "3.5.14", "@vue/runtime-dom": "3.5.14", "@vue/server-renderer": "3.5.14", "@vue/shared": "3.5.14" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew=="],
|
||||
|
||||
"vue-tsc": ["vue-tsc@2.2.10", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.10" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ=="],
|
||||
|
||||
"micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>单摆在线跟踪与分析</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "pendulum_analyze",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@techstark/opencv-js": "^4.10.0-release.1",
|
||||
"gsap": "^3.13.0",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^2.2.8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,604 @@
|
||||
<template>
|
||||
<div class="home" :class="{ 'tracker-open': stage === 'tracker' }">
|
||||
<!-- 全局隐藏文件选择（两端都可用） -->
|
||||
<input ref="fileInput" type="file" accept="video/*" class="sr-only" @change="onVideoFileChange" />
|
||||
<input ref="csvInput" type="file" accept=".csv,text/csv" class="sr-only" @change="onCsvFileChange" />
|
||||
|
||||
<!-- ===== HERO / LANDING ===== -->
|
||||
<section v-if="stage === 'hero'" ref="hero" class="hero" role="region" aria-label="欢迎">
|
||||
<canvas ref="fx" class="fx" aria-hidden="true"></canvas>
|
||||
<div class="hero-inner">
|
||||
<h1 ref="logo" class="logo"><span class="accent">Pendulum</span> Lab</h1>
|
||||
<p ref="subtitle" class="subtitle">实时追踪 · 物理建模 · 一键分析</p>
|
||||
<div ref="cta" class="cta">
|
||||
<button class="btn primary" @click="openCamera">使用摄像头</button>
|
||||
<button class="btn secondary" @click="pickFile">选择视频</button>
|
||||
<button class="btn ghost" @click="pickCSV">导入 CSV</button>
|
||||
</div>
|
||||
<div class="note">为横屏移动端优化 · 建议将手机横置</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== TRACKER STAGE ===== -->
|
||||
<section v-if="stage === 'tracker'" class="stage" role="region" aria-label="实时追踪">
|
||||
<video ref="video" muted playsinline class="video-el" style="height:0"></video>
|
||||
<canvas ref="canvas" class="preview-canvas"></canvas>
|
||||
|
||||
<!-- 性能面板 -->
|
||||
<div class="performance">
|
||||
<canvas height="64" width="192" ref="frameTimeCanvas"></canvas>
|
||||
<div class="stats" v-if="pInfo.frameTime.length">
|
||||
<div class="stat-item"><span class="stat-label">平均</span><span class="stat-value">{{ pInfo.avgFrameTime
|
||||
}}ms</span></div>
|
||||
<div class="stat-item"><span class="stat-label">最小</span><span class="stat-value">{{ pInfo.minFrameTime
|
||||
}}ms</span></div>
|
||||
<div class="stat-item"><span class="stat-label">最大</span><span class="stat-value">{{ pInfo.maxFrameTime
|
||||
}}ms</span></div>
|
||||
<div class="stat-item"><span class="stat-label">FPS</span><span class="stat-value">{{ pInfo.fps }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 位置图表 -->
|
||||
<div class="position-charts">
|
||||
<div class="chart"><canvas height="64" width="192" ref="xPosCanvas"></canvas>
|
||||
<div class="chart-label">X坐标</div>
|
||||
</div>
|
||||
<div class="chart"><canvas height="64" width="192" ref="yPosCanvas"></canvas>
|
||||
<div class="chart-label">Y坐标</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右上录制/导出 -->
|
||||
<div class="record-controls">
|
||||
<button @click="toggleRecording" :class="{ 'recording': isRecording }">{{ isRecording ? '停止记录' : '开始记录'
|
||||
}}</button>
|
||||
<button @click="exportCSV" :disabled="!recordData.length">导出 CSV</button>
|
||||
<button class="btn ghost" @click="backToHero">退出</button>
|
||||
<span class="record-info" v-if="isRecording">已记录 <span class="mono" aria-live="polite">{{ recordData.length
|
||||
}}</span> 帧</span>
|
||||
</div>
|
||||
|
||||
<!-- 分析抽屉 -->
|
||||
<PendulumAnalysis v-if="showAnalysis && recordData.length" :data="recordData" :mmPerPixel="mmPerPixel"
|
||||
@close="showAnalysis = false" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, onMounted, onUnmounted, nextTick, useTemplateRef } from 'vue';
|
||||
import gsap from 'gsap';
|
||||
import cv from '@techstark/opencv-js';
|
||||
import PendulumAnalysis from './components/PendulumAnalysis.vue';
|
||||
import { YellowBallTracker, type Position, type TrackerParams } from './utils/yellowBallTracker';
|
||||
import { drawPositionChart, drawPerformanceChart, MAX_POSITION_HISTORY, POSITION_CHART_PADDING, FIXED_MIN_Y, FIXED_MAX_Y } from './utils/chartUtils';
|
||||
|
||||
// ===== Config =====
|
||||
const apiBase = (import.meta as any).env?.VITE_API_BASE || '';
|
||||
const mmPerPixel = 0.166; // 如果你的 x/y 已是毫米，改成 1
|
||||
|
||||
// ===== Stage (hero <-> tracker) =====
|
||||
const stage = ref<'hero' | 'tracker'>('hero');
|
||||
async function openCamera() {
|
||||
stage.value = 'tracker';
|
||||
await nextTick();
|
||||
startCamera();
|
||||
}
|
||||
function pickFile() { (fileInput.value as HTMLInputElement)?.click(); }
|
||||
function pickCSV() { (csvInput.value as HTMLInputElement)?.click(); }
|
||||
function backToHero() { stopStream(); resetTracking(); stage.value = 'hero'; }
|
||||
|
||||
// ===== HERO anim + particles =====
|
||||
const hero = useTemplateRef('hero');
|
||||
const fx = useTemplateRef('fx');
|
||||
|
||||
let rafId = 0;
|
||||
function startFx() {
|
||||
if (!fx.value) return;
|
||||
const DPR = Math.min(window.devicePixelRatio || 1, 2);
|
||||
const ctx = fx.value.getContext('2d')!;
|
||||
const resize = () => { if (!fx.value) return; fx.value!.width = fx.value!.clientWidth * DPR; fx.value!.height = fx.value!.clientHeight * DPR; };
|
||||
resize();
|
||||
const dots = Array.from({ length: 40 }, () => ({ x: Math.random() * fx.value!.width, y: Math.random() * fx.value!.height, r: (1 + Math.random() * 2) * DPR, vx: (Math.random() - 0.5) * 0.25 * DPR, vy: (Math.random() - 0.5) * 0.25 * DPR }));
|
||||
const loop = () => {
|
||||
if (!fx.value) return;
|
||||
const w = fx.value!.width, h = fx.value!.height; ctx.clearRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter';
|
||||
for (const d of dots) { d.x += d.vx; d.y += d.vy; if (d.x < 0 || d.x > w) d.vx *= -1; if (d.y < 0 || d.y > h) d.vy *= -1; const g = ctx.createRadialGradient(d.x, d.y, 0, d.x, d.y, d.r * 4); g.addColorStop(0, 'rgba(0,255,170,0.35)'); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(d.x, d.y, d.r * 4, 0, Math.PI * 2); ctx.fill(); }
|
||||
rafId = requestAnimationFrame(loop);
|
||||
};
|
||||
window.addEventListener('resize', resize, { passive: true });
|
||||
loop();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
|
||||
tl.from(hero.value, { autoAlpha: 0, duration: 0.4 })
|
||||
.from('.logo', { y: 20, autoAlpha: 0, duration: 0.6 })
|
||||
.from('.subtitle', { y: 16, autoAlpha: 0, duration: 0.5 }, '-=0.25')
|
||||
.from('.cta', { y: 12, autoAlpha: 0, duration: 0.45 }, '-=0.25');
|
||||
startFx();
|
||||
});
|
||||
|
||||
onUnmounted(() => cancelAnimationFrame(rafId));
|
||||
|
||||
// ===== Tracking / OpenCV =====
|
||||
const video = ref<HTMLVideoElement | null>(null);
|
||||
const canvas = ref<HTMLCanvasElement | null>(null);
|
||||
const xPosCanvas = ref<HTMLCanvasElement | null>(null);
|
||||
const yPosCanvas = ref<HTMLCanvasElement | null>(null);
|
||||
const frameTimeCanvas = ref<HTMLCanvasElement | null>(null);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const csvInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
let stream: MediaStream | null = null;
|
||||
let frameCount = 0; let lastPosition: Position | null = null; let ctx: CanvasRenderingContext2D | null = null;
|
||||
|
||||
const cvReady = ref(false); const cvStarted = ref(false);
|
||||
cv.onRuntimeInitialized = () => (cvReady.value = true);
|
||||
|
||||
const isRecording = ref(false);
|
||||
const recordData = reactive<{ frame: number; time: number; x: number; y: number }[]>([]);
|
||||
const showAnalysis = ref(false);
|
||||
|
||||
const positionData = reactive({ xHistory: [] as number[], yHistory: [] as number[], xRange: { min: 0, max: 100 }, yRange: { min: 0, max: 100 } });
|
||||
const params: TrackerParams = reactive({ lowerYellow: new cv.Scalar(20, 100, 100, 0), upperYellow: new cv.Scalar(40, 255, 255, 255), blurSize: 7, morphKernel: 5, minContourArea: 20, useRoi: true, roiScaleX: 0.25, roiScaleY: 0.35 });
|
||||
let tracker: YellowBallTracker | null = null;
|
||||
|
||||
const pInfo = reactive({ lastUpdateTime: 0, frameTime: [] as number[], avgFrameTime: 0, minFrameTime: 0, maxFrameTime: 0, fps: 0, fpsUpdateTime: 0, frameCountForFps: 0 });
|
||||
|
||||
watch(() => [positionData.xHistory, positionData.yHistory], ([xH, yH]) => {
|
||||
if (!xH.length || !yH.length) return;
|
||||
// X
|
||||
const xMin = Math.min(...xH), xMax = Math.max(...xH); const xPad = (xMax - xMin) * 0.1 || POSITION_CHART_PADDING; positionData.xRange = { min: xMin - xPad, max: xMax + xPad };
|
||||
drawPositionChart(xPosCanvas.value!, xH, positionData.xRange, 'X位置');
|
||||
// Y
|
||||
const yMin = Math.min(...yH), yMax = Math.max(...yH); const yPad = (yMax - yMin) * 0.1 || POSITION_CHART_PADDING; positionData.yRange = { min: yMin - yPad, max: yMax + yPad };
|
||||
drawPositionChart(yPosCanvas.value!, yH, positionData.yRange, 'Y位置');
|
||||
}, { deep: true });
|
||||
|
||||
watch(() => pInfo.frameTime, (v) => {
|
||||
if (!v.length) return;
|
||||
const min = Math.min(...v), max = Math.max(...v), avg = v.reduce((a, b) => a + b, 0) / v.length;
|
||||
pInfo.minFrameTime = Math.round(min * 100) / 100; pInfo.maxFrameTime = Math.round(max * 100) / 100; pInfo.avgFrameTime = Math.round(avg * 100) / 100;
|
||||
drawPerformanceChart(frameTimeCanvas.value!, v, FIXED_MIN_Y, FIXED_MAX_Y);
|
||||
}, { deep: true });
|
||||
|
||||
function processFrame() {
|
||||
if (!video.value || !canvas.value || !cvReady.value || video.value.readyState < 2) { requestAnimationFrame(processFrame); return; }
|
||||
if (video.value.ended) return;
|
||||
pInfo.lastUpdateTime = performance.now(); cvStarted.value = true;
|
||||
if (!ctx) ctx = canvas.value.getContext('2d', { willReadFrequently: true })!;
|
||||
|
||||
// auto-resize canvas to video
|
||||
if (canvas.value.width !== video.value.videoWidth || canvas.value.height !== video.value.videoHeight) {
|
||||
canvas.value.width = video.value.videoWidth; canvas.value.height = video.value.videoHeight;
|
||||
}
|
||||
|
||||
ctx.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
|
||||
const currentFrameTime = video.value.currentTime;
|
||||
const imgData = ctx.getImageData(0, 0, canvas.value.width, canvas.value.height);
|
||||
|
||||
if (!tracker) { tracker = new YellowBallTracker(params); tracker.initMats(canvas.value.width, canvas.value.height); }
|
||||
else if (canvas.value.width !== tracker.srcMat?.cols || canvas.value.height !== tracker.srcMat?.rows) {
|
||||
tracker.initMats(canvas.value.width, canvas.value.height);
|
||||
}
|
||||
|
||||
const center = tracker.detectYellowBall(imgData, lastPosition); lastPosition = center;
|
||||
|
||||
if (center) {
|
||||
positionData.xHistory.push(center.x); positionData.yHistory.push(center.y);
|
||||
if (positionData.xHistory.length > MAX_POSITION_HISTORY) positionData.xHistory.shift();
|
||||
if (positionData.yHistory.length > MAX_POSITION_HISTORY) positionData.yHistory.shift();
|
||||
if (isRecording.value) {
|
||||
if (!showAnalysis.value) {
|
||||
recordData.push({ frame: frameCount, time: currentFrameTime, x: center.x, y: center.y });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示处理输出
|
||||
tracker.getOutputCanvas(canvas.value);
|
||||
|
||||
// 性能统计
|
||||
const now = performance.now(); const ft = now - pInfo.lastUpdateTime; if (pInfo.frameTime.length >= 128) pInfo.frameTime.shift(); pInfo.frameTime.push(ft);
|
||||
frameCount++; pInfo.frameCountForFps++;
|
||||
if (now - pInfo.fpsUpdateTime >= 1000) { pInfo.fps = Math.round(pInfo.frameCountForFps * 1000 / (now - pInfo.fpsUpdateTime)); pInfo.frameCountForFps = 0; pInfo.fpsUpdateTime = now; }
|
||||
|
||||
// 下一帧
|
||||
// @ts-ignore
|
||||
if (video.value.requestVideoFrameCallback) video.value.requestVideoFrameCallback(processFrame); else requestAnimationFrame(processFrame);
|
||||
}
|
||||
|
||||
async function startCamera() {
|
||||
try {
|
||||
stopStream(); resetTracking();
|
||||
const constraints: MediaStreamConstraints = { video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 60, max: 120 }, facingMode: { ideal: 'environment' } }, audio: false } as any;
|
||||
stream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
if (video.value) {
|
||||
video.value.srcObject = stream; await video.value.play().catch(() => { }); // @ts-ignore
|
||||
if (video.value.requestVideoFrameCallback) video.value.requestVideoFrameCallback(processFrame); else requestAnimationFrame(processFrame);
|
||||
}
|
||||
} catch (e) { console.error('摄像头启动失败', e); alert('无法访问摄像头，请检查权限设置'); }
|
||||
}
|
||||
|
||||
function stopStream() { if (!stream) return; stream.getTracks().forEach(t => t.stop()); stream = null; }
|
||||
|
||||
async function onVideoFileChange(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
resetTracking(); stopStream();
|
||||
// 先切到追踪页，保证 video/canvas 已挂载
|
||||
if (stage.value !== 'tracker') { stage.value = 'tracker'; await nextTick(); }
|
||||
const url = URL.createObjectURL(file);
|
||||
if (!video.value) { await nextTick(); }
|
||||
if (!video.value) { console.warn('video 元素未就绪'); return; }
|
||||
|
||||
video.value.srcObject = null; video.value.src = url; video.value.muted = true; video.value.playsInline = true;
|
||||
await video.value.play().catch(() => { });
|
||||
// @ts-ignore
|
||||
if (video.value.requestVideoFrameCallback) video.value.requestVideoFrameCallback(processFrame); else requestAnimationFrame(processFrame);
|
||||
|
||||
// 自动开始记录；视频播完后自动弹出分析
|
||||
isRecording.value = true; recordData.splice(0);
|
||||
const onEnded = () => {
|
||||
if (isRecording.value) {
|
||||
isRecording.value = false;
|
||||
healthCheck().finally(() => { showAnalysis.value = true; });
|
||||
}
|
||||
video.value?.removeEventListener('ended', onEnded);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
video.value.addEventListener('ended', onEnded);
|
||||
}
|
||||
|
||||
function toggleRecording() {
|
||||
isRecording.value = !isRecording.value;
|
||||
if (isRecording.value) { recordData.splice(0, recordData.length); showAnalysis.value = false; }
|
||||
else { // 结束 -> 打开分析
|
||||
healthCheck().finally(() => { showAnalysis.value = true; });
|
||||
}
|
||||
}
|
||||
|
||||
function exportCSV() { if (!recordData.length) return; let csv = 'frame,time,x,y\n'; for (const r of recordData) { csv += `${r.frame},${r.time},${r.x},${r.y}\n`; } const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `pendulum_positions_${new Date().toISOString().replace(/[:.]/g, '-')}.csv`; a.click(); setTimeout(() => URL.revokeObjectURL(url), 100); }
|
||||
|
||||
function resetTracking() { frameCount = 0; lastPosition = null; positionData.xHistory = []; positionData.yHistory = []; recordData.splice(0); isRecording.value = false; pInfo.fps = 0; pInfo.fpsUpdateTime = performance.now(); pInfo.frameCountForFps = 0; pInfo.frameTime = []; ctx = null; }
|
||||
|
||||
async function onCsvFileChange(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
// 读取CSV文件内容
|
||||
const text = await file.text();
|
||||
const lines = text.trim().split('\n');
|
||||
|
||||
if (lines.length < 2) {
|
||||
alert('CSV文件格式不正确，需要包含标题行和数据行');
|
||||
return;
|
||||
}
|
||||
|
||||
// 解析标题行，找出各列的索引
|
||||
const headers = lines[0].toLowerCase().split(',').map(h => h.trim());
|
||||
const frameIndex = headers.findIndex(h => h.includes('frame'));
|
||||
const timeIndex = headers.findIndex(h => h.includes('time'));
|
||||
const xIndex = headers.findIndex(h => h.includes('x'));
|
||||
const yIndex = headers.findIndex(h => h.includes('y'));
|
||||
|
||||
// 验证必要的列是否存在
|
||||
if (timeIndex === -1 || xIndex === -1 || yIndex === -1) {
|
||||
alert('CSV文件必须包含time、x、y列');
|
||||
return;
|
||||
}
|
||||
|
||||
// 解析数据行
|
||||
const csvData: { frame: number; time: number; x: number; y: number }[] = [];
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
const row = lines[i].split(',').map(cell => cell.trim());
|
||||
if (row.length < Math.max(timeIndex, xIndex, yIndex) + 1) continue;
|
||||
|
||||
const frame = frameIndex >= 0 ? parseFloat(row[frameIndex]) || i - 1 : i - 1;
|
||||
const time = parseFloat(row[timeIndex]);
|
||||
const x = parseFloat(row[xIndex]);
|
||||
const y = parseFloat(row[yIndex]);
|
||||
|
||||
// 跳过无效数据
|
||||
if (isNaN(time) || isNaN(x) || isNaN(y)) continue;
|
||||
|
||||
csvData.push({ frame, time, x, y });
|
||||
}
|
||||
|
||||
if (csvData.length === 0) {
|
||||
alert('CSV文件中没有找到有效的数据行');
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空当前的记录数据，将CSV数据设置为记录数据
|
||||
recordData.splice(0, recordData.length, ...csvData);
|
||||
|
||||
// 切换到追踪页面（如果当前不在）
|
||||
if (stage.value !== 'tracker') {
|
||||
stage.value = 'tracker';
|
||||
await nextTick();
|
||||
}
|
||||
|
||||
// 直接打开分析抽屉
|
||||
showAnalysis.value = true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('CSV文件解析错误:', error);
|
||||
alert('CSV文件解析失败，请检查文件格式');
|
||||
}
|
||||
}
|
||||
|
||||
async function healthCheck() { const ctrl = new AbortController(); const timer = setTimeout(() => ctrl.abort(), 3000); try { const resp = await fetch(`${apiBase.replace(/\/+$/, '')}/api/health`, { signal: ctrl.signal }); return resp.ok; } catch { return false; } finally { clearTimeout(timer); } }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
min-height: 100dvh;
|
||||
background: #0b0f12;
|
||||
color: #e8f8f4;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
.fx {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: clamp(28px, 6vw, 58px);
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.logo .accent {
|
||||
color: #00ffaa;
|
||||
text-shadow: 0 0 22px rgba(0, 255, 170, .35);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
opacity: .9;
|
||||
margin: 0 0 18px;
|
||||
font-size: clamp(14px, 2.4vw, 18px);
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid rgba(255, 255, 255, .18);
|
||||
background: rgba(255, 255, 255, .06);
|
||||
color: #e8f8f4;
|
||||
border-radius: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: .2s
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: rgba(255, 255, 255, .12);
|
||||
border-color: rgba(255, 255, 255, .28)
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(180deg, rgba(0, 255, 170, .25), rgba(0, 255, 170, .15));
|
||||
border-color: rgba(0, 255, 170, .35);
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
border-color: rgba(255, 255, 255, .25)
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: transparent
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 14px;
|
||||
opacity: .75;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
outline: 1px solid #222;
|
||||
}
|
||||
|
||||
.video-el {
|
||||
display: none
|
||||
}
|
||||
|
||||
.performance {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.performance canvas {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, .7)
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #00ffaa
|
||||
}
|
||||
|
||||
.position-charts {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.controls select,
|
||||
.record-controls button {
|
||||
background: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, .3);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.controls select:hover {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
border-color: rgba(255, 255, 255, .5)
|
||||
}
|
||||
|
||||
.record-controls {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, .1)
|
||||
}
|
||||
|
||||
button.recording {
|
||||
background: rgba(255, 50, 50, .8) !important;
|
||||
animation: pulse 2s infinite
|
||||
}
|
||||
|
||||
.record-info {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.record-info .mono {
|
||||
display: inline-block;
|
||||
min-width: 5ch;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'tnum';
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,779 @@
|
||||
<template>
|
||||
<div class="pendulum-analysis" role="dialog" aria-modal="true">
|
||||
<div class="safe-area">
|
||||
<header class="header">
|
||||
<h2 class="title">单摆分析</h2>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="btn ghost"
|
||||
@click="onRetry"
|
||||
:disabled="loading"
|
||||
v-show="!showLengthInput"
|
||||
>
|
||||
{{ loading ? '分析中…' : '重新分析' }}
|
||||
</button>
|
||||
<button class="btn danger" @click="closeAnalysis" aria-label="关闭">×</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 状态条 -->
|
||||
<div class="status-bar" v-if="loading || error || lastUpdated">
|
||||
<div class="loading" v-if="loading">
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<span>正在分析数据，请稍候…</span>
|
||||
</div>
|
||||
<div class="error" v-else-if="error">
|
||||
<span>{{ error }}</span>
|
||||
<button class="btn small" @click="onRetry">重试</button>
|
||||
</div>
|
||||
<div class="meta" v-else-if="lastUpdated">
|
||||
<span>上次更新：{{ lastUpdated }}</span>
|
||||
<span v-if="sessionId">会话：{{ sessionId.slice(0, 8) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="content">
|
||||
<!-- 摆长输入界面 -->
|
||||
<section v-if="showLengthInput" class="length-input-section">
|
||||
<h3>请输入摆长参数</h3>
|
||||
<div class="input-form">
|
||||
<div class="input-group">
|
||||
<label for="pendulum-length">摆长 (米):</label>
|
||||
<input
|
||||
id="pendulum-length"
|
||||
v-model.number="pendulumLength"
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0.1"
|
||||
max="10"
|
||||
class="length-input"
|
||||
placeholder="请输入摆长，如 1.0"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
<button class="btn primary" @click="startAnalysis" :disabled="!isValidLength">
|
||||
开始分析
|
||||
</button>
|
||||
<button class="btn ghost" @click="closeAnalysis">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-tips">
|
||||
<p>提示：</p>
|
||||
<ul>
|
||||
<li>摆长是从悬挂点到小球中心的距离</li>
|
||||
<li>请确保输入的摆长单位为米</li>
|
||||
<li>典型的实验室单摆摆长范围：0.5-2.0米</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分析结果界面（原有内容） -->
|
||||
<template v-else>
|
||||
<!-- 左侧：图片栅格（横屏优先） -->
|
||||
<section class="results" aria-label="分析图像">
|
||||
<!-- 骨架屏 -->
|
||||
<div v-if="loading && !results.length" class="skeleton-grid">
|
||||
<div class="skeleton-card" v-for="i in 3" :key="'skel-' + i"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="results.length" class="image-grid">
|
||||
<figure v-for="(image, index) in results" :key="index" class="result-item" @click="openLightbox(index)">
|
||||
<img :src="image.url" :alt="image.title" class="result-image" loading="eager" decoding="async" />
|
||||
<figcaption class="result-title">{{ image.title }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty">
|
||||
上传数据后将显示分析图像
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右侧：参数信息（粘性面板） -->
|
||||
<aside class="analysis-info" v-if="analysisInfo">
|
||||
<h3>分析结果</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item" v-for="row in formattedInfo" :key="row.key">
|
||||
<div class="info-label">{{ row.label }}</div>
|
||||
<div class="info-value">{{ row.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<p>提示：</p>
|
||||
<ul>
|
||||
<li>点击左侧图像可全屏查看。</li>
|
||||
<li>如网络抖动，可点“重新分析”。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 图片灯箱 -->
|
||||
<div v-if="lightbox.open" class="lightbox" @click.self="closeLightbox">
|
||||
<button class="btn danger close-lightbox" @click="closeLightbox" aria-label="关闭预览">×</button>
|
||||
<div class="lightbox-inner">
|
||||
<img :src="results[lightbox.index].url" :alt="results[lightbox.index].title" />
|
||||
<div class="lightbox-caption">{{ results[lightbox.index].title }}</div>
|
||||
</div>
|
||||
<button v-if="results.length > 1" class="nav prev" @click.stop="navLightbox(-1)" aria-label="上一张">‹</button>
|
||||
<button v-if="results.length > 1" class="nav next" @click.stop="navLightbox(1)" aria-label="下一张">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
|
||||
type RawPoint = { frame: number; time: number; x: number; y: number };
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
data: RawPoint[],
|
||||
/** 可选：后端基础地址，如 'http://localhost:5000'；默认同源 */
|
||||
apiBase?: string,
|
||||
/** 可选：组件打开时自动分析 */
|
||||
autoAnalyze?: boolean
|
||||
}>(), {
|
||||
apiBase: '',
|
||||
autoAnalyze: false
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const results = ref<{ url: string; title: string }[]>([]);
|
||||
const analysisInfo = ref<Record<string, any> | null>(null);
|
||||
const sessionId = ref<string | null>(null);
|
||||
const lastUpdated = ref<string | null>(null);
|
||||
const pendulumLength = ref<number>(1.0); // 摆长，单位：米
|
||||
const showLengthInput = ref(true); // 显示摆长输入界面
|
||||
|
||||
let controller: AbortController | null = null;
|
||||
|
||||
const closeAnalysis = () => emit('close');
|
||||
const onRetry = () => analyzeData(true);
|
||||
|
||||
/** 验证摆长输入是否有效 */
|
||||
const isValidLength = computed(() => {
|
||||
return pendulumLength.value > 0.1 && pendulumLength.value <= 10;
|
||||
});
|
||||
|
||||
/** 开始分析 */
|
||||
const startAnalysis = () => {
|
||||
if (!isValidLength.value) return;
|
||||
showLengthInput.value = false;
|
||||
analyzeData(true);
|
||||
};
|
||||
|
||||
/** 将相对 URL 前缀化为 {apiBase}+path，保证跨域部署可用 */
|
||||
const withBase = (url: string) => {
|
||||
if (!url) return url;
|
||||
try {
|
||||
// 已是绝对 URL
|
||||
new URL(url);
|
||||
return url;
|
||||
} catch {
|
||||
const base = (props.apiBase || '').replace(/\/+$/, '');
|
||||
return base + url;
|
||||
}
|
||||
};
|
||||
|
||||
/** 新后端字段映射与格式化 */
|
||||
const labelMap: Record<string, string> = {
|
||||
pendulum_length_m: '摆长',
|
||||
gravity_acceleration_m_s2: '重力加速度',
|
||||
damping_coefficient_s_inv: '阻尼系数 γ',
|
||||
period_s: '周期',
|
||||
angle_max_rad: '最大摆角'
|
||||
};
|
||||
const unitMap: Record<string, string> = {
|
||||
pendulum_length_m: ' m',
|
||||
gravity_acceleration_m_s2: ' m/s²',
|
||||
damping_coefficient_s_inv: ' s⁻¹',
|
||||
period_s: ' s',
|
||||
angle_max_rad: ' rad'
|
||||
};
|
||||
const formatNumber = (v: any) => typeof v === 'number' ? (Math.abs(v) < 1e-3 ? v.toExponential(3) : v.toFixed(4)) : v;
|
||||
|
||||
const formattedInfo = computed(() => {
|
||||
if (!analysisInfo.value) return [];
|
||||
return Object.entries(analysisInfo.value).map(([key, val]) => ({
|
||||
key,
|
||||
label: labelMap[key] || key,
|
||||
value: `${formatNumber(val)}${unitMap[key] || ''}`
|
||||
}));
|
||||
});
|
||||
|
||||
/** 生成 CSV（列满足后端：time, x, y, pendulum_length） */
|
||||
const buildCsv = () => {
|
||||
const lines = ['time,x,y,pendulum_length']; // 添加摆长列
|
||||
for (const r of props.data) {
|
||||
lines.push(`${r.time},${r.x},${r.y},${pendulumLength.value}`);
|
||||
}
|
||||
return lines.join('\n');
|
||||
};
|
||||
|
||||
/** 图片标题 */
|
||||
const getImageTitle = (index: number) => {
|
||||
const titles = [
|
||||
'单摆拟合分析',
|
||||
'物理参数摘要',
|
||||
'周期与摆角关系',
|
||||
];
|
||||
return titles[index] || `图像 ${index + 1}`;
|
||||
};
|
||||
|
||||
/** 主流程：发送到 {apiBase}/api/analyze */
|
||||
const analyzeData = async (force = false) => {
|
||||
if (!props.data?.length) return;
|
||||
if (loading.value && !force) return;
|
||||
|
||||
// 取消上一次请求
|
||||
if (controller) controller.abort();
|
||||
controller = new AbortController();
|
||||
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
if (force) results.value = [];
|
||||
|
||||
try {
|
||||
const csv = buildCsv();
|
||||
const fd = new FormData();
|
||||
fd.append('csv_file', new Blob([csv], { type: 'text/csv' }), 'pendulum_data.csv');
|
||||
|
||||
const timeout = setTimeout(() => controller?.abort(), 60_000);
|
||||
const endpoint = `${(props.apiBase || '').replace(/\/+$/, '')}/api/analyze`;
|
||||
|
||||
const resp = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
body: fd,
|
||||
signal: controller.signal
|
||||
}).finally(() => clearTimeout(timeout));
|
||||
|
||||
// 解析错误
|
||||
if (!resp.ok) {
|
||||
let msg = `服务器错误: ${resp.status}`;
|
||||
try {
|
||||
const j = await resp.json();
|
||||
if (j?.error) msg = j.error;
|
||||
} catch { /* ignore */ }
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
const json = await resp.json();
|
||||
|
||||
if (json.success === false) {
|
||||
throw new Error(json.error || '分析失败');
|
||||
}
|
||||
|
||||
// 结果
|
||||
sessionId.value = json.session_id || null;
|
||||
|
||||
if (Array.isArray(json.images)) {
|
||||
results.value = json.images.map((p: string, i: number) => ({
|
||||
url: withBase(p),
|
||||
title: getImageTitle(i)
|
||||
}));
|
||||
} else {
|
||||
results.value = [];
|
||||
}
|
||||
|
||||
analysisInfo.value = json.analysis_data || null;
|
||||
lastUpdated.value = new Date().toLocaleString();
|
||||
} catch (e: any) {
|
||||
if (e?.name === 'AbortError') {
|
||||
error.value = '请求已取消';
|
||||
} else if (
|
||||
e?.message?.includes('Failed to fetch') ||
|
||||
e?.message?.includes('NetworkError') ||
|
||||
e?.message?.includes('Network request failed')
|
||||
) {
|
||||
error.value = '网络异常，请检查连接后重试';
|
||||
} else {
|
||||
error.value = e?.message || '分析过程中发生错误';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autoAnalyze && props.data?.length) {
|
||||
// 如果设置了自动分析，跳过摆长输入界面
|
||||
showLengthInput.value = false;
|
||||
analyzeData(true);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
console.log('PendulumAnalysis component unmounted');
|
||||
|
||||
});
|
||||
|
||||
/** 灯箱逻辑 */
|
||||
const lightbox = ref({ open: false, index: 0 });
|
||||
const openLightbox = (i: number) => {
|
||||
lightbox.value.open = true;
|
||||
lightbox.value.index = i;
|
||||
nextTick(() => {
|
||||
// 禁止页面滚动（移动端体验更好）
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
};
|
||||
const closeLightbox = () => {
|
||||
lightbox.value.open = false;
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
const navLightbox = (step: number) => {
|
||||
if (!results.value.length) return;
|
||||
const n = results.value.length;
|
||||
lightbox.value.index = (lightbox.value.index + step + n) % n;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ========== 基础布局（横屏优先） ========== */
|
||||
.pendulum-analysis {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: radial-gradient(1200px 800px at 70% -10%, rgba(0, 255, 170, 0.08), transparent 60%),
|
||||
#0b0f12;
|
||||
color: #e8f8f4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.safe-area {
|
||||
padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
color: #00ffaa;
|
||||
text-shadow: 0 0 12px rgba(0, 255, 170, 0.25);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e8f8f4;
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: transform .05s ease, background .2s ease, border-color .2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
border-color: rgba(255, 90, 90, 0.45);
|
||||
color: #ffdede;
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
background: rgba(255, 90, 90, 0.15);
|
||||
}
|
||||
|
||||
/* 状态条 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 44px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error,
|
||||
.meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(0, 255, 170, 0.35);
|
||||
border-top-color: #00ffaa;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff7a7a;
|
||||
}
|
||||
|
||||
/* 主内容区：横屏优先双列 */
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
/* 图像区域更大 */
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px),
|
||||
(orientation: portrait) {
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 摆长输入界面 */
|
||||
.length-input-section {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.length-input-section h3 {
|
||||
margin: 0 0 24px 0;
|
||||
color: #00ffaa;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 12px rgba(0, 255, 170, 0.25);
|
||||
}
|
||||
|
||||
.input-form {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
color: #d6efe8;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.length-input {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #e8f8f4;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.length-input:focus {
|
||||
outline: none;
|
||||
border-color: #00ffaa;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.length-input::placeholder {
|
||||
color: rgba(232, 248, 244, 0.5);
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(135deg, #00ffaa, #00cc88);
|
||||
border-color: #00ffaa;
|
||||
color: #0b0f12;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: linear-gradient(135deg, #00cc88, #00aa77);
|
||||
}
|
||||
|
||||
.btn.primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(232, 248, 244, 0.5);
|
||||
}
|
||||
|
||||
.input-tips {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
text-align: left;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.input-tips ul {
|
||||
margin: 4px 0 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 左侧：图像区 */
|
||||
.results {
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.image-grid {
|
||||
grid-auto-rows: minmax(200px, 36vh);
|
||||
}
|
||||
}
|
||||
|
||||
.result-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
|
||||
cursor: zoom-in;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
border-color: rgba(0, 255, 170, 0.25);
|
||||
}
|
||||
|
||||
.result-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
object-fit: contain;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
color: #cfeee6;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* 骨架屏 */
|
||||
.skeleton-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: min(36vh, 320px);
|
||||
border-radius: 14px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%) 0 0 / 400% 100%,
|
||||
rgba(255, 255, 255, 0.04);
|
||||
animation: shimmer 1.6s infinite;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
/* 右侧：参数面板（粘性） */
|
||||
.analysis-info {
|
||||
position: sticky;
|
||||
top: 8px;
|
||||
align-self: start;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.analysis-info h3 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #00ffaa;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 10px;
|
||||
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #d6efe8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #00ffaa;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 2px 0 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 灯箱 */
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(0, 0, 0, 0.86);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.lightbox-inner {
|
||||
width: 95vw;
|
||||
height: 86vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lightbox-inner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.lightbox-caption {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #cfeee6;
|
||||
}
|
||||
|
||||
.close-lightbox {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav:hover {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.nav.prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.nav.next {
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
body{
|
||||
margin: 0;
|
||||
background-color: #1F1F1F;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './main.css'
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,54 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
export type StartOptions = {
|
||||
preferRearCamera?: boolean;
|
||||
width?: number; height?: number; fps?: number;
|
||||
deviceId?: string;
|
||||
};
|
||||
|
||||
export function useCamera() {
|
||||
const stream = ref<MediaStream | null>(null);
|
||||
const devices = ref<MediaDeviceInfo[]>([]);
|
||||
const activeDeviceId = ref<string | null>(null);
|
||||
|
||||
async function enumerate() {
|
||||
try {
|
||||
const list = await navigator.mediaDevices.enumerateDevices();
|
||||
devices.value = list.filter(d => d.kind === 'videoinput');
|
||||
return devices.value;
|
||||
} catch (e) { return []; }
|
||||
}
|
||||
|
||||
async function start(opts: StartOptions = {}) {
|
||||
await stop();
|
||||
const preferRear = opts.preferRearCamera ?? true;
|
||||
const constraints: MediaStreamConstraints = {
|
||||
video: {
|
||||
width: { ideal: opts.width ?? 1280 },
|
||||
height: { ideal: opts.height ?? 720 },
|
||||
frameRate: { ideal: opts.fps ?? 60, max: 120 },
|
||||
...(opts.deviceId ? { deviceId: { exact: opts.deviceId } } : { facingMode: preferRear ? { ideal: 'environment' } : 'user' }),
|
||||
},
|
||||
audio: false
|
||||
} as any;
|
||||
|
||||
const s = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
stream.value = s;
|
||||
|
||||
// remember deviceId if available
|
||||
const track = s.getVideoTracks()[0];
|
||||
// @ts-ignore
|
||||
const settings = track.getSettings?.() || {};
|
||||
activeDeviceId.value = settings.deviceId || null;
|
||||
|
||||
return s;
|
||||
}
|
||||
|
||||
async function stop() {
|
||||
if (!stream.value) return;
|
||||
for (const t of stream.value.getTracks()) t.stop();
|
||||
stream.value = null;
|
||||
}
|
||||
|
||||
return { stream, devices, activeDeviceId, enumerate, start, stop };
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
export interface ChartRange {
|
||||
min: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
export interface PerformanceInfo {
|
||||
lastUpdateTime: number;
|
||||
frameTime: number[];
|
||||
avgFrameTime: number;
|
||||
minFrameTime: number;
|
||||
maxFrameTime: number;
|
||||
fps: number;
|
||||
fpsUpdateTime: number;
|
||||
frameCountForFps: number;
|
||||
}
|
||||
|
||||
// 固定的y轴范围常量
|
||||
export const FIXED_MIN_Y = 0; // 最小帧时间 (ms)
|
||||
export const FIXED_MAX_Y = 100; // 最大帧时间 (ms)，可根据实际情况调整
|
||||
|
||||
// 位置图表的常量
|
||||
export const MAX_POSITION_HISTORY = 128; // 最多保存的历史点数
|
||||
export const POSITION_CHART_PADDING = 20; // 图表边距，防止数值贴边
|
||||
|
||||
/**
|
||||
* 绘制性能图表
|
||||
*/
|
||||
export function drawPerformanceChart(
|
||||
canvas: HTMLCanvasElement | null,
|
||||
data: number[],
|
||||
minY = FIXED_MIN_Y,
|
||||
maxY = FIXED_MAX_Y
|
||||
) {
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// 画布尺寸
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 绘制背景
|
||||
ctx.fillStyle = '#1a1a2e';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// 绘制网格线
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// 水平网格线
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = (i / 4) * height;
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(width, y);
|
||||
}
|
||||
|
||||
// 垂直网格线
|
||||
for (let i = 0; i <= 8; i++) {
|
||||
const x = (i / 8) * width;
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, height);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// 绘制y轴刻度值
|
||||
ctx.font = '8px Arial';
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
|
||||
ctx.textAlign = 'left';
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = height - (i / 4) * height;
|
||||
const value = Math.round(minY + (i / 4) * (maxY - minY));
|
||||
ctx.fillText(`${value}ms`, 2, y - 2);
|
||||
}
|
||||
|
||||
if (data.length < 2) return;
|
||||
|
||||
// 绘制曲线阴影
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||
gradient.addColorStop(0, 'rgba(0, 255, 170, 0.5)');
|
||||
gradient.addColorStop(1, 'rgba(0, 255, 170, 0.05)');
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
// 使用固定的Y轴范围进行归一化
|
||||
const normalizedValue = Math.min(1, Math.max(0, (data[i] - minY) / (maxY - minY)));
|
||||
const y = height - normalizedValue * height;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
// 完成区域填充路径
|
||||
ctx.lineTo(width, height);
|
||||
ctx.lineTo(0, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
|
||||
// 绘制原始数据曲线
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
// 使用固定的Y轴范围进行归一化
|
||||
const normalizedValue = Math.min(1, Math.max(0, (data[i] - minY) / (maxY - minY)));
|
||||
const y = height - normalizedValue * height;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
ctx.strokeStyle = '#00ffaa';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
// 绘制平均线
|
||||
if (data.length > 0) {
|
||||
const avg = data.reduce((a, b) => a + b, 0) / data.length;
|
||||
const normalizedAvg = Math.min(1, Math.max(0, (avg - minY) / (maxY - minY)));
|
||||
const avgY = height - normalizedAvg * height;
|
||||
ctx.beginPath();
|
||||
ctx.setLineDash([3, 3]);
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
|
||||
ctx.moveTo(0, avgY);
|
||||
ctx.lineTo(width, avgY);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制位置图表
|
||||
*/
|
||||
export function drawPositionChart(
|
||||
canvas: HTMLCanvasElement | null,
|
||||
data: number[],
|
||||
range: ChartRange,
|
||||
label: string
|
||||
) {
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// 画布尺寸
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 绘制背景
|
||||
ctx.fillStyle = '#1a1a2e';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// 绘制网格线
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// 水平网格线
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = (i / 4) * height;
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(width, y);
|
||||
}
|
||||
|
||||
// 垂直网格线
|
||||
for (let i = 0; i <= 8; i++) {
|
||||
const x = (i / 8) * width;
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, height);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// 绘制y轴刻度值
|
||||
ctx.font = '8px Arial';
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
|
||||
ctx.textAlign = 'left';
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = height - (i / 4) * height;
|
||||
const value = Math.round(range.min + (i / 4) * (range.max - range.min));
|
||||
ctx.fillText(`${value}`, 2, y - 2);
|
||||
}
|
||||
|
||||
if (data.length < 2) return;
|
||||
|
||||
// 绘制曲线阴影
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||
gradient.addColorStop(0, label === 'X位置' ? 'rgba(255, 100, 100, 0.5)' : 'rgba(100, 100, 255, 0.5)');
|
||||
gradient.addColorStop(1, label === 'X位置' ? 'rgba(255, 100, 100, 0.05)' : 'rgba(100, 100, 255, 0.05)');
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
// 归一化数据点
|
||||
const normalizedValue = Math.min(1, Math.max(0, (data[i] - range.min) / (range.max - range.min)));
|
||||
const y = height - normalizedValue * height;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
// 完成区域填充路径
|
||||
ctx.lineTo(width, height);
|
||||
ctx.lineTo(0, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
|
||||
// 绘制原始数据曲线
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
// 归一化数据点
|
||||
const normalizedValue = Math.min(1, Math.max(0, (data[i] - range.min) / (range.max - range.min)));
|
||||
const y = height - normalizedValue * height;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.strokeStyle = label === 'X位置' ? '#ff6464' : '#6464ff';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
import cv from '@techstark/opencv-js'
|
||||
|
||||
export interface TrackerParams {
|
||||
lowerYellow: any;
|
||||
upperYellow: any;
|
||||
blurSize: number;
|
||||
morphKernel: number;
|
||||
minContourArea: number;
|
||||
useRoi: boolean;
|
||||
roiScaleX: number;
|
||||
roiScaleY: number;
|
||||
}
|
||||
|
||||
export interface Position {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export class YellowBallTracker {
|
||||
public srcMat: cv.Mat | null = null
|
||||
private hsvMat: cv.Mat | null = null
|
||||
private blurredMat: cv.Mat | null = null
|
||||
private maskMat: cv.Mat | null = null
|
||||
private hierarchy: cv.Mat | null = null
|
||||
private contours: cv.MatVector | null = null
|
||||
private morphKernelMat: cv.Mat | null = null
|
||||
private lowerBoundMat: cv.Mat | null = null
|
||||
private upperBoundMat: cv.Mat | null = null
|
||||
private params: TrackerParams
|
||||
|
||||
constructor(params: TrackerParams) {
|
||||
this.params = params
|
||||
}
|
||||
|
||||
public updateKernel() {
|
||||
if (this.morphKernelMat) this.morphKernelMat.delete()
|
||||
this.morphKernelMat = cv.Mat.ones(this.params.morphKernel, this.params.morphKernel, cv.CV_8U)
|
||||
}
|
||||
|
||||
public initMats(w: number, h: number) {
|
||||
this.cleanupMats()
|
||||
|
||||
this.srcMat = new cv.Mat(h, w, cv.CV_8UC4)
|
||||
this.hsvMat = new cv.Mat()
|
||||
this.blurredMat = new cv.Mat()
|
||||
this.maskMat = new cv.Mat()
|
||||
this.hierarchy = new cv.Mat()
|
||||
this.contours = new cv.MatVector()
|
||||
this.updateKernel()
|
||||
// 创建阈值 Mat
|
||||
this.lowerBoundMat = new cv.Mat(h, w, cv.CV_8UC3, this.params.lowerYellow)
|
||||
this.upperBoundMat = new cv.Mat(h, w, cv.CV_8UC3, this.params.upperYellow)
|
||||
}
|
||||
|
||||
private calculateROI(lastPos: Position): { x: number, y: number, width: number, height: number } {
|
||||
const width = this.srcMat!.cols * this.params.roiScaleX
|
||||
const height = this.srcMat!.rows * this.params.roiScaleY
|
||||
const x = Math.max(0, Math.min(this.srcMat!.cols - width, lastPos.x - width / 2))
|
||||
const y = Math.max(0, Math.min(this.srcMat!.rows - height, lastPos.y - height / 2))
|
||||
|
||||
return {
|
||||
x: Math.round(x),
|
||||
y: Math.round(y),
|
||||
width: Math.round(width),
|
||||
height: Math.round(height)
|
||||
}
|
||||
}
|
||||
|
||||
private drawROIDebugInfo(roi: { x: number, y: number, width: number, height: number }) {
|
||||
cv.rectangle(this.srcMat!,
|
||||
new cv.Point(roi.x, roi.y),
|
||||
new cv.Point(roi.x + roi.width, roi.y + roi.height),
|
||||
new cv.Scalar(255, 0, 0, 255), 2)
|
||||
}
|
||||
|
||||
private processImage(inputMat: cv.Mat, lowerBound: cv.Mat, upperBound: cv.Mat) {
|
||||
// 颜色空间转换和模糊处理
|
||||
cv.cvtColor(inputMat, this.hsvMat!, cv.COLOR_RGBA2RGB)
|
||||
cv.cvtColor(this.hsvMat!, this.hsvMat!, cv.COLOR_RGB2HSV)
|
||||
cv.blur(this.hsvMat!, this.blurredMat!, new cv.Size(this.params.blurSize, this.params.blurSize))
|
||||
|
||||
// 颜色范围过滤
|
||||
cv.inRange(this.blurredMat!, lowerBound, upperBound, this.maskMat!)
|
||||
|
||||
// 形态学操作
|
||||
cv.morphologyEx(this.maskMat!, this.maskMat!, cv.MORPH_OPEN, this.morphKernelMat!)
|
||||
cv.morphologyEx(this.maskMat!, this.maskMat!, cv.MORPH_CLOSE, this.morphKernelMat!)
|
||||
cv.dilate(this.maskMat!, this.maskMat!, this.morphKernelMat!)
|
||||
}
|
||||
|
||||
private findBestContour(offsetX: number = 0, offsetY: number = 0): Position | null {
|
||||
// 查找轮廓
|
||||
this.contours!.delete()
|
||||
this.contours = new cv.MatVector()
|
||||
cv.findContours(this.maskMat!, this.contours, this.hierarchy!, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE)
|
||||
|
||||
// 找到最大面积的轮廓
|
||||
let maxArea = 0
|
||||
let best: Position | null = null
|
||||
|
||||
for (let i = 0; i < this.contours.size(); i++) {
|
||||
const cnt = this.contours.get(i)
|
||||
const area = cv.contourArea(cnt)
|
||||
|
||||
if (area > this.params.minContourArea && area > maxArea) {
|
||||
maxArea = area
|
||||
const circle = cv.minEnclosingCircle(cnt)
|
||||
best = {
|
||||
x: Math.round(circle.center.x + offsetX),
|
||||
y: Math.round(circle.center.y + offsetY)
|
||||
}
|
||||
}
|
||||
cnt.delete()
|
||||
}
|
||||
|
||||
return best
|
||||
}
|
||||
|
||||
private drawDetectionResult(position: Position) {
|
||||
cv.circle(this.srcMat!, new cv.Point(position.x, position.y), 10, new cv.Scalar(0, 255, 0, 255), 2)
|
||||
}
|
||||
|
||||
public detectYellowBall(imgData: ImageData, lastPos?: Position | null): Position | null {
|
||||
if (!this.srcMat || !this.hsvMat || !this.blurredMat || !this.maskMat || !this.hierarchy ||
|
||||
!this.contours || !this.morphKernelMat || !this.lowerBoundMat || !this.upperBoundMat) {
|
||||
console.error('Mats not initialized')
|
||||
return null
|
||||
}
|
||||
|
||||
// Set image data
|
||||
this.srcMat.data.set(imgData.data)
|
||||
|
||||
let best: Position | null = null
|
||||
let srcRoiMat = new cv.Mat()
|
||||
|
||||
try {
|
||||
// 尝试ROI检测
|
||||
if (this.params.useRoi && lastPos) {
|
||||
const roi = this.calculateROI(lastPos)
|
||||
this.drawROIDebugInfo(roi)
|
||||
|
||||
// 提取ROI区域
|
||||
const roiRect = new cv.Rect(roi.x, roi.y, roi.width, roi.height)
|
||||
srcRoiMat = this.srcMat.roi(roiRect)
|
||||
|
||||
// 为ROI区域创建合适大小的阈值Mat
|
||||
const roiLowerBound = new cv.Mat(roi.height, roi.width, cv.CV_8UC3, this.params.lowerYellow)
|
||||
const roiUpperBound = new cv.Mat(roi.height, roi.width, cv.CV_8UC3, this.params.upperYellow)
|
||||
|
||||
try {
|
||||
this.processImage(srcRoiMat, roiLowerBound, roiUpperBound)
|
||||
best = this.findBestContour(roi.x, roi.y)
|
||||
} finally {
|
||||
roiLowerBound.delete()
|
||||
roiUpperBound.delete()
|
||||
}
|
||||
}
|
||||
|
||||
// 如果ROI中没找到或者没启用ROI，就在全图搜索
|
||||
if (!best) {
|
||||
if (this.params.useRoi && lastPos) {
|
||||
console.log("ROI失败，全域搜索")
|
||||
}
|
||||
|
||||
this.processImage(this.srcMat, this.lowerBoundMat, this.upperBoundMat)
|
||||
best = this.findBestContour()
|
||||
}
|
||||
|
||||
// 在原图上绘制找到的点
|
||||
if (best) {
|
||||
this.drawDetectionResult(best)
|
||||
}
|
||||
|
||||
} finally {
|
||||
// 清理资源
|
||||
srcRoiMat.delete()
|
||||
}
|
||||
|
||||
return best
|
||||
}
|
||||
|
||||
public getOutputCanvas(targetCanvas: HTMLCanvasElement) {
|
||||
if (!this.srcMat) return null
|
||||
cv.imshow(targetCanvas, this.srcMat)
|
||||
return targetCanvas
|
||||
}
|
||||
|
||||
public updateParams(params: Partial<TrackerParams>) {
|
||||
this.params = { ...this.params, ...params }
|
||||
|
||||
// 如果更新了morphKernel，需要重新创建kernel
|
||||
if ('morphKernel' in params) {
|
||||
this.updateKernel()
|
||||
}
|
||||
}
|
||||
|
||||
public cleanupMats() {
|
||||
// 清理资源
|
||||
if (this.srcMat) this.srcMat.delete()
|
||||
if (this.hsvMat) this.hsvMat.delete()
|
||||
if (this.blurredMat) this.blurredMat.delete()
|
||||
if (this.maskMat) this.maskMat.delete()
|
||||
if (this.hierarchy) this.hierarchy.delete()
|
||||
if (this.contours) this.contours.delete()
|
||||
if (this.morphKernelMat) this.morphKernelMat.delete()
|
||||
if (this.lowerBoundMat) this.lowerBoundMat.delete()
|
||||
if (this.upperBoundMat) this.upperBoundMat.delete()
|
||||
|
||||
// 重置引用
|
||||
this.srcMat = null
|
||||
this.hsvMat = null
|
||||
this.blurredMat = null
|
||||
this.maskMat = null
|
||||
this.hierarchy = null
|
||||
this.contours = null
|
||||
this.morphKernelMat = null
|
||||
this.lowerBoundMat = null
|
||||
this.upperBoundMat = null
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server:{
|
||||
host:'0.0.0.0'
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user