page contexte ok et page avertissement
This commit is contained in:
mpelissi
parent
dc10e8b95a
commit
02045e3481
|
|
@ -30,6 +30,7 @@
|
|||
<script src="/static/OrbitControls.js"></script>
|
||||
<script src="/static/fonctions_utiles.js"></script>
|
||||
<script src="/static/fonctions_clavier.js"></script>
|
||||
<script src="/static/fonctions_avertissement.js"></script>
|
||||
<script src="/static/fonctions_contexte.js"></script>
|
||||
<script src="/static/fonctions_choix_vues.js"></script>
|
||||
<script src="/static/fonctions_inscription.js"></script>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,8 @@ function init_variable(premier_appel){
|
|||
|
||||
// Enchainement des pages
|
||||
if (premier_appel){
|
||||
page_contexte = true
|
||||
page_avertissement = true
|
||||
page_contexte = false
|
||||
page_inscription = false
|
||||
page_explication = false
|
||||
page_warning = false
|
||||
|
|
@ -94,6 +95,7 @@ function init_variable(premier_appel){
|
|||
page_analyse = false
|
||||
// cas raz : on recommence juste la partie vues
|
||||
} else {
|
||||
page_avertissement = false
|
||||
page_contexte = false
|
||||
page_inscription = false // true
|
||||
page_explication = false
|
||||
|
|
@ -108,6 +110,7 @@ function init_variable(premier_appel){
|
|||
all_canvasMins = {}
|
||||
|
||||
// pour initialiser les claviers à chaque page
|
||||
premier_tour_page_avertissements = true
|
||||
premier_tour_page_contexte = true
|
||||
premier_tour_page_inscription = true
|
||||
premier_tour_page_explications = true
|
||||
|
|
@ -275,11 +278,12 @@ 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["exemple1"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/exemple3.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')
|
||||
imgs["avertissement"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Autres/avertissement2.png')
|
||||
boutons = {}
|
||||
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_reinitialiser.png')
|
||||
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png')
|
||||
|
|
@ -320,6 +324,16 @@ function animate() {
|
|||
w_Bshortcut = ratio_shorcut*imgs["clavier_vues"].width
|
||||
x_Bshortcut = 10
|
||||
y_Bshortcut = window.innerHeight-h_Bshortcut-10
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
if (page_avertissement){
|
||||
if (premier_tour_page_avertissements){
|
||||
//init_clavier_avertissement()
|
||||
init_textes_avertissements()
|
||||
premier_tour_page_avertissements = false
|
||||
}
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
traitement_avertissements()
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
if (page_contexte){
|
||||
//console.log("boucle contexte")
|
||||
|
|
@ -493,7 +507,7 @@ function animate() {
|
|||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// page fin
|
||||
if (!page_contexte && !page_inscription && !page_explication && !page_warning && !page_explication_bis && !page_vues && !page_explication_analyse && !page_analyse){
|
||||
if (!page_avertissement && !page_contexte && !page_inscription && !page_explication && !page_warning && !page_explication_bis && !page_vues && !page_explication_analyse && !page_analyse){
|
||||
//console.log("boucle fin")
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_analyse)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
//scale_bouton_commencer_avertissement = 0.6
|
||||
h_bouton_avertissement = 0.1*window.innerHeight
|
||||
num_avertissement = 0
|
||||
|
||||
|
||||
function affichage_texte_avertissement(texte, font, color, xt, yt, l_max_texte){
|
||||
// Texte
|
||||
ctx.strokeStyle = color // Pour que le contour soit rouge
|
||||
ctx.fillStyle = color // Pour que l'intérieur soit bleu
|
||||
ctx.font = font
|
||||
print_text(handle_text(texte, xt, yt, font, l_max_texte, color="#FFFFFF", interligne=0.045*window.innerHeight), false)
|
||||
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
///// BOUTON COMMENCER
|
||||
|
||||
function action_bouton_commencer_avertissement(){
|
||||
page_avertissement = false
|
||||
page_contexte = true
|
||||
//page_vues = true
|
||||
interactions.push({"time": new Date().getTime(), "type": "Fin avertissement"})
|
||||
}
|
||||
|
||||
function afficher_bouton_commencer_avertissement(){
|
||||
w_bouton_commencer = w_bouton_suivant
|
||||
h_bouton_commencer = h_bouton_suivant
|
||||
x_bouton_commencer = x_bouton_suivant
|
||||
y_bouton_commencer = y_bouton_suivant
|
||||
// Bouton commencer
|
||||
ctx.drawImage(boutons["commencer_petit"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
|
||||
|
||||
// Survol
|
||||
if(xyMouseMove.x >= x_bouton_commencer && xyMouseMove.x <= x_bouton_commencer + w_bouton_commencer && xyMouseMove.y > y_bouton_commencer && xyMouseMove.y < y_bouton_commencer + h_bouton_commencer){
|
||||
draw_rectangle(x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
///// BOUTON Next
|
||||
|
||||
function action_bouton_suivant_avertissement(){
|
||||
num_avertissement = num_avertissement+1
|
||||
avertissements_a_afficher.push(avertissements["texte"+num_avertissement])
|
||||
|
||||
}
|
||||
|
||||
function action_bouton_avant_avertissement(){
|
||||
if (num_avertissement>0){
|
||||
avertissements_a_afficher.pop()}
|
||||
num_avertissement = num_avertissement-1
|
||||
}
|
||||
|
||||
function afficher_bouton_suivant_avertissement(){
|
||||
ratio_bouton_avertissement = h_bouton_avertissement/boutons["suivant"].height
|
||||
w_bouton_suivant = ratio_bouton_avertissement*boutons["suivant"].width
|
||||
h_bouton_suivant = h_bouton_contexte
|
||||
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_avertissement(){
|
||||
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_avertissements(){
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
|
||||
// variable position
|
||||
x_texte = window.innerWidth*(1/10)
|
||||
w_texte = window.innerWidth*(8/10)
|
||||
font_texte = (0.012*window.innerWidth)+"pt Courier"
|
||||
// titre commun à chaque page
|
||||
affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F")
|
||||
// affichage warning
|
||||
w_avertissement = 0.15*window.innerHeight
|
||||
h_avertissement = w_avertissement
|
||||
ctx.drawImage(imgs['avertissement'], window.innerWidth/2 - w_avertissement/2, avertissements['texte0'].y - (h_avertissement*1.4), w_avertissement, h_avertissement )
|
||||
ctx.drawImage(imgs['avertissement'], window.innerWidth/4 - w_avertissement/2, avertissements['texte0'].y - (h_avertissement*1.4), w_avertissement, h_avertissement )
|
||||
ctx.drawImage(imgs['avertissement'], window.innerWidth*(3/4) - w_avertissement/2, avertissements['texte0'].y - (h_avertissement*1.4), w_avertissement, h_avertissement )
|
||||
// affichage texte
|
||||
for(let p=0; p<avertissements_a_afficher.length; p++){
|
||||
dict_texte = avertissements_a_afficher[p]
|
||||
affichage_texte_avertissement(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
|
||||
}
|
||||
|
||||
if (num_avertissement < (avertissements_page_1.length)-1){
|
||||
// affichage bouton next
|
||||
afficher_bouton_suivant_avertissement()
|
||||
// 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_avertissement()
|
||||
}
|
||||
} else {
|
||||
// affichage bouton next
|
||||
afficher_bouton_commencer_avertissement()
|
||||
// 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_avertissement()
|
||||
}
|
||||
}
|
||||
|
||||
//affichage bouton previous dès le deuxièeme texte
|
||||
if(num_avertissement > 0){
|
||||
// affichage bouton next
|
||||
afficher_bouton_avant_avertissement()
|
||||
//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_avertissement()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
///// Textes
|
||||
|
||||
function init_textes_avertissements(){
|
||||
y_titre = 50
|
||||
titre = "BEFORE TO START --> User study : Best view selection"
|
||||
color_blanc = "rgb(255,255,255)"
|
||||
color_rouge = "rgb(239, 71, 111)"
|
||||
avertissements={
|
||||
"texte0":{"t": "Before we begin, make sure your browser window is big enough, and if you are using multiple displays, place your window on the display you will work on.", "y": window.innerHeight*0.32, "c": color_blanc},
|
||||
"texte1":{"t": "If necessary, you can refresh this page to resize everything but doing so will lose all of your progress, so make sure everything feels right before proceding.", "y":window.innerHeight*0.52, "c": color_blanc},
|
||||
"texte2":{"t":"All your data will be sent at the very end, so losing your progress will not mess up our data, but you will have do start from the begining.", "y":window.innerHeight*0.72, "c": color_blanc},
|
||||
}
|
||||
|
||||
avertissements_page_1 = [avertissements["texte0"], avertissements["texte1"], avertissements["texte2"]]
|
||||
avertissements_a_afficher = [avertissements["texte0"]]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
//scale_bouton_commencer_contexte = 0.6
|
||||
h_bouton_contexte = 0.1*window.innerHeight
|
||||
num_texte = 0
|
||||
h_bouton_contexte = 0.1*window.innerHeight
|
||||
|
||||
|
||||
|
||||
function affichage_texte_contexte(texte, font, color, xt, yt, l_max_texte){
|
||||
|
|
@ -113,7 +114,7 @@ function traitement_contexte(){
|
|||
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*(5/10)}
|
||||
if ((num_texte == 10 || num_texte == 11) && (p == (textes_page_3.length)-2)){w_texte = window.innerWidth*(5/10)}
|
||||
//if ((num_texte == 10 || num_texte == 11) && (p == (textes_page_3.length)-2)){w_texte = window.innerWidth*(5/10)}
|
||||
affichage_texte_contexte(dict_texte.t, font_texte, dict_texte.c, x_texte, dict_texte.y, w_texte)
|
||||
w_texte = window.innerWidth*(8/10)
|
||||
}
|
||||
|
|
@ -154,9 +155,13 @@ function traitement_contexte(){
|
|||
ctx.drawImage(imgs['exemple2'], x_bouton_suivant + w_bouton_suivant + 100, (textes["texte6"].y + textes["texte5"].y)/2 , 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 + textes["texte11"].y)/2, window.innerWidth*(4/8))
|
||||
ctx.drawImage(imgs['exemple1'], window.innerWidth*(6/10)+20 , textes["texte10"].y - 50, window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
ctx.drawImage(imgs['exemple2'], window.innerWidth*(6/10) + window.innerWidth*(1/8) + 40, textes["texte10"].y - 50 , window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
//affichage_texte_contexte("Which viewpoint would you choose between both?", font_texte, "rgb(255, 209, 102)", x_texte, (textes["texte10"].y + textes["texte11"].y)/2, window.innerWidth*(4/8))
|
||||
//ctx.drawImage(imgs['exemple1'], window.innerWidth*(6/10)+20 , textes["texte10"].y - 50, window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
//ctx.drawImage(imgs['exemple2'], window.innerWidth*(6/10) + window.innerWidth*(1/8) + 40, textes["texte10"].y - 50 , window.innerWidth*(1/8), window.innerWidth*(1/8))
|
||||
w_exemple = window.innerWidth*(1/8)
|
||||
h_exemple = w_exemple
|
||||
ctx.drawImage(imgs['exemple1'], window.innerWidth/2 - w_exemple/2 -10, (textes["texte10"].y + textes["texte11"].y)/2 - h_exemple/2 , w_exemple, h_exemple)
|
||||
ctx.drawImage(imgs['exemple2'], window.innerWidth/2 + w_exemple/2 +10, (textes["texte10"].y + textes["texte11"].y)/2 -h_exemple/2, w_exemple, h_exemple)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -180,12 +185,13 @@ textes={
|
|||
"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},
|
||||
"texte8":{"t":"What is a good viewpoint?", "y": window.innerHeight*0.15, "c": color_rouge},
|
||||
"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":"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":"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},
|
||||
"texte9":{"t":"> A good viewpoint is one that offers a relevant view of the object. The one that best showcases the object.", "y": window.innerHeight*0.2, "c": color_blanc},//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":"Let's imagine that you have to create an advertising display to promote the movie Dances with Wolves.", "y": window.innerHeight*0.35, "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},
|
||||
"texte11": {"t":"Which viewpoint would you choose between both?", "y": window.innerHeight*0.8, "c": "rgb(255, 209, 102)"},
|
||||
"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":"- You will be presented "+nb_mesh+" different objects.", "y": window.innerHeight*0.25, "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},
|
||||
"texte14":{"t":"- For each of them, you will chose a viewpoint you find most representative of the given object. You will have to do this "+nb_choix_demande+" times.", "y": window.innerHeight*0.35, "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":"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},
|
||||
|
|
|
|||
Loading…
Reference in New Issue