diff --git a/outputs/2cc9c9dd-1ad1-4644-8f4e-504c2eca049d.json b/outputs/2cc9c9dd-1ad1-4644-8f4e-504c2eca049d.json new file mode 100644 index 0000000..98b8c6f --- /dev/null +++ b/outputs/2cc9c9dd-1ad1-4644-8f4e-504c2eca049d.json @@ -0,0 +1,223 @@ +{ + "identite": { + "Firstname": "marie", + "Name": "pelissier", + "Age": "1", + "Sexe": "M" + }, + "tache_N1": { + "obj_file": "dragon_update_user_study.obj", + "mesh": "dragon", + "position_init_idx_i": 6, + "position_init_idx_j": 4, + "theta_init": -1.5707963267948966, + "delta_init": 4.71238898038469, + "choix_poses": [ + [ + "choix1", + -1.5707963267948966, + 4.71238898038469, + 6, + 4 + ], + [ + "choix2", + -1.5707963267948966, + 3.9269908169872414, + 5, + 4 + ], + [ + "choix3", + -1.5707963267948966, + 3.141592653589793, + 4, + 4 + ] + ] + }, + "tache_N2": { + "obj_file": "camel_update_user_study_normed.obj", + "mesh": "camel", + "position_init_idx_i": 1, + "position_init_idx_j": 0, + "theta_init": 1.5707963267948966, + "delta_init": 0.7853981633974483, + "choix_poses": [ + [ + "choix1", + 1.5707963267948966, + 0.7853981633974483, + 1, + 0 + ], + [ + "choix2", + 1.5707963267948966, + 0, + 0, + 0 + ], + [ + "choix3", + 1.5707963267948966, + 5.497787143782138, + 7, + 0 + ] + ] + }, + "Analyse": { + "analyse_N1": { + "mesh": "dragon", + "idx": [ + 0 + ], + "mots": [ + "1. De face" + ] + } + }, + "Interactions": [ + { + "time": 1678206553994, + "type": "start" + }, + { + "time": 1678206554671, + "type": "Fin contexte - Début inscription" + }, + { + "time": 1678206559858, + "type": "Fin inscription - Début explications" + }, + { + "time": 1678206559901, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (2, 1)" + }, + { + "time": 1678206559901, + "type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 1.5707963267948966)" + }, + { + "time": 1678206564108, + "type": "fleche droite" + }, + { + "time": 1678206564459, + "type": "fleche haut" + }, + { + "time": 1678206564938, + "type": "fleche haut" + }, + { + "time": 1678206564938, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678206565323, + "type": "fleche bas" + }, + { + "time": 1678206565901, + "type": "fleche bas" + }, + { + "time": 1678206566250, + "type": "fleche droite" + }, + { + "time": 1678206567164, + "type": "bouton pose n°1" + }, + { + "time": 1678206568363, + "type": "Fin explication. Début des choix." + }, + { + "time": 1678206568389, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (6, 4)" + }, + { + "time": 1678206568389, + "type": "Affichage Mesh random : dragon en theta, delta : (-1.5707963267948966, 4.71238898038469)" + }, + { + "time": 1678206569419, + "type": "bouton pose n°1" + }, + { + "time": 1678206569563, + "type": "fleche droite" + }, + { + "time": 1678206569691, + "type": "bouton pose n°2" + }, + { + "time": 1678206569820, + "type": "fleche droite" + }, + { + "time": 1678206569930, + "type": "bouton pose n°3" + }, + { + "time": 1678206570523, + "type": "bouton valider" + }, + { + "time": 1678206570545, + "type": "Affichage Mesh random : camel en idx_i, idx_j : (1, 0)" + }, + { + "time": 1678206570545, + "type": "Affichage Mesh random : camel en theta, delta : (1.5707963267948966, 0.7853981633974483)" + }, + { + "time": 1678206571067, + "type": "bouton pose n°1" + }, + { + "time": 1678206571211, + "type": "fleche droite" + }, + { + "time": 1678206571322, + "type": "bouton pose n°2" + }, + { + "time": 1678206571436, + "type": "fleche droite" + }, + { + "time": 1678206571563, + "type": "bouton pose n°3" + }, + { + "time": 1678206572011, + "type": "bouton valider" + }, + { + "time": 1678206572011, + "type": "fin des choix." + }, + { + "time": 1678206572018, + "type": "Début analyse n°1" + }, + { + "time": 1678206572938, + "type": "ajout check sur : analyse n°1, mot 1. De face" + }, + { + "time": 1678206573290, + "type": "Bouton valider analyse." + }, + { + "time": 1678206573303, + "type": "Fin analyse" + } + ] +} \ No newline at end of file diff --git a/outputs/54da6232-363b-4cb6-ab67-d8ae8cf50b95.json b/outputs/54da6232-363b-4cb6-ab67-d8ae8cf50b95.json new file mode 100644 index 0000000..1140522 --- /dev/null +++ b/outputs/54da6232-363b-4cb6-ab67-d8ae8cf50b95.json @@ -0,0 +1,585 @@ +{ + "identite": { + "Firstname": "jean-michel", + "Name": "Connard", + "Age": "-25", + "Sexe": "M" + }, + "tache_N1": { + "obj_file": "dragon_update_user_study.obj", + "mesh": "dragon", + "position_init_idx_i": 2, + "position_init_idx_j": 3, + "theta_init": -0.7853981633974483, + "delta_init": 1.5707963267948966, + "choix_poses": [ + [ + "choix1", + 0.7853981633974483, + 5.497787143782138, + 7, + 1 + ], + [ + "choix3", + 0.7853981633974483, + 0.7853981633974483, + 1, + 1 + ], + [ + "choix3", + 0, + 5.497787143782138, + 7, + 2 + ] + ] + }, + "tache_N2": { + "obj_file": "camel_update_user_study_normed.obj", + "mesh": "camel", + "position_init_idx_i": 2, + "position_init_idx_j": 2, + "theta_init": 0, + "delta_init": 1.5707963267948966, + "choix_poses": [ + [ + "choix1", + 0.7853981633974483, + 5.497787143782138, + 7, + 1 + ], + [ + "choix2", + 0, + 0.7853981633974483, + 1, + 2 + ], + [ + "choix3", + 0.7853981633974483, + 0, + 0, + 1 + ] + ] + }, + "Analyse": { + "analyse_N1": { + "mesh": "dragon", + "idx": [ + 2, + 0 + ], + "mots": [ + "3. Debout", + "1. De face" + ] + } + }, + "Interactions": [ + { + "time": 1678206574894, + "type": "start" + }, + { + "time": 1678206631316, + "type": "Fin contexte - Début inscription" + }, + { + "time": 1678206686893, + "type": "Fin inscription - Début explications" + }, + { + "time": 1678206686943, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (2, 1)" + }, + { + "time": 1678206686943, + "type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 1.5707963267948966)" + }, + { + "time": 1678206794363, + "type": "fleche droite" + }, + { + "time": 1678206795581, + "type": "fleche haut" + }, + { + "time": 1678206798416, + "type": "fleche haut" + }, + { + "time": 1678206798416, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678206814930, + "type": "fleche bas" + }, + { + "time": 1678206818516, + "type": "fleche bas" + }, + { + "time": 1678206822552, + "type": "fleche droite" + }, + { + "time": 1678206845774, + "type": "bouton pose n°1" + }, + { + "time": 1678206869159, + "type": "Fin explication. Début des choix." + }, + { + "time": 1678206869212, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (2, 3)" + }, + { + "time": 1678206869212, + "type": "Affichage Mesh random : dragon en theta, delta : (-0.7853981633974483, 1.5707963267948966)" + }, + { + "time": 1678206887103, + "type": "fleche droite" + }, + { + "time": 1678206887287, + "type": "fleche droite" + }, + { + "time": 1678206887437, + "type": "fleche droite" + }, + { + "time": 1678206888321, + "type": "fleche haut" + }, + { + "time": 1678206888505, + "type": "fleche haut" + }, + { + "time": 1678206888688, + "type": "fleche haut" + }, + { + "time": 1678206889538, + "type": "fleche bas" + }, + { + "time": 1678206889957, + "type": "bouton renitialiser" + }, + { + "time": 1678206889957, + "type": "Affichage error aucun choix fait donc pas de reinitialisation possible" + }, + { + "time": 1678206893091, + "type": "bouton renitialiser" + }, + { + "time": 1678206893092, + "type": "Affichage error aucun choix fait donc pas de reinitialisation possible" + }, + { + "time": 1678206897179, + "type": "fleche haut" + }, + { + "time": 1678206898396, + "type": "fleche bas" + }, + { + "time": 1678206898597, + "type": "fleche bas" + }, + { + "time": 1678206898779, + "type": "fleche bas" + }, + { + "time": 1678206899529, + "type": "fleche haut" + }, + { + "time": 1678206899714, + "type": "fleche haut" + }, + { + "time": 1678206900565, + "type": "fleche droite" + }, + { + "time": 1678206900748, + "type": "fleche droite" + }, + { + "time": 1678206901315, + "type": "fleche droite" + }, + { + "time": 1678206901465, + "type": "fleche droite" + }, + { + "time": 1678206901649, + "type": "fleche droite" + }, + { + "time": 1678206902299, + "type": "fleche droite" + }, + { + "time": 1678206902784, + "type": "fleche droite" + }, + { + "time": 1678206903167, + "type": "fleche droite" + }, + { + "time": 1678206904066, + "type": "fleche haut" + }, + { + "time": 1678206904635, + "type": "fleche haut" + }, + { + "time": 1678206904635, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678206904818, + "type": "fleche haut" + }, + { + "time": 1678206904818, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678206905720, + "type": "fleche bas" + }, + { + "time": 1678206905853, + "type": "fleche bas" + }, + { + "time": 1678206907169, + "type": "fleche haut" + }, + { + "time": 1678206909055, + "type": "bouton pose n°1" + }, + { + "time": 1678206910523, + "type": "fleche droite" + }, + { + "time": 1678206911057, + "type": "fleche droite" + }, + { + "time": 1678206911223, + "type": "fleche droite" + }, + { + "time": 1678206912007, + "type": "fleche bas" + }, + { + "time": 1678206912157, + "type": "fleche bas" + }, + { + "time": 1678206912875, + "type": "fleche gauche" + }, + { + "time": 1678206921931, + "type": "bouton pose n°2" + }, + { + "time": 1678206923266, + "type": "fleche droite" + }, + { + "time": 1678206923433, + "type": "fleche droite" + }, + { + "time": 1678206923816, + "type": "fleche droite" + }, + { + "time": 1678206924134, + "type": "fleche droite" + }, + { + "time": 1678206924750, + "type": "fleche haut" + }, + { + "time": 1678206924901, + "type": "fleche haut" + }, + { + "time": 1678206926603, + "type": "bouton pose n°3" + }, + { + "time": 1678206930939, + "type": "fleche droite" + }, + { + "time": 1678206931139, + "type": "fleche droite" + }, + { + "time": 1678206931322, + "type": "fleche droite" + }, + { + "time": 1678206932023, + "type": "fleche droite" + }, + { + "time": 1678206932906, + "type": "fleche haut" + }, + { + "time": 1678206933210, + "type": "fleche droite" + }, + { + "time": 1678206933610, + "type": "fleche droite" + }, + { + "time": 1678206933930, + "type": "fleche bas" + }, + { + "time": 1678206934235, + "type": "fleche bas" + }, + { + "time": 1678206934698, + "type": "fleche droite" + }, + { + "time": 1678206935050, + "type": "fleche droite" + }, + { + "time": 1678206935403, + "type": "fleche droite" + }, + { + "time": 1678206935787, + "type": "fleche droite" + }, + { + "time": 1678206936171, + "type": "fleche droite" + }, + { + "time": 1678206936859, + "type": "fleche bas" + }, + { + "time": 1678206937370, + "type": "fleche haut" + }, + { + "time": 1678206937643, + "type": "fleche haut" + }, + { + "time": 1678206938043, + "type": "fleche gauche" + }, + { + "time": 1678206938826, + "type": "fleche droite" + }, + { + "time": 1678206939146, + "type": "fleche bas" + }, + { + "time": 1678206939419, + "type": "fleche bas" + }, + { + "time": 1678206939834, + "type": "fleche gauche" + }, + { + "time": 1678206940187, + "type": "fleche gauche" + }, + { + "time": 1678206940586, + "type": "fleche haut" + }, + { + "time": 1678206940890, + "type": "fleche haut" + }, + { + "time": 1678206941371, + "type": "fleche bas" + }, + { + "time": 1678206942029, + "type": "fleche droite" + }, + { + "time": 1678206943382, + "type": "bouton pose n°4" + }, + { + "time": 1678206943382, + "type": "Affichage error 3 déjà fait" + }, + { + "time": 1678206946935, + "type": "suppression de la pose n°2" + }, + { + "time": 1678206947969, + "type": "bouton pose n°3" + }, + { + "time": 1678206949238, + "type": "bouton valider" + }, + { + "time": 1678206949274, + "type": "Affichage Mesh random : camel en idx_i, idx_j : (2, 2)" + }, + { + "time": 1678206949274, + "type": "Affichage Mesh random : camel en theta, delta : (0, 1.5707963267948966)" + }, + { + "time": 1678206950891, + "type": "fleche droite" + }, + { + "time": 1678206951259, + "type": "fleche droite" + }, + { + "time": 1678206951770, + "type": "fleche droite" + }, + { + "time": 1678206952107, + "type": "fleche haut" + }, + { + "time": 1678206953573, + "type": "bouton pose n°1" + }, + { + "time": 1678206954170, + "type": "fleche gauche" + }, + { + "time": 1678206954507, + "type": "fleche gauche" + }, + { + "time": 1678206954970, + "type": "fleche bas" + }, + { + "time": 1678206955858, + "type": "bouton pose n°2" + }, + { + "time": 1678206956698, + "type": "fleche droite" + }, + { + "time": 1678206957482, + "type": "fleche haut" + }, + { + "time": 1678206958458, + "type": "fleche droite" + }, + { + "time": 1678206958971, + "type": "fleche gauche" + }, + { + "time": 1678206959322, + "type": "fleche gauche" + }, + { + "time": 1678206959979, + "type": "fleche bas" + }, + { + "time": 1678206960490, + "type": "fleche droite" + }, + { + "time": 1678206960874, + "type": "fleche haut" + }, + { + "time": 1678206961770, + "type": "fleche droite" + }, + { + "time": 1678206962266, + "type": "fleche gauche" + }, + { + "time": 1678206964811, + "type": "bouton pose n°3" + }, + { + "time": 1678206980860, + "type": "bouton valider" + }, + { + "time": 1678206980860, + "type": "fin des choix." + }, + { + "time": 1678206980862, + "type": "Début analyse n°1" + }, + { + "time": 1678207127579, + "type": "ajout check sur : analyse n°1, mot 3. Debout" + }, + { + "time": 1678207129013, + "type": "ajout check sur : analyse n°1, mot 1. De face" + }, + { + "time": 1678207130148, + "type": "Bouton valider analyse." + }, + { + "time": 1678207130164, + "type": "Fin analyse" + } + ] +} \ No newline at end of file diff --git a/outputs/65443bf2-dc04-47e1-a0e7-4062cdc275a5.json b/outputs/65443bf2-dc04-47e1-a0e7-4062cdc275a5.json new file mode 100644 index 0000000..80a6fe5 --- /dev/null +++ b/outputs/65443bf2-dc04-47e1-a0e7-4062cdc275a5.json @@ -0,0 +1,233 @@ +{ + "tache_N1": { + "obj_file": "dragon_update_user_study.obj", + "mesh": "dragon", + "position_init_idx_i": 1, + "position_init_idx_j": 2, + "theta_init": 0, + "delta_init": 0.7853981633974483, + "choix_poses": [ + [ + "choix2", + 0, + 0, + 0, + 2 + ], + [ + "choix2", + 0, + 5.497787143782138, + 7, + 2 + ], + [ + "choix3", + 0, + 4.71238898038469, + 6, + 2 + ] + ] + }, + "tache_N2": { + "obj_file": "camel_update_user_study_normed.obj", + "mesh": "camel", + "position_init_idx_i": 0, + "position_init_idx_j": 3, + "theta_init": -0.7853981633974483, + "delta_init": 0, + "choix_poses": [ + [ + "choix1", + -0.7853981633974483, + 0, + 0, + 3 + ], + [ + "choix2", + -0.7853981633974483, + 5.497787143782138, + 7, + 3 + ], + [ + "choix3", + -0.7853981633974483, + 4.71238898038469, + 6, + 3 + ] + ] + }, + "Analyse": { + "analyse_N1": { + "mesh": "dragon", + "idx": [ + 4 + ], + "mots": [ + "5. toto" + ] + } + }, + "Interactions": [ + { + "time": 1678206480529, + "type": "start" + }, + { + "time": 1678206480554, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (2, 1)" + }, + { + "time": 1678206480554, + "type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 1.5707963267948966)" + }, + { + "time": 1678206485818, + "type": "fleche droite" + }, + { + "time": 1678206486186, + "type": "fleche haut" + }, + { + "time": 1678206486352, + "type": "fleche haut" + }, + { + "time": 1678206486352, + "type": "Affichage error à cause de fleche haut" + }, + { + "time": 1678206486819, + "type": "fleche bas" + }, + { + "time": 1678206486968, + "type": "fleche bas" + }, + { + "time": 1678206487369, + "type": "fleche droite" + }, + { + "time": 1678206488172, + "type": "bouton pose n°1" + }, + { + "time": 1678206489906, + "type": "Fin explication. Début des choix." + }, + { + "time": 1678206489947, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (1, 2)" + }, + { + "time": 1678206489947, + "type": "Affichage Mesh random : dragon en theta, delta : (0, 0.7853981633974483)" + }, + { + "time": 1678206491180, + "type": "bouton pose n°1" + }, + { + "time": 1678206491243, + "type": "fleche droite" + }, + { + "time": 1678206491403, + "type": "bouton pose n°2" + }, + { + "time": 1678206491468, + "type": "fleche droite" + }, + { + "time": 1678206491579, + "type": "bouton pose n°3" + }, + { + "time": 1678206493723, + "type": "fleche switch haut de la pose n°2" + }, + { + "time": 1678206495541, + "type": "suppression de la pose n°3" + }, + { + "time": 1678206496242, + "type": "bouton retirer" + }, + { + "time": 1678206497443, + "type": "bouton pose n°2" + }, + { + "time": 1678206497976, + "type": "fleche droite" + }, + { + "time": 1678206498594, + "type": "bouton pose n°3" + }, + { + "time": 1678206499411, + "type": "bouton valider" + }, + { + "time": 1678206499435, + "type": "Affichage Mesh random : camel en idx_i, idx_j : (0, 3)" + }, + { + "time": 1678206499435, + "type": "Affichage Mesh random : camel en theta, delta : (-0.7853981633974483, 0)" + }, + { + "time": 1678206500711, + "type": "bouton pose n°1" + }, + { + "time": 1678206501245, + "type": "fleche droite" + }, + { + "time": 1678206501579, + "type": "bouton pose n°2" + }, + { + "time": 1678206502381, + "type": "fleche droite" + }, + { + "time": 1678206502745, + "type": "bouton pose n°3" + }, + { + "time": 1678206503464, + "type": "bouton valider" + }, + { + "time": 1678206503464, + "type": "fin des choix." + }, + { + "time": 1678206503465, + "type": "Début analyse n°1" + }, + { + "time": 1678206504448, + "type": "ajout check sur : analyse n°1, mot 5. toto" + }, + { + "time": 1678206505118, + "type": "Bouton valider analyse." + }, + { + "time": 1678206505131, + "type": "Fin analyse" + } + ] +} \ No newline at end of file diff --git a/static/MAIN.js b/static/MAIN.js index 3059136..6ac3d8f 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -61,7 +61,7 @@ function init_variable(premier_appel){ // Texte texte_temporaire = {} // temps de pop des messages - temps_pop = 1000 + temps_pop = 2000 // text qui correspond à des erreurs de bouton longueur_max_error = 700 // text @@ -77,9 +77,9 @@ function init_variable(premier_appel){ R = 2.5 // Enchainement des pages - page_contexte = false + page_contexte = true page_inscription = false // true - page_explication = true + page_explication = false page_vues = false // false page_analyse = false @@ -247,6 +247,8 @@ function init_data(){ boutons["retirer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_retirer.png') boutons["commencer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer.png') boutons["raz"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_raz.png') + boutons["suivant"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_suivant.png') + boutons["avant"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_avant.png') // Mouse xyMouseMove = {"x": -1, "y": -1} @@ -291,16 +293,18 @@ function animate() { } //////////////////////////////////////////////////////////////////////////////// if (page_explication){ - console.log("boucle choix") + //console.log("boucle explication") // on enlève les touches du clavier associé à la page inscription document.removeEventListener("keydown", action_clavier_inscription) //init touche clavier if(premier_tour_page_explications){ // init clavier pour les vues - //init_clavier_vues() + init_clavier_explication() + init_variable_fonction(boutons, imgs) init_explication() // affichage ecran 3D de manière aléatoire - setUp_3D(indice_mesh, 2, 2) + idx_i_explication = 2 , idx_j_explication = 1 + setUp_3D(indice_mesh, idx_i_explication, idx_j_explication) premier_tour_page_explications = false } // Variable pour les fonctions @@ -322,7 +326,7 @@ function animate() { afficher_bouton(boutons) if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")} // traitement fleche (surval + click) - traitement_explications() + traitement_explications(idx_i_explication, idx_j_explication) // traitement bouton : (survol + click) //traitement_bouton() // afficher + maj du recap de pose choisie : affichage des vue des poses @@ -341,9 +345,9 @@ function animate() { //////////////////////////////////////////////////////////////////////////////// // 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_inscription) + document.removeEventListener("keydown", action_clavier_explication) //init touche clavier if(premier_tour_page_vues){ // init clavier pour les vues @@ -355,7 +359,7 @@ function animate() { premier_tour_page_vues = false } // Variable pour les fonctions - init_variable_fonction(boutons, imgs) + //init_variable_fonction(boutons, imgs) // Nettoyage fleche ctx.clearRect(0, 0, canvas.width, canvas.height) // Affichage bouton RAZ diff --git a/static/fonctions_choix_vues.js b/static/fonctions_choix_vues.js index 6e8dbe5..dbd7e8f 100644 --- a/static/fonctions_choix_vues.js +++ b/static/fonctions_choix_vues.js @@ -23,6 +23,8 @@ function init_variable_fonction(dict_boutons, dict_imgs ){ h_progress_bar = H_3D*0.04 // image recap dx = 20 + ecart_recap = 50 + // Message pop up x_pop_up = W_3D*pos_bouton+w_bouton*2+ecart_bouton+30 y_pop_up = H_3D +dy*4 @@ -80,10 +82,9 @@ function affichage_texte_recap(pos){ } 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)) + //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 @@ -279,6 +280,7 @@ function action_fleche_bas(){ /////////////////////////////////////////////////////////////// ///////////////////// BOUTON function afficher_bouton(dict_boutons){ + print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500)) // 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) diff --git a/static/fonctions_clavier.js b/static/fonctions_clavier.js index 459dd5d..b4f9245 100644 --- a/static/fonctions_clavier.js +++ b/static/fonctions_clavier.js @@ -21,7 +21,7 @@ function action_clavier_inscription(event){ case ' ' : if (champs_remplis_correctment()){ action_bouton_commencer('clavier')} - break; + break;idx_i, idx_j // valider case 'Enter': if (champs_remplis_correctment()){ @@ -30,6 +30,8 @@ function action_clavier_inscription(event){ } } + + function action_clavier_vues(event){ switch (event.key){ case 'ArrowLeft': @@ -104,6 +106,12 @@ function init_clavier_inscription(){ document.addEventListener("keydown", action_clavier_inscription) } + +function init_clavier_explication(){ + document.addEventListener("keydown", action_clavier_explication) +} + + function init_clavier_vues(){ document.addEventListener("keydown", action_clavier_vues) } diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index a317bb3..8af135a 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -18,7 +18,7 @@ function affichage_texte_contexte(){ function action_bouton_commencer_contexte(){ page_contexte = false page_inscription = true - interactions.push({"time": new Date().getTime(), "type": "bouton commencer de contexte"}) + interactions.push({"time": new Date().getTime(), "type": "Fin contexte - Début inscription"}) } function traitement_contexte(){ diff --git a/static/fonctions_explications.js b/static/fonctions_explications.js index b1961f5..5e698bc 100644 --- a/static/fonctions_explications.js +++ b/static/fonctions_explications.js @@ -4,39 +4,383 @@ alpha_ecran = 0.9 alpha_clignotement = 0.8 color_ecran ="rgb(255,255,255)" color_texte = "rgb(0,0,0)" -color_clignotement = "rgb(255,0,255)" -font_texte = "28pt Courier" -l_texte_max = 600 +color_clignotement = "rgb(200,0,0)" +font_texte = window.innerWidth +ecart_x = 50 +l_texte_max = window.innerWidth-W_3D-2*ecart_x -50 +marge_texte_x = 20 +marge_texte_y = 50 -actions = [ - {'ecran': {'x':W_3D +50, "y": 200, "w":window.innerWidth-W_3D-80, "h":400, "c":color_ecran,"a": alpha_ecran}, - "texte": {"t":"Voici comment se présente l'interface.", "x":W_3D + 80, "y":300, "f":font_texte, "l":l_texte_max, "c":color_texte}, - 'clignotement': {"x":0, "y":0, "w":100, "h":100, "c":color_clignotement,"a": alpha_clignotement}} +w_bouton_suivant = boutons["suivant"].width*0.3 +h_bouton_suivant = boutons["suivant"].height*0.3 + +temps_attente = 3000 + +// actions = [ +// {'ecran': {'x': W_3D + ecart_x, "y": H_3D*0.7, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, +// 'texte': , +// 'clignotement': {"x":0, "y":0, "w":100, "h":100, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}, +// 'bouton' :{"afficher": true, "x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant}, +// 'condition_suivant':{"x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant}} +// ] + +ecrans = [ + // 0 + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 1.1 + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 1.2, + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 1.3 + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 2.1 : Selection 1er vues + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 2.2 : clique sur fleche droite + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 2.3 : clique sur fleche haut + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 2.4 : clique sur fleche haut + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 2.5 : PBL trop haut + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 3.1 : clique sur fleche bas + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 3.2 : clique sur fleche bas + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 3.3 : clique sur fleche droite + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran}, + // 4: Selection de la vue + {'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran} + ] +textes = [ + // 0 + {"t":"Here is how the interface looks like.", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 1.1 : ecran 3D + {"t":"You have: A screen to view the 3D object,", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 1.2 : fleche + {"t":"You have: Arrows to move the 3D object,", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 1.3 : bouton + {"t":"You have: Buttons to make your selection.", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 2.1 : Selection 1er vues + {"t":"Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 2.2 : clique sur fleche droite + {"t":"Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 2.3 : clique sur fleche haut + {"t":"Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 2.4 : clique sur fleche haut + {"t":"ArrowUp once again. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 2.5 : PBL trop haut + {"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first view : GO DOWN. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + // 3.1 : clique sur fleche bas + {"t":"It's better. Once again. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 3.2 : clique sur fleche bas + {"t":"It's better. Go to the right. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50}, + // 3.3 : clique sur fleche bas + {"t":"Let's imagine that you choose this point of view. You have to select it with the button. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.011, "l":l_texte_max, "c":color_texte, "i":50}, + // 4 : + {"t":"You have chosen your first viewpoint. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it.", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.011, "l":l_texte_max, "c":color_texte, "i":50}, +] + +positions_bouton = [ + // 0 + {"afficher": true, "x": ecrans[0].x + ecrans[0].w - w_bouton_suivant - marge_texte_x, "y": ecrans[0].y + ecrans[0].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 1.1 + {"afficher": true, "x": ecrans[1].x + ecrans[1].w - w_bouton_suivant - marge_texte_x, "y": ecrans[1].y + ecrans[1].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 1.2 + {"afficher": true, "x": ecrans[2].x + ecrans[2].w - w_bouton_suivant - marge_texte_x, "y": ecrans[2].y + ecrans[2].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 1.3 + {"afficher": true, "x": ecrans[3].x + ecrans[3].w - w_bouton_suivant - marge_texte_x, "y": ecrans[3].y + ecrans[3].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 2.1 : Selection 1er vues + {"afficher": true, "x": ecrans[4].x + ecrans[4].w - w_bouton_suivant - marge_texte_x, "y": ecrans[4].y + ecrans[4].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 2.2 : clique sur fleche droite + {"afficher": true, "x": ecrans[5].x + ecrans[5].w - w_bouton_suivant - marge_texte_x, "y": ecrans[5].y + ecrans[5].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 2.3 : clique sur fleche haut + {"afficher": true, "x": ecrans[6].x + ecrans[6].w - w_bouton_suivant - marge_texte_x, "y": ecrans[6].y + ecrans[6].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 2.4 : clique sur fleche haut + {"afficher": true, "x": ecrans[7].x + ecrans[7].w - w_bouton_suivant - marge_texte_x, "y": ecrans[7].y + ecrans[7].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 2.5 : PBL trop haut + {"afficher": true, "x": ecrans[8].x + ecrans[8].w - w_bouton_suivant - marge_texte_x, "y": ecrans[8].y + ecrans[8].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 3.1 : clique sur fleche bas + {"afficher": true, "x": ecrans[9].x + ecrans[9].w - w_bouton_suivant - marge_texte_x, "y": ecrans[9].y + ecrans[9].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 3.2 : clique sur fleche bas + {"afficher": true, "x": ecrans[10].x + ecrans[10].w - w_bouton_suivant - marge_texte_x, "y": ecrans[10].y + ecrans[10].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 3.3 : clique sur fleche droite + {"afficher": true, "x": ecrans[11].x + ecrans[11].w - w_bouton_suivant - marge_texte_x, "y": ecrans[11].y + ecrans[11].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, + // 4 + {"afficher": true, "x": ecrans[12].x + ecrans[12].w - w_bouton_suivant - marge_texte_x, "y": ecrans[12].y + ecrans[12].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant} +] + +clignotements = [ + // 0 + {"type":"a_cliquer", "x":positions_bouton[0].x, "y":positions_bouton[0].y, "w":positions_bouton[0].w, "h":positions_bouton[0].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}, + // 1.1 : ecran 3D + {"type":"a_regarder", "x":0, "y":h_progress_bar, "w":W_3D, "h":H_3D, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, + // 1.2 : fleche + {"type":"a_regarder", "x": W_3D*0.2-b, "y":H_3D+DY, "w":b+a+b, "h":b+a+b, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, + // 1.3 + {"type":"a_regarder", "x":W_3D*pos_bouton, "y":H_3D+dy*2, "w":w_bouton*2 + ecart_bouton, "h":h_bouton*2+ecart_bouton, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, + // 2.1 : Selection 1er vues + {"type":"a_cliquer", "x": positions_bouton[4].x, "y":positions_bouton[4].y, "w":positions_bouton[4].w, "h":positions_bouton[4].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}, + // 2.2 : clique sur fleche droite + {"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 2.3 : clique sur fleche haut + {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 2.4 : clique sur fleche haut + {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 2.5 : PBL trop haut + {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 3.1 : clique sur fleche bas + {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 3.2 : clique sur fleche bas --> next step fleche droite + {"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 3.3 : clique sur fleche drioite --> next step bouton pose + {"type":"a_cliquer", "x": W_3D*pos_bouton, "y": H_3D+dy*2, "w": w_bouton, "h": h_bouton, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, + // 4 + {"type":"a_cliquer", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente} +] + + +conditions_suivant = [ + // 0 + {"type": "bouton", "x": positions_bouton[0].x, "y": positions_bouton[0].y, "w": positions_bouton[0].w, "h": positions_bouton[0].h}, + // 1.1 + {"type": "bouton", "x": positions_bouton[1].x, "y": positions_bouton[1].y, "w": positions_bouton[1].w, "h": positions_bouton[1].h}, + // 1.2 + {"type": "bouton", "x": positions_bouton[2].x, "y": positions_bouton[2].y, "w": positions_bouton[2].w, "h": positions_bouton[2].h}, + // 1.3 + {"type": "bouton", "x": positions_bouton[3].x, "y": positions_bouton[3].y, "w": positions_bouton[3].w, "h": positions_bouton[3].h}, + // 2.1 : Selection 1er vues + {"type": "bouton", "x": positions_bouton[4].x, "y": positions_bouton[4].y, "w": positions_bouton[4].w, "h": positions_bouton[4].h}, + // 2.2 : clique sur fleche droite + {"type": "fleche_d", "x": clignotements[5].x, "y": clignotements[5].y, "w": clignotements[5].w, "h": clignotements[5].h}, + // 2.3 : clique sur fleche haut + {"type": "fleche_h", "x": clignotements[6].x, "y": clignotements[6].y, "w": clignotements[6].w, "h": clignotements[6].h}, + // 2.4 : clique sur fleche haut + {"type": "fleche_h", "x": clignotements[7].x, "y": clignotements[7].y, "w": clignotements[7].w, "h": clignotements[7].h}, + // 2.5 : PBL trop haut + {"type": "fleche_b", "x": clignotements[8].x, "y": clignotements[8].y, "w": clignotements[8].w, "h": clignotements[8].h}, + // 3.1 : clique sur fleche bas + {"type": "fleche_b", "x": clignotements[9].x, "y": clignotements[9].y, "w": clignotements[9].w, "h": clignotements[9].h}, + // 3.2 : clique sur fleche bas + {"type": "fleche_d", "x": clignotements[10].x, "y": clignotements[10].y, "w": clignotements[10].w, "h": clignotements[10].h}, + // 3.3 : clique sur bouton pose + {"type": "bouton_pose", "x": clignotements[11].x, "y": clignotements[11].y, "w": clignotements[11].w, "h": clignotements[11].h}, + // 4 : clique sur next + {"type": "bouton", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h} +] + + +nb_action = ecrans.length num_action = 0 +nb_click_explication = 0 + } -function traitement_explications(){ - //ctx.clearRect(0, 0, canvas.width, canvas.height) +function traitement_explications(idx_i_explication, idx_j_explication){ + temps_pop = 8000 + if (num_action==0){ + idx_i = idx_i_explication + idx_j = idx_j_explication + } + console.log("debut", idx_i, idx_j, num_action) + 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 + if (num_action < nb_action ){ + // Données + ecran = ecrans[num_action] + texte = textes[num_action] + clignotement = clignotements[num_action] + position_bouton = positions_bouton[num_action] + condition_suivant = conditions_suivant[num_action] + + afficher_ecran(ecran.x, ecran.y, ecran.w, ecran.h, ecran.c, ecran.a ) + print_text(handle_text(texte.t, texte.x, texte.y, texte.f*font_texte +"pt Courier", texte.l, texte.c, texte.i)) + + survol_bouton() + + // s'il faut afficher le bouton next/previous + if (position_bouton.afficher){ + // bouton suivant + ctx.drawImage(boutons['suivant'], position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h) + if (is_inside(xyMouseMove, position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)){ + console.log('ttt') + draw_rectangle(position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)} + // Bouton previous + if (num_action>0){ + ctx.drawImage(boutons['avant'], position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h) + if (is_inside(xyMouseMove, position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){ + console.log("dedans") + draw_rectangle(position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)} + } + } + + // clignotement courant + if (time_animate > clignotement.t && num_action!=12 && clignotement.type=="a_cliquer"){ + clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 5) } + + if (time_animate > clignotement.t && clignotement.type=="a_regarder"){ + clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6) } + + // si on clique sur NEXT + if (condition_suivant.type =="bouton" && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + console.log("next") + action_suivante() + } + // Si on clique sur PREVIOUS + //if (condition_suivant.type =="bouton" && num_action >0 && clicked && click_inside(xyMouseDown, condition_suivant.x- w_bouton_suivant - marge_texte_x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + if (num_action >0 && clicked && click_inside(xyMouseDown, position_bouton.x- w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){ + console.log("previous") + action_previous_explication() + } + // Si on clique sur Fleche droite + if (condition_suivant.type =="fleche_d" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + console.log("fleche_d") + action_droite_explication() + } + // Si on clique sur Fleche Haut + if (condition_suivant.type =="fleche_h" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + console.log("fleche_h") + action_haut_explication() + } + // Si on clique sur Fleche bas + if (condition_suivant.type =="fleche_b" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + console.log("fleche_b") + texte_temporaire = {} + action_bas_explication() + } + // Si on clique sur Fleche bas + if (condition_suivant.type =="bouton_pose" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ + console.log("bouton_pose") + action_bouton_pose() + action_suivante() + } + + + // FIN du tuto + if (num_action==nb_action){ + console.log("explications finies") + action_fin_explication() + } + } +} + +//////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +function action_fin_explication(){ + choix_courant = {} + liste_poses = [] + nb_choix_fait = 0 + page_explication = false + page_vues = true + + interactions.push({"time": new Date().getTime(), "type": "Fin explication. Début des choix."}) +} + +function action_previous_explication(){ + if ((num_action == 6) || (num_action == 11)){action_fleche_gauche(); update_mesh(idx_i, idx_j)} + if ((num_action == 7) ){action_fleche_bas(); update_mesh(idx_i, idx_j)} + if ((num_action == 9) || (num_action == 10) ){action_fleche_haut(); update_mesh(idx_i, idx_j)} + if (num_action == 12){action_bouton_retirer()} + action_precedente() + +} + +function action_haut_explication(){ + action_fleche_haut() + update_mesh(idx_i, idx_j) + action_suivante() +} + +function action_droite_explication(){ + action_fleche_droite() + update_mesh(idx_i, idx_j) + action_suivante() +} + +function action_bas_explication(){ + action_fleche_bas() + update_mesh(idx_i, idx_j) + action_suivante() +} + + +function action_suivante(){ + num_action = num_action+1 +} + +function action_precedente(){ + num_action = num_action-1 +} + +function update_mesh(I,J){ + theta = 2*Math.PI * ( (2/8)*(J==0) + (1/8)*(J==1) + (-1/8)*(J==3) + (-2/8)*(J==4)) + delta = 2*Math.PI * (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_clavier_explication(event){ + switch (event.key){ + // selectionner pose + case ' ' : + if (num_action==11){ + console.log("pose clavier") + action_bouton_pose() + action_suivante() } + break; + // valider + case 'Enter': + console.log("next clavier") + if (num_action < nb_action && condition_suivant.type =="bouton"){ + action_suivante()} + if (num_action == nb_action){ + action_fin_explication() + } + break; + case 'Backspace': + if (num_action > 0){ + if (num_action == 6){action_fleche_gauche(); update_mesh(idx_i, idx_j)} + if ((num_action == 7) ){action_fleche_bas(); update_mesh(idx_i, idx_j)} + console.log("previous clavier") + action_precedente()} + break; + case 'ArrowRight' : + if (condition_suivant.type =="fleche_d"){ + console.log("fleche_d clavier") + action_droite_explication() + } + break + case 'ArrowUp' : + if (condition_suivant.type =="fleche_h"){ + console.log("fleche_h clavier") + action_haut_explication() + } + break + + case 'ArrowDown' : + if (condition_suivant.type =="fleche_b"){ + console.log("fleche_b clavier") + action_bas_explication() + } + break + } +} + +function survol_bouton_explication(){ + 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)} + +} + + //ctx.clearRect(0, 0, canvas.width, canvas.height) //texte = "Explications" //font = "42pt Courier" //ctx.font = font //largeur = ctx.measureText(texte).width //ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) - - // STEP 1 - action = actions[num_action] - afficher_ecran(action.ecran.x, action.ecran.y, action.ecran.w, action.h, action.c, action.a ) - print_text(handle_text(action.texte.t, action.texte.x, action.texte.y, action.texte.f, action.texte.l, action.texte.c)) - - - - -} - -function afficher_ecran(originex, originey, largeur, hauteur, couleur, alpha){ - draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha) -} diff --git a/static/fonctions_inscription.js b/static/fonctions_inscription.js index 41513ce..a84fdbe 100644 --- a/static/fonctions_inscription.js +++ b/static/fonctions_inscription.js @@ -18,10 +18,11 @@ function affichage_inscription(){ ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12) ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 12) ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12) - ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22) + ctx.fillText("Sex:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22) ctx.font = "24pt Courier" ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) + ctx.fillText("None of this above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24) } @@ -43,7 +44,7 @@ function action_bouton_commencer(){ page_inscription = false //page_vues = true page_explication = true - interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"}) + interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"}) //gestion des données personnelle de l'utilisateur gestion_donnees_personnelles() @@ -76,8 +77,8 @@ function champs_remplis_correctment(){ sexe_ok = false if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true} if (document.getElementById("Name").value.length >0 && (value_non_vide(document.getElementById("Name").value))){name_ok = true} - if (document.getElementById("Age").value.length >0 && (value_non_vide(document.getElementById("Age").value))){age_ok = true} - if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked){ sexe_ok= true} + if ((document.getElementById("Age").value >0) && (document.getElementById("Age").value.length >0) && (value_non_vide(document.getElementById("Age").value))){age_ok = true} + if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked || document.getElementById("SexeA").checked){ sexe_ok= true} return firstname_ok && name_ok && age_ok && sexe_ok } @@ -177,6 +178,20 @@ function afficher_champs_inscription() { document.body.appendChild(input5); input5.focus(); + var input6 = document.createElement('input'); + input6.type = 'radio'; + input6.id = 'SexeA'; + input6.name = "sexe" + //input4.size = w_text_zone + // style + input6.style.position = 'fixed'; + input6.style.left = x_texte_zone + 600; + input6.style.top = 10 + 2*ecart_texte_zone + y_texte_zone+'px'; + input6.style.height = 20 + input6.style.width = 20 + document.body.appendChild(input6); + input6.focus(); + } @@ -184,6 +199,7 @@ function gestion_donnees_personnelles(){ // Sauvegarde des infos if (document.getElementById("SexeM").checked){sexe = "M"} else if (document.getElementById("SexeF").checked){sexe = "F"} + else if (document.getElementById("SexeM").checked){sexe = "M"} else {sexe='None'} choix['identite'] = {"Firstname":document.getElementById("Firstname").value, "Name": document.getElementById("Name").value, @@ -194,6 +210,7 @@ function gestion_donnees_personnelles(){ document.getElementById("Age").style.display = 'none' document.getElementById("SexeM").style.display = 'none' document.getElementById("SexeF").style.display = 'none' + document.getElementById("SexeA").style.display = 'none' diff --git a/static/fonctions_utiles.js b/static/fonctions_utiles.js index 48aa58c..4ea5169 100644 --- a/static/fonctions_utiles.js +++ b/static/fonctions_utiles.js @@ -33,32 +33,37 @@ function draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha){ ctx.globalAlpha = 1 } -function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1){ +function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1, epaisseur=5){ 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.lineWidth = epaisseur ctx.strokeStyle = couleur ctx.globalAlpha = alpha ctx.stroke() ctx.lineWidth = 1 } -function clignotement_rectangle(periode, originex, originey, largeur, hauteur, couleur){ +function clignotement_rectangle(periode, originex, originey, largeur, hauteur, couleur, alhpa_max=1){ // temps en milliseconde de la période de clignotement t = 2*(new Date().getTime()%periode)/periode-1 // nombre entre -1 et 1 - draw_rectangle(originex, originey, largeur, hauteur, couleur, Math.abs(t)) + draw_rectangle(originex, originey, largeur, hauteur, couleur, Math.abs(t)*alhpa_max) } -function clignotement_contour(periode, originex, originey, largeur, hauteur, couleur){ +function clignotement_contour(periode, originex, originey, largeur, hauteur, couleur, epaisseur = 5){ // temps en milliseconde de la période de clignotement t = 2*(new Date().getTime()%periode)/periode-1 // nombre entre -1 et 1 - draw_contour(originex, originey, largeur, hauteur, couleur, Math.abs(t)) + draw_contour(originex, originey, largeur, hauteur, couleur, Math.abs(t), epaisseur) } +function afficher_ecran(originex, originey, largeur, hauteur, couleur, alpha){ + draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha) +} + + function print_text(dialogue) { s = dialogue.texte @@ -73,7 +78,7 @@ function print_text(dialogue) { } -function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") { +function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", interligne=40) { let s = dialogue let x = 0 @@ -95,7 +100,7 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") { if (x >= l_max) { x = 0 - y += 40 + y += interligne 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 @@ -114,7 +119,7 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") { if (x >= l_max) { x = 0 - y += 40 + y += interligne 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 @@ -126,6 +131,9 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") { } + + + function progress_bar(N_tache, N_mesh){ if (N_tache<=N_mesh){ // background