This commit is contained in:
mpelissi 2023-03-11 21:20:49 +01:00
parent abe3be81e0
commit 6d05f894ac
8 changed files with 172 additions and 29 deletions

3
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules node_modules
grahics/Tutorial/wolf* grahics/Tutorial/wolf*
graphics/Tutorial/wolf*.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -304,9 +304,10 @@ function animate() {
//init touche clavier //init touche clavier
if (premier_tour_page_contexte){ if (premier_tour_page_contexte){
init_clavier_contexte() init_clavier_contexte()
init_textes_contexte()
premier_tour_page_contexte = false premier_tour_page_contexte = false
} }
traitement_contexte() traitement_contexte()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page inscription // page inscription
@ -369,6 +370,7 @@ function animate() {
// bouton entr ele tutorial et l'étude // bouton entr ele tutorial et l'étude
if (page_explication_bis){ if (page_explication_bis){
commencer_etude() commencer_etude()
ctx.clearRect(0, 0, canvas.width, canvas.height)
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page de choix // page de choix

View File

@ -10,7 +10,8 @@ function action_clavier_contexte(event){
// break; // break;
// valider // valider
case 'Enter': case 'Enter':
action_bouton_commencer_contexte('clavier') if (fin_conexte){action_bouton_commencer_contexte()}
else{action_bouton_suivant_commencer()}
break; break;
} }
} }

View File

@ -1,21 +1,42 @@
scale_bouton_commencer_contexte = 0.6 scale_bouton_commencer_contexte = 0.6
num_texte = 0
function affichage_texte_contexte(){ // 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 // Texte
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 ctx.strokeStyle = color // Pour que le contour soit rouge
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge ctx.fillStyle = color // Pour que l'intérieur soit bleu
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 ctx.font = font
largeur = ctx.measureText(texte).width print_text(handle_text(texte, xt, yt, font, l_max_texte), false)
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_titre_contexte(titre, font, color, yt){
ctx.strokeStyle =color
ctx.fillStyle =color
ctx.font = font
largeur = ctx.measureText(titre).width
// au milieu
ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
}
////////////////////////////////////////////////////////////////////
///// BOUTON COMMENCER
function action_bouton_commencer_contexte(){ function action_bouton_commencer_contexte(){
page_contexte = false page_contexte = false
@ -24,18 +45,6 @@ function action_bouton_commencer_contexte(){
interactions.push({"time": new Date().getTime(), "type": "Fin contexte - Début inscription"}) interactions.push({"time": new Date().getTime(), "type": "Fin contexte - Début inscription"})
} }
function traitement_contexte(){
//shortcuts(xyMouseMove, imgs['clavier_enter'], window.innerWidth/2 -(imgs['clavier_enter'].width/2), window.innerHeight/2 -(imgs['clavier_enter'].height/2), imgs['clavier_enter'].width, imgs['clavier_enter'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
affichage_texte_contexte()
//clignotement_rectangle(1000, 10,10,100,100, "rgb(255,0,0)")
afficher_bouton_commencer_contexte() // meme bouton que la page inscription
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
// on passe aux choix
action_bouton_commencer_contexte()
}
}
function afficher_bouton_commencer_contexte(){ function afficher_bouton_commencer_contexte(){
w_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].width w_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].width
h_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].height h_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].height
@ -50,3 +59,130 @@ function afficher_bouton_commencer_contexte(){
} }
} }
////////////////////////////////////////////////////////////////////
///// BOUTON Next
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 = []}
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}
}
function afficher_bouton_suivant_contexte(){
w_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].width
h_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].height
x_bouton_suivant = (window.innerWidth/2)+ 5
y_bouton_suivant = window.innerHeight - h_bouton_suivant - 20
// Bouton commencer
ctx.drawImage(boutons["suivant"], x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)
// Survol
if(xyMouseMove.x >= x_bouton_suivant && xyMouseMove.x <= x_bouton_suivant + w_bouton_suivant && xyMouseMove.y > y_bouton_suivant && xyMouseMove.y < y_bouton_suivant + h_bouton_suivant){
draw_rectangle(x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant, "rgb(200, 200, 200)", 0.6)
}
}
function afficher_bouton_avant_contexte(){
w_bouton_avant = w_bouton_suivant
h_bouton_avant = h_bouton_suivant
x_bouton_avant = (window.innerWidth/2)-(w_bouton_avant) - 5
y_bouton_avant = y_bouton_suivant
// Bouton commencer
ctx.drawImage(boutons["avant"], x_bouton_avant, y_bouton_avant , w_bouton_avant, h_bouton_avant)
// Survol
if(xyMouseMove.x >= x_bouton_avant && xyMouseMove.x <= x_bouton_avant + w_bouton_avant && xyMouseMove.y > y_bouton_avant && xyMouseMove.y < y_bouton_avant + h_bouton_avant){
draw_rectangle(x_bouton_avant, y_bouton_avant , w_bouton_avant, h_bouton_avant, "rgb(200, 200, 200)", 0.6)
}
}
////////////////////////////////////////////////////////////////////
///// MAIN
function traitement_contexte(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
// variable position
x_texte = window.innerWidth*(1/8)
w_texte = window.innerWidth*(6/8)
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 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()}
//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()
}
}
}
////////////////////////////////////////////////////////////////////
///// Textes
function init_textes_contexte(){
y_titre = 50
titre = "User study : Best view selection"
color_blanc = "rgb(255,255,255)"
color_rouge = "rgb(239, 71, 111)"
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},
"texte1":{"t":"You are currently participating in my user study which will allow me to collect data. 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},
"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},
"texte3":{"t":"What is a viewpoint? ", "y": window.innerHeight*0.15, "c": color_rouge},
"texte4":{"t":"> A point of view of a object corresponds to the position from which we observe a 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. Some of them, are not visible because they form the 'back' of the object.", "y": window.innerHeight*0.32, "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},
"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},
"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},
}
textes_page_1 = [textes["texte0"], textes["texte1"], textes["texte2"]]
textes_page_2 = [textes["texte3"], textes["texte4"], textes["texte5"], textes["texte6"], textes["texte7"]]
textes_page_3 = [textes["texte8"], textes["texte9"], textes["texte10"]]
textes_page_4 = [textes["texte11"], textes["texte12"], textes["texte13"], textes["texte14"], textes["texte15"]]
texte_a_afficher = [textes["texte0"]]
}

