Add files via upload
This commit is contained in:
PelissierCombescure
GitHub
parent
ee4078570e
commit
937eba3a16
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hello world!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello world!</h1>
|
||||
|
||||
<div>
|
||||
<input id="username" type="text" placeholder="Nom d'utilisateur">
|
||||
<button id="button">Envoyer</button>
|
||||
</div>
|
||||
|
||||
<script src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style>
|
||||
body{
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>User study version 3D</title>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class = "canvas">
|
||||
<canvas id="canvas" width="1920" height="1080">
|
||||
Votre navigateur ne supporte pas les canvas, essayez-en un autre.
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<script src="/static/three.js"></script>
|
||||
<script src="/static/LoaderSupport.js"></script>
|
||||
<script src="/static/OBJLoader2.js"></script>
|
||||
<script src="/static/OrbitControls.js"></script>
|
||||
<script src="/static/fonctions_choix_vues.js"></script>
|
||||
<script src="/static/fonctions_tuto.js"></script>
|
||||
<script src="/static/fonctions_fin.js"></script>
|
||||
<script src="/static/interface3D.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,669 @@
|
|||
{
|
||||
"name": "thomas",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "thomas",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"body-parser": "^1.20.1",
|
||||
"cookie-session": "^2.0.0",
|
||||
"express": "^4.18.2",
|
||||
"uuid": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
|
||||
"dependencies": {
|
||||
"mime-types": "~2.1.34",
|
||||
"negotiator": "0.6.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/array-flatten": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
|
||||
},
|
||||
"node_modules/body-parser": {
|
||||
"version": "1.20.1",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
|
||||
"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
|
||||
"dependencies": {
|
||||
"bytes": "3.1.2",
|
||||
"content-type": "~1.0.4",
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"destroy": "1.2.0",
|
||||
"http-errors": "2.0.0",
|
||||
"iconv-lite": "0.4.24",
|
||||
"on-finished": "2.4.1",
|
||||
"qs": "6.11.0",
|
||||
"raw-body": "2.5.1",
|
||||
"type-is": "~1.6.18",
|
||||
"unpipe": "1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8",
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
|
||||
"dependencies": {
|
||||
"safe-buffer": "5.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/content-type": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
||||
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-session": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie-session/-/cookie-session-2.0.0.tgz",
|
||||
"integrity": "sha512-hKvgoThbw00zQOleSlUr2qpvuNweoqBtxrmx0UFosx6AGi9lYtLoA+RbsvknrEX8Pr6MDbdWAb2j6SnMn+lPsg==",
|
||||
"dependencies": {
|
||||
"cookies": "0.8.0",
|
||||
"debug": "3.2.7",
|
||||
"on-headers": "~1.0.2",
|
||||
"safe-buffer": "5.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-session/node_modules/debug": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-session/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/cookie-signature": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
|
||||
},
|
||||
"node_modules/cookies": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/cookies/-/cookies-0.8.0.tgz",
|
||||
"integrity": "sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==",
|
||||
"dependencies": {
|
||||
"depd": "~2.0.0",
|
||||
"keygrip": "~1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dependencies": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
|
||||
"engines": {
|
||||
"node": ">= 0.8",
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
|
||||
},
|
||||
"node_modules/encodeurl": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
|
||||
},
|
||||
"node_modules/etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/express": {
|
||||
"version": "4.18.2",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
|
||||
"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
|
||||
"dependencies": {
|
||||
"accepts": "~1.3.8",
|
||||
"array-flatten": "1.1.1",
|
||||
"body-parser": "1.20.1",
|
||||
"content-disposition": "0.5.4",
|
||||
"content-type": "~1.0.4",
|
||||
"cookie": "0.5.0",
|
||||
"cookie-signature": "1.0.6",
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"etag": "~1.8.1",
|
||||
"finalhandler": "1.2.0",
|
||||
"fresh": "0.5.2",
|
||||
"http-errors": "2.0.0",
|
||||
"merge-descriptors": "1.0.1",
|
||||
"methods": "~1.1.2",
|
||||
"on-finished": "2.4.1",
|
||||
"parseurl": "~1.3.3",
|
||||
"path-to-regexp": "0.1.7",
|
||||
"proxy-addr": "~2.0.7",
|
||||
"qs": "6.11.0",
|
||||
"range-parser": "~1.2.1",
|
||||
"safe-buffer": "5.2.1",
|
||||
"send": "0.18.0",
|
||||
"serve-static": "1.15.0",
|
||||
"setprototypeof": "1.2.0",
|
||||
"statuses": "2.0.1",
|
||||
"type-is": "~1.6.18",
|
||||
"utils-merge": "1.0.1",
|
||||
"vary": "~1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/finalhandler": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
|
||||
"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
|
||||
"dependencies": {
|
||||
"debug": "2.6.9",
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"on-finished": "2.4.1",
|
||||
"parseurl": "~1.3.3",
|
||||
"statuses": "2.0.1",
|
||||
"unpipe": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
|
||||
"integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
|
||||
"dependencies": {
|
||||
"depd": "2.0.0",
|
||||
"inherits": "2.0.4",
|
||||
"setprototypeof": "1.2.0",
|
||||
"statuses": "2.0.1",
|
||||
"toidentifier": "1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/keygrip": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
|
||||
"integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
|
||||
"dependencies": {
|
||||
"tsscmp": "1.0.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-descriptors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
|
||||
"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
|
||||
},
|
||||
"node_modules/methods": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
||||
"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"bin": {
|
||||
"mime": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
|
||||
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/on-finished": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
|
||||
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
|
||||
"dependencies": {
|
||||
"ee-first": "1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/on-headers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
|
||||
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-to-regexp": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
|
||||
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
|
||||
"dependencies": {
|
||||
"forwarded": "0.2.0",
|
||||
"ipaddr.js": "1.9.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.11.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
|
||||
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/range-parser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/raw-body": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
|
||||
"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
|
||||
"dependencies": {
|
||||
"bytes": "3.1.2",
|
||||
"http-errors": "2.0.0",
|
||||
"iconv-lite": "0.4.24",
|
||||
"unpipe": "1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||
},
|
||||
"node_modules/send": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
|
||||
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
|
||||
"dependencies": {
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"destroy": "1.2.0",
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"etag": "~1.8.1",
|
||||
"fresh": "0.5.2",
|
||||
"http-errors": "2.0.0",
|
||||
"mime": "1.6.0",
|
||||
"ms": "2.1.3",
|
||||
"on-finished": "2.4.1",
|
||||
"range-parser": "~1.2.1",
|
||||
"statuses": "2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/send/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/serve-static": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
|
||||
"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
|
||||
"dependencies": {
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"parseurl": "~1.3.3",
|
||||
"send": "0.18.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
|
||||
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.0",
|
||||
"get-intrinsic": "^1.0.2",
|
||||
"object-inspect": "^1.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
|
||||
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/toidentifier": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tsscmp": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
|
||||
"integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
|
||||
"engines": {
|
||||
"node": ">=0.6.x"
|
||||
}
|
||||
},
|
||||
"node_modules/type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
|
||||
"dependencies": {
|
||||
"media-typer": "0.3.0",
|
||||
"mime-types": "~2.1.24"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/utils-merge": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
||||
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
|
||||
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "thomas",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"body-parser": "^1.20.1",
|
||||
"cookie-session": "^2.0.0",
|
||||
"express": "^4.18.2",
|
||||
"uuid": "^9.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
async function main() {
|
||||
// Imports et constantes.
|
||||
const fs = require('fs').promises;
|
||||
const express = require('express');
|
||||
const uuid = require('uuid').v4;
|
||||
const bodyParser = require('body-parser')
|
||||
const ip = '0.0.0.0';
|
||||
const port = 8000;
|
||||
|
||||
const app = express();
|
||||
|
||||
//let id = 1;
|
||||
|
||||
// Permet de récupérer les données venant du client.
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
app.use(bodyParser.json());
|
||||
|
||||
// Page d'accueil.
|
||||
app.get('/', function(req, res) {
|
||||
// On envoie le contenu du fichier index.html.
|
||||
return res.sendFile(__dirname + '/html/index3D.html');
|
||||
});
|
||||
|
||||
// Route de récupération des données.
|
||||
app.post('/data', async function(req, res) {
|
||||
let id = uuid();
|
||||
|
||||
// Ouverture du fichier en mode append.
|
||||
let file = await fs.open(__dirname + '/data/' + id + '.json', 'a');
|
||||
|
||||
// Ajout d'une ligne.
|
||||
file.write(JSON.stringify(req.body, undefined, 4));
|
||||
|
||||
// Envoi de la réponse pour terminer la requête.
|
||||
res.send('Ok');
|
||||
});
|
||||
|
||||
// Création du dossier où les données seront stockées.
|
||||
try {
|
||||
|
||||
await fs.mkdir(__dirname + '/data');
|
||||
|
||||
} catch (err) {
|
||||
// Si une erreur existe autre que "le dossier existe déjà", on stoppe le serveur.
|
||||
if (err !== null && (err.errno !== -17 || err.code !== 'EEXIST')) {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
// Envoi des fichiers statiques (js, css)
|
||||
app.use('/static', express.static('static'));
|
||||
|
||||
// On démarre le serveur, puis on peut y accéder dans le navigateur en allant sur http://localhost:8000
|
||||
app.listen(port, ip, function() {
|
||||
console.log('Started listening on ' + port);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
main();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,12 @@
|
|||
// 1. Create the button
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Do Something";
|
||||
|
||||
// 2. Append somewhere
|
||||
var body = document.getElementsByTagName("body")[0];
|
||||
body.appendChild(button);
|
||||
|
||||
// 3. Add event handler
|
||||
button.addEventListener ("click", function() {
|
||||
alert("did something");
|
||||
});
|
||||
|
|
@ -0,0 +1,642 @@
|
|||
// Variable global
|
||||
// bouton
|
||||
function init_variable_fonction(dict_boutons, dict_imgs ){
|
||||
// fleche
|
||||
scale_fleche = 0.065
|
||||
dy = 0.03*H_3D
|
||||
DY = 2*dy
|
||||
a = scale_fleche*dict_imgs["gauche"].height
|
||||
b = scale_fleche*dict_imgs["gauche"].width
|
||||
// bouton
|
||||
scale_bouton = 0.3
|
||||
h_bouton = scale_bouton*dict_boutons["choix_pose"].height
|
||||
w_bouton = scale_bouton*dict_boutons["choix_pose"].width
|
||||
pos_bouton = ((W_3D*0.2+a+b)/W_3D)+0.1
|
||||
ecart_bouton = 0.1*w_bouton
|
||||
// Couleur
|
||||
alpha_bloque = 0.6
|
||||
|
||||
// progress bar
|
||||
x_progress_bar = 0
|
||||
y_progress_bar = 0
|
||||
w_progress_bar = window.innerWidth - W_3D*0.1
|
||||
h_progress_bar = H_3D*0.04
|
||||
// image recap
|
||||
dx = 20
|
||||
// Message pop up
|
||||
x_pop_up = W_3D*pos_bouton+w_bouton*2+ecart_bouton+30
|
||||
y_pop_up = H_3D +dy*4
|
||||
ecart = 40
|
||||
|
||||
}
|
||||
|
||||
|
||||
function new_image(src) {
|
||||
img = new Image()
|
||||
img.src = src
|
||||
return img
|
||||
}
|
||||
|
||||
function getMousePos(c, event) {
|
||||
var rect = c.getBoundingClientRect()
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
function is_inside(xyMove, x, y, w, h) {
|
||||
return (xyMove.x > x && xyMove.x < x+w && xyMove.y > y && xyMove.y < y +h)
|
||||
}
|
||||
|
||||
function click_inside(xyClick, x, y, w, h) {
|
||||
return (xyClick.x > x && xyClick.x < x+w && xyClick.y > y && xyClick.y < y +h)
|
||||
}
|
||||
|
||||
function draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha){
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(originex, originey)
|
||||
ctx.lineTo(originex+largeur, originey)
|
||||
ctx.lineTo(originex+largeur, originey+hauteur)
|
||||
ctx.lineTo(originex, originey+hauteur)
|
||||
ctx.lineTo(originex, originey)
|
||||
ctx.fillStyle = couleur
|
||||
ctx.globalAlpha = alpha
|
||||
ctx.fill()
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
|
||||
function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1){
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(originex, originey)
|
||||
ctx.lineTo(originex+largeur, originey)
|
||||
ctx.lineTo(originex+largeur, originey+hauteur)
|
||||
ctx.lineTo(originex, originey+hauteur)
|
||||
ctx.lineTo(originex, originey)
|
||||
ctx.lineWidth = 5
|
||||
ctx.strokeStyle = couleur
|
||||
ctx.globalAlpha = alpha
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 1
|
||||
}
|
||||
|
||||
function bloquer_pose(L_poses){
|
||||
for (p=0; p<L_poses.length; p++){
|
||||
idx_i_p = L_poses[p][3]
|
||||
idx_j_p = L_poses[p][4]
|
||||
// Si on est en train de voir une pose déjà choisie
|
||||
if (idx_i== idx_i_p && idx_j==idx_j_p){
|
||||
draw_rectangle(0, h_progress_bar, W_3D, H_3D-h_progress_bar, "rgb(0, 0, 0)", alpha_bloque)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function progress_bar(N_tache, N_mesh){
|
||||
if (N_tache<=N_mesh){
|
||||
// background
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
|
||||
// bar
|
||||
w_bar = ((N_tache-1)/N_mesh)*w_progress_bar
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
|
||||
// numero de tache
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
|
||||
ctx.font = "18pt Courier";
|
||||
ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar)
|
||||
}
|
||||
}
|
||||
|
||||
function pose_deja_choisie(L_poses, i_choix, j_choix){
|
||||
deja_choisie = false
|
||||
for (p=0; p<L_poses.length; p++){
|
||||
idx_i_p = L_poses[p][3]
|
||||
idx_j_p = L_poses[p][4]
|
||||
// Si on est en train de voir une pose déjà choisie
|
||||
if (i_choix == idx_i_p && j_choix==idx_j_p){
|
||||
deja_choisie = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function print_text(dialogue) {
|
||||
|
||||
s = dialogue.texte
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
if (s[i].lettre !== undefined) {
|
||||
ctx.strokeStyle = s[i].stroke
|
||||
ctx.fillStyle = s[i].fill
|
||||
ctx.strokeText(s[i].lettre, s[i].x, s[i].y)
|
||||
ctx.fillText(s[i].lettre, s[i].x, s[i].y)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") {
|
||||
let s = dialogue
|
||||
|
||||
let x = 0
|
||||
let y = y_start
|
||||
|
||||
let mot = ""
|
||||
let img_to_print = ""
|
||||
let lettres = s.split("")
|
||||
let message = []
|
||||
|
||||
let current_fill = color
|
||||
|
||||
ctx.textAlign = "left"
|
||||
ctx.font = font
|
||||
|
||||
while (lettres.length > 0) {
|
||||
l = lettres.splice(0, 1)[0]
|
||||
if (l === " ") {
|
||||
if (x >= l_max) {
|
||||
|
||||
x = 0
|
||||
y += 40
|
||||
for (let i = 0; i < mot.length; i++) {
|
||||
message[message.length-mot.length+i].x = x_start+x
|
||||
message[message.length-mot.length+i].y = y
|
||||
x += ctx.measureText(message[message.length-mot.length+i].lettre).width
|
||||
}
|
||||
}
|
||||
message.push({"lettre": " ", "x": x_start+x, "y": y, "fill": current_fill, "stroke": current_fill})
|
||||
x += ctx.measureText(" ").width
|
||||
mot = ""
|
||||
} else {
|
||||
mot += l
|
||||
message.push({"lettre": l, "x": x_start+x, "y": y, "fill": current_fill, "stroke": current_fill})
|
||||
x += ctx.measureText(l).width
|
||||
}
|
||||
}
|
||||
|
||||
if (x >= l_max) {
|
||||
x = 0
|
||||
y += 40
|
||||
for (let i = 0; i < mot.length; i++) {
|
||||
message[message.length-mot.length+i].x = x_start+x
|
||||
message[message.length-mot.length+i].y = y
|
||||
x += ctx.measureText(message[message.length-mot.length+i].lettre).width
|
||||
}
|
||||
}
|
||||
|
||||
return {"texte": message}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Recap
|
||||
function swapElements(arr, i1, i2) {
|
||||
// Step 1
|
||||
let temp = arr[i1];
|
||||
|
||||
// Step 2
|
||||
arr[i1] = arr[i2];
|
||||
|
||||
// Step 3
|
||||
arr[i2] = temp;
|
||||
}
|
||||
|
||||
// legende des nb_demande recap
|
||||
function affichage_texte_recap(pos){
|
||||
y_image = 100+(20+ H_3D/3.5)*pos
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
if (pos==0){print_text(handle_text("Best viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
}
|
||||
|
||||
function afficher_recap(){
|
||||
ecart_recap = 50
|
||||
w_recap = window.innerWidth-W_3D
|
||||
// texte du haut
|
||||
print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||
// fleche swap haut
|
||||
x_fleche_h = W_3D+ w_recap/2.5 - ecart_recap/2
|
||||
w_fleche_h = 20
|
||||
h_fleche_h = 20
|
||||
// fleche swap bas
|
||||
x_fleche_b = W_3D+ w_recap/2.5 - ecart_recap/2
|
||||
w_fleche_b = 20
|
||||
h_fleche_b = 20
|
||||
// croix
|
||||
x_croix = W_3D+ w_recap/2.5 + W_3D/3.5 +10
|
||||
w_croix = 20
|
||||
h_croix = 20
|
||||
// pour chaque recap
|
||||
for (let i = 0 ; i < canvasMins.length; i++) {
|
||||
// Draw les images des contextes
|
||||
y_image = 100+(20+ H_3D/3.5)*i
|
||||
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2.5 +10, y_image, W_3D/3.5, H_3D/3.5)
|
||||
//draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, W_3D/3.5, H_3D/3.5, "rgb(255,0,0)")
|
||||
//Fleche pour Switch haut
|
||||
if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) {
|
||||
y_fleche_h = (H_3D/3.5)*0.4 + y_image
|
||||
ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)
|
||||
if (clicked && click_inside(xyMouseDown, x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)) {
|
||||
swapElements(canvasMins, i, i-1)
|
||||
swapElements(ctxMins, i, i-1)
|
||||
swapElements(liste_poses, i, i-1)
|
||||
//swapElements(checkbox_clicked_courant, i, i-1)
|
||||
//checkbox_clicked_courant[i-1].recap = "n°"+i
|
||||
//checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch haut de la pose n°"+(i+1)})
|
||||
clicked = false
|
||||
}
|
||||
}
|
||||
// Fleche pour Switch bas
|
||||
if (nb_choix_fait > 1 && i < nb_choix_fait-1) {
|
||||
y_fleche_b = (H_3D/3.5)*0.6 + y_image
|
||||
ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)
|
||||
if (clicked && click_inside(xyMouseDown, x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)) {
|
||||
swapElements(canvasMins, i, i+1)
|
||||
swapElements(ctxMins, i, i+1)
|
||||
swapElements(liste_poses, i, i+1)
|
||||
// swapElements(checkbox_clicked_courant, i, i+1)
|
||||
// checkbox_clicked_courant[i+1].recap = "n°"+(i+2)
|
||||
// checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch bas de la pose n°"+(i+1)})
|
||||
clicked = false
|
||||
}
|
||||
}
|
||||
// Croix
|
||||
if (i < nb_choix_fait) {
|
||||
// checkbox
|
||||
//draw_empty_checkbox(25 + (5+0.3*canvasRenderer.height)*i, i)
|
||||
//afficher_check(checkbox_clicked_courant, i, 25 + (5+0.3*canvasRenderer.height)*i)
|
||||
// croix pour annuler
|
||||
y_croix = (H_3D/3.5)*0.4 + y_image
|
||||
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
||||
if (clicked && click_inside(xyMouseDown, x_croix, y_croix, w_croix, h_croix)) {
|
||||
liste_poses.splice(i, 1)
|
||||
nb_choix_fait = nb_choix_fait-1
|
||||
interactions.push({"time": new Date().getTime(), "type": "suppression de la pose n°"+(i+1)})
|
||||
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
|
||||
for (let j = i; j < nb_choix_demande-1; j++) {
|
||||
swapElements(canvasMins, j, j+1)
|
||||
swapElements(ctxMins, j, j+1)
|
||||
// swapElements(checkbox_clicked_courant, j, j+1)
|
||||
// checkbox_clicked_courant[j+1].recap = "n°"+(j+2)
|
||||
// checkbox_clicked_courant[j].recap = "n°"+(j+1)
|
||||
}
|
||||
// vider le dernier recap poru les checkbox
|
||||
// checkbox_clicked_courant[nb_choix_demande-1].idx_checkbox = []
|
||||
// checkbox_clicked_courant[nb_choix_demande-1].mots = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// FLECHE
|
||||
function afficher_fleche(dict_imgs){
|
||||
// image, posx, posy, W, H
|
||||
ctx.drawImage(dict_imgs["bas"], W_3D*0.2, H_3D+DY+b+a, a, b)
|
||||
ctx.drawImage(dict_imgs["haut"], W_3D*0.2, H_3D+DY, a, b)
|
||||
ctx.drawImage(dict_imgs["gauche"], W_3D*0.2-b, H_3D+DY+b, b, a)
|
||||
ctx.drawImage(dict_imgs["droite"], W_3D*0.2+a, H_3D+DY+b, b, a)
|
||||
|
||||
}
|
||||
|
||||
// afficher un rectangle autour des fleches quand la souris survol
|
||||
function survol_fleche(){
|
||||
// Fleche GAUCHE
|
||||
if (xyMouseMove.x >= W_3D*0.2-b && xyMouseMove.x <= W_3D*0.2 && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
|
||||
draw_contour(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(17, 138, 178)", alpha_survol)
|
||||
}
|
||||
// Fleche DROITE
|
||||
if (xyMouseMove.x >= W_3D*0.2+a && xyMouseMove.x <= W_3D*0.2+a+b && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
|
||||
draw_contour(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(17, 138, 178)", alpha_survol)
|
||||
}
|
||||
// Fleche HAUT
|
||||
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY && xyMouseMove.y < H_3D+DY+b ){
|
||||
// l'image devient verte
|
||||
draw_contour(W_3D*0.2, H_3D+DY, a, b, "rgb(17, 138, 178)", alpha_survol)
|
||||
}
|
||||
// Fleche BAS
|
||||
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY+b+a && xyMouseMove.y < H_3D+DY+b+a+b ){
|
||||
// l'image devient verte
|
||||
draw_contour(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(17, 138, 178)", alpha_survol)
|
||||
}
|
||||
}
|
||||
|
||||
// MAJ de which_clicked avec le nom de la fleche clickée
|
||||
function get_clicked_fleche(){
|
||||
// Fleche GAUCHE
|
||||
if (clicked && xyMouseMove.x >= W_3D*0.2-b && xyMouseMove.x <= W_3D*0.2 && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
|
||||
which_clicked_fleche = 'gauche'
|
||||
}
|
||||
// Fleche DROITE
|
||||
if (clicked && xyMouseMove.x >= W_3D*0.2+a && xyMouseMove.x <= W_3D*0.2+a+b && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
|
||||
which_clicked_fleche = 'droite'
|
||||
}
|
||||
// Fleche HAUT
|
||||
if (clicked && xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY && xyMouseMove.y < H_3D+DY+b ){
|
||||
// l'image devient verte
|
||||
which_clicked_fleche = 'haut'
|
||||
}
|
||||
// Fleche BAS
|
||||
if (clicked && xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY+b+a && xyMouseMove.y < H_3D+DY+b+a+b ){
|
||||
// l'image devient verte
|
||||
which_clicked_fleche = 'bas'
|
||||
}
|
||||
}
|
||||
|
||||
function traitement_fleche(){
|
||||
// Survol des fleches avec la souris
|
||||
//survol_fleche()
|
||||
// click sur une fleche
|
||||
get_clicked_fleche()
|
||||
//console.log(which_clicked_fleche)
|
||||
switch (which_clicked_fleche){
|
||||
case'gauche' :
|
||||
console.log("deplacement G")
|
||||
action_fleche_gauche()
|
||||
//idx_i = (idx_i+1)%8
|
||||
break;
|
||||
case 'droite' :
|
||||
console.log("deplacement D")
|
||||
//idx_i = (idx_i+7)%8
|
||||
action_fleche_droite()
|
||||
break;
|
||||
case'haut' :
|
||||
console.log("deplacement H")
|
||||
action_fleche_haut()
|
||||
//idx_j = Math.max(idx_j-1,0)
|
||||
//idx_j = Math.max(idx_j-1,1)
|
||||
break;
|
||||
case 'bas' :
|
||||
console.log("deplacement B")
|
||||
action_fleche_bas()
|
||||
//idx_j = Math.min(idx_j+1,4)
|
||||
//idx_j = Math.min(idx_j+1,3)
|
||||
break;
|
||||
}
|
||||
console.log(idx_i, idx_j)
|
||||
theta = 2*Math.PI * ( (2/8)*(idx_j==0) + (1/8)*(idx_j==1) + (-1/8)*(idx_j==3) + (-2/8)*(idx_j==4))
|
||||
delta = 2*Math.PI * (idx_i/8)
|
||||
//camera.position.set(R*Math.cos(theta)*Math.cos(delta), R*Math.sin(theta)*Math.cos(delta), R*Math.sin(delta)) // repère wiki
|
||||
camera.position.set(R*Math.cos(delta)*Math.cos(theta), R*Math.sin(theta), R*Math.sin(delta)*Math.cos(theta)) // repère JS
|
||||
camera.lookAt(0, 0, 0)
|
||||
}
|
||||
|
||||
function action_fleche_gauche(){
|
||||
idx_i = (idx_i+1)%8
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche gauche"})}
|
||||
function action_fleche_droite(){
|
||||
idx_i = (idx_i+7)%8
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche droite"})}
|
||||
function action_fleche_haut(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche haut"})
|
||||
if (idx_j == 0){
|
||||
texte_temporaire = {"text": "You can't go any further, go back down.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error à cause de fleche haut"})
|
||||
}
|
||||
idx_j = Math.max(idx_j-1,0)
|
||||
}
|
||||
function action_fleche_bas(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche bas"})
|
||||
if (idx_j == 4){
|
||||
texte_temporaire = {"text": "You can't go any further, go up.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error à cause de fleche bas"})
|
||||
}
|
||||
idx_j = Math.min(idx_j+1,4)
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// BOUTON
|
||||
function afficher_bouton(dict_boutons){
|
||||
// image, posx, posy, W, H
|
||||
ctx.drawImage(dict_boutons["choix_pose"], W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
||||
ctx.drawImage(dict_boutons["retirer"], W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
||||
ctx.drawImage(dict_boutons["reinitialiser"], W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)
|
||||
ctx.drawImage(dict_boutons["raz"], window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton)
|
||||
if (nb_choix_fait == nb_choix_demande){
|
||||
ctx.drawImage(dict_boutons["valider"], -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)}
|
||||
}
|
||||
|
||||
function survol_bouton(){
|
||||
// Choisir le pt de vue
|
||||
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy && xyMouseMove.y < H_3D+dy+h_bouton ){
|
||||
if (is_inside(xyMouseMove, W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
||||
draw_rectangle(W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
// Retirer
|
||||
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+h_bouton ){
|
||||
else if (is_inside(xyMouseMove, W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
||||
draw_rectangle(W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
// Reintialiser
|
||||
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
||||
else if (is_inside(xyMouseMove, W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)){
|
||||
draw_rectangle(W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
// Valider
|
||||
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
||||
else if (nb_choix_demande==nb_choix_fait && is_inside(xyMouseMove, -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)) {
|
||||
draw_rectangle(-(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
//RAZ
|
||||
else if (is_inside(xyMouseMove, window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton )) {
|
||||
draw_rectangle(window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
}
|
||||
|
||||
function get_clicked_bouton(){
|
||||
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+b+h_bouton ){
|
||||
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
||||
which_clicked_bouton = "bouton_pose"
|
||||
}
|
||||
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+b+h_bouton ){
|
||||
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
||||
which_clicked_bouton = "bouton_retirer"
|
||||
}
|
||||
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
||||
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)){
|
||||
which_clicked_bouton = "bouton_reinitialiser"
|
||||
}
|
||||
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
||||
if (nb_choix_demande==nb_choix_fait &&clicked && click_inside(xyMouseMove, -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)) {
|
||||
which_clicked_bouton = "bouton_valider"
|
||||
}
|
||||
if (clicked && click_inside(xyMouseMove, window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton)) {
|
||||
which_clicked_bouton = "bouton_raz"
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton raz"})
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_pose(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton pose n°"+(nb_choix_fait+1)})
|
||||
// on regarde si la pose sélectionnée n'a pas déjà été choisie avant
|
||||
pose_deja_choisie(liste_poses, idx_i, idx_j)
|
||||
if (deja_choisie && !(nb_choix_fait == nb_choix_demande)){
|
||||
console.log("Cette pose a déjà été sélectionnée.")
|
||||
texte_temporaire = {"text": "This viewpoint has already been selected.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error pose déjà sélectionnée"})}
|
||||
|
||||
// plus de choix possible
|
||||
if (nb_choix_fait == nb_choix_demande) {
|
||||
console.log("Tu as déjà fait tes "+nb_choix_demande+" choix.")
|
||||
texte_temporaire = {"text": "You have already selected your "+nb_choix_demande+" viewpoints.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error "+nb_choix_demande+" déjà fait"})}
|
||||
|
||||
// si on a pas encore choisie toutes nos poses, on peut en ajouter
|
||||
if (nb_choix_fait < nb_choix_demande && !(deja_choisie)){
|
||||
liste_poses.push(['choix'+(nb_choix_fait+1), theta, delta, idx_i, idx_j])
|
||||
// affichage de la vue sélectionnée dans le recap
|
||||
ctxMins[nb_choix_fait].drawImage(canvasRenderer, 0.5*canvasRenderer.width-0.5*canvasRenderer.height, 0, canvasRenderer.height, canvasRenderer.height, 0, 0, canvasRenderer.height*0.3, canvasRenderer.height*0.25)
|
||||
nb_choix_fait = nb_choix_fait+1
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_retirer(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton retirer"})
|
||||
// il y a des poses à retirer
|
||||
if (liste_poses.length > 0){
|
||||
liste_poses.pop()
|
||||
nb_choix_fait = nb_choix_fait-1
|
||||
// RAZ du contexte liée à la dernière vue ajoutée
|
||||
ctxMins[nb_choix_fait].clearRect(0, 0, canvasMins[nb_choix_fait].width, canvasMins[nb_choix_fait].height)
|
||||
// On retire toutes les checkbox des checkbox
|
||||
//checkbox_clicked_courant[nb_choix_fait].idx_checkbox = []
|
||||
//checkbox_clicked_courant[nb_choix_fait].mots = []
|
||||
}
|
||||
// S'il n'y a pas de pose choisie
|
||||
else {
|
||||
console.log("Il n'y a pas de pose à retirer.")
|
||||
texte_temporaire = {"text": "There are no selected viewpoints to remove.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error pas de pose à retirer"})
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_reinitialiser(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton renitialiser"})
|
||||
if (liste_poses.length>0){
|
||||
liste_poses = []
|
||||
nb_choix_fait = 0
|
||||
// RAZ de tous les contexte : on ne les surrpime pas, on les nettoie
|
||||
for (let i = 0; i < nb_choix_demande; i++) {
|
||||
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
|
||||
}
|
||||
// on reinitilaise les checbok box
|
||||
//for (let i = 0 ; i < nb_choix_demande; i++){
|
||||
//checkbox_clicked_courant[i].idx_checkbox = []
|
||||
//checkbox_clicked_courant[i].mots = []
|
||||
//}
|
||||
}
|
||||
else {console.log("Il n'y a pas de pose à reintialiser.")
|
||||
texte_temporaire = {"text": "There are no selected viewpoints to resart.", "x":x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error aucun choix fait donc pas de reinitialisation possible"})}
|
||||
}
|
||||
|
||||
function action_bouton_valider(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton valider"})
|
||||
// Si tous les mesh ont été vu
|
||||
if (num_tache == nb_mesh && nb_choix_demande==nb_choix_fait){
|
||||
choix_courant['choix_poses'] = liste_poses
|
||||
choix['tache_N'+num_tache] = choix_courant
|
||||
// sauvegarde des images du recap
|
||||
all_ctxMins['tache_N'+num_tache] = [mesh_courant,ctxMins]
|
||||
all_canvasMins['tache_N'+num_tache] = [mesh_courant,canvasMins]
|
||||
//checkbox_clicked['tache_N'+num_tache] = checkbox_clicked_courant
|
||||
num_tache = num_tache+1
|
||||
page_analyse = true
|
||||
page_vues = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "fin des choix."})
|
||||
}
|
||||
|
||||
// Si le nombre de vue demandé a été fait et que ce n'est pas le dernier mesh à voir
|
||||
else if (nb_choix_demande == liste_poses.length && num_tache < nb_mesh){
|
||||
choix_courant['choix_poses'] = liste_poses
|
||||
choix['tache_N'+num_tache] = choix_courant
|
||||
// sauvegarde des images du recap
|
||||
all_ctxMins['tache_N'+num_tache] = [mesh_courant,ctxMins]
|
||||
all_canvasMins['tache_N'+num_tache] = [mesh_courant,canvasMins]
|
||||
//checkbox_clicked['tache_N'+num_tache] = checkbox_clicked_courant
|
||||
// RAZ
|
||||
choix_courant = {}
|
||||
liste_poses = []
|
||||
nb_choix_fait = 0
|
||||
//checkbox_clicked_courant = []
|
||||
//for (let i = 0 ; i < nb_choix_demande; i++){checkbox_clicked_courant.push({recap: "n°"+(i+1),idx_checkbox:[], mots:[]})}
|
||||
// Mesh suivant
|
||||
indice_mesh = indice_mesh + 1
|
||||
num_tache = num_tache+1
|
||||
setUp_3D(indice_mesh)
|
||||
}
|
||||
|
||||
// Error : il reste des vues à sélectionner
|
||||
else if (nb_choix_fait < nb_choix_demande){
|
||||
//console.log("Tu n'as pas fait tes 3 choix")
|
||||
texte_temporaire = {"text": "You did not select your "+nb_choix_demande+" viewpoints.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error à cause du bouton valider"})
|
||||
console.log("ccc")}
|
||||
// Error : un pbl à identifier
|
||||
else{
|
||||
console.log("PBL bouton valider")
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_raz(){
|
||||
//on efface les autres textes pop
|
||||
texte_temporaire = {}
|
||||
//affichage du message
|
||||
print_text(handle_text("Do you really want to restart the study?", window.innerWidth-w_bouton*2.1, window.innerHeight-h_bouton*2, "18pt Courier", 300))
|
||||
// affichage
|
||||
ctx.drawImage(imgs['croix'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.65, window.innerHeight-h_bouton +10, 60,50)
|
||||
ctx.drawImage(imgs['check'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
|
||||
// // survol croix
|
||||
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50)){
|
||||
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
|
||||
// } // survol check
|
||||
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50)){
|
||||
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
|
||||
// }
|
||||
|
||||
// click sur le check : on raz
|
||||
//draw_contour( (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
|
||||
if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){
|
||||
|
||||
init_variable(false);
|
||||
setUp_3D(indice_mesh)
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton raz check"})}
|
||||
// click sur la croix ou ailleurs : on clear
|
||||
//if (clicked && is_inside(xyMouseMove,W_3D*0.35+a+2*b+ecart*7 + w_bouton +400*1/2, H_3D+dy+ecart*2 + 100, 50,50)){
|
||||
if(clicked){
|
||||
bouton_raz_clicked = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton raz croix"})}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function traitement_bouton(){
|
||||
// si on survol, on a les contours qui apparaissent
|
||||
survol_bouton()
|
||||
// si on click
|
||||
get_clicked_bouton()
|
||||
switch (which_clicked_bouton){
|
||||
// bouton valider pose : on rajoute le bouton à la liste
|
||||
case 'bouton_pose':
|
||||
bouton_raz_clicked = false
|
||||
action_bouton_pose()
|
||||
break;
|
||||
case 'bouton_retirer':
|
||||
bouton_raz_clicked = false
|
||||
action_bouton_retirer()
|
||||
break;
|
||||
case 'bouton_reinitialiser':
|
||||
bouton_raz_clicked = false
|
||||
action_bouton_reinitialiser()
|
||||
break;
|
||||
case 'bouton_valider':
|
||||
bouton_raz_clicked = false
|
||||
action_bouton_valider()
|
||||
break;
|
||||
case 'bouton_raz':
|
||||
bouton_raz_clicked = true
|
||||
console.log("bouton raz")
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
// liste des checkbox clické pour chaque recap
|
||||
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
|
||||
// nuemro init de l'analyse
|
||||
num_analyse = 0
|
||||
idx_tache = 1 // ATTENTION ça commence à 1
|
||||
|
||||
// Variable
|
||||
function init_variable_analyse(){
|
||||
w_checkbox = 30
|
||||
h_checkbox = 30
|
||||
y_checkbox = window.innerHeight*0.75
|
||||
|
||||
// Analayse des choix avec les checkboxs
|
||||
keywords = ["1. De face", "2. De profil", "3. Debout", "4. Eyes contact", "5. toto"]
|
||||
nb_analyse_demande = 3
|
||||
|
||||
w_valider = w_bouton*1.2
|
||||
h_valider = h_bouton*1.2
|
||||
x_valider = (window.innerWidth/2)-w_valider/2
|
||||
y_valider = window.innerHeight-(h_valider*1.5)
|
||||
}
|
||||
|
||||
|
||||
function affichage_legende(pos){
|
||||
x_image = dx + (ecart_analyse+ W_3D/2.5)*pos
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
if (pos==0){print_text(handle_text("Best viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
}
|
||||
|
||||
function affichage_texte(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height
|
||||
// Texte
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
|
||||
ctx.font = "bold 32pt Courier";
|
||||
ctx.fillText("Analysis about your choices", (window.innerWidth/3), 70)
|
||||
}
|
||||
|
||||
// idx_tache est la num de la tache à aller chercher dans all_ctxMins
|
||||
function affichage_analyse(idx_tache){
|
||||
ecart_analyse = 50
|
||||
dx = (window.innerWidth - canvasMins.length*(W_3D/2.5) - (canvasMins.length-1)*(ecart_analyse))*0.5
|
||||
canvasMins = all_canvasMins['tache_N'+idx_tache][1]
|
||||
for (let i=0; i<canvasMins.length; i++){
|
||||
affichage_legende(i)
|
||||
ctx.drawImage(canvasMins[i], dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5)
|
||||
draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5, "rgb(255,0,0)")
|
||||
}
|
||||
}
|
||||
|
||||
function progress_bar_analyse(N_analyse, N_analyse_total){
|
||||
if (N_analyse<=N_analyse_total){
|
||||
// background
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
|
||||
// bar
|
||||
w_bar = ((N_analyse)/N_analyse_total)*w_progress_bar
|
||||
console.log(w_bar)
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
|
||||
// numero de tache
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
|
||||
ctx.font = "18pt Courier";
|
||||
ctx.fillText((N_analyse+1)+"/"+(N_analyse_total), x_progress_bar+w_progress_bar+10, h_progress_bar)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Bouton
|
||||
|
||||
function affichage_bouton_valider_analyse(){
|
||||
// si au moins un mot est coché
|
||||
if (checkbox_clicked_courant.idx_checkbox.length>0){
|
||||
// affichage bouton valider
|
||||
ctx.drawImage(boutons["valider"], x_valider, y_valider, w_valider, h_valider)
|
||||
// survol
|
||||
if(is_inside(xyMouseMove, x_valider, y_valider, w_valider, h_valider)){
|
||||
draw_rectangle(x_valider, y_valider, w_valider, h_valider, "rgb(200, 200, 200)", 0.6)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_valider_analyse(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Bouton valider analyse."})
|
||||
// si au moins un mot est coché et qu'il reste des analyse à faire
|
||||
if (checkbox_clicked_courant.idx_checkbox.length>0){
|
||||
// sauvegarde des checkbox clikée et les mesh
|
||||
checkbox_clicked['analyse_N'+(num_analyse+1)] = {"mesh" : choix["tache_N"+idx_tache].mesh ,"idx" : checkbox_clicked_courant.idx_checkbox, "mots": checkbox_clicked_courant.mots}
|
||||
//RAZ pour la prochaine analyse
|
||||
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
|
||||
// analyse suivant
|
||||
num_analyse = num_analyse + 1
|
||||
// indice mesh da l'analyse suivante
|
||||
idx_tache = idx_tache + 1
|
||||
if (num_analyse<nb_analyse_demande){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Début analyse n°"+(num_analyse+1)})}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Checkbox
|
||||
|
||||
function traitement_empty_checkbox(num_analyse){
|
||||
for (let i = 0 ; i < keywords.length; i++){
|
||||
// checkbox vide
|
||||
x_checkbox = 200 + 300*(i)
|
||||
ctx.drawImage(imgs["checkbox"], x_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// Texte
|
||||
print_text(handle_text(keywords[i], x_checkbox + w_checkbox + 30, y_checkbox + 20, "14pt Courier", longueur_max_error))
|
||||
// survol
|
||||
if (is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
|
||||
draw_rectangle(x_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
|
||||
}
|
||||
// clicked
|
||||
if (clicked && is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
|
||||
// s'il n'y a pas deja un check dessus
|
||||
// if (checkbox_clicked_courant.idx_checkbox.indexOf(i) == -1){
|
||||
// checkbox_clicked_courant.idx_checkbox.push(i)
|
||||
// checkbox_clicked_courant.mots.push(keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i]})
|
||||
// console.log('ajout '+keywords[i])
|
||||
// }
|
||||
|
||||
// else{
|
||||
// position_i = checkbox_clicked_courant.idx_checkbox.indexOf(i)
|
||||
// checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
|
||||
// checkbox_clicked_courant.mots.splice(position_i,1)
|
||||
// console.log('retrait '+keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i]})
|
||||
// }
|
||||
check_ou_decheck(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function check_ou_decheck(pos){
|
||||
//s'il n'y a pas deja un check dessus
|
||||
if (checkbox_clicked_courant.idx_checkbox.indexOf(pos) == -1){
|
||||
checkbox_clicked_courant.idx_checkbox.push(pos)
|
||||
checkbox_clicked_courant.mots.push(keywords[pos])
|
||||
interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[pos]})
|
||||
console.log('ajout '+keywords[pos])
|
||||
}
|
||||
|
||||
else{
|
||||
position_i = checkbox_clicked_courant.idx_checkbox.indexOf(pos)
|
||||
checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
|
||||
checkbox_clicked_courant.mots.splice(position_i,1)
|
||||
console.log('retrait '+keywords[pos])
|
||||
interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[pos]})
|
||||
}
|
||||
}
|
||||
|
||||
function draw_check(){
|
||||
idx_check = checkbox_clicked_courant.idx_checkbox
|
||||
// pour chacune de ces checkbox cliquée on affiche un check
|
||||
for (let i = 0 ; i < idx_check.length; i++){
|
||||
pos = idx_check[i]
|
||||
x_checkbox = 200 + 300*(pos)
|
||||
ctx.drawImage(imgs["check"], x_checkbox-5 , y_checkbox-5, w_checkbox+10, h_checkbox+10)
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// MAIN
|
||||
function traitement_fin(){
|
||||
if (num_analyse < nb_analyse_demande){
|
||||
// affiche les textes de la page sauf les ceheckbox
|
||||
affichage_texte()
|
||||
// afficher les checkbox et gerer les click ou declick
|
||||
traitement_empty_checkbox(num_analyse)
|
||||
// affiche les check vert en fonction de ce qu'il y a dans checkbox_clicked_courant
|
||||
draw_check()
|
||||
// affiche les nb_demande_choix images recap
|
||||
affichage_analyse(idx_tache)
|
||||
// affiche progress bar
|
||||
progress_bar_analyse(num_analyse, nb_analyse_demande)
|
||||
// bouton valider
|
||||
affichage_bouton_valider_analyse()
|
||||
// action si bouton valider
|
||||
if (clicked && is_inside(xyMouseMove, x_valider, y_valider, w_valider, h_valider)){
|
||||
action_bouton_valider_analyse()
|
||||
}
|
||||
}
|
||||
else{
|
||||
page_analyse = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "Fin analyse"})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// function draw_empty_checkbox(y_img_recap, num_recap){
|
||||
// // croix
|
||||
// x_checkbox = W_3D+dx*2+longueur_max_recap+w_fleche_b+canvasMins[0].width+w_croix*2
|
||||
// w_checkbox = 20
|
||||
// h_checkbox = 20
|
||||
// dx_checkbox = 0
|
||||
// for (let i = 0 ; i < keywords.length; i++){
|
||||
// if (i%2 == 0){dx_checkbox = i/2 * 180}
|
||||
// // checkbox vide
|
||||
// y_checkbox = 20 + y_img_recap + 80*(i%2)
|
||||
// ctx.drawImage(imgs["checkbox"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// print_text(handle_text(keywords[i], x_checkbox + dx_checkbox + 30, y_checkbox + 20, "14pt Courier", longueur_max_error))
|
||||
// // survol
|
||||
// if (xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
|
||||
// draw_rectangle(x_checkbox + dx_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
|
||||
// }
|
||||
// // clicked
|
||||
// if (clicked && xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
|
||||
// // s'il n'y a pas deja un check dessus
|
||||
// if (checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i) == -1){
|
||||
// checkbox_clicked_courant[num_recap].idx_checkbox.push(i)
|
||||
// checkbox_clicked_courant[num_recap].mots.push(keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "ajout check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
|
||||
// else{
|
||||
// position_i = checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i)
|
||||
// checkbox_clicked_courant[num_recap].idx_checkbox.splice(position_i,1)
|
||||
// checkbox_clicked_courant[num_recap].mots.splice(position_i,1)
|
||||
// interactions.push({"time": new Date().getTime(), "type": "retrait check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // affichage des check pour le recap n°num_recap qui a un y = y_img_recap
|
||||
// function afficher_check(liste_check, num_recap, y_img_recap){
|
||||
// dx_checkbox = 0
|
||||
// idx_check = liste_check[num_recap].idx_checkbox
|
||||
// // pour chacune de ces checkbox cliquée on affiche un check
|
||||
// for (let i = 0 ; i < idx_check.length; i++){
|
||||
// pos = idx_check[i]
|
||||
// if (pos%2 == 0){dx_checkbox = pos/2 * 180}
|
||||
// else{dx_checkbox = (pos-1)/2 * 180}
|
||||
// y_checkbox = 20 + y_img_recap + 80*(pos%2)
|
||||
// ctx.drawImage(imgs["check"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// }
|
||||
// }
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
scale_bouton_commencer = 0.6
|
||||
|
||||
function affichage_tuto(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height
|
||||
// Texte
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
|
||||
ctx.font = "bold 58pt Courier";
|
||||
ctx.fillText("Are you ready ??????", (window.innerWidth/2)-450, innerHeight/2 -100)
|
||||
|
||||
// Bouton commencer
|
||||
ctx.drawImage(boutons["commencer"], (window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer)
|
||||
}
|
||||
|
||||
function survol_commencer(){
|
||||
if(xyMouseMove.x >= (window.innerWidth/2)-(w_bouton_commencer/2) && xyMouseMove.x <= (window.innerWidth/2)-(w_bouton_commencer/2) + w_bouton_commencer && xyMouseMove.y > innerHeight/2 && xyMouseMove.y < innerHeight/2 + h_bouton_commencer){
|
||||
draw_rectangle((window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_commencer(s){
|
||||
page_tuto = false
|
||||
page_vues = true
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton commencer"+s})
|
||||
}
|
||||
|
||||
|
||||
function traitement_tuto(){
|
||||
affichage_tuto()
|
||||
survol_commencer()
|
||||
if (clicked && click_inside(xyMouseDown, (window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer)){
|
||||
// on passe aux choix
|
||||
action_bouton_commencer("titi")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,458 @@
|
|||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// MAIN
|
||||
// initialisation des variables
|
||||
init_variable(true)
|
||||
// initialisation du canvas : load des images
|
||||
setUp_3D(indice_mesh)
|
||||
init_data()
|
||||
//init_clavier()
|
||||
// action
|
||||
animate()
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
function init_variable(premier_appel){
|
||||
///////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////
|
||||
// CE QUE L'ON RECUPERE A LA FIN
|
||||
// dictionnaire avec les choix pour TOUS les mesh
|
||||
choix = {}
|
||||
// dictionnaire avec les checkbox pour TOUS les mesh
|
||||
checkbox_clicked = {}
|
||||
///////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////
|
||||
|
||||
|
||||
// SOURIS
|
||||
// gestion de la souris : pour savoir si on a clické et sur quelle image on a clické
|
||||
clicked = false
|
||||
which_clicked_bouton = -1
|
||||
which_clicked_fleche = -1
|
||||
bouton_raz_clicked = false
|
||||
|
||||
// TEMPS
|
||||
// pour avoir un délai après le click
|
||||
//time_click = new Date().getTime()
|
||||
if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": "start"}]}
|
||||
|
||||
// Couleur
|
||||
alpha_survol = 0.3
|
||||
|
||||
// DATA github
|
||||
indice_mesh = 0 // indice du premier mesh à visionner
|
||||
mesh_courant = "nope" // nom des mesh
|
||||
// nombre de mesh a visionner AU TOTAL
|
||||
nb_mesh = 3
|
||||
|
||||
// Choix des N poses demandé pour les mesh courant
|
||||
choix_courant = {}
|
||||
// Angles des poses init choisies pour le mesh courant
|
||||
liste_poses = []
|
||||
// Nb init courant de pose choisies
|
||||
nb_choix_fait = 0
|
||||
// nombre de pose qu'on demande de choisir pour chaque mesh visualisé
|
||||
nb_choix_demande = 3
|
||||
// Numero init de la tache courant --> il y en a autant que de mesh à voir
|
||||
num_tache = 1
|
||||
|
||||
// Texte
|
||||
texte_temporaire = {}
|
||||
// temps de pop des messages
|
||||
temps_pop = 1000
|
||||
// text qui correspond à des erreurs de bouton
|
||||
longueur_max_error = 700
|
||||
// text
|
||||
longueur_max_recap = 350
|
||||
|
||||
// Fenetre 3D
|
||||
scale_W_3D=0.6
|
||||
scale_H_3D=0.7
|
||||
W_3D = window.innerWidth*scale_W_3D
|
||||
H_3D = window.innerHeight*scale_H_3D
|
||||
|
||||
// Rayon pour les cameras
|
||||
R = 2.5
|
||||
|
||||
// Enchainement des pages
|
||||
page_tuto = true // true
|
||||
page_vues = false // false
|
||||
page_analyse = false
|
||||
|
||||
// Pour afiicher les recap dans la partie analys,e on les conserve tous
|
||||
all_ctxMins = {}
|
||||
all_canvasMins = {}
|
||||
|
||||
// pour initialiser les claviers à chaque page
|
||||
premier_tour_page_tuto = true
|
||||
premier_tour_page_vues = true
|
||||
premier_tour_page_analyse = true
|
||||
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
// 3D
|
||||
|
||||
function setUp_light(rayon){
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 0.22;
|
||||
// Light
|
||||
const light1 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light1 );
|
||||
const dir_light1 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light1.position.set(rayon, 0, 0);
|
||||
scene.add(dir_light1);
|
||||
|
||||
const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light2 );
|
||||
const dir_light2 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light2.position.set(-rayon, 0, -0);
|
||||
scene.add(dir_light2);
|
||||
|
||||
const light3 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light3 );
|
||||
const dir_light3 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light3.position.set(0, -rayon, 0);
|
||||
scene.add(dir_light3);
|
||||
|
||||
const light4 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light4 );
|
||||
const dir_light4 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light4.position.set(0, rayon, -0);
|
||||
scene.add(dir_light4);
|
||||
|
||||
}
|
||||
|
||||
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
|
||||
function setUp_3D(idx_mesh){
|
||||
// Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence
|
||||
idx_i_init = Math.floor(Math.random()*8)
|
||||
idx_j_init = Math.floor(Math.random()*5)
|
||||
theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4))
|
||||
delta_init = 2*Math.PI * (idx_i_init/8)
|
||||
|
||||
// initialisation
|
||||
idx_i = idx_i_init
|
||||
idx_j = idx_j_init
|
||||
|
||||
// Caméra
|
||||
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
|
||||
camera.position.x = 2;
|
||||
camera.position.y = 0;
|
||||
camera.position.z = 0;
|
||||
//camera.lookAt (new THREE.Vector3(0,0,0))
|
||||
scene = new THREE.Scene();
|
||||
scene.add(camera)
|
||||
renderer = new THREE.WebGLRenderer( {
|
||||
antialias: true,
|
||||
preserveDrawingBuffer: true } );
|
||||
|
||||
renderer.setSize(W_3D , H_3D);
|
||||
|
||||
old_renderer = document.getElementById('renderer')
|
||||
if (old_renderer!= null){
|
||||
old_renderer.parentElement.removeChild(old_renderer)
|
||||
}
|
||||
|
||||
renderer.domElement.id = 'renderer'
|
||||
|
||||
renderer.domElement.style.marginTop = (H_3D*0.04)+"px"; // même valeur que h_progress_bar dans fonction_choix_vues
|
||||
document.body.appendChild( renderer.domElement );
|
||||
controls = new THREE.OrbitControls( camera );
|
||||
controls.enableZoom = false;
|
||||
controls.keys = {}
|
||||
controls.mouseButtons = {}
|
||||
controls.update();
|
||||
|
||||
|
||||
canvasRenderer = document.getElementById("renderer")
|
||||
|
||||
canvas = document.getElementById("canvas")
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
ctx = canvas.getContext("2d")
|
||||
|
||||
|
||||
// On crée autant de canvas que de choix demandé,
|
||||
// ces canvas seront vide tant qu'il n'y a pas de vue sélectionnée
|
||||
// puis updates en fonction des actions faites
|
||||
canvasMins = []
|
||||
ctxMins = []
|
||||
for (let i = 0; i < nb_choix_demande; i++) {
|
||||
let c = document.createElement("canvas")
|
||||
c.width = 200
|
||||
c.heigth = 200
|
||||
let ctx_c = c.getContext("2d")
|
||||
canvasMins.push(c)
|
||||
ctxMins.push(ctx_c)
|
||||
}
|
||||
|
||||
setUp_light(R)
|
||||
|
||||
// Data 3D
|
||||
obj_file = ['dragon_update_user_study.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj']
|
||||
const objLoader = new THREE.OBJLoader2();
|
||||
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file[idx_mesh], (event) => {
|
||||
const root = event.detail.loaderRootNode;
|
||||
scene.add(root);
|
||||
});
|
||||
mesh_courant = obj_file[idx_mesh].split('_')[0]
|
||||
choix_courant['obj_file'] = obj_file[idx_mesh]
|
||||
choix_courant['mesh'] = mesh_courant
|
||||
choix_courant['position_init_idx_i'] = idx_i_init
|
||||
choix_courant['position_init_idx_j'] =idx_j_init
|
||||
choix_courant['theta_init'] = theta_init
|
||||
choix_courant['delta_init'] = delta_init
|
||||
|
||||
// pour savoir quel mesh on affiche
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage Mesh random : "+mesh_courant+" en idx_i, idx_j : ("+idx_i_init+", "+idx_j_init+")"})
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage Mesh random : "+mesh_courant+" en theta, delta : ("+theta_init+", "+delta_init+")"})
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
// CLAVIER
|
||||
|
||||
function action_clavier_tuto(event){
|
||||
switch (event.key){
|
||||
// selectionner pose
|
||||
case ' ' :
|
||||
action_bouton_commencer('clavier')
|
||||
break;
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_commencer('clavier')
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function action_clavier_vues(event){
|
||||
switch (event.key){
|
||||
case 'ArrowLeft':
|
||||
console.log("deplacement K-G")
|
||||
action_fleche_gauche()
|
||||
//idx_i = (idx_i+1)%8
|
||||
break;
|
||||
case 'ArrowRight' :
|
||||
console.log("deplacement K-D")
|
||||
action_fleche_droite()
|
||||
//idx_i = (idx_i+7)%8
|
||||
break;
|
||||
case 'ArrowDown' :
|
||||
console.log("deplacement K-B")
|
||||
action_fleche_bas()
|
||||
//idx_j = Math.min(idx_j+1,4)
|
||||
break;
|
||||
case 'ArrowUp' :
|
||||
console.log("deplacement K-H")
|
||||
action_fleche_haut()
|
||||
//idx_j = Math.max(idx_j-1,0)
|
||||
break;
|
||||
// selectionner pose
|
||||
case ' ' :
|
||||
action_bouton_pose()
|
||||
break;
|
||||
// retirer
|
||||
case 'Backspace':
|
||||
action_bouton_retirer()
|
||||
break;
|
||||
// reintialiser
|
||||
case 'Delete':
|
||||
action_bouton_reinitialiser()
|
||||
break;
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_valider()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function action_clavier_analyse(event){
|
||||
switch (event.key){
|
||||
// selectionner pose
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_valider_analyse()
|
||||
break;
|
||||
case '1':
|
||||
check_ou_decheck(0)
|
||||
break;
|
||||
case '2':
|
||||
check_ou_decheck(1)
|
||||
break;
|
||||
case '3':
|
||||
check_ou_decheck(2)
|
||||
break;
|
||||
case '4':
|
||||
check_ou_decheck(3)
|
||||
break;
|
||||
case '5':
|
||||
check_ou_decheck(4)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function init_clavier_tuto(){
|
||||
document.addEventListener("keydown", action_clavier_tuto)
|
||||
}
|
||||
|
||||
function init_clavier_vues(){
|
||||
document.addEventListener("keydown", action_clavier_vues)
|
||||
}
|
||||
|
||||
function init_clavier_analyse(){
|
||||
document.addEventListener("keydown", action_clavier_analyse)
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
function init_data(){
|
||||
|
||||
ctx.font = " 18pt Courier";
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
// Data 2D
|
||||
imgs = {}
|
||||
imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_droite.png')//new_image("graphics/fleche_droite.png")
|
||||
imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_gauche.png') //new_image("graphics/fleche_gauche.png")
|
||||
imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_bas.png') //new_image("graphics/fleche_bas.png")
|
||||
imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_haut.png') //new_image("graphics/fleche_haut.png")
|
||||
imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/croix.png')
|
||||
//imgs["tmp"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/tmp.jpg')
|
||||
imgs["check"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/check.png')
|
||||
imgs["checkbox"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/empty_checkbox.png')
|
||||
// /// Boutons
|
||||
boutons = {}
|
||||
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_reinitialiser.png')
|
||||
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_valider.png')
|
||||
boutons["choix_pose"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_pose.png')
|
||||
boutons["retirer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_retirer.png')
|
||||
boutons["commencer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_commencer.png')
|
||||
boutons["raz"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_raz.png')
|
||||
|
||||
// Mouse
|
||||
xyMouseMove = {"x": -1, "y": -1}
|
||||
xyMouseDown = {"x": -1, "y": -1}
|
||||
xyMouseUp = {"x": -1, "y": -1}
|
||||
|
||||
canvas.addEventListener("mousemove", function(event) { xyMouseMove = getMousePos(canvas, event)}, false)
|
||||
canvas.addEventListener("mousedown", function(event) {
|
||||
xyMouseDown = getMousePos(canvas, event)
|
||||
clicked = true }, false)
|
||||
canvas.addEventListener("mouseup", function(event) { xyMouseUp = getMousePos(canvas, event)}, false)
|
||||
|
||||
console.log("fin init")
|
||||
}
|
||||
|
||||
|
||||
function animate() {
|
||||
// Temps à chaque animate
|
||||
time_animate = new Date().getTime()
|
||||
|
||||
// page tuto
|
||||
if (page_tuto){
|
||||
if (premier_tour_page_tuto){
|
||||
init_clavier_tuto()
|
||||
premier_tour_page_tuto=false}
|
||||
traitement_tuto()
|
||||
}
|
||||
|
||||
// page de choix
|
||||
if (page_vues && num_tache <= nb_mesh){
|
||||
// on enlève les touches du clavier associé à la page tuto
|
||||
document.removeEventListener("keydown", action_clavier_tuto)
|
||||
//init touche clavier
|
||||
if(premier_tour_page_vues){
|
||||
init_clavier_vues()
|
||||
premier_tour_page_vues = false
|
||||
}
|
||||
// Variable pour les fonctions
|
||||
init_variable_fonction(boutons, imgs)
|
||||
// Nettoyage fleche
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
// Affichage bouton RAZ
|
||||
if (bouton_raz_clicked == true){action_bouton_raz()}
|
||||
// Affichage message pop
|
||||
if (Object.keys(texte_temporaire).length >0){
|
||||
if (time_animate > texte_temporaire.t_end){texte_temporaire = {}}
|
||||
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, " 18pt Courier", longueur_max_error, "#118AB2"))}
|
||||
}
|
||||
// progress bar
|
||||
progress_bar(num_tache, nb_mesh)
|
||||
// Affichage fleche
|
||||
afficher_fleche(imgs)
|
||||
// affichage de sboutons
|
||||
afficher_bouton(boutons)
|
||||
if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")}
|
||||
// traitement fleche (surval + click)
|
||||
traitement_fleche()
|
||||
// traitement bouton : (survol + click)
|
||||
traitement_bouton()
|
||||
// afficher + maj du recap de pose choisie : affichage des vue des poses
|
||||
afficher_recap()
|
||||
// Affichage texte recap
|
||||
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}
|
||||
// affichage 3D
|
||||
renderer.render( scene, camera );
|
||||
// Les poses choisies sont grisées
|
||||
bloquer_pose(liste_poses)
|
||||
// RAZ
|
||||
clicked = false
|
||||
which_clicked_fleche = -1
|
||||
which_clicked_bouton = -1
|
||||
}
|
||||
|
||||
if (page_analyse){
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_vues)
|
||||
// inti clavier
|
||||
if(premier_tour_page_analyse){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Début analyse n°1"})
|
||||
init_clavier_analyse()
|
||||
premier_tour_page_analyse = false}
|
||||
init_variable_analyse()
|
||||
traitement_fin()
|
||||
}
|
||||
// page finale
|
||||
if (!page_tuto && !page_vues && !page_analyse){
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_analyse)
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
|
||||
ctx.font = "bold 58pt Courier";
|
||||
ctx.fillText("Done, thx you :)", (window.innerWidth/2)-450, innerHeight/2 -100)
|
||||
console.log('Fin interface3DD')
|
||||
|
||||
// ecriture
|
||||
// Création de la requête HTTP à envoyer au serveur.
|
||||
let xhr = new XMLHttpRequest();
|
||||
// Préparation de la requête pour l'envoi en POST vers l'url.
|
||||
xhr.open('POST', '/data');
|
||||
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
|
||||
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
||||
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
|
||||
xhr.onreadystatechange = function() {
|
||||
// Si la requête est terminée, et que la réponse n'est pas une erreur.
|
||||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
}
|
||||
// Envoi de la requête vers le serveur, avec les données.
|
||||
xhr.send(JSON.stringify(choix));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Boucle sur animate
|
||||
requestAnimationFrame( animate );
|
||||
// RAZ
|
||||
clicked = false
|
||||
which_clicked_fleche = -1
|
||||
which_clicked_bouton = -1
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// On récupère l'élément HTML dont l'id est username (champ que l'utilisateur va remplir).
|
||||
let usernameInput = document.getElementById('username');
|
||||
|
||||
// On récupère l'élément HTML dont l'id est button (bouton à cliquer pour valider la requête).
|
||||
let button = document.getElementById('button');
|
||||
|
||||
// Ajout du listener pour déclencher le traitement lorsque le bouton est cliqué.
|
||||
button.addEventListener('click', function() {
|
||||
|
||||
// Création de la requête HTTP à envoyer au serveur.
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
// Préparation de la requête pour l'envoi en POST vers l'url.
|
||||
xhr.open('POST', '/data');
|
||||
|
||||
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
|
||||
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
|
||||
xhr.onreadystatechange = function() {
|
||||
|
||||
// Si la requête est terminée, et que la réponse n'est pas une erreur.
|
||||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||||
|
||||
console.log(xhr.responseText);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Envoi de la requête vers le serveur, avec les données.
|
||||
xhr.send('username=' + usernameInput.value);
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
body {
|
||||
background-color: rgb(3, 26, 33);
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(3, 26, 33, 0);
|
||||
}
|
||||
|
||||
.container{
|
||||
height:20px;
|
||||
background-color: #CCC;
|
||||
position: relative
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue