contexte suite

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')

static/fonctions_clavier.js

@@ -10,9 +10,16 @@ function action_clavier_contexte(event){
         // break;
         // valider
         case  'Enter':  
-            if (fin_conexte){action_bouton_commencer_contexte()}   
+        if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-1){
-            else{action_bouton_suivant_commencer()}   
+            action_bouton_suivant_contexte()}
-        break;
+        else{
+            action_bouton_commencer_contexte()
+        }
+            break;
+        case 'Backspace':
+            if (num_texte>0){
+            action_bouton_avant_contexte()}
+            break;
     }
 }
 

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){
-    if (num_texte == (textes_page_1.length + textes_page_2.length)){texte_a_afficher = []}
+        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 + 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
+    // affichage texte 
-    if (num_texte < 16){
+    for(let p=0; p<texte_a_afficher.length; p++){
+        dict_texte = texte_a_afficher[p]
+        if ((num_texte == 7 || num_texte == 6) && (p == (textes_page_2.length)-1 ||  p == ( textes_page_2.length)-2)){w_texte = window.innerWidth*(4/8)}
+        affichage_texte_contexte(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
+        w_texte = window.innerWidth*(6/8)
+    }
+      
+    if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-1){
         // affichage bouton next
         afficher_bouton_suivant_contexte()
-        // affichage texte 
-        for(let p=0; p<texte_a_afficher.length; p++){
-            dict_texte = texte_a_afficher[p]
-            if (p == (textes_page_2.length)-1 || p == ( textes_page_2.length)-2 ){w_texte = window.innerWidth*(4/8)}
-            affichage_texte_contexte(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
-            w_texte = window.innerWidth*(6/8)
-        }
         // si on clique sur next 
         if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){
             // on passe aux texte suivant 
             action_bouton_suivant_contexte() 
         } 
-        //affichage bouton previous dès le deuxièeme texte 
+    } else {
-        if(num_texte > 0){
+        // affichage bouton next
-            // affichage bouton next
+        afficher_bouton_commencer_contexte()
-            afficher_bouton_avant_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},
+"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.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.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},
+"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.15, "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.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.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.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.5, "c": color_blanc},
 }
 
 textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]]