From 3ed43a8420f94b0af77266063377a52312501c94 Mon Sep 17 00:00:00 2001 From: mpelissi Date: Sat, 11 Mar 2023 22:35:29 +0100 Subject: [PATCH] MAJ : bouton rza + clignotement explication --- .../f4889026-42dc-4b08-8028-ce7c14ab757a.json | 411 ++++++++++++++++++ static/MAIN.js | 32 +- static/fonctions_choix_vues.js | 13 +- static/fonctions_explications.js | 19 +- 4 files changed, 449 insertions(+), 26 deletions(-) create mode 100644 outputs/f4889026-42dc-4b08-8028-ce7c14ab757a.json diff --git a/outputs/f4889026-42dc-4b08-8028-ce7c14ab757a.json b/outputs/f4889026-42dc-4b08-8028-ce7c14ab757a.json new file mode 100644 index 0000000..637aa64 --- /dev/null +++ b/outputs/f4889026-42dc-4b08-8028-ce7c14ab757a.json @@ -0,0 +1,411 @@ +{ + "identite": { + "Firstname": "ùù", + "Name": "ùù", + "Age": "1", + "Sexe": "M" + }, + "tache_N1": { + "obj_file": "gorgoile_update_user_study_centered_normed.obj", + "mesh": "gorgoile", + "position_init_idx_i": 7, + "position_init_idx_j": 1, + "theta_init": 0.7853981633974483, + "delta_init": 5.497787143782138, + "choix_poses": [ + [ + "choix1", + 1.5707963267948966, + 3.9269908169872414, + 5, + 0 + ], + [ + "choix2", + 1.5707963267948966, + 3.141592653589793, + 4, + 0 + ], + [ + "choix3", + 1.5707963267948966, + 2.356194490192345, + 3, + 0 + ] + ] + }, + "tache_N2": { + "obj_file": "camel_update_user_study_normed.obj", + "mesh": "camel", + "position_init_idx_i": 1, + "position_init_idx_j": 1, + "theta_init": 0.7853981633974483, + "delta_init": 0.7853981633974483, + "choix_poses": [ + [ + "choix1", + 0.7853981633974483, + 0.7853981633974483, + 1, + 1 + ], + [ + "choix2", + 0.7853981633974483, + 0, + 0, + 1 + ], + [ + "choix3", + 0.7853981633974483, + 5.497787143782138, + 7, + 1 + ] + ] + }, + "tache_N3": { + "obj_file": "dragon_update_user_study_normed.obj", + "mesh": "dragon", + "position_init_idx_i": 4, + "position_init_idx_j": 3, + "theta_init": -0.7853981633974483, + "delta_init": 3.141592653589793, + "choix_poses": [ + [ + "choix1", + -0.7853981633974483, + 3.141592653589793, + 4, + 3 + ], + [ + "choix2", + -0.7853981633974483, + 2.356194490192345, + 3, + 3 + ], + [ + "choix3", + -0.7853981633974483, + 1.5707963267948966, + 2, + 3 + ] + ] + }, + "tache_N4": { + "obj_file": "horse_update_user_study_normed.obj", + "mesh": "horse", + "position_init_idx_i": 2, + "position_init_idx_j": 3, + "theta_init": -0.7853981633974483, + "delta_init": 1.5707963267948966, + "choix_poses": [ + [ + "choix1", + -0.7853981633974483, + 1.5707963267948966, + 2, + 3 + ], + [ + "choix2", + -0.7853981633974483, + 0.7853981633974483, + 1, + 3 + ], + [ + "choix3", + -0.7853981633974483, + 0, + 0, + 3 + ] + ] + }, + "Analyse": { + "analyse_N1": { + "mesh": "camel", + "idx": [ + 3 + ], + "mots": [ + "4. Eyes contact" + ] + }, + "analyse_N2": { + "mesh": "gorgoile", + "idx": [ + 2 + ], + "mots": [ + "3. Debout" + ] + }, + "analyse_N3": { + "mesh": "dragon", + "idx": [ + 3 + ], + "mots": [ + "4. Eyes contact" + ] + } + }, + "Interactions": [ + { + "time": 1678570397746, + "type": "start" + }, + { + "time": 1678570401342, + "type": "Fin contexte - Début inscription" + }, + { + "time": 1678570405745, + "type": "Fin inscription" + }, + { + "time": 1678570406339, + "type": "Début explications" + }, + { + "time": 1678570406394, + "type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (4, 1)" + }, + { + "time": 1678570406394, + "type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 3.141592653589793)" + }, + { + "time": 1678570409443, + "type": "fleche droite" + }, + { + "time": 1678570410040, + "type": "fleche haut" + }, + { + "time": 1678570410192, + "type": "fleche haut" + }, + { + "time": 1678570410192, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678570410758, + "type": "fleche bas" + }, + { + "time": 1678570410892, + "type": "fleche bas" + }, + { + "time": 1678570411509, + "type": "fleche droite" + }, + { + "time": 1678570415960, + "type": "bouton pose n°1" + }, + { + "time": 1678570423377, + "type": "Fin explication" + }, + { + "time": 1678570423972, + "type": "Début étude" + }, + { + "time": 1678570423998, + "type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (7, 1)" + }, + { + "time": 1678570423998, + "type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 5.497787143782138)" + }, + { + "time": 1678570425322, + "type": "fleche droite" + }, + { + "time": 1678570425473, + "type": "fleche droite" + }, + { + "time": 1678570425907, + "type": "fleche haut" + }, + { + "time": 1678570426540, + "type": "bouton pose n°1" + }, + { + "time": 1678570426973, + "type": "fleche droite" + }, + { + "time": 1678570427306, + "type": "bouton pose n°2" + }, + { + "time": 1678570428405, + "type": "fleche droite" + }, + { + "time": 1678570428690, + "type": "bouton pose n°3" + }, + { + "time": 1678570429189, + "type": "bouton valider" + }, + { + "time": 1678570429210, + "type": "Affichage Mesh random : camel en idx_i, idx_j : (1, 1)" + }, + { + "time": 1678570429210, + "type": "Affichage Mesh random : camel en theta, delta : (0.7853981633974483, 0.7853981633974483)" + }, + { + "time": 1678570429707, + "type": "bouton pose n°1" + }, + { + "time": 1678570430123, + "type": "fleche droite" + }, + { + "time": 1678570430423, + "type": "bouton pose n°2" + }, + { + "time": 1678570430823, + "type": "fleche droite" + }, + { + "time": 1678570431140, + "type": "bouton pose n°3" + }, + { + "time": 1678570431641, + "type": "bouton valider" + }, + { + "time": 1678570431696, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 3)" + }, + { + "time": 1678570431696, + "type": "Affichage Mesh random : dragon en theta, delta : (-0.7853981633974483, 3.141592653589793)" + }, + { + "time": 1678570432222, + "type": "bouton pose n°1" + }, + { + "time": 1678570432606, + "type": "fleche droite" + }, + { + "time": 1678570432922, + "type": "bouton pose n°2" + }, + { + "time": 1678570433489, + "type": "fleche droite" + }, + { + "time": 1678570433807, + "type": "bouton pose n°3" + }, + { + "time": 1678570434372, + "type": "bouton valider" + }, + { + "time": 1678570434396, + "type": "Affichage Mesh random : horse en idx_i, idx_j : (2, 3)" + }, + { + "time": 1678570434396, + "type": "Affichage Mesh random : horse en theta, delta : (-0.7853981633974483, 1.5707963267948966)" + }, + { + "time": 1678570435239, + "type": "bouton pose n°1" + }, + { + "time": 1678570435723, + "type": "fleche droite" + }, + { + "time": 1678570436006, + "type": "bouton pose n°2" + }, + { + "time": 1678570436472, + "type": "fleche droite" + }, + { + "time": 1678570436873, + "type": "bouton pose n°3" + }, + { + "time": 1678570437489, + "type": "bouton valider" + }, + { + "time": 1678570437489, + "type": "fin des choix." + }, + { + "time": 1678570437489, + "type": "Début analyse n°1" + }, + { + "time": 1678570438307, + "type": "ajout check sur : analyse n°1, mot 4. Eyes contact" + }, + { + "time": 1678570438741, + "type": "Bouton valider analyse." + }, + { + "time": 1678570438741, + "type": "Début analyse n°2" + }, + { + "time": 1678570439373, + "type": "ajout check sur : analyse n°2, mot 3. Debout" + }, + { + "time": 1678570439875, + "type": "Bouton valider analyse." + }, + { + "time": 1678570439875, + "type": "Début analyse n°3" + }, + { + "time": 1678570440807, + "type": "ajout check sur : analyse n°3, mot 4. Eyes contact" + }, + { + "time": 1678570441275, + "type": "Bouton valider analyse." + }, + { + "time": 1678570441289, + "type": "Fin analyse" + } + ] +} \ No newline at end of file diff --git a/static/MAIN.js b/static/MAIN.js index 7e394e9..871f0d0 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -19,7 +19,7 @@ function init_variable(premier_appel){ /////////////////////////////////////////////////////// // CE QUE L'ON RECUPERE A LA FIN // dictionnaire avec les choix pour TOUS les mesh - choix = {} + if (premier_appel){choix = {}} // dictionnaire avec les checkbox pour TOUS les mesh checkbox_clicked = {} /////////////////////////////////////////////////////// @@ -82,12 +82,22 @@ function init_variable(premier_appel){ R = 2.5 // Enchainement des pages - page_contexte = true - page_inscription = false // true - page_explication = false - page_explication_bis = false - page_vues = false // false - page_analyse = false + if (premier_appel){ + page_contexte = true + page_inscription = false // true + page_explication = false + page_explication_bis = false + page_vues = false // false + page_analyse = false + // cas raz : on recommence juste la partie vues + } else { + page_contexte = false + page_inscription = false // true + page_explication = false + page_explication_bis = false + page_vues = true // false + page_analyse = false + } // Pour afiicher les recap dans la partie analys,e on les conserve tous all_ctxMins = {} @@ -327,7 +337,7 @@ function animate() { } //////////////////////////////////////////////////////////////////////////////// if (page_explication){ - //console.log("boucle explication") + console.log("boucle explication") // on enlève les touches du clavier associé à la page inscription document.removeEventListener("keydown", action_clavier_inscription) // Variable pour les fonctions @@ -372,13 +382,15 @@ function animate() { } // bouton entr ele tutorial et l'étude if (page_explication_bis){ - commencer_etude() ctx.clearRect(0, 0, canvas.width, canvas.height) + console.log("boucle explication2") + commencer_etude() + } //////////////////////////////////////////////////////////////////////////////// // page de choix if (page_vues && num_tache <= nb_mesh){ - //console.log("boucle choix") + console.log("boucle choix") // on enlève les touches du clavier associé à la page inscription document.removeEventListener("keydown", action_clavier_explication) //init touche clavier diff --git a/static/fonctions_choix_vues.js b/static/fonctions_choix_vues.js index b1f1d50..8a662ad 100644 --- a/static/fonctions_choix_vues.js +++ b/static/fonctions_choix_vues.js @@ -440,24 +440,13 @@ function action_bouton_raz(){ // 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) + // si on veut raz 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); idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5) setUp_3D(indice_mesh, idx_i_init, idx_j_init) 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"})} diff --git a/static/fonctions_explications.js b/static/fonctions_explications.js index 15330cf..a387fe8 100644 --- a/static/fonctions_explications.js +++ b/static/fonctions_explications.js @@ -214,11 +214,22 @@ function init_explication(){ // 6.1 {"type":"a_cliquer", "x": positions_bouton[15].x, "y":positions_bouton[15].y, "w":positions_bouton[15].w, "h":positions_bouton[15].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, // 6.2 - [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + // [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + // {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} + // ], + [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} ], //6.3 - [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + // [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + // {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} + // ], + [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} ], //6.4 remove @@ -371,7 +382,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){ clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, epaisseur_clignotement) } if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){ - clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.8) + clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(0, 255, 255)", 0.8) } // on a plusieurs clignotement } else { @@ -383,7 +394,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){ } // rectangle if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){ - clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(17, 138, 178)", 0.8) + clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(0, 255, 255)", 0.8) } } }