tforgione
/
bvs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
graphics/Boutons/bouton_commencer_inscription.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

2
static/MAIN.js
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["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')

13
static/fonctions_clavier.js
View File

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

97
static/fonctions_contexte.js
View File

@ -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<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
if(num_texte > 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"]]