From 67a070acb1b9dbada5ec26a1b8176c8fa19c0ebd Mon Sep 17 00:00:00 2001 From: mpelissi Date: Wed, 8 Mar 2023 10:50:45 +0100 Subject: [PATCH] ajout shorcut vues --- static/MAIN.js | 4 +++- static/fonctions_choix_vues.js | 17 ++++++++++------- static/fonctions_clavier.js | 15 +++++++-------- static/fonctions_contexte.js | 3 ++- static/fonctions_utiles.js | 13 ++++++++++--- 5 files changed, 32 insertions(+), 20 deletions(-) diff --git a/static/MAIN.js b/static/MAIN.js index 6ac3d8f..9d87785 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -240,6 +240,7 @@ function init_data(){ imgs["check"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/check.png') imgs["checkbox"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/empty_checkbox.png') imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.png') + imgs["clavier_vues"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_vues.png') boutons = {} boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_reinitialiser.png') boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png') @@ -249,6 +250,7 @@ function init_data(){ 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') + boutons["raccourcis"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_raccourcis.png') // Mouse xyMouseMove = {"x": -1, "y": -1} @@ -359,7 +361,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 dbd7e8f..65d7abb 100644 --- a/static/fonctions_choix_vues.js +++ b/static/fonctions_choix_vues.js @@ -40,6 +40,7 @@ function bloquer_pose(L_poses){ // 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) + print_text(handle_text("Viewpoint already selected", 10, H_3D, "16pt Courier", H_3D, "#118AB2")) } } } @@ -176,21 +177,21 @@ function afficher_fleche(dict_imgs){ 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) + draw_rectangle(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(200, 200, 200)", 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) + draw_rectangle(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(200, 200, 200)", 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) + draw_rectangle(W_3D*0.2, H_3D+DY, a, b, "rgb(200, 200, 200)", 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) + draw_rectangle(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol) } } @@ -218,7 +219,7 @@ function get_clicked_fleche(){ function traitement_fleche(){ // Survol des fleches avec la souris - //survol_fleche() + survol_fleche() // click sur une fleche get_clicked_fleche() //console.log(which_clicked_fleche) @@ -263,7 +264,7 @@ function action_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} + 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) @@ -271,7 +272,7 @@ function action_fleche_haut(){ 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} + 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) @@ -487,6 +488,8 @@ function action_bouton_raz(){ } function traitement_bouton(){ + // raccourcis bouton et fleche + shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], 10, window.innerHeight-0.5*h_bouton-10, 0.5*w_bouton, 0.5*h_bouton) // si on survol, on a les contours qui apparaissent survol_bouton() // si on click diff --git a/static/fonctions_clavier.js b/static/fonctions_clavier.js index b4f9245..ec3f724 100644 --- a/static/fonctions_clavier.js +++ b/static/fonctions_clavier.js @@ -5,9 +5,9 @@ function action_clavier_contexte(event){ switch (event.key){ // selectionner pose - case ' ' : - action_bouton_commencer_contexte('clavier') - break; + // case ' ' : + // action_bouton_commencer_contexte('clavier') + // break; // valider case 'Enter': action_bouton_commencer_contexte('clavier') @@ -18,10 +18,10 @@ function action_clavier_contexte(event){ function action_clavier_inscription(event){ switch (event.key){ // selectionner pose - case ' ' : - if (champs_remplis_correctment()){ - action_bouton_commencer('clavier')} - break;idx_i, idx_j + // case ' ' : + // if (champs_remplis_correctment()){ + // action_bouton_commencer('clavier')} + // break;idx_i, idx_j // valider case 'Enter': if (champs_remplis_correctment()){ @@ -31,7 +31,6 @@ function action_clavier_inscription(event){ } - function action_clavier_vues(event){ switch (event.key){ case 'ArrowLeft': diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index 8af135a..0972496 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -17,7 +17,8 @@ function affichage_texte_contexte(){ function action_bouton_commencer_contexte(){ page_contexte = false - page_inscription = true + //page_inscription = true + page_vues = true interactions.push({"time": new Date().getTime(), "type": "Fin contexte - Début inscription"}) } diff --git a/static/fonctions_utiles.js b/static/fonctions_utiles.js index 4ea5169..b1dc897 100644 --- a/static/fonctions_utiles.js +++ b/static/fonctions_utiles.js @@ -131,9 +131,6 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", i } - - - function progress_bar(N_tache, N_mesh){ if (N_tache<=N_mesh){ // background @@ -147,4 +144,14 @@ function progress_bar(N_tache, N_mesh){ // ctx.font = "18pt Courier"; // ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar) } +} + +function shortcuts(xyMove, I_shortcut, x_shortcut, y_shortcut, w_shortcut, h_shortcut, I_bouton, xb, yb, wb, hb){ + ctx.drawImage(I_bouton, xb, yb, wb, hb) + if (is_inside(xyMove, xb, yb, wb, hb)){ + draw_rectangle(xb, yb, wb, hb, "rgb(200, 200, 200)", 0.6) + ctx.drawImage(I_shortcut, x_shortcut, y_shortcut, w_shortcut, h_shortcut) + } + + } \ No newline at end of file