View File

@ -247,6 +247,8 @@ function traitement_inscription(){
texte = "Are you ready to start the tutorial to learn" texte = "Are you ready to start the tutorial to learn"
texte2 = "how to use the interface of the study?" texte2 = "how to use the interface of the study?"
font = "40pt Courier" font = "40pt Courier"
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.font = font ctx.font = font
largeur = ctx.measureText(texte).width largeur = ctx.measureText(texte).width
largeur2 = ctx.measureText(texte2).width largeur2 = ctx.measureText(texte2).width

View File

@ -65,13 +65,14 @@ function afficher_ecran(originex, originey, largeur, hauteur, couleur, alpha){
} }
function print_text(dialogue) { function print_text(dialogue, c= true) {
s = dialogue.texte s = dialogue.texte
for (let i = 0; i < s.length; i++) { for (let i = 0; i < s.length; i++) {
if (s[i].lettre !== undefined) { if (s[i].lettre !== undefined) {
if (c){
ctx.strokeStyle = s[i].stroke ctx.strokeStyle = s[i].stroke
ctx.fillStyle = s[i].fill ctx.fillStyle = s[i].fill}
ctx.strokeText(s[i].lettre, s[i].x, s[i].y) ctx.strokeText(s[i].lettre, s[i].x, s[i].y)
ctx.fillText(s[i].lettre, s[i].x, s[i].y) ctx.fillText(s[i].lettre, s[i].x, s[i].y)
} }