26 Commits

Author SHA1 Message Date
71b7b16bdd Add router debugging keys
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-16 09:16:19 -07:00
1936d90550 Fix structure click selection error
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-12 20:22:41 -07:00
8bf74e51ea Cleanup additional tensor in detection worker
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-12 15:25:53 -07:00
21e46713a7 Fix infolink error on chip auto deselection
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-12 15:03:32 -07:00
726d56131c Clean up variable declarations
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-11 20:20:00 -07:00
874901086d Add Structure Class (#203)
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
This PR adds a class for detected structures and two additional classes to handle the coordinates of the bounding boxes for those structures.  The classes do a better job handling conversions between image pixels, canvas pixels, and screen pixels.  This means that they take the place of several chunks of the previous code such as the box2cvs function.

Reviewed-on: #203
2024-10-12 02:28:22 +00:00
a98577e206 Optimize reactive vue data variables
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-05 16:30:33 -07:00
9e90823858 Fix meta tag warning
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-04 18:52:00 -07:00
269e62b5fb Fix scrolling on non-detect pages
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-04 18:51:29 -07:00
1c62f2783c Update help page with clipboard info
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-04 18:31:44 -07:00
9ba3580056 Add clipboard image selection method (#201)
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 1m2s
Closes #200

This pr adds a clipboard button to the image selection popover if the connection secure (clipboard is blocked by most browsers over insecure connection).

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: #201
2024-10-04 16:30:37 +00:00
9415fa3783 Improve infolink visuals
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-10-03 08:50:46 -07:00
966782d8b9 Loop through structure clicks
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-29 12:01:29 -07:00
ce76528958 Change highlight alpha from filter to global alpha
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 36s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-27 12:00:25 -07:00
c3420dbcdf Change structure highlight to css filter (#198)
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 36s
Closes #196

Instead of drawing a bounding box, structures are highlighted when selected by using css fitlers to render non-structure regions of the image in half-opaque grayscale.

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: #198
2024-09-27 17:33:51 +00:00
f32f107078 Disable pinch events on safari main document
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-27 10:31:54 -07:00
43ccf20561 Fix pinch to zoom
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-25 20:04:59 -07:00
8c2a135afb Update help page
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 36s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-25 08:27:03 -07:00
ab6af04e5b Use canvas for image rendering (#197)
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Closes #194, Closes #189

Instead of making the detection image the background of the canvas element the image is now drawn as part of the canvas.  This enables pan and zoom of the image as well.

Reviewed-on: #197
2024-09-25 15:05:00 +00:00
8ba930ed2e Remove run attempt from build number
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 36s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-12 19:55:30 -07:00
d2ee45c61a Add build info to specs page
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-12 19:47:09 -07:00
e4a3d1ab46 Remove safari detection
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-12 18:56:03 -07:00
862773d622 Upgrade tensorflowjs
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-11 16:32:55 -07:00
47ec235cfa Clean up new worker configuration
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 39s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-11 11:46:37 -07:00
dcdde0289b Set worker use as configuration setting
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-11 10:55:26 -07:00
390faf0a29 Replace url parse with new url for safari
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 38s
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-09-10 17:41:20 -07:00
23 changed files with 717 additions and 338 deletions

View File

@@ -13,6 +13,8 @@ jobs:
uses: actions/checkout@v4
- name: Install node modules
run: npm install
- name: Add build number
run: sed -i 's/####/#${{ github.run_number }}/' ./src/js/store.js
- name: Build pwa
run: npm run build
- name: Replace previous dev pwa

5
.gitignore vendored
View File

@@ -40,7 +40,8 @@ cordova/platforms/
cordova/plugins/
cordova/www/
# Production build
www/
# VSCode settings
.vscode/settings.json

View File

@@ -47,9 +47,10 @@ The following site settings are avaible:
| name | description | values | default |
| --- | --- | --- | --- |
| `agreeExpire` | number of months before users are shown the site agreement dialog again<br />set to 0 to display dialog on every reload | integer >= 0 | 3 |
| `demo` | set to **true** to enable demo mode by default | boolean | false
| `demo` | set to **true** to enable demo mode by default | boolean | false |
| `regions` | array of regions names to enable | thorax, abdomen, limbs, head | [thorax, abdomen, limbs, head] |
| `useExternal` | detemines the ability to use an external detection server:<br />**none** - external server cannot be configured<br />**optional** - external server can be configured in the app's settings page<br />**list** - external server can be selected in the app's settings page but only the configured server(s) may be selected<br />**required** - external server settings from conf file will be used by default and disable server options in the settings page | none, optional, list, required | **optional** |
| `disableWorkers` | force app to use a single thread for detection computations instead of multi threading web workers | boolean | **optional** |
| `external` | properties of the external server(s) ALVINN may connect to<br />This setting must be a single element array if **useExternal** is set to **required**.<br />This setting must be an array of one or more elements if **useExternal** is set to **list** | external server settings array | []|
| `infoUrl` | root url for links to information about identified structures<br />Structure labels with spaces replaced by underscores will be appended to this value for full information links (*e.g.,* Abdominal_diapragm) | string | info link not shown |

173
package-lock.json generated
View File

@@ -1,16 +1,16 @@
{
"name": "alvinn",
"version": "0.5.0-rc",
"version": "0.5.0-alpha",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "alvinn",
"version": "0.5.0-rc",
"version": "0.5.0-alpha",
"hasInstallScript": true,
"license": "UNLICENSED",
"dependencies": {
"@tensorflow/tfjs": "^4.17.0",
"@tensorflow/tfjs": "^4.21.0",
"dom7": "^4.0.6",
"framework7": "^8.3.0",
"framework7-icons": "^5.0.5",
@@ -3354,16 +3354,17 @@
}
},
"node_modules/@tensorflow/tfjs": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.17.0.tgz",
"integrity": "sha512-yXRBhpM3frlNA/YaPp6HNk9EfIi8han5RYeQA3R8OCa0Od+AfoG1PUmlxV8fE2wCorlGVyHsgpiJ6M9YZPB56w==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.21.0.tgz",
"integrity": "sha512-7D/+H150ptvt+POMbsME3WlIvLiuBR2rCC2Z0hOKKb/5Ygkj7xsp/K2HzOvUj0g0yjk+utkU45QEYhnhjnbHRA==",
"license": "Apache-2.0",
"dependencies": {
"@tensorflow/tfjs-backend-cpu": "4.17.0",
"@tensorflow/tfjs-backend-webgl": "4.17.0",
"@tensorflow/tfjs-converter": "4.17.0",
"@tensorflow/tfjs-core": "4.17.0",
"@tensorflow/tfjs-data": "4.17.0",
"@tensorflow/tfjs-layers": "4.17.0",
"@tensorflow/tfjs-backend-cpu": "4.21.0",
"@tensorflow/tfjs-backend-webgl": "4.21.0",
"@tensorflow/tfjs-converter": "4.21.0",
"@tensorflow/tfjs-core": "4.21.0",
"@tensorflow/tfjs-data": "4.21.0",
"@tensorflow/tfjs-layers": "4.21.0",
"argparse": "^1.0.10",
"chalk": "^4.1.0",
"core-js": "3.29.1",
@@ -3375,9 +3376,10 @@
}
},
"node_modules/@tensorflow/tfjs-backend-cpu": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.17.0.tgz",
"integrity": "sha512-2VSCHnX9qhYTjw9HiVwTBSnRVlntKXeBlK7aSVsmZfHGwWE2faErTtO7bWmqNqw0U7gyznJbVAjlow/p+0RNGw==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.21.0.tgz",
"integrity": "sha512-yS9Oisg4L48N7ML6677ilv1eP5Jt59S74skSU1cCsM4yBAtH4DAn9b89/JtqBISh6JadanfX26b4HCWQvMvqFg==",
"license": "Apache-2.0",
"dependencies": {
"@types/seedrandom": "^2.4.28",
"seedrandom": "^3.0.5"
@@ -3386,15 +3388,16 @@
"yarn": ">= 1.3.2"
},
"peerDependencies": {
"@tensorflow/tfjs-core": "4.17.0"
"@tensorflow/tfjs-core": "4.21.0"
}
},
"node_modules/@tensorflow/tfjs-backend-webgl": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.17.0.tgz",
"integrity": "sha512-CC5GsGECCd7eYAUaKq0XJ48FjEZdgXZWPxgUYx4djvfUx5fQPp35hCSP9w/k463jllBMbjl2tKRg8u7Ia/LYzg==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.21.0.tgz",
"integrity": "sha512-7k6mb7dd0uF9jI51iunF3rhEXjvR/a613kjWZ0Rj3o1COFrneyku2C7cRMZERWPhbgXZ+dF+j9MdpGIpgtShIQ==",
"license": "Apache-2.0",
"dependencies": {
"@tensorflow/tfjs-backend-cpu": "4.17.0",
"@tensorflow/tfjs-backend-cpu": "4.21.0",
"@types/offscreencanvas": "~2019.3.0",
"@types/seedrandom": "^2.4.28",
"seedrandom": "^3.0.5"
@@ -3403,21 +3406,23 @@
"yarn": ">= 1.3.2"
},
"peerDependencies": {
"@tensorflow/tfjs-core": "4.17.0"
"@tensorflow/tfjs-core": "4.21.0"
}
},
"node_modules/@tensorflow/tfjs-converter": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.17.0.tgz",
"integrity": "sha512-qFxIjPfomCuTrYxsFjtKbi3QfdmTTCWo+RvqD64oCMS0sjp7sUDNhJyKDoLx6LZhXlwXpHIVDJctLMRMwet0Zw==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.21.0.tgz",
"integrity": "sha512-cUhU+F1lGx2qnKk/gRy8odBh0PZlFz0Dl71TG8LVnj0/g352DqiNrKXlKO/po9aWzP8x0KUGC3gNMSMJW+T0DA==",
"license": "Apache-2.0",
"peerDependencies": {
"@tensorflow/tfjs-core": "4.17.0"
"@tensorflow/tfjs-core": "4.21.0"
}
},
"node_modules/@tensorflow/tfjs-core": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.17.0.tgz",
"integrity": "sha512-v9Q5430EnRpyhWNd9LVgXadciKvxLiq+sTrLKRowh26BHyAsams4tZIgX3lFKjB7b90p+FYifVMcqLTTHgjGpQ==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.21.0.tgz",
"integrity": "sha512-ZbECwXps5wb9XXcGq4ZXvZDVjr5okc3I0+i/vU6bpQ+nVApyIrMiyEudP8f6vracVTvNmnlN62vUXoEsQb2F8g==",
"license": "Apache-2.0",
"dependencies": {
"@types/long": "^4.0.1",
"@types/offscreencanvas": "~2019.7.0",
@@ -3434,28 +3439,31 @@
"node_modules/@tensorflow/tfjs-core/node_modules/@types/offscreencanvas": {
"version": "2019.7.3",
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
"license": "MIT"
},
"node_modules/@tensorflow/tfjs-data": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.17.0.tgz",
"integrity": "sha512-aPKrDFip+gXicWOFALeNT7KKQjRXFkHd/hNe/zs4mCFcIN00hy1PkZ6xkYsgrsdLDQMBSGeS4B4ZM0k5Cs88QA==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.21.0.tgz",
"integrity": "sha512-LpJ/vyQMwYHkcVCqIRg7IVVw13VBY7rNAiuhmKP9S5NP/2ye4KA8BJ4XwDIDgjCVQM7glK9L8bMav++xCDf7xA==",
"license": "Apache-2.0",
"dependencies": {
"@types/node-fetch": "^2.1.2",
"node-fetch": "~2.6.1",
"string_decoder": "^1.3.0"
},
"peerDependencies": {
"@tensorflow/tfjs-core": "4.17.0",
"@tensorflow/tfjs-core": "4.21.0",
"seedrandom": "^3.0.5"
}
},
"node_modules/@tensorflow/tfjs-layers": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.17.0.tgz",
"integrity": "sha512-DEE0zRKvf3LJ0EcvG5XouJYOgFGWYAneZ0K1d23969z7LfSyqVmBdLC6BTwdLKuJk3ouUJIKXU1TcpFmjDuh7g==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.21.0.tgz",
"integrity": "sha512-a8KaMYlY3+llvE9079nvASKpaaf8xpCMdOjbgn+eGhdOGOcY7QuFUkd/2odvnXDG8fK/jffE1LoNOlfYoBHC4w==",
"license": "Apache-2.0 AND MIT",
"peerDependencies": {
"@tensorflow/tfjs-core": "4.17.0"
"@tensorflow/tfjs-core": "4.21.0"
}
},
"node_modules/@tensorflow/tfjs/node_modules/regenerator-runtime": {
@@ -3472,7 +3480,8 @@
"node_modules/@types/long": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
"integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
"integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==",
"license": "MIT"
},
"node_modules/@types/minimist": {
"version": "1.2.5",
@@ -3492,6 +3501,7 @@
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
"integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
"license": "MIT",
"dependencies": {
"@types/node": "*",
"form-data": "^4.0.0"
@@ -3506,7 +3516,8 @@
"node_modules/@types/offscreencanvas": {
"version": "2019.3.0",
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz",
"integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q=="
"integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q==",
"license": "MIT"
},
"node_modules/@types/resolve": {
"version": "1.17.1",
@@ -3520,7 +3531,8 @@
"node_modules/@types/seedrandom": {
"version": "2.4.34",
"resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.34.tgz",
"integrity": "sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A=="
"integrity": "sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A==",
"license": "MIT"
},
"node_modules/@types/trusted-types": {
"version": "2.0.6",
@@ -3646,7 +3658,8 @@
"node_modules/@webgpu/types": {
"version": "0.1.38",
"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.38.tgz",
"integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA=="
"integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA==",
"license": "BSD-3-Clause"
},
"node_modules/acorn": {
"version": "8.11.2",
@@ -3814,7 +3827,8 @@
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/at-least-node": {
"version": "1.0.0",
@@ -4412,6 +4426,7 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
@@ -4872,6 +4887,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
@@ -5357,6 +5373,7 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
@@ -6577,7 +6594,8 @@
"node_modules/long": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
"license": "Apache-2.0"
},
"node_modules/lower-case": {
"version": "2.0.2",
@@ -6688,6 +6706,7 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
@@ -6696,6 +6715,7 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
@@ -6823,6 +6843,7 @@
"version": "2.6.13",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz",
"integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==",
"license": "MIT",
"dependencies": {
"whatwg-url": "^5.0.0"
},
@@ -6841,17 +6862,20 @@
"node_modules/node-fetch/node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
"license": "MIT"
},
"node_modules/node-fetch/node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
"license": "BSD-2-Clause"
},
"node_modules/node-fetch/node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"license": "MIT",
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
@@ -8481,7 +8505,8 @@
"node_modules/seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
"license": "MIT"
},
"node_modules/semver": {
"version": "6.3.1",
@@ -11858,16 +11883,16 @@
}
},
"@tensorflow/tfjs": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.17.0.tgz",
"integrity": "sha512-yXRBhpM3frlNA/YaPp6HNk9EfIi8han5RYeQA3R8OCa0Od+AfoG1PUmlxV8fE2wCorlGVyHsgpiJ6M9YZPB56w==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.21.0.tgz",
"integrity": "sha512-7D/+H150ptvt+POMbsME3WlIvLiuBR2rCC2Z0hOKKb/5Ygkj7xsp/K2HzOvUj0g0yjk+utkU45QEYhnhjnbHRA==",
"requires": {
"@tensorflow/tfjs-backend-cpu": "4.17.0",
"@tensorflow/tfjs-backend-webgl": "4.17.0",
"@tensorflow/tfjs-converter": "4.17.0",
"@tensorflow/tfjs-core": "4.17.0",
"@tensorflow/tfjs-data": "4.17.0",
"@tensorflow/tfjs-layers": "4.17.0",
"@tensorflow/tfjs-backend-cpu": "4.21.0",
"@tensorflow/tfjs-backend-webgl": "4.21.0",
"@tensorflow/tfjs-converter": "4.21.0",
"@tensorflow/tfjs-core": "4.21.0",
"@tensorflow/tfjs-data": "4.21.0",
"@tensorflow/tfjs-layers": "4.21.0",
"argparse": "^1.0.10",
"chalk": "^4.1.0",
"core-js": "3.29.1",
@@ -11883,35 +11908,35 @@
}
},
"@tensorflow/tfjs-backend-cpu": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.17.0.tgz",
"integrity": "sha512-2VSCHnX9qhYTjw9HiVwTBSnRVlntKXeBlK7aSVsmZfHGwWE2faErTtO7bWmqNqw0U7gyznJbVAjlow/p+0RNGw==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.21.0.tgz",
"integrity": "sha512-yS9Oisg4L48N7ML6677ilv1eP5Jt59S74skSU1cCsM4yBAtH4DAn9b89/JtqBISh6JadanfX26b4HCWQvMvqFg==",
"requires": {
"@types/seedrandom": "^2.4.28",
"seedrandom": "^3.0.5"
}
},
"@tensorflow/tfjs-backend-webgl": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.17.0.tgz",
"integrity": "sha512-CC5GsGECCd7eYAUaKq0XJ48FjEZdgXZWPxgUYx4djvfUx5fQPp35hCSP9w/k463jllBMbjl2tKRg8u7Ia/LYzg==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.21.0.tgz",
"integrity": "sha512-7k6mb7dd0uF9jI51iunF3rhEXjvR/a613kjWZ0Rj3o1COFrneyku2C7cRMZERWPhbgXZ+dF+j9MdpGIpgtShIQ==",
"requires": {
"@tensorflow/tfjs-backend-cpu": "4.17.0",
"@tensorflow/tfjs-backend-cpu": "4.21.0",
"@types/offscreencanvas": "~2019.3.0",
"@types/seedrandom": "^2.4.28",
"seedrandom": "^3.0.5"
}
},
"@tensorflow/tfjs-converter": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.17.0.tgz",
"integrity": "sha512-qFxIjPfomCuTrYxsFjtKbi3QfdmTTCWo+RvqD64oCMS0sjp7sUDNhJyKDoLx6LZhXlwXpHIVDJctLMRMwet0Zw==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.21.0.tgz",
"integrity": "sha512-cUhU+F1lGx2qnKk/gRy8odBh0PZlFz0Dl71TG8LVnj0/g352DqiNrKXlKO/po9aWzP8x0KUGC3gNMSMJW+T0DA==",
"requires": {}
},
"@tensorflow/tfjs-core": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.17.0.tgz",
"integrity": "sha512-v9Q5430EnRpyhWNd9LVgXadciKvxLiq+sTrLKRowh26BHyAsams4tZIgX3lFKjB7b90p+FYifVMcqLTTHgjGpQ==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.21.0.tgz",
"integrity": "sha512-ZbECwXps5wb9XXcGq4ZXvZDVjr5okc3I0+i/vU6bpQ+nVApyIrMiyEudP8f6vracVTvNmnlN62vUXoEsQb2F8g==",
"requires": {
"@types/long": "^4.0.1",
"@types/offscreencanvas": "~2019.7.0",
@@ -11930,9 +11955,9 @@
}
},
"@tensorflow/tfjs-data": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.17.0.tgz",
"integrity": "sha512-aPKrDFip+gXicWOFALeNT7KKQjRXFkHd/hNe/zs4mCFcIN00hy1PkZ6xkYsgrsdLDQMBSGeS4B4ZM0k5Cs88QA==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.21.0.tgz",
"integrity": "sha512-LpJ/vyQMwYHkcVCqIRg7IVVw13VBY7rNAiuhmKP9S5NP/2ye4KA8BJ4XwDIDgjCVQM7glK9L8bMav++xCDf7xA==",
"requires": {
"@types/node-fetch": "^2.1.2",
"node-fetch": "~2.6.1",
@@ -11940,9 +11965,9 @@
}
},
"@tensorflow/tfjs-layers": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.17.0.tgz",
"integrity": "sha512-DEE0zRKvf3LJ0EcvG5XouJYOgFGWYAneZ0K1d23969z7LfSyqVmBdLC6BTwdLKuJk3ouUJIKXU1TcpFmjDuh7g==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.21.0.tgz",
"integrity": "sha512-a8KaMYlY3+llvE9079nvASKpaaf8xpCMdOjbgn+eGhdOGOcY7QuFUkd/2odvnXDG8fK/jffE1LoNOlfYoBHC4w==",
"requires": {}
},
"@types/estree": {

View File

@@ -24,7 +24,7 @@
"last 5 Firefox versions"
],
"dependencies": {
"@tensorflow/tfjs": "^4.17.0",
"@tensorflow/tfjs": "^4.21.0",
"dom7": "^4.0.6",
"framework7": "^8.3.0",
"framework7-icons": "^5.0.5",

View File

@@ -6,6 +6,7 @@ regions:
- limbs
- head
useExternal: none
disableWorkers: false
external:
- name: Mserver
address: "192.169.1.105"

View File

@@ -75,14 +75,18 @@ async function localDetect(imageData) {
console.time('sw: post-process')
const outputSize = res.shape[1]
const output = {
detections: []
}
let rawBoxes = []
let rawScores = []
let getScores, getBox, boxCalc
for (var i = 0; i < rawRes.length; i++) {
var getScores = rawRes[i].slice(4)
for (let i = 0; i < rawRes.length; i++) {
getScores = rawRes[i].slice(4)
if (getScores.every( s => s < .05)) { continue }
var getBox = rawRes[i].slice(0,4)
var boxCalc = [
getBox = rawRes[i].slice(0,4)
boxCalc = [
(getBox[0] - (getBox[2] / 2)) / modelWidth,
(getBox[1] - (getBox[3] / 2)) / modelHeight,
(getBox[0] + (getBox[2] / 2)) / modelWidth,
@@ -101,7 +105,7 @@ async function localDetect(imageData) {
let boxes_data = []
let scores_data = []
let classes_data = []
for (var c = 0; c < outputSize - 4; c++) {
for (let c = 0; c < outputSize - 4; c++) {
structureScores = rawScores.map(x => x[c])
tScores = tf.tensor1d(structureScores)
resBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tScores,10,0.5,.05)
@@ -109,7 +113,7 @@ async function localDetect(imageData) {
tf.dispose(resBoxes)
if (validBoxes) {
boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
var outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
let outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
scores_data.push(...outputScores)
classes_data.push(...outputScores.fill(c))
}
@@ -119,18 +123,15 @@ async function localDetect(imageData) {
tf.dispose(tBoxes)
tf.dispose(tScores)
tf.dispose(tRes)
tf.dispose(resBoxes)
const valid_detections_data = classes_data.length
var output = {
detections: []
}
for (var i =0; i < valid_detections_data; i++) {
var [dLeft, dTop, dRight, dBottom] = boxes_data[i]
for (let i =0; i < valid_detections_data; i++) {
let [dLeft, dTop, dRight, dBottom] = boxes_data[i]
output.detections.push({
"top": dTop,
"left": dLeft,
"bottom": dBottom,
"right": dRight,
// "label": this.detectorLabels[classes_data[i]].name,
"label": classes_data[i],
"confidence": scores_data[i] * 100
})
@@ -155,7 +156,7 @@ async function videoFrame (vidData) {
const rawRes = tf.transpose(res,[0,2,1]).arraySync()[0]
if (rawRes) {
for (var i = 0; i < rawRes.length; i++) {
for (let i = 0; i < rawRes.length; i++) {
let getScores = rawRes[i].slice(4)
if (getScores.some( s => s > .5)) {
let foundTarget = rawRes[i].slice(0,2)

View File

@@ -74,12 +74,19 @@
}
},
async created () {
document.addEventListener('keydown', e => {
if (e.code == 'KeyR') {
console.log(f7.views.main.router.history)
}
if (e.code == 'KeyB') {
f7.views.main.router.back()
}
})
if (!window.cordova) {
const confText = await fetch('./conf/conf.yaml')
.then((mod) => { return mod.text() })
this.siteConf = YAML.parse(confText)
}
if (window.safari !== undefined) {store().safariDetected()}
const loadSiteSettings = localStorage.getItem('siteSettings')
if (loadSiteSettings) {
let loadedSettings = JSON.parse(loadSiteSettings)
@@ -99,6 +106,9 @@
store().set('siteDemo',this.siteConf?.demo)
store().set('infoUrl',this.siteConf?.infoUrl)
const loadServerSettings = localStorage.getItem('serverSettings')
if (this.siteConf.disableWorkers) {
store().disableWorkers()
}
if (this.siteConf?.useExternal) {
if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) {
console.warn(`'${this.siteConf.useExternal}' is not a valid value for useExternal configuration: using 'optional'`)

View File

@@ -17,6 +17,9 @@
<path v-else-if="icon == 'head'" d="M194-80v-395h80v315h280v-193l105-105q29-29 45-65t16-77q0-40-16.5-76T659-741l-25-26-127 127H347l-43 43-57-56 67-67h160l160-160 82 82q40 40 62 90.5T800-600q0 57-22 107.5T716-402l-82 82v240H194Zm197-187L183-475q-11-11-17-26t-6-31q0-16 6-30.5t17-25.5l84-85 124 123q28 28 43.5 64.5T450-409q0 40-15 76.5T391-267Z"/>
<path v-else-if="icon == 'photo_sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
<path v-else-if="icon == 'reset_slide'" d="M520-330v-60h160v60H520Zm60 210v-50h-60v-60h60v-50h60v160h-60Zm100-50v-60h160v60H680Zm40-110v-160h60v50h60v60h-60v50h-60Zm111-280h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
<path v-else-if="icon == 'zoom_to'" d="M440-40v-167l-44 43-56-56 140-140 140 140-56 56-44-43v167h-80ZM220-340l-56-56 43-44H40v-80h167l-43-44 56-56 140 140-140 140Zm520 0L600-480l140-140 56 56-43 44h167v80H753l43 44-56 56Zm-260-80q-25 0-42.5-17.5T420-480q0-25 17.5-42.5T480-540q25 0 42.5 17.5T540-480q0 25-17.5 42.5T480-420Zm0-180L340-740l56-56 44 43v-167h80v167l44-43 56 56-140 140Z"/>
<path v-else-if="icon == 'reset_zoom'" d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
<path v-else-if="icon == 'clipboard'" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
</svg>
</template>
@@ -44,7 +47,10 @@
'limbs',
'head',
'photo_sample',
'reset_slide'
'reset_slide',
'zoom_to',
'reset_zoom',
'clipboard'
]
return iconList.includes(value)
}

View File

@@ -150,8 +150,7 @@
.structure-info {
position: absolute;
z-index: 3;
color: rgb(15, 32, 108);
background: yellow;
color: #0f206c;
border-radius: 100%;
}

View File

@@ -18,7 +18,7 @@
<meta name="msapplication-tap-highlight" content="no">
<title>ALVINN</title>
<% if (TARGET === 'web') { %>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="icon" href="icons/favicon.png">

View File

@@ -5,12 +5,13 @@ const state = reactive({
enabledRegions: ['thorax','abdomen','limbs','head'],
regionIconSet: Math.floor(Math.random() * 3) + 1,
version: '0.5.0-alpha',
build: '####',
fullscreen: false,
useExternal: 'optional',
workersEnabled: 'true',
siteDemo: false,
externalServerList: [],
infoUrl: false,
safariBrowser: false
infoUrl: false
})
const set = (config, confObj) => {
@@ -22,8 +23,8 @@ const agree = () => {
state.disclaimerAgreement = true
}
const safariDetected = () => {
state.safariBrowser = true
const disableWorkers = () => {
state.workersEnabled = false
}
const getServerList = () => {
@@ -51,14 +52,15 @@ export default () => ({
isFullscreen: computed(() => state.fullscreen),
demoMode: computed(() => state.siteDemo),
externalType: computed(() => state.useExternal),
useWorkers: computed(() => state.workersEnabled),
getRegions: computed(() => state.enabledRegions),
getVersion: computed(() => state.version),
getBuild: computed(() => state.build),
getIconSet: computed(() => state.regionIconSet),
getInfoUrl: computed(() => state.infoUrl),
isSafari: computed(() => state.safariBrowser),
set,
agree,
safariDetected,
disableWorkers,
getServerList,
toggleFullscreen
})

157
src/js/structures.js Normal file
View File

@@ -0,0 +1,157 @@
class Coordinate {
constructor(x, y) {
this.x = x
this.y = y
}
toRefFrame(...frameArgs) {
if (frameArgs.length == 0) {
return {x: this.x, y: this.y}
}
let outFrames = []
//Get Coordinates in Image Reference Frame
if (frameArgs[0].tagName == 'IMG' && frameArgs[0].width && frameArgs[0].height) {
outFrames.push({
x: this.x * frameArgs[0].width,
y: this.y * frameArgs[0].height
})
} else {
throw new Error('Coordinate: invalid reference frame for frameType: Image')
}
//Get Coordinates in Canvas Reference Frame
if (frameArgs[1]) {
if (frameArgs[1].tagName == 'CANVAS' && frameArgs[1].width && frameArgs[1].height) {
let imgWidth
let imgHeight
const imgAspect = frameArgs[0].width / frameArgs[0].height
const rendAspect = frameArgs[1].width / frameArgs[1].height
if (imgAspect >= rendAspect) {
imgWidth = frameArgs[1].width
imgHeight = frameArgs[1].width / imgAspect
} else {
imgWidth = frameArgs[1].height * imgAspect
imgHeight = frameArgs[1].height
}
outFrames.push({
x: (frameArgs[1].width - imgWidth) / 2 + this.x * imgWidth,
y: (frameArgs[1].height - imgHeight) / 2 + this.y * imgHeight
})
} else {
throw new Error('Coordinate: invalid reference frame for frameType: Canvas')
}
}
//Get Coordinates in Screen Reference Frame
if (frameArgs[2]) {
if (frameArgs[2].zoom && frameArgs[2].offset && frameArgs[2].offset.x !== undefined && frameArgs[2].offset.y !== undefined) {
outFrames.push({
x: outFrames[1].x * frameArgs[2].zoom + frameArgs[2].offset.x,
y: outFrames[1].y * frameArgs[2].zoom + frameArgs[2].offset.y
})
} else {
throw new Error('Coordinate: invalid reference frame for frameType: Screen')
}
}
return outFrames
}
toString() {
return `(x: ${this.x}, y: ${this.y})`
}
}
export class StructureBox {
constructor(top, left, bottom, right) {
this.topLeft = new Coordinate(left, top)
this.bottomRight = new Coordinate(right, bottom)
}
getBoxes(boxType, ...frameArgs) {
let lowerH, lowerV, calcSide
switch (boxType) {
case 'point':
lowerH = 'right'
lowerV = 'bottom'
break
case 'side':
lowerH = 'width'
lowerV = 'height'
calcSide = true
break
default:
throw new Error(`StructureBox: invalid boxType - ${boxType}`)
}
if (frameArgs.length == 0) {
return {
left: this.topLeft.x,
top: this.topLeft.y,
[lowerH]: this.bottomRight.x - ((calcSide) ? this.topLeft.x : 0),
[lowerV]: this.bottomRight.y - ((calcSide) ? this.topLeft.y : 0)
}
}
const tL = this.topLeft.toRefFrame(...frameArgs)
const bR = this.bottomRight.toRefFrame(...frameArgs)
let outBoxes = []
tL.forEach((cd, i) => {
outBoxes.push({
left: cd.x,
top: cd.y,
[lowerH]: bR[i].x - ((calcSide) ? cd.x : 0),
[lowerV]: bR[i].y - ((calcSide) ? cd.y : 0)
})
})
return outBoxes
}
}
export class Structure {
constructor(structResult) {
this.label = structResult.label
this.confidence = structResult.confidence
this.box = new StructureBox(
structResult.top,
structResult.left,
structResult.bottom,
structResult.right
)
this.deleted = false
this.index = -1
this.passThreshold = true
this.searched = false
}
get resultIndex() {
return this.index
}
set resultIndex(newIdx) {
this.index = newIdx
}
get isDeleted() {
return this.deleted
}
set isDeleted(del) {
this.deleted = !!del
}
get isSearched() {
return this.searched
}
set isSearched(ser) {
this.searched = !!ser
}
get aboveThreshold() {
return this.passThreshold
}
setThreshold(level) {
if (typeof level != 'number') {
throw new Error(`Structure: invalid threshold level ${level}`)
}
this.passThreshold = this.confidence >= level
}
}

View File

@@ -3,11 +3,11 @@ import { f7 } from 'framework7-vue'
export default {
methods: {
async openCamera(imContain) {
var cameraLoaded = false
let cameraLoaded = false
const devicesList = await navigator.mediaDevices.enumerateDevices()
this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
if (this.videoDeviceAvailable) {
var vidConstraint = {
let videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
if (videoDeviceAvailable) {
let vidConstraint = {
video: {
width: {
ideal: imContain.offsetWidth
@@ -41,24 +41,24 @@ export default {
tempCtx.drawImage(vidViewer, 0, 0)
this.getImage(tempCVS.toDataURL())
},
async videoFrameDetectWorker (vidData) {
async videoFrameDetectWorker (vidData, vidWorker) {
const startDetection = () => {
createImageBitmap(vidData).then(imVideoFrame => {
this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
})
}
vidData.addEventListener('resize',startDetection,{once: true})
this.vidWorker.onmessage = (eVid) => {
vidWorker.onmessage = (eVid) => {
if (eVid.data.error) {
console.log(eVid.data.message)
f7.dialog.alert(`ALVINN AI model error: ${eVid.data.message}`)
} else if (this.videoAvailable) {
createImageBitmap(vidData).then(imVideoFrame => {
this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
})
if (eVid.data.coords) {
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
for (var coord of eVid.data.coords) {
for (let coord of eVid.data.coords) {
let pointX = (imCanvas.width - imgWidth) / 2 + (coord[0] / eVid.data.modelWidth) * imgWidth - 10
let pointY = (imCanvas.height - imgHeight) / 2 + (coord[1] / eVid.data.modelHeight) * imgHeight - 10
console.debug(`cx: ${pointX}, cy: ${pointY}`)
@@ -72,8 +72,7 @@ export default {
const imCanvas = this.$refs.image_cvs
const imageCtx = imCanvas.getContext("2d")
const target = this.$refs.target_image
var imgWidth
var imgHeight
let imgWidth, imgHeight
f7.utils.nextFrame(() => {
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight

View File

@@ -56,7 +56,7 @@
},
computed: {
commentText () {
var text = f7.textEditor.get('.comment-editor').getValue()
let text = f7.textEditor.get('.comment-editor').getValue()
if (this.userEmail) {
text += `\\n\\nSubmitted by: ${this.userEmail}`
}
@@ -65,9 +65,9 @@
},
methods: {
sendFeedback () {
var self = this
var issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
var xhr = new XMLHttpRequest()
let self = this
const issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
let xhr = new XMLHttpRequest()
xhr.open("POST", issueURL)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('accept', 'application/json')

View File

@@ -1,23 +1,36 @@
<template>
<f7-page name="detect" :id="detectorName + '-detect-page'">
<f7-page name="detect" :id="detectorName + '-detect-page'" @wheel="(e = $event) => e.preventDefault()" @touchmove="(e = $event) => e.preventDefault()">
<!-- Top Navbar -->
<f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
<f7-nav-title sliding>{{ regionTitle }}</f7-nav-title>
<f7-nav-right>
<f7-link v-if="!isCordova" :icon-only="true" tooltip="Fullscreen" :icon-f7="isFullscreen ? 'viewfinder_circle_fill' : 'viewfinder'" @click="toggleFullscreen"></f7-link>
<f7-link :icon-only="true" tooltip="ALVINN help" icon-f7="question_circle_fill" href="/help/"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block class="detect-grid">
<!--<div style="position: absolute;">{{ debugInfo ? JSON.stringify(debugInfo) : "No Info Available" }}</div>-->
<div class="image-container" ref="image_container">
<SvgIcon v-if="!imageView.src && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)"/>
<div class="vid-container" :style="`display: ${videoAvailable ? 'block' : 'none'}; position: absolute; width: 100%; height: 100%;`">
<video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
<f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;" fill large>Capture</f7-button>
</div>
<canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`" />
<f7-link v-if="getInfoUrl && (selectedChip > -1)"
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
<canvas
id="im-draw"
ref="image_cvs"
@wheel="spinWheel($event)"
@mousedown.middle="startMove($event)"
@mousemove="makeMove($event)"
@mouseup.middle="endMove($event)"
@touchstart="startTouch($event)"
@touchend="endTouch($event)"
@touchmove="moveTouch($event)"
@click="structureClick"
:style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`"
></canvas>
<f7-link v-if="getInfoUrl && (selectedChip > -1) && showResults[selectedChip]"
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%); background: hsla(${showResults[selectedChip].confidence / 100 * 120}deg, 100%, 50%, .5)`"
class="structure-info"
:icon-only="true"
icon-f7="info"
@@ -61,16 +74,19 @@
</f7-button>
</div>
<f7-segmented class="image-menu" raised>
<f7-button popover-open="#region-popover">
<RegionIcon :region="activeRegion" :iconSet="getIconSet" />
</f7-button>
<f7-button v-if="!videoAvailable" :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover">
<SvgIcon icon="camera_add"/>
</f7-button>
<f7-button v-if="videoAvailable" @click="closeCamera()">
<SvgIcon icon="no_photography"/>
</f7-button>
<f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
<f7-button v-if="!structureZoomed && selectedChip >= 0" style="height: auto; width: auto;" popover-close="#image-popover" @click="zoomToSelected()">
<SvgIcon icon="zoom_to" />
</f7-button>
<f7-button v-else :class="(canvasZoom != 1) ? '' : 'disabled'" style="height: auto; width: auto;" popover-close="#image-popover" @click="resetZoom()">
<SvgIcon icon="reset_zoom" />
</f7-button>
<f7-button @click="toggleSettings()" :class="(imageLoaded) ? '' : 'disabled'">
<SvgIcon icon="visibility"/>
<f7-badge v-if="numResults && (showResults.length != numResults)" color="red" style="position: absolute; right: 15%; top: 15%;">{{ showResults.length - numResults }}</f7-badge>
</f7-button>
@@ -93,23 +109,6 @@
</f7-page>
</f7-panel>
<f7-popover id="region-popover" class="popover-button-menu">
<f7-segmented raised class="segment-button-menu">
<f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
<RegionIcon :region="0" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
<RegionIcon :region="1" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<RegionIcon :region="2" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<RegionIcon :region="3" :iconSet="getIconSet" />
</f7-button>
</f7-segmented>
</f7-popover>
<f7-popover id="capture-popover" class="popover-button-menu">
<f7-segmented raised class="segment-button-menu">
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('camera')">
@@ -118,6 +117,9 @@
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
<SvgIcon icon="photo_library" />
</f7-button>
<f7-button v-if="secureProtocol" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('clipboard')">
<SvgIcon icon="clipboard" />
</f7-button>
<f7-button v-if="demoEnabled" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
<SvgIcon icon="photo_sample"/>
</f7-button>
@@ -139,11 +141,27 @@
import submitMixin from './submit-mixin'
import detectionMixin from './detection-mixin'
import cameraMixin from './camera-mixin'
import touchMixin from './touch-mixin'
import detectionWorker from '@/assets/detect-worker.js?worker&inline'
import { Structure, StructureBox } from '../js/structures'
const regions = ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck']
let activeRegion = 4
let classesList = []
let imageLoadMode = "environment"
let serverSettings = {}
let otherSettings = {}
let modelLocation = ''
let miniLocation = ''
let reloadModel = false
let detectWorker = null
let vidWorker = null
let canvasMoving = false
let imageLocation = new StructureBox(0, 0, 1, 1)
export default {
mixins: [submitMixin, detectionMixin, cameraMixin],
mixins: [submitMixin, detectionMixin, cameraMixin, touchMixin],
props: {
f7route: Object,
},
@@ -153,35 +171,28 @@
},
data () {
return {
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
resultData: {},
selectedChip: -1,
activeRegion: 4,
classesList: [],
imageLoaded: false,
imageView: new Image(),
imageLoadMode: "environment",
detecting: false,
detectPanel: false,
showDetectSettings: false,
detectorName: '',
detectorLevel: 50,
detectorLabels: [],
serverSettings: {},
otherSettings: {},
isCordova: !!window.cordova,
secureProtocol: location.protocol == 'https:',
uploadUid: null,
uploadDirty: false,
modelLocation: '',
miniLocation: '',
modelLoading: true,
reloadModel: false,
videoDeviceAvailable: false,
videoAvailable: false,
cameraStream: null,
infoLinkPos: {},
detectWorker: null,
vidWorker: null
canvasOffset: {x: 0, y: 0},
canvasZoom: 1,
structureZoomed: false,
debugInfo: null
}
},
setup() {
@@ -189,59 +200,44 @@
},
created () {
let loadOtherSettings = localStorage.getItem('otherSettings')
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
if (loadOtherSettings) otherSettings = JSON.parse(loadOtherSettings)
this.detectorName = this.f7route.params.region
switch (this.detectorName) {
case 'thorax':
this.activeRegion = 0
activeRegion = 0
break;
case 'abdomen':
this.activeRegion = 1
activeRegion = 1
break;
case 'limbs':
this.activeRegion = 2
activeRegion = 2
break;
case 'head':
this.activeRegion = 3
activeRegion = 3
break;
}
this.modelLocation = URL.parse(`../models/${this.detectorName}${this.otherSettings.mini ? '-mini' : ''}/model.json`,import.meta.url).href
this.miniLocation = URL.parse(`../models/${this.detectorName}-mini/model.json`,import.meta.url).href
fetch(URL.parse(`../models/${this.detectorName}/classes.json`,import.meta.url).href)
let modelJ = `../models/${this.detectorName}${otherSettings.mini ? '-mini' : ''}/model.json`
let miniJ = `../models/${this.detectorName}-mini/model.json`
modelLocation = new URL(modelJ,import.meta.url).href
miniLocation = new URL(miniJ,import.meta.url).href
let classesJ = `../models/${this.detectorName}/classes.json`
fetch(new URL(classesJ,import.meta.url).href)
.then((mod) => { return mod.json() })
.then((classes) => {
this.classesList = classes
this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
classesList = classes
this.detectorLabels = classesList.map( l => { return {'name': l, 'detect': true} } )
})
var loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
const loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) serverSettings = JSON.parse(loadServerSettings)
},
mounted () {
this.detectWorker = new detectionWorker()
this.detectWorker.onmessage = (eMount) => {
self = this
if (eMount.data.error) {
console.log(eMount.data.message)
f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`)
}
self.modelLoading = false
}
this.vidWorker = new detectionWorker()
this.vidWorker.onmessage = (eMount) => {
self = this
if (eMount.data.error) {
console.log(eMount.data.message)
f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`)
}
}
if (this.serverSettings && this.serverSettings.use) {
if (serverSettings && serverSettings.use) {
this.getRemoteLabels()
this.modelLoading = false
} else {
this.modelLoading = true
if (this.isSafari) {
this.loadModel(this.modelLocation, true).then(() => {
if (!this.useWorkers) {
this.loadModel(modelLocation, true).then(() => {
this.modelLoading = false
}).catch((e) => {
console.log(e.message)
@@ -249,13 +245,33 @@
this.modelLoading = false
})
} else {
this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation, preload: true})
this.vidWorker.postMessage({call: 'loadModel', weights: this.miniLocation, preload: true})
detectWorker = new detectionWorker()
detectWorker.onmessage = (eMount) => {
self = this
if (eMount.data.error) {
console.log(eMount.data.message)
f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`)
}
self.modelLoading = false
}
vidWorker = new detectionWorker()
vidWorker.onmessage = (eMount) => {
self = this
if (eMount.data.error) {
console.log(eMount.data.message)
f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`)
}
}
detectWorker.postMessage({call: 'loadModel', weights: modelLocation, preload: true})
vidWorker.postMessage({call: 'loadModel', weights: miniLocation, preload: true})
}
}
window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') }
},
computed: {
regionTitle () {
return regions[activeRegion]
},
message () {
if (this.modelLoading) {
return "Preparing ALVINN..."
@@ -268,17 +284,17 @@
}
},
showResults () {
var filteredResults = this.resultData.detections
let filteredResults = this.resultData.detections
if (!filteredResults) return []
var allSelect = this.detectorLabels.every( s => { return s.detect } )
var selectedLabels = this.detectorLabels
const allSelect = this.detectorLabels.every( s => { return s.detect } )
const selectedLabels = this.detectorLabels
.filter( l => { return l.detect })
.map( l => { return l.name })
filteredResults.forEach( (d, i) => {
filteredResults[i].resultIndex = i
filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
d.resultIndex = i
d.setThreshold(this.detectorLevel)
d.isSearched = allSelect || selectedLabels.includes(d.label)
})
if (!filteredResults.some( s => s.resultIndex == this.selectedChip && s.aboveThreshold && s.isSearched && !s.isDeleted)) {
@@ -299,13 +315,13 @@
}
},
demoEnabled () {
return this.otherSettings.demo || this.demoMode
return otherSettings.demo || this.demoMode
},
infoLinkTarget () {
if (!this.getInfoUrl) return ''
let structure = this.showResults.find( r => r.resultIndex == this.selectedChip)
return structure ? this.getInfoUrl + structure.label.replaceAll(' ','_') : ''
}
},
},
methods: {
chipGradient (confVal) {
@@ -313,52 +329,61 @@
return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)`
},
async setData () {
this.detectWorker.onmessage = (eDetect) => {
self = this
if (eDetect.data.error) {
self.detecting = false
self.resultData = {}
loadFailure()
f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
} else if (eDetect.data.success == 'detection') {
self.detecting = false
self.resultData = eDetect.data.detections
if (self.resultData) {
self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name})
if (detectWorker) {
detectWorker.onmessage = (eDetect) => {
self = this
if (eDetect.data.error) {
self.detecting = false
self.resultData = {}
loadFailure()
f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
} else if (eDetect.data.success == 'detection') {
self.detecting = false
self.resultData = {detections: []}
eDetect.data.detections.detections.forEach((d) => {
d.label = self.detectorLabels[d.label].name
let detectedStructure = new Structure(d)
self.resultData.detections.push(detectedStructure)
})
self.uploadDirty = true
} else if (eDetect.data.success == 'model') {
reloadModel = false
loadSuccess()
}
self.uploadDirty = true
} else if (eDetect.data.success == 'model') {
self.reloadModel = false
loadSuccess()
f7.utils.nextFrame(() => {
this.selectChip("redraw")
})
}
}
let loadSuccess = null
let loadFailure = null
let modelReloading = null
if (this.isSafari && this.reloadModel) {
await this.loadModel(this.modelLocation)
this.reloadModel = false
if (!this.useWorkers && reloadModel) {
await this.loadModel(modelLocation)
reloadModel = false
} else {
modelReloading = new Promise((res, rej) => {
loadSuccess = res
loadFailure = rej
if (this.reloadModel) {
this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation})
if (reloadModel) {
detectWorker.postMessage({call: 'loadModel', weights: modelLocation})
} else {
loadSuccess()
}
})
}
if (this.serverSettings && this.serverSettings.use) {
if (serverSettings && serverSettings.use) {
this.remoteDetect()
} else if (!this.isSafari) {
} else if (this.useWorkers) {
Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => {
this.detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
})
} else {
this.localDetect(this.imageView).then(dets => {
createImageBitmap(this.imageView).then(res => {
return this.localDetect(res)
}).then(dets => {
this.detecting = false
this.resultData = dets
this.uploadDirty = true
@@ -369,6 +394,9 @@
f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
})
}
f7.utils.nextFrame(() => {
this.selectChip("redraw")
})
},
selectAll (ev) {
if (ev.target.checked) {
@@ -378,12 +406,12 @@
}
},
async selectImage (mode) {
this.imageLoadMode = mode
imageLoadMode = mode
if (this.isCordova && mode == "camera") {
navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
return
}
if (mode == "camera" && !this.otherSettings.disableVideo) {
if (mode == "camera" && !otherSettings.disableVideo) {
this.videoAvailable = await this.openCamera(this.$refs.image_container)
if (this.videoAvailable) {
this.selectedChip = -1
@@ -391,14 +419,14 @@
this.imageView.src = null
this.$refs.image_cvs.style['background-image'] = 'none'
this.resultData = {}
var trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
var vidElement = this.$refs.vid_viewer
const trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
let vidElement = this.$refs.vid_viewer
vidElement.width = trackDetails.width
vidElement.height = trackDetails.height
if (this.isSafari) {
this.videoFrameDetect(vidElement)
if (!this.useWorkers) {
this.videoFrameDetect(vidElement, miniLocation)
} else {
this.videoFrameDetectWorker(vidElement)
this.videoFrameDetectWorker(vidElement, vidWorker)
}
return
}
@@ -416,36 +444,62 @@
}).open()
return
}
if (mode == 'clipboard') {
navigator.clipboard.read().then(clip => {
if (!clip[0].types.includes("image/png")) {
throw new Error("Clipboard does not contain valid image data.");
}
return clip[0].getType("image/png");
}).then(blob => {
let clipImage = URL.createObjectURL(blob);
this.getImage(clipImage)
}).catch(e => {
console.log(e)
f7.dialog.alert(`Error pasting image: ${e.message}`)
})
return
}
this.$refs.image_chooser.click()
},
onFail (message) {
alert(`Camera fail: ${message}`)
},
selectChip ( iChip ) {
const [imCanvas, imageCtx] = this.resetView()
if (this.selectedChip == iChip) {
this.selectedChip = -1
this.resetView()
return
}
if (iChip == 'redraw') {
if (this.selectedChip == -1) return
if (this.selectedChip == -1) {
this.resetView()
return
}
iChip = this.selectedChip
}
const [imCanvas, imageCtx] = this.resetView(true)
let structBox, cvsBox, screenBox
[structBox, cvsBox, screenBox] = this.resultData.detections[iChip].box.getBoxes('side', this.imageView, imCanvas, {zoom: this.canvasZoom, offset: {...this.canvasOffset}})
const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
this.infoLinkPos.x = Math.min(Math.max(screenBox.left, 0),imCanvas.width)
this.infoLinkPos.y = Math.min(Math.max(screenBox.top, 0), imCanvas.height)
let boxLeft = boxCoords.cvsLeft
let boxTop = boxCoords.cvsTop
let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
this.infoLinkPos.x = boxCoords.cvsLeft
this.infoLinkPos.y = boxCoords.cvsTop
let boxMin = Math.min(boxHeight, boxWidth)
this.infoLinkPos.adj = (boxMin >= 50) ? 0 : Math.min(10, 50 - boxMin)
imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
const imageScale = Math.max(this.imageView.width / imCanvas.width, this.imageView.height / imCanvas.height)
imageCtx.drawImage(this.imageView, structBox.left, structBox.top, structBox.width, structBox.height, cvsBox.left, cvsBox.top, cvsBox.width, cvsBox.height)
imageCtx.save()
imageCtx.arc(cvsBox.left, cvsBox.top, 14 / this.canvasZoom, 0, 2 * Math.PI)
imageCtx.closePath()
imageCtx.clip()
imageCtx.drawImage(this.imageView,
structBox.left - (14 / this.canvasZoom * imageScale),
structBox.top - (14 / this.canvasZoom * imageScale),
(28 / this.canvasZoom * imageScale),
(28 / this.canvasZoom * imageScale),
cvsBox.left - (14 / this.canvasZoom),
cvsBox.top - (14 / this.canvasZoom),
(28 / this.canvasZoom), (28 / this.canvasZoom))
imageCtx.restore()
this.selectedChip = iChip
this.resultData.detections[iChip].beenViewed = true
@@ -461,15 +515,24 @@
this.uploadDirty = true
});
},
resetView () {
resetView (drawChip) {
const imCanvas = this.$refs.image_cvs
const imageCtx = imCanvas.getContext("2d")
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
imageCtx.translate(this.canvasOffset.x,this.canvasOffset.y)
imageCtx.scale(this.canvasZoom,this.canvasZoom)
imageCtx.globalAlpha = 1
imageCtx.strokeStyle = 'yellow'
imageCtx.lineWidth = 3
imageCtx.lineWidth = 3 / this.canvasZoom
if (this.imageLoaded) {
const imageLoc = imageLocation.getBoxes('side', this.imageView, imCanvas)
if (drawChip) {imageCtx.globalAlpha = .5}
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imageLoc[1].left, imageLoc[1].top, imageLoc[1].width, imageLoc[1].height)
if (drawChip) {imageCtx.globalAlpha = 1}
}
this.structureZoomed = false
return [imCanvas, imageCtx]
},
getImage (searchImage) {
@@ -477,18 +540,22 @@
if (this.videoAvailable) {
this.closeCamera()
this.detecting = true
this.reloadModel = true
reloadModel = true
resolve(searchImage)
} else if (this.isCordova && this.imageLoadMode == "camera") {
} else if (this.isCordova && imageLoadMode == "camera") {
this.detecting = true
resolve('data:image/jpg;base64,' + searchImage)
}
if (imageLoadMode == 'clipboard') {
this.detecting = true
resolve(searchImage)
}
const reader = new FileReader()
reader.addEventListener("load", () => {
this.detecting = true
resolve(reader.result)
},{once: true})
if (this.imageLoadMode == 'sample') {
if (imageLoadMode == 'sample') {
fetch(`${this.isCordova ? 'https://localhost' : '.'}/samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => {
return resp.blob()
}).then(respBlob => {
@@ -510,8 +577,14 @@
this.imageView.src = imgData
return(this.imageView.decode())
}).then( () => {
const [imCanvas, _] = this.resetView()
imCanvas.style['background-image'] = `url(${this.imageView.src})`
this.canvasOffset = {x: 0, y: 0}
this.canvasZoom = 1
const imCanvas = this.$refs.image_cvs
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
const imageCtx = imCanvas.getContext("2d")
const imageLoc = imageLocation.getBoxes('side', this.imageView, imCanvas)
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imageLoc[1].left, imageLoc[1].top, imageLoc[1].width, imageLoc[1].height)
f7.utils.nextFrame(() => {
this.setData()
})
@@ -521,7 +594,7 @@
})
},
async submitData () {
var uploadData = this.showResults
let uploadData = this.showResults
.filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })
.map( r => { return {"top": r.top, "left": r.left, "bottom": r.bottom, "right": r.right, "label": r.label}})
this.uploadUid = await this.uploadData(this.imageView.src.split(',')[1],uploadData,this.uploadUid)
@@ -531,42 +604,85 @@
this.detectorLevel = value
},
structureClick(e) {
const boxCoords = this.box2cvs(this.showResults)
var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
r.cvsRight >= e.offsetX &&
r.cvsTop <= e.offsetY &&
r.cvsBottom >= e.offsetY &&
this.resultData.detections[i].resultIndex > this.selectedChip &&
this.resultData.detections[i].aboveThreshold &&
this.resultData.detections[i].isSearched &&
!this.resultData.detections[i].isDeleted
})
this.selectChip(findBox >= 0 ? this.resultData.detections[findBox].resultIndex : this.selectedChip)
},
box2cvs(boxInput) {
if (!boxInput || boxInput.length == 0) return []
const boxList = boxInput.length ? boxInput : [boxInput]
const [imCanvas, imageCtx] = this.resetView()
var imgWidth
var imgHeight
const imgAspect = this.imageView.width / this.imageView.height
const rendAspect = imCanvas.width / imCanvas.height
if (imgAspect >= rendAspect) {
imgWidth = imCanvas.width
imgHeight = imCanvas.width / imgAspect
} else {
imgWidth = imCanvas.height * imgAspect
imgHeight = imCanvas.height
let self = this
function loopIndex(i) {
if (self.selectedChip == -1) return i
let li = i + self.selectedChip
if (li >= numBoxes) li -= numBoxes
return li
}
const cvsCoords = boxList.map( (d, i) => {
return {
"cvsLeft": (imCanvas.width - imgWidth) / 2 + d.left * imgWidth,
"cvsRight": (imCanvas.width - imgWidth) / 2 + d.right * imgWidth,
"cvsTop": (imCanvas.height - imgHeight) / 2 + d.top * imgHeight,
"cvsBottom": (imCanvas.height - imgHeight) / 2 + d.bottom * imgHeight
}
let boxCoords = []
this.resultData.detections.forEach(d => {
let cvsBox = d.box.getBoxes('point',this.imageView,this.$refs.image_cvs)[1]
cvsBox.clickable = d.aboveThreshold && d.isSearched && !d.isDeleted
boxCoords.push(cvsBox)
})
return cvsCoords
const numBoxes = boxCoords.length
let clickX = (e.offsetX - this.canvasOffset.x) / this.canvasZoom
let clickY = (e.offsetY - this.canvasOffset.y) / this.canvasZoom
let boxEnd = boxCoords.splice(0, this.selectedChip)
boxCoords = boxCoords.concat(boxEnd)
const findBox = boxCoords.findIndex( (r, i) => {
let di = loopIndex(i)
if (di == this.selectedChip ) return false
return r.clickable &&
r.left <= clickX &&
r.right >= clickX &&
r.top <= clickY &&
r.bottom >= clickY
})
this.selectChip(findBox >= 0 ? this.resultData.detections[loopIndex(findBox)].resultIndex : this.selectedChip)
},
toggleSettings() {
this.showDetectSettings = !this.showDetectSettings
f7.utils.nextFrame(() => {
this.selectChip("redraw")
})
},
startMove() {
canvasMoving = true
},
endMove() {
canvasMoving = false
},
makeMove(event) {
if (canvasMoving) {
this.canvasOffset.x += event.movementX
this.canvasOffset.y += event.movementY
this.selectChip("redraw")
}
},
spinWheel(event) {
let zoomFactor
if (event.wheelDelta > 0) {
zoomFactor = 1.05
} else if (event.wheelDelta < 0) {
zoomFactor = 1 / 1.05
}
this.canvasZoom *= zoomFactor
this.canvasOffset.x = event.offsetX * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor
this.canvasOffset.y = event.offsetY * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor
this.selectChip("redraw")
},
resetZoom() {
this.canvasZoom = 1
this.canvasOffset.x = 0
this.canvasOffset.y = 0
this.selectChip("redraw")
},
zoomToSelected() {
const imCanvas = this.$refs.image_cvs
const boxCoords = this.resultData.detections[this.selectedChip].box.getBoxes('point', this.imageView, imCanvas)
const boxWidth = boxCoords[1].right - boxCoords[1].left
const boxHeight = boxCoords[1].bottom - boxCoords[1].top
const boxMidX = (boxCoords[1].right + boxCoords[1].left ) / 2
const boxMidY = (boxCoords[1].bottom + boxCoords[1].top ) / 2
const zoomFactor = Math.min(imCanvas.width / boxWidth * .9, imCanvas.height / boxHeight * .9, 8)
this.canvasZoom = zoomFactor
this.canvasOffset.x = -(boxMidX * zoomFactor) + imCanvas.width / 2
this.canvasOffset.y = -(boxMidY * zoomFactor) + imCanvas.height / 2
this.selectChip("redraw")
this.structureZoomed = true
}
}
}

View File

@@ -46,11 +46,11 @@ export default {
let rawBoxes = []
let rawScores = []
for (var i = 0; i < rawRes.length; i++) {
var getScores = rawRes[i].slice(4)
for (let i = 0; i < rawRes.length; i++) {
const getScores = rawRes[i].slice(4)
if (getScores.every( s => s < .05)) { continue }
var getBox = rawRes[i].slice(0,4)
var boxCalc = [
const getBox = rawRes[i].slice(0,4)
const boxCalc = [
(getBox[0] - (getBox[2] / 2)) / modelWidth,
(getBox[1] - (getBox[3] / 2)) / modelHeight,
(getBox[0] + (getBox[2] / 2)) / modelWidth,
@@ -69,7 +69,7 @@ export default {
let boxes_data = []
let scores_data = []
let classes_data = []
for (var c = 0; c < outputSize - 4; c++) {
for (let c = 0; c < outputSize - 4; c++) {
structureScores = rawScores.map(x => x[c])
tScores = tf.tensor1d(structureScores)
resBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tScores,10,0.5,.05)
@@ -77,7 +77,7 @@ export default {
tf.dispose(resBoxes)
if (validBoxes) {
boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
var outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
let outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
scores_data.push(...outputScores)
classes_data.push(...outputScores.fill(c))
}
@@ -88,11 +88,11 @@ export default {
tf.dispose(tScores)
tf.dispose(tRes)
const valid_detections_data = classes_data.length
var output = {
const output = {
detections: []
}
for (var i =0; i < valid_detections_data; i++) {
var [dLeft, dTop, dRight, dBottom] = boxes_data[i]
for (let i =0; i < valid_detections_data; i++) {
const [dLeft, dTop, dRight, dBottom] = boxes_data[i]
output.detections.push({
"top": dTop,
"left": dLeft,
@@ -110,9 +110,9 @@ export default {
return output || { detections: [] }
},
getRemoteLabels() {
var self = this
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
var xhr = new XMLHttpRequest()
let self = this
const modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
let xhr = new XMLHttpRequest()
xhr.open("GET", modelURL)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.timeout = 10000
@@ -124,8 +124,8 @@ export default {
f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
return
}
var detectors = JSON.parse(xhr.response).detectors
var findLabel = detectors
const detectors = JSON.parse(xhr.response).detectors
let findLabel = detectors
.find( d => { return d.name == self.detectorName } )?.labels
.filter( l => { return l != "" } ).sort()
.map( l => { return {'name': l, 'detect': true} } )
@@ -139,9 +139,9 @@ export default {
xhr.send()
},
remoteDetect() {
var self = this
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
var xhr = new XMLHttpRequest()
let self = this
const modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
let xhr = new XMLHttpRequest()
xhr.open("POST", modelURL)
xhr.timeout = 10000
xhr.ontimeout = this.remoteTimeout
@@ -158,7 +158,7 @@ export default {
self.uploadDirty = true
}
var doodsData = {
const doodsData = {
"detector_name": this.detectorName,
"detect": {
"*": 1
@@ -172,8 +172,8 @@ export default {
this.detecting = false
f7.dialog.alert('No connection to remote ALVINN instance. Please check app settings.')
},
async videoFrameDetect (vidData) {
await this.loadModel(this.miniLocation)
async videoFrameDetect (vidData, miniModel) {
await this.loadModel(miniModel)
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
const imCanvas = this.$refs.image_cvs
const imageCtx = imCanvas.getContext("2d")
@@ -182,8 +182,7 @@ export default {
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
var imgWidth
var imgHeight
let imgWidth, imgHeight
const imgAspect = vidData.width / vidData.height
const rendAspect = imCanvas.width / imCanvas.height
if (imgAspect >= rendAspect) {
@@ -204,7 +203,7 @@ export default {
let rawCoords = []
if (rawRes) {
for (var i = 0; i < rawRes.length; i++) {
for (let i = 0; i < rawRes.length; i++) {
let getScores = rawRes[i].slice(4)
if (getScores.some( s => s > .5)) {
let foundTarget = rawRes[i].slice(0,2)
@@ -214,7 +213,7 @@ export default {
}
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
for (var coord of rawCoords) {
for (let coord of rawCoords) {
console.log(`x: ${coord[0]}, y: ${coord[1]}`)
let pointX = (imCanvas.width - imgWidth) / 2 + (coord[0] / modelWidth) * imgWidth -5
let pointY = (imCanvas.height - imgHeight) / 2 + (coord[1] / modelHeight) * imgHeight -5

View File

@@ -21,6 +21,7 @@
</ul>
</li>
<li>Click on the image file icon <SvgIcon icon="photo_library" class="list-svg"/> to load a picture from the device storage.</li>
<li>If the clipboard is available on the system, then there will be a paste icon <SvgIcon icon="clipboard" class="list-svg"/> to paste image data directly into the app.</li>
<li>If demo mode is turned on, you can click on the marked image icon <SvgIcon icon="photo_sample" class="list-svg"/> to load an ALVINN sample image.</li>
</ul>
</li>
@@ -30,8 +31,11 @@
<li>Click on each tag to see the structure highlighted in the image or click on the image to see the tag for that structure (additional clicks to the same area will select overlapping structres).</li>
<li>Tag color and proportion filled indicate ALVINN's level of confidence in the identification.</li>
<li>An incorrect tag can be deleted by clicking on the tag's <f7-icon icon="chip-delete" style="margin-right: 1px;"></f7-icon> button.</li>
<li>Click on the zoom to structure button <SvgIcon icon="zoom_to" class="list-svg"/> to magnify the view of the selected structure</li>
</ul>
</li>
<li>Pan (middle click or touch and drag) and zoom (mouse wheel or pinch) to manually select detailed views in the image.</li>
<li>The reset zoom button <SvgIcon icon="reset_zoom" class="list-svg"/> will return the image to its initial position and magnification.</li>
</ol>
<h2>Advanced Features</h2>
<h3>Detection Parameters</h3>

View File

@@ -97,8 +97,7 @@
</style>
<script>
import { touchstart } from 'dom7'
import RegionIcon from '../components/region-icon.vue'
import RegionIcon from '../components/region-icon.vue'
import store from '../js/store'
import { f7 } from 'framework7-vue'
@@ -113,6 +112,11 @@ import RegionIcon from '../components/region-icon.vue'
}
},
setup() {
//URL TESTING CODE
//let testUrl = URL.parse(`../models/thorax/model.json`,import.meta.url).href
//console.log(testUrl)
//let testUrl2 = new URL(`../models/thorax/model.json`,import.meta.url)
//console.log(testUrl2)
return store()
},
methods: {

View File

@@ -91,7 +91,7 @@
computed: {
otherIp () {
let filteredIps = {}
for (var oldIp in this.serverSettings.previous) {
for (let oldIp in this.serverSettings.previous) {
if (oldIp != this.serverSettings.address) {
filteredIps[oldIp] = this.serverSettings.previous[oldIp]
}
@@ -109,12 +109,12 @@
}
},
created () {
var loadServerSettings = localStorage.getItem('serverSettings')
const loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
if (!this.serverSettings.previous) this.serverSettings.previous = {}
var loadThemeSettings = localStorage.getItem('themeSettings')
const loadThemeSettings = localStorage.getItem('themeSettings')
if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
var loadOtherSettings = localStorage.getItem('otherSettings')
const loadOtherSettings = localStorage.getItem('otherSettings')
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
},
methods: {
@@ -136,7 +136,7 @@
)
saveSetting.then(
() => {
var toast = f7.toast.create({
const toast = f7.toast.create({
text: 'Settings saved',
closeTimeout: 2000
})
@@ -144,7 +144,7 @@
this.isDirty = false;
},
() => {
var toast = f7.toast.create({
const toast = f7.toast.create({
text: 'ERROR: No settings saved',
closeTimeout: 2000
})

View File

@@ -8,7 +8,8 @@
<f7-block-title medium>Details</f7-block-title>
<f7-list>
<f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
<f7-list-item v-if="isSafari" title="Safari" after="Workers disabled"></f7-list-item>
<f7-list-item title="Build" :after="alvinnBuild"></f7-list-item>
<f7-list-item title="Workers" :after="useWorkers ? 'Enabled' : 'Disabled'"></f7-list-item>
</f7-list>
<f7-block-title medium>Models</f7-block-title>
<f7-list style="width: 100%;">
@@ -52,8 +53,9 @@
headneckDetails: {},
miniHeadneckDetails: {},
alvinnVersion: store().getVersion,
alvinnBuild: store().getBuild,
isCordova: !!window.cordova,
isSafari: store().isSafari,
useWorkers: store().useWorkers,
otherSettings: {}
}
},
@@ -61,7 +63,7 @@
return store()
},
created () {
var loadOtherSettings = localStorage.getItem('otherSettings')
const loadOtherSettings = localStorage.getItem('otherSettings')
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/thorax/descript.json`)
.then((mod) => { return mod.json() })

View File

@@ -5,8 +5,8 @@ export default {
newUid (length) {
const uidLength = length || 16
const uidChars = 'abcdefghijklmnopqrstuvwxyz0123456789'
var uid = []
for (var i = 0; i < uidLength; i++) {
let uid = []
for (let i = 0; i < uidLength; i++) {
uid.push(uidChars.charAt(Math.floor(Math.random() * ((i < 4) ? 26 : 36))))
}
return uid.join('')
@@ -14,24 +14,23 @@ export default {
uploadData (imagePayload, classPayload, prevUid) {
let uploadImage = new Promise (resolve => {
const dataUid = prevUid || this.newUid(16)
var byteChars = window.atob(imagePayload)
var byteArrays = []
var len = byteChars.length
let byteChars = window.atob(imagePayload)
let byteArrays = []
for (var offset = 0; offset < len; offset += 1024) {
var slice = byteChars.slice(offset, offset + 1024)
var byteNumbers = new Array(slice.length)
for (var i = 0; i < slice.length; i++) {
for (let offset = 0; offset < byteChars.length; offset += 1024) {
let slice = byteChars.slice(offset, offset + 1024)
let byteNumbers = new Array(slice.length)
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i)
}
var byteArray = new Uint8Array(byteNumbers)
let byteArray = new Uint8Array(byteNumbers)
byteArrays.push(byteArray)
}
var imageBlob = new Blob(byteArrays, {type: 'image/jpeg'})
const imageBlob = new Blob(byteArrays, {type: 'image/jpeg'})
var xhrJpg = new XMLHttpRequest()
var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.jpeg`
let xhrJpg = new XMLHttpRequest()
let uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.jpeg`
xhrJpg.open("PUT", uploadUrl)
xhrJpg.setRequestHeader('Content-Type', 'image/jpeg')
xhrJpg.setRequestHeader('X-Method-Override', 'PUT')
@@ -39,8 +38,8 @@ export default {
xhrJpg.setRequestHeader("Authorization", "Basic " + btoa("LKBm3H6JdSaywyg:"))
xhrJpg.send(imageBlob)
var xhrTxt = new XMLHttpRequest()
var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.txt`
let xhrTxt = new XMLHttpRequest()
uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.txt`
xhrTxt.open("PUT", uploadUrl)
xhrTxt.setRequestHeader('Content-Type', 'text/plain')
xhrTxt.setRequestHeader('X-Method-Override', 'PUT')
@@ -51,7 +50,7 @@ export default {
resolve(dataUid)
})
return uploadImage.then((newUid) => {
var toast = f7.toast.create({
const toast = f7.toast.create({
text: 'Detections Uploaded: thank you.',
closeTimeout: 2000
})

51
src/pages/touch-mixin.js Normal file
View File

@@ -0,0 +1,51 @@
export default {
data () {
return {
touchPrevious: {}
}
},
methods: {
startTouch(event) {
if (event.touches.length == 1) {
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
}
if (event.touches.length == 2) {
let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY}
}
},
endTouch(event) {
if (event.touches.length == 1) {
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
} else {
//this.debugInfo = null
}
},
moveTouch(event) {
switch (event.touches.length) {
case 1:
this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x
this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
break;
case 2:
let newDistance = this.touchDistance(event.touches)
let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
let zoomFactor = newDistance / this.touchPrevious.distance
this.canvasZoom *= zoomFactor
this.canvasOffset.x = (midX - 16) * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor + (midX - this.touchPrevious.x)
this.canvasOffset.y = (midY - 96) * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor + (midY - this.touchPrevious.y)
this.touchPrevious = {distance: newDistance, x: midX, y: midY}
break;
}
this.selectChip("redraw")
},
touchDistance(touches) {
let touch1 = touches.item(0)
let touch2 = touches.item(1)
return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2)
}
}
}