diff --git a/graphics/Boutons/bouton_commencer_inscription.png b/graphics/Boutons/bouton_commencer_inscription.png new file mode 100644 index 0000000..c3a16af Binary files /dev/null and b/graphics/Boutons/bouton_commencer_inscription.png differ diff --git a/static/MAIN.js b/static/MAIN.js index ce64466..68b0234 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -259,6 +259,8 @@ function init_data(){ 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') imgs["clavier_enter"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_enter.png') + imgs["exemple1"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/exemple1.png') + imgs["exemple2"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/exemple2.png') imgs["recap1"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap1.png') imgs["recap2"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap2.png') imgs["recap3"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap3.png') diff --git a/static/fonctions_clavier.js b/static/fonctions_clavier.js index b5f08ef..b6fc02f 100644 --- a/static/fonctions_clavier.js +++ b/static/fonctions_clavier.js @@ -9,10 +9,17 @@ function action_clavier_contexte(event){ // action_bouton_commencer_contexte('clavier') // break; // valider - case 'Enter': - if (fin_conexte){action_bouton_commencer_contexte()} - else{action_bouton_suivant_commencer()} - break; + case 'Enter': + if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-1){ + action_bouton_suivant_contexte()} + else{ + action_bouton_commencer_contexte() + } + break; + case 'Backspace': + if (num_texte>0){ + action_bouton_avant_contexte()} + break; } } diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index 60ef2b8..bbe98ae 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -1,21 +1,6 @@ scale_bouton_commencer_contexte = 0.6 num_texte = 0 -// function affichage_texte_contexte(texte, font, color){ -// // Texte -// draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 -// ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge -// ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu -// texte = "Hi, I'm Marie, do you want to participate in my study?" -// font = "42pt Courier" -// ctx.font = font -// largeur = ctx.measureText(texte).width -// ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) - -// //print_text(handle_text(texte, (window.innerWidth/4), 100, "42pt Courier", (window.innerWidth/1.8))) - -// ctx.drawImage(imgs['marie'], (window.innerWidth/2)-((imgs['marie'].width*0.7)/2), (window.innerHeight/4), imgs['marie'].width*0.7, imgs['marie'].height*0.7 ) -// } function affichage_texte_contexte(texte, font, color, xt, yt, l_max_texte){ // Texte @@ -64,19 +49,28 @@ function afficher_bouton_commencer_contexte(){ function action_bouton_suivant_contexte(){ num_texte = num_texte+1 - if (num_texte == textes_page_1.length){texte_a_afficher = []} - if (num_texte == (textes_page_1.length + textes_page_2.length)){texte_a_afficher = []} - if (num_texte == (textes_page_1.length + textes_page_2.length + textes_page_3.length)){texte_a_afficher = []} + if (num_texte == textes_page_1.length){ + texte_a_afficher = []} + if (num_texte == (textes_page_1.length + textes_page_2.length)){ + texte_a_afficher = []} + if (num_texte == (textes_page_1.length + textes_page_2.length + textes_page_3.length)){ + texte_a_afficher = []} texte_a_afficher.push(textes["texte"+num_texte]) - - // if (num_texte == (textes_page_1.length + textes_page_2.length)){page_courante = textes_page_3} - // if (num_texte == (textes_page_1.length + textes_page_2.length + textes_page_3.length)){page_courante = textes_page_4} + } function action_bouton_avant_contexte(){ - if(num_texte>0){num_texte = num_texte-1} - - + if (num_texte>0){ + if (num_texte == textes_page_1.length){ + texte_a_afficher = JSON.parse(JSON.stringify(textes_page_1))} + else if (num_texte == (textes_page_1.length + textes_page_2.length)){ + texte_a_afficher = JSON.parse(JSON.stringify(textes_page_2))} + else if (num_texte == (textes_page_1.length + textes_page_2.length + textes_page_3.length)){ + texte_a_afficher = JSON.parse(JSON.stringify(textes_page_3))} + else { + texte_a_afficher.pop()} + } + num_texte = num_texte-1 } function afficher_bouton_suivant_contexte(){ @@ -118,33 +112,50 @@ function traitement_contexte(){ font_texte = (0.012*window.innerWidth)+"pt Courier" // titre commun à chaque page affichage_titre_contexte(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre) - // tant qu'on est pas au dernier texte - if (num_texte < 16){ + // affichage texte + for(let p=0; p 0){ - // affichage bouton next - afficher_bouton_avant_contexte()} + } else { + // affichage bouton next + afficher_bouton_commencer_contexte() + // si on clique sur next + if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){ + // on passe aux texte suivant + action_bouton_commencer_contexte() + } + } + + //affichage bouton previous dès le deuxièeme texte + if(num_texte > 0){ + // affichage bouton next + afficher_bouton_avant_contexte() //si on clique sur previous if (clicked && click_inside(xyMouseDown, x_bouton_avant, y_bouton_avant , w_bouton_avant, h_bouton_avant)){ // on passe aux texte suivant action_bouton_avant_contexte() - } - + } } + // affichage image + if(num_texte==6){ + ctx.drawImage(imgs['exemple1'], x_bouton_suivant + w_bouton_suivant + 100, textes["texte6"].y - 100, window.innerWidth*(2/8), window.innerWidth*(2/8)) + } + if(num_texte==7){ + ctx.drawImage(imgs['exemple2'], x_bouton_suivant + w_bouton_suivant + 100, textes["texte6"].y - 100, window.innerWidth*(2/8), window.innerWidth*(2/8)) + } + } @@ -167,13 +178,13 @@ textes={ "texte6":{"t":"For example, let's look at this object (which represents a wolf) from this position/viewpoint. Here we cannot see the head of the wolf but its four legs and tail are visible.", "y": window.innerHeight*0.55, "c": color_blanc}, "texte7":{"t":"There, we cannot see its right eye, left rear leg and tail but the head of the wolf is visible.", "y": window.innerHeight*0.75, "c": color_blanc}, "texte8":{"t":"What is a good viewpoint?", "y": window.innerHeight*0.15, "c": color_rouge}, -"texte9":{"t":"> A good point of view corresponds to the position from which we can observe representative parts of our objects that allow us to identify it at first. But also to observe the most salient elements. The more characteristic elements a viewpoint contains, the better the viewpoint will be considered.", "y": window.innerHeight*0.15, "c": color_blanc}, -"texte10":{"t":"The purpose of this study is to ask you, for a given object, which are for you the best viewpoints and why. The answers will of course be subjective because everyone will have their own opinion. It is this subjective information that interests me.", "y": window.innerHeight*0.15, "c": color_blanc}, +"texte9":{"t":"> A good point of view corresponds to the position from which we can observe representative parts of our objects that allow us to identify it at first. But also to observe the most salient elements. The more characteristic elements a viewpoint contains, the better the viewpoint will be considered.", "y": window.innerHeight*0.2, "c": color_blanc}, +"texte10":{"t":"The purpose of this study is to ask you, for a given object, which are for you the best viewpoints and why. The answers will of course be subjective because everyone will have their own opinion. It is this subjective information that interests me.", "y": window.innerHeight*0.45, "c": color_blanc}, "texte11":{"t":"Now that you know the context of this study, here are the instructions:", "y": window.innerHeight*0.15, "c": color_blanc}, -"texte12":{"t":"- you will study "+nb_mesh+" different objects,", "y": window.innerHeight*0.15, "c": color_blanc}, -"texte13":{"t":"- for each of them, you will have to select "+nb_choix_demande+" viewpoints,", "y": window.innerHeight*0.15, "c": color_blanc}, -"texte14":{"t":"- once this is done, you will have to fill in a questionnaire to justify your choice of viewpoint.", "y": window.innerHeight*0.15, "c": color_blanc}, -"texte15":{"t":"To learn how to use this interface and make your viewpoint selection correctly, a tutorial has been created. But first, you have to register.", "y": window.innerHeight*0.15, "c": color_blanc}, +"texte12":{"t":"- you will study "+nb_mesh+" different objects,", "y": window.innerHeight*0.25, "c": color_blanc}, +"texte13":{"t":"- for each of them, you will have to select "+nb_choix_demande+" viewpoints,", "y": window.innerHeight*0.30, "c": color_blanc}, +"texte14":{"t":"- once this is done, you will have to fill in a questionnaire to justify your choice of viewpoint.", "y": window.innerHeight*0.35, "c": color_blanc}, +"texte15":{"t":"To learn how to use this interface and make your viewpoint selection correctly, a tutorial has been created. But first, you have to register.", "y": window.innerHeight*0.5, "c": color_blanc}, } textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]]