tforgione
/
bvs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Save halfway

This commit is contained in:
Thomas Forgione 2023-04-27 16:30:56 +02:00
parent f02925f808
commit a1de2bda99
4 changed files with 109 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
html/index3D-beginning.html Normal file
View File

@ -0,0 +1,26 @@
<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>

31
html/index3D.html → html/index3D-end.html
View File

@ -1,28 +1,3 @@
<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/three.js"></script>
<script src="/static/LoaderSupport.js"></script> <script src="/static/LoaderSupport.js"></script>
@ -42,9 +17,9 @@
<script src="/static/fonctions_analyse.js"></script> <script src="/static/fonctions_analyse.js"></script>
<script src="/static/fonctions_fin.js"></script> <script src="/static/fonctions_fin.js"></script>
<script src="/static/MAIN.js"></script> <script src="/static/MAIN.js"></script>
</body> </body>
</html> </html>

14
server.js
View File

@ -9,6 +9,9 @@ async function main() {
const app = express(); const app = express();
const HTML_BEGINNING = await fs.readFile(__dirname + '/html/index3D-beginning.html');
const HTML_END = await fs.readFile(__dirname + '/html/index3D-end.html');
//let id = 1; //let id = 1;
// Permet de récupérer les données venant du client. // Permet de récupérer les données venant du client.
@ -16,17 +19,16 @@ async function main() {
app.use(bodyParser.json()); app.use(bodyParser.json());
// Page d'accueil. // Page d'accueil.
app.get('/', function(req, res) { app.get('/', async function(req, res) {
// On envoie le contenu du fichier index.html. // On envoie le contenu du fichier index.html avec le uuid généré par le server.
return res.sendFile(__dirname + '/html/index3D.html'); let uuidScript = '<script>window.uuid = "' + uuid() + '";</script>';
return res.send(HTML_BEGINNING + uuidScript + HTML_END);
}); });
// Route de récupération des données. // Route de récupération des données.
app.post('/outputs', async function(req, res) { app.post('/outputs', async function(req, res) {
let id = uuid();
// Ouverture du fichier en mode append. // Ouverture du fichier en mode append.
let file = await fs.open(__dirname + '/outputs/' + id + '.json', 'a'); let file = await fs.open(__dirname + '/outputs/' + req.body.uuid + '.json', 'w');
// Ajout d'une ligne. // Ajout d'une ligne.
file.write(JSON.stringify(req.body, undefined, 4)); file.write(JSON.stringify(req.body, undefined, 4));

135
static/MAIN.js
View File

@ -19,7 +19,7 @@ function init_variable(premier_appel){
/////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
// CE QUE L'ON RECUPERE A LA FIN // CE QUE L'ON RECUPERE A LA FIN
// dictionnaire avec les choix pour TOUS les mesh // dictionnaire avec les choix pour TOUS les mesh
if (premier_appel){choix = {}} if (premier_appel){choix = { uuid: window.uuid }}
// dictionnaire avec les checkbox pour TOUS les mesh // dictionnaire avec les checkbox pour TOUS les mesh
checkbox_clicked = {} checkbox_clicked = {}
/////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
@ -35,22 +35,23 @@ function init_variable(premier_appel){
// Au premier appel on init : les interactions // Au premier appel on init : les interactions
if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": get_message("debut_etude", [])}]} if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": get_message("debut_etude", [])}]}
choix.interactions = interactions;
// Couleur // Couleur
alpha_survol = 0.3 alpha_survol = 0.3
// DATA github // DATA github
indice_mesh = 0 // indice du premier mesh à visionner indice_mesh = 0 // indice du premier mesh à visionner
mesh_courant = "nope" // nom des mesh mesh_courant = "nope" // nom des mesh
// random nom mesh // random nom mesh
//obj_file_random = shuffle(['backpack_regulier_tri_centered_user_study_normed.obj', 'dragon_update_user_study_normed.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj', 'horse_update_user_study_normed.obj']) //obj_file_random = shuffle(['backpack_regulier_tri_centered_user_study_normed.obj', 'dragon_update_user_study_normed.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj', 'horse_update_user_study_normed.obj'])
obj_file_random = shuffle(obj_names) obj_file_random = shuffle(obj_names)
// ---> nombre de mesh a visionner AU TOTAL // ---> nombre de mesh a visionner AU TOTAL
nb_mesh = 10//obj_file_random.length nb_mesh = 2//obj_file_random.length
// ---> nb analyse demandé // ---> nb analyse demandé
nb_analyse_demande = 5 nb_analyse_demande = 2
list_idx_tache =[] list_idx_tache =[]
for (let p=0; p<nb_mesh; p++){list_idx_tache.push(p+1)} for (let p=0; p<nb_mesh; p++){list_idx_tache.push(p+1)}
@ -71,9 +72,9 @@ function init_variable(premier_appel){
texte_temporaire = {} texte_temporaire = {}
// temps de pop des messages // temps de pop des messages
temps_pop = 2000 temps_pop = 2000
// text qui correspond à des erreurs de bouton // text qui correspond à des erreurs de bouton
longueur_max_error = 700 longueur_max_error = 700
// text // text
longueur_max_recap = 350 longueur_max_recap = 350
// Fenetre 3D // Fenetre 3D
@ -94,7 +95,7 @@ function init_variable(premier_appel){
page_warning = false page_warning = false
page_explication_bis = false page_explication_bis = false
page_vues = false // false page_vues = false // false
page_explication_analyse = false page_explication_analyse = false
page_analyse = false page_analyse = false
// cas raz : on recommence juste la partie vues // cas raz : on recommence juste la partie vues
} else { } else {
@ -105,7 +106,7 @@ function init_variable(premier_appel){
page_warning = false page_warning = false
page_explication_bis = false page_explication_bis = false
page_vues = true // false page_vues = true // false
page_explication_analyse = false page_explication_analyse = false
page_analyse = false page_analyse = false
} }
@ -116,14 +117,14 @@ function init_variable(premier_appel){
// pour initialiser les claviers à chaque page // pour initialiser les claviers à chaque page
premier_tour_page_avertissements = true premier_tour_page_avertissements = true
premier_tour_page_contexte = true premier_tour_page_contexte = true
premier_tour_page_inscription = true premier_tour_page_inscription = true
premier_tour_page_explications = true premier_tour_page_explications = true
premier_tour_page_warning = true premier_tour_page_warning = true
premier_tour_page_vues = true premier_tour_page_vues = true
premier_tour_page_explication_analyse = true premier_tour_page_explication_analyse = true
premier_tour_page_analyse = true premier_tour_page_analyse = true
// message de fin // message de fin
message_fin = "> Sending data in progress ..." message_fin = "> Sending data in progress ..."
envoie_termine = false envoie_termine = false
@ -138,29 +139,29 @@ function setUp_light(rayon){
const intensity = 0.22; const intensity = 0.22;
// Light // Light
const light1 = new THREE.AmbientLight( 0x404040 ); // soft white light const light1 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light1 ); scene.add( light1 );
const dir_light1 = new THREE.DirectionalLight(color, intensity); const dir_light1 = new THREE.DirectionalLight(color, intensity);
dir_light1.position.set(rayon, 0, 0); dir_light1.position.set(rayon, 0, 0);
scene.add(dir_light1); scene.add(dir_light1);
const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light2 ); scene.add( light2 );
const dir_light2 = new THREE.DirectionalLight(color, intensity); const dir_light2 = new THREE.DirectionalLight(color, intensity);
dir_light2.position.set(-rayon, 0, -0); dir_light2.position.set(-rayon, 0, -0);
scene.add(dir_light2); scene.add(dir_light2);
const light3 = new THREE.AmbientLight( 0x404040 ); // soft white light const light3 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light3 ); scene.add( light3 );
const dir_light3 = new THREE.DirectionalLight(color, intensity); const dir_light3 = new THREE.DirectionalLight(color, intensity);
dir_light3.position.set(0, -rayon, 0); dir_light3.position.set(0, -rayon, 0);
scene.add(dir_light3); scene.add(dir_light3);
const light4 = new THREE.AmbientLight( 0x404040 ); // soft white light const light4 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light4 ); scene.add( light4 );
const dir_light4 = new THREE.DirectionalLight(color, intensity); const dir_light4 = new THREE.DirectionalLight(color, intensity);
dir_light4.position.set(0, rayon, -0); dir_light4.position.set(0, rayon, -0);
scene.add(dir_light4); scene.add(dir_light4);
} }
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ??? // idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
@ -171,7 +172,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
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)) 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) delta_init = 2*Math.PI * (idx_i_init/8)
// initialisation // initialisation
idx_i = idx_i_init idx_i = idx_i_init
idx_j = idx_j_init idx_j = idx_j_init
@ -190,7 +191,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
preserveDrawingBuffer: true } ); preserveDrawingBuffer: true } );
renderer.setSize(W_3D , H_3D); renderer.setSize(W_3D , H_3D);
old_renderer = document.getElementById('renderer') old_renderer = document.getElementById('renderer')
if (old_renderer!= null){ if (old_renderer!= null){
old_renderer.parentElement.removeChild(old_renderer) old_renderer.parentElement.removeChild(old_renderer)
@ -214,10 +215,10 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
ctx = canvas.getContext("2d") ctx = canvas.getContext("2d")
// On crée autant de canvas que de choix demandé, // 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 // ces canvas seront vide tant qu'il n'y a pas de vue sélectionnée
// puis updates en fonction des actions faites // puis updates en fonction des actions faites
canvasMins = [] canvasMins = []
ctxMins = [] ctxMins = []
for (let i = 0; i < nb_choix_demande; i++) { for (let i = 0; i < nb_choix_demande; i++) {
@ -237,15 +238,15 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
// Si on load le mesh 3d dans les explication, on importe que ce soit le dragon // Si on load le mesh 3d dans les explication, on importe que ce soit le dragon
if (explication){ if (explication){
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => { //objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => { objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => {
const root = event.detail.loaderRootNode; const root = event.detail.loaderRootNode;
scene.add(root); scene.add(root);
}); });
// sinon on est dans l'étide dans on fait du random entre tous les mesh dispo sur le git // sinon on est dans l'étide dans on fait du random entre tous les mesh dispo sur le git
} else { } else {
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file_random[idx_mesh], (event) => { //objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file_random[idx_mesh], (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => { objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => {
const root = event.detail.loaderRootNode; const root = event.detail.loaderRootNode;
scene.add(root); scene.add(root);
}); });
@ -275,7 +276,7 @@ function init_data(){
// Data 2D // Data 2D
imgs = {} imgs = {}
imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_droite.png') imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_droite.png')
imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png') imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png')
imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_bas.png') imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_bas.png')
imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_haut.png') imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_haut.png')
imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png') imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png')
@ -322,6 +323,26 @@ function init_data(){
} }
function enregistrement(callback) {
// 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', '/outputs');
// 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() {
//interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])})
// 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) {
if (typeof callback === 'function') {
callback(xhr);
}
}
}
// Envoi de la requête vers le serveur, avec les données.
xhr.send(JSON.stringify(choix));
}
function animate() { function animate() {
// Temps à chaque animate // Temps à chaque animate
@ -352,7 +373,7 @@ function animate() {
premier_tour_page_contexte = false premier_tour_page_contexte = false
} }
init_clavier_contexte() init_clavier_contexte()
traitement_contexte() traitement_contexte()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page inscription // page inscription
@ -365,7 +386,7 @@ function animate() {
init_clavier_inscription() init_clavier_inscription()
afficher_champs_inscription() afficher_champs_inscription()
premier_tour_page_inscription=false} premier_tour_page_inscription=false}
traitement_inscription() traitement_inscription()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
if (page_explication){ if (page_explication){
@ -385,7 +406,7 @@ function animate() {
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication, explication=true) setUp_3D(indice_mesh, idx_i_explication, idx_j_explication, explication=true)
premier_tour_page_explications = false premier_tour_page_explications = false
} }
// Nettoyage // Nettoyage
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
// Affichage bouton RAZ // Affichage bouton RAZ
if (bouton_raz_clicked == true){action_bouton_raz()} if (bouton_raz_clicked == true){action_bouton_raz()}
@ -414,7 +435,7 @@ function animate() {
// RAZ // RAZ
clicked = false clicked = false
which_clicked_fleche = -1 which_clicked_fleche = -1
which_clicked_bouton = -1 which_clicked_bouton = -1
} }
// page warning // page warning
if(page_warning){ if(page_warning){
@ -428,7 +449,7 @@ function animate() {
if (page_explication_bis){ if (page_explication_bis){
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
//console.log("boucle explication2") //console.log("boucle explication2")
commencer_etude() commencer_etude()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page de choix // page de choix
@ -471,7 +492,7 @@ function animate() {
// traitement fleche (surval + click) // traitement fleche (surval + click)
traitement_fleche() traitement_fleche()
// traitement bouton : (survol + click) // traitement bouton : (survol + click)
traitement_bouton() traitement_bouton()
// afficher + maj du recap de pose choisie : affichage des vue des poses // afficher + maj du recap de pose choisie : affichage des vue des poses
afficher_recap() afficher_recap()
// Affichage texte recap // Affichage texte recap
@ -493,6 +514,7 @@ function animate() {
document.removeEventListener("keydown", action_clavier_vues) document.removeEventListener("keydown", action_clavier_vues)
// inti clavier // inti clavier
if(premier_tour_page_explication_analyse){ if(premier_tour_page_explication_analyse){
enregistrement();
//interactions.push({"time": new Date().getTime(), "type": "Début explication analyse"}) //interactions.push({"time": new Date().getTime(), "type": "Début explication analyse"})
init_clavier_explication_analyse() init_clavier_explication_analyse()
init_textes_explication_analyses() init_textes_explication_analyses()
@ -519,14 +541,14 @@ function animate() {
} }
premier_tour_page_analyse = false} premier_tour_page_analyse = false}
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
traitement_analyse() traitement_analyse()
try { try {
if (!input2.matches(":focus")) { if (!input2.matches(":focus")) {
input2.focus() input2.focus()
} }
} catch (e) {} } catch (e) {}
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page fin // page fin
@ -534,39 +556,26 @@ function animate() {
//console.log("boucle fin") //console.log("boucle fin")
// on enlève les touches du clavier associé à la page vues // on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse) document.removeEventListener("keydown", action_clavier_analyse)
// clear la fenetre // clear la fenetre
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight) ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
// Texte // Texte
affichage_texte_fin(message_fin) affichage_texte_fin(message_fin)
// ECRITURE DES RESULTATS // ECRITURE DES RESULTATS
choix['Analyse'] = checkbox_clicked choix['Analyse'] = checkbox_clicked
choix['Interactions'] = interactions
// Création de la requête HTTP à envoyer au serveur. enregistrement(function(xhr) {
let xhr = new XMLHttpRequest(); console.log(xhr.responseText);
// Préparation de la requête pour l'envoi en POST vers l'url. message_fin = "> It's done. Your submission has been recorded."
xhr.open('POST', '/outputs'); envoie_termine = true
// Si on envoie les données de manière classique, il faut configurer le header de cette façon. update_texte_fin(message_fin)
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])})
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée. return;
xhr.onreadystatechange = function() { });
//interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])})
// 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);
message_fin = "> It's done. Your submission has been recorded."
envoie_termine = true
update_texte_fin(message_fin)
interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])})
return;
}
}
// Envoi de la requête vers le serveur, avec les données.
xhr.send(JSON.stringify(choix));
return return
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// Boucle sur animate // Boucle sur animate