update contexte - inscription ok sur firefox

This commit is contained in:
mpelissi 2023-03-14 11:20:00 +01:00
parent 3159043372
commit 5af1de60bb
4 changed files with 23 additions and 19 deletions

View File

@ -85,7 +85,7 @@ function init_variable(premier_appel){
// Enchainement des pages // Enchainement des pages
if (premier_appel){ if (premier_appel){
page_contexte = false page_contexte = false
page_inscription = true // true page_inscription = true
page_explication = false page_explication = false
page_warning = false page_warning = false
page_explication_bis = false page_explication_bis = false

View File

@ -10,7 +10,7 @@ function action_clavier_contexte(event){
// break; // break;
// valider // valider
case 'Enter': case 'Enter':
if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-1){ if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-2){
action_bouton_suivant_contexte()} action_bouton_suivant_contexte()}
else{ else{
action_bouton_commencer_contexte() action_bouton_commencer_contexte()

View File

@ -105,6 +105,7 @@ function afficher_bouton_avant_contexte(){
///// MAIN ///// MAIN
function traitement_contexte(){ function traitement_contexte(){
console.log(num_texte)
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
// variable position // variable position
x_texte = window.innerWidth*(1/8) x_texte = window.innerWidth*(1/8)
@ -116,11 +117,12 @@ function traitement_contexte(){
for(let p=0; p<texte_a_afficher.length; p++){ for(let p=0; p<texte_a_afficher.length; p++){
dict_texte = texte_a_afficher[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)} 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)}
if ((num_texte == 10 || num_texte == 11) && (p == (textes_page_3.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) affichage_texte_contexte(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
w_texte = window.innerWidth*(6/8) 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){ if (num_texte < ((textes_page_1.length + textes_page_2.length + textes_page_3.length +textes_page_4.length))-2){
// affichage bouton next // affichage bouton next
afficher_bouton_suivant_contexte() afficher_bouton_suivant_contexte()
// si on clique sur next // si on clique sur next
@ -155,6 +157,11 @@ function traitement_contexte(){
if(num_texte==7){ 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)) ctx.drawImage(imgs['exemple2'], x_bouton_suivant + w_bouton_suivant + 100, textes["texte6"].y - 100, window.innerWidth*(2/8), window.innerWidth*(2/8))
} }
if(num_texte==10 || num_texte==11){
affichage_texte_contexte("Which viewpoint would you choose between both?", font_texte, "rgb(255, 209, 102)", x_texte, textes["texte10"].y + 100, window.innerWidth*(4/8))
ctx.drawImage(imgs['exemple1'], x_bouton_suivant + w_bouton_suivant , textes["texte10"].y - 100, window.innerWidth*(1/8), window.innerWidth*(1/8))
ctx.drawImage(imgs['exemple2'], x_bouton_suivant + window.innerWidth*(1/8) + + w_bouton_suivant+20, textes["texte10"].y -100 , window.innerWidth*(1/8), window.innerWidth*(1/8))
}
} }
@ -169,33 +176,30 @@ titre = "User study : Best view selection"
color_blanc = "rgb(255,255,255)" color_blanc = "rgb(255,255,255)"
color_rouge = "rgb(239, 71, 111)" color_rouge = "rgb(239, 71, 111)"
textes={ textes={
//"texte0":{"t":"Hello, I am Marie Pelissier, a 3rd year PhD student. I work in the field of computer science and more precisely in computer vision.", "y": window.innerHeight*0.15, "c": color_blanc},
"texte0":{"t":"Hello! I am Marie Pelissier, a 3rd year PhD student. I work on computer vision, a subfield of computer science, and you are about to help me with my research.", "y": window.innerHeight*0.15, "c": color_blanc}, "texte0":{"t":"Hello! I am Marie Pelissier, a 3rd year PhD student. I work on computer vision, a subfield of computer science, and you are about to help me with my research.", "y": window.innerHeight*0.15, "c": color_blanc},
//"texte1":{"t":"You are currently participating in my user study which will allow me to collect data related to my research. These data are precious because they will be used to demonstrate the effectiveness of my work. Unfortunately, such data are not available today in the scientific literature.", "y":window.innerHeight*0.35, "c": color_blanc},
"texte1":{"t":"First, thank you for participating in my study. Then, I am collecting data in order to evaluate how well a computer does against actual human opinion in the mattter of finding the best viewpoint to look at an object. Unfortunatly, it seems that no one in the scientific community has yet proposed a dataset for this purpouse.", "y":window.innerHeight*0.35, "c": color_blanc}, "texte1":{"t":"First, thank you for participating in my study. Then, I am collecting data in order to evaluate how well a computer does against actual human opinion in the mattter of finding the best viewpoint to look at an object. Unfortunatly, it seems that no one in the scientific community has yet proposed a dataset for this purpouse.", "y":window.innerHeight*0.35, "c": color_blanc},
//"texte2":{"t":"My work is dedicated to the automatic selection of the best viewpoint for a given 3D object. I will give you more details.", "y":window.innerHeight*0.65, "c": color_blanc},
"texte2":{"t":"Thats where you come into play, I need you to answer a few question in order to build a dataset of human-chosen viewpoints of objects. Let me get into the details...", "y":window.innerHeight*0.65, "c": color_blanc}, "texte2":{"t":"Thats where you come into play, I need you to answer a few question in order to build a dataset of human-chosen viewpoints of objects. Let me get into the details...", "y":window.innerHeight*0.65, "c": color_blanc},
"texte3":{"t":"What is a viewpoint? ", "y": window.innerHeight*0.15, "c": color_rouge}, "texte3":{"t":"What is a viewpoint? ", "y": window.innerHeight*0.15, "c": color_rouge},
"texte4":{"t":"> The viewpoint of an object is the position from which we observe the object.", "y": window.innerHeight*0.2, "c": color_blanc}, "texte4":{"t":"> The viewpoint of an object is the position from which we observe the object.", "y": window.innerHeight*0.2, "c": color_blanc},
//"texte5":{"t":"Depending on this position, we can observe different parts of this object. However, from any position, it is often not possible to observe all the parts of this object.", "y": window.innerHeight*0.32, "c": color_blanc},
"texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.3, "c": color_blanc}, "texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.3, "c": color_blanc},
"texte6":{"t":"For example, this is wolf. This perspective highlights the tail and the hind legs, but obscures the head and face.", "y": window.innerHeight*0.45, "c": color_blanc}, "texte6":{"t":"For example, this is wolf. This perspective highlights the tail and the hind legs, but obscures the head and face.", "y": window.innerHeight*0.45, "c": color_blanc},
"texte7":{"t":"This viewpoint reveal the head, face, and front legs but hides the tail and barely shows the hind legs.", "y": window.innerHeight*0.6, "c": color_blanc}, "texte7":{"t":"This viewpoint reveal the head, face, and front legs but hides the tail and barely shows the hind legs.", "y": window.innerHeight*0.6, "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 a position from which we can observe representative parts of an object that allow us to identify it. And 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}, "texte9":{"t":"> A good viewpoint is one that offers a pleasant view of the object. A more geometrical definition: a good viewpoint is a position from which most representative characteristics of an object (i.e. the parts that make the object the most identifiable), are visible.", "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 has their own opinion. This subjective information is what I am interested in.", "y": window.innerHeight*0.45, "c": color_blanc}, "texte10":{"t":"Let's imagine that you have to create an advertising display to promote the movie Dances with Wolves.", "y": window.innerHeight*0.45, "c": color_blanc},
"texte11":{"t":"Now that you are up to speed, here are the instructions of the study:", "y": window.innerHeight*0.15, "c": color_blanc}, "texte11":{"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 has their own opinion. This subjective information is what I am interested in.", "y": window.innerHeight*0.7, "c": color_blanc},
"texte12":{"t":"- You will be presented "+nb_mesh+" different objects.", "y": window.innerHeight*0.25, "c": color_blanc}, "texte12":{"t":"Now that you are up to speed, here are the instructions of the study:", "y": window.innerHeight*0.15, "c": color_blanc},
"texte13":{"t":"- For each of them, you will chose "+nb_choix_demande+" viewpoints you find most representative of the given object.", "y": window.innerHeight*0.35, "c": color_blanc}, "texte13":{"t":"- You will be presented "+nb_mesh+" different objects.", "y": window.innerHeight*0.25, "c": color_blanc},
"texte14":{"t":"- Afterward, you will answer a few questions to justify your choices.", "y": window.innerHeight*0.5, "c": color_blanc}, "texte14":{"t":"- For each of them, you will chose "+nb_choix_demande+" viewpoints you find most representative of the given object.", "y": window.innerHeight*0.35, "c": color_blanc},
"texte15":{"t":"As a mean for you to get familiar with the interface, and make your selection easier, we have set up a quick tutorial.", "y": window.innerHeight*0.6, "c": color_blanc}, "texte15":{"t":"- Afterward, you will answer a few questions to justify your choices.", "y": window.innerHeight*0.5, "c": color_blanc},
"texte16":{"t":"But before anything, we need you to register in order to save your answers.", "y": window.innerHeight*0.7, "c": color_blanc}, "texte16":{"t":"As a mean for you to get familiar with the interface, and make your selection easier, we have set up a quick tutorial.", "y": window.innerHeight*0.6, "c": color_blanc},
"texte17":{"t":"But before anything, we need you to register in order to save your answers.", "y": window.innerHeight*0.7, "c": color_blanc},
} }
textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]] textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]]
textes_page_2 = [textes["texte3"], textes["texte4"], textes["texte5"], textes["texte6"], textes["texte7"]] textes_page_2 = [textes["texte3"], textes["texte4"], textes["texte5"], textes["texte6"], textes["texte7"]]
textes_page_3 = [textes["texte8"], textes["texte9"], textes["texte10"]] textes_page_3 = [textes["texte8"], textes["texte9"], textes["texte10"], textes["texte11"]]
textes_page_4 = [textes["texte11"], textes["texte12"], textes["texte13"], textes["texte14"], textes["texte15"], textes["texte16"]] textes_page_4 = [textes["texte12"], textes["texte13"], textes["texte14"], textes["texte15"], textes["texte16"], , textes["texte17"]]
texte_a_afficher = [textes["texte0"]] texte_a_afficher = [textes["texte0"]]
} }

View File

@ -138,7 +138,7 @@ function afficher_champs_inscription() {
nb_caract_max = 30 nb_caract_max = 30
x_texte_zone = (window.innerWidth/3) x_texte_zone = (window.innerWidth/3)
y_texte_zone = 200 y_texte_zone = 200
ecart_texte_zone = 160 ecart_texte_zone = 120
// Zone de texte : Firstname // Zone de texte : Firstname
var input = document.createElement('input'); var input = document.createElement('input');