contexte suite

This commit is contained in:
mpelissi 2023-03-11 22:07:08 +01:00
parent 6d05f894ac
commit 91a915fb7c
4 changed files with 69 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -259,6 +259,8 @@ function init_data(){
imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.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') 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["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["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["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') imgs["recap3"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap3.png')

View File

@ -10,9 +10,16 @@ function action_clavier_contexte(event){
// break; // break;
// valider // valider
case 'Enter': 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;
} }
} }

View File

@ -1,21 +1,6 @@
scale_bouton_commencer_contexte = 0.6 scale_bouton_commencer_contexte = 0.6
num_texte = 0 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){ function affichage_texte_contexte(texte, font, color, xt, yt, l_max_texte){
// Texte // Texte
@ -64,19 +49,28 @@ function afficher_bouton_commencer_contexte(){
function action_bouton_suivant_contexte(){ function action_bouton_suivant_contexte(){
num_texte = num_texte+1 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]) 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(){ 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(){ function afficher_bouton_suivant_contexte(){
@ -118,33 +112,50 @@ function traitement_contexte(){
font_texte = (0.012*window.innerWidth)+"pt Courier" font_texte = (0.012*window.innerWidth)+"pt Courier"
// titre commun à chaque page // titre commun à chaque page
affichage_titre_contexte(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre) 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 // affichage bouton next
afficher_bouton_suivant_contexte() 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 // si on clique sur next
if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){ if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){
// on passe aux texte suivant // on passe aux texte suivant
action_bouton_suivant_contexte() 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 //si on clique sur previous
if (clicked && click_inside(xyMouseDown, x_bouton_avant, y_bouton_avant , w_bouton_avant, h_bouton_avant)){ if (clicked && click_inside(xyMouseDown, x_bouton_avant, y_bouton_avant , w_bouton_avant, h_bouton_avant)){
// on passe aux texte suivant // on passe aux texte suivant
action_bouton_avant_contexte() 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}, "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}, "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}, "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}, "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"]] textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]]