From 02045e348184637007f3f2c7bc2650b7fcd47a76 Mon Sep 17 00:00:00 2001 From: mpelissi Date: Wed, 22 Mar 2023 09:47:27 +0100 Subject: [PATCH] page contexte ok et page avertissement --- html/index3D.html | 1 + static/MAIN.js | 20 +++- static/fonctions_avertissement.js | 161 ++++++++++++++++++++++++++++++ static/fonctions_contexte.js | 24 +++-- 4 files changed, 194 insertions(+), 12 deletions(-) create mode 100644 static/fonctions_avertissement.js diff --git a/html/index3D.html b/html/index3D.html index e03fab9..8825539 100644 --- a/html/index3D.html +++ b/html/index3D.html @@ -30,6 +30,7 @@ + diff --git a/static/MAIN.js b/static/MAIN.js index ecaeff5..c2ca0bd 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -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) diff --git a/static/fonctions_avertissement.js b/static/fonctions_avertissement.js new file mode 100644 index 0000000..be1570b --- /dev/null +++ b/static/fonctions_avertissement.js @@ -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 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"]] +} + + + + diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index 53326cc..11842fb 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -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 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},