From dcc11394085d51b92042e4603c5c0895a0d57d6e Mon Sep 17 00:00:00 2001 From: mpelissi Date: Mon, 13 Mar 2023 10:04:46 +0100 Subject: [PATCH] page warning ok --- .gitignore | 3 +- html/index3D.html | 1 + static/MAIN.js | 20 +++- static/fonctions_explications.js | 15 ++- static/fonctions_warnings.js | 165 +++++++++++++++++++++++++++++++ 5 files changed, 195 insertions(+), 9 deletions(-) create mode 100644 static/fonctions_warnings.js diff --git a/.gitignore b/.gitignore index 8d2bd85..aa5584b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules grahics/Tutorial/wolf* -graphics/Tutorial/wolf*.png \ No newline at end of file +graphics/Tutorial/wolf*.png +outputs/* \ No newline at end of file diff --git a/html/index3D.html b/html/index3D.html index a17906a..d26d230 100644 --- a/html/index3D.html +++ b/html/index3D.html @@ -34,6 +34,7 @@ + diff --git a/static/MAIN.js b/static/MAIN.js index b54a81f..a384d48 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -86,6 +86,7 @@ function init_variable(premier_appel){ page_contexte = true page_inscription = false // true page_explication = false + page_warning = false page_explication_bis = false page_vues = false // false page_analyse = false @@ -94,6 +95,7 @@ function init_variable(premier_appel){ page_contexte = false page_inscription = false // true page_explication = false + page_warning = false page_explication_bis = false page_vues = true // false page_analyse = false @@ -107,6 +109,7 @@ function init_variable(premier_appel){ premier_tour_page_contexte = true premier_tour_page_inscription = true premier_tour_page_explications = true + premier_tour_page_warning = true premier_tour_page_vues = true premier_tour_page_analyse = true @@ -380,12 +383,19 @@ function animate() { which_clicked_fleche = -1 which_clicked_bouton = -1 } - // bouton entr ele tutorial et l'étude + // page warning + if(page_warning){ + console.log("warning") + if (premier_tour_page_warning){ + init_textes_warnings() + premier_tour_page_warning = false} + traitement_warnings()} + + // bouton entr le tutorial et l'étude if (page_explication_bis){ ctx.clearRect(0, 0, canvas.width, canvas.height) //console.log("boucle explication2") - commencer_etude() - + commencer_etude() } //////////////////////////////////////////////////////////////////////////////// // page de choix @@ -455,7 +465,7 @@ function animate() { } //////////////////////////////////////////////////////////////////////////////// // page fin - if (!page_contexte && !page_inscription && !page_explication && !page_explication_bis && !page_vues && !page_analyse){ + if (!page_contexte && !page_inscription && !page_explication && !page_warning && !page_explication_bis && !page_vues && !page_analyse){ //console.log("boucle fin") // on enlève les touches du clavier associé à la page vues document.removeEventListener("keydown", action_clavier_analyse) @@ -478,7 +488,7 @@ function animate() { // Si la requête est terminée, et que la réponse n'est pas une erreur. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); - message_fin = "> It's done." + message_fin = "> It's done. You can close the web page." //print_text(handle_text(message_fin, (window.innerWidth/2)-450, innerHeight/2+150 , "26pt Courier", 1000)) envoie_termine = true affichage_texte_fin(message_fin, envoie_termine) diff --git a/static/fonctions_explications.js b/static/fonctions_explications.js index a387fe8..97aff84 100644 --- a/static/fonctions_explications.js +++ b/static/fonctions_explications.js @@ -473,7 +473,8 @@ function action_fin_explication(){ ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height) } page_explication = false - page_explication_bis = true + //page_explication_bis = true + page_warning = true interactions.push({"time": new Date().getTime(), "type": "Fin explication"}) } @@ -532,8 +533,10 @@ function action_clavier_explication(event){ action_bouton_pose() action_suivante() } break; + // valider - case 'Enter': + case 'Enter': + console.log('clavier') if (num_action == nb_action && page_explication){ action_fin_explication() } @@ -541,7 +544,13 @@ function action_clavier_explication(event){ action_bouton_commencer_explication() } if (num_action < nb_action && condition_suivant.type =="bouton"){ - action_suivante()} + action_suivante()} + + if (page_warning && num_warning < (warnings_page_1.length-1)){ + action_bouton_suivant_warning()} + if (page_warning && num_warning == (warnings_page_1.length-1)){ + action_bouton_commencer_warning() + } break; case 'Backspace': diff --git a/static/fonctions_warnings.js b/static/fonctions_warnings.js new file mode 100644 index 0000000..9855c77 --- /dev/null +++ b/static/fonctions_warnings.js @@ -0,0 +1,165 @@ +scale_bouton_commencer_warning = 0.6 +num_warning = 0 + + +function affichage_texte_warning(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), false) + +} + +function affichage_titre_warning(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_warning(){ + page_warning = false + page_explication_bis = true + //page_vues = true + interactions.push({"time": new Date().getTime(), "type": "Fin warning"}) +} + +function afficher_bouton_commencer_warning(){ + 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["suivant"], 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_warning(){ + num_warning = num_warning+1 + warnings_a_afficher.push(warnings["texte"+num_warning]) + +} + +function action_bouton_avant_warning(){ + if (num_warning>0){ + warnings_a_afficher.pop()} + num_warning = num_warning-1 +} + +function afficher_bouton_suivant_warning(){ + w_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].width + h_bouton_suivant = scale_bouton_commencer_warning*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_warning(){ + 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_warnings(){ + 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/8) + w_texte = window.innerWidth*(6/8) + font_texte = (0.012*window.innerWidth)+"pt Courier" + + // titre commun à chaque page + affichage_titre_warning(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre) + // affichage texte + for(let p=0; p 0){ + // affichage bouton next + afficher_bouton_avant_warning() + //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_warning() + } + } + + + +} + + +//////////////////////////////////////////////////////////////////// +///// Textes + +function init_textes_warnings(){ +y_titre = 50 +titre = "Warnings" +color_blanc = "rgb(255,255,255)" +color_rouge = "rgb(239, 71, 111)" +warnings={ +"texte0":{"t":"The following is a list of warnings to keep in mind during the study:", "y": window.innerHeight*0.15, "c": color_blanc}, +"texte1":{"t":"- When you have launched the web page, you should not change the size of the web page or computer screen. Changing the size may cause annoyance.", "y":window.innerHeight*0.25, "c": color_blanc}, +"texte2":{"t":"- The loading time of the objects can take time. The 3D screen may be completely black for a few seconds. Be patient, the objects will appear.", "y":window.innerHeight*0.38, "c": color_blanc}, +"texte3":{"t":"- Once you have finished the study, wait a few seconds before leaving the web page, to allow time for the data to fully commit to the server. A message will indicate when the registration is complete.", "y": window.innerHeight*0.52, "c": color_blanc}, +"texte4":{"t":"- If during the study there are some problems that you can't solve with the interface features, you can refresh the web page.All your data will be lost and you will have to start all over again. ", "y": window.innerHeight*0.68, "c": color_blanc}, +} + +warnings_page_1 = [warnings["texte0"], warnings["texte1"], warnings["texte2"], warnings["texte3"], warnings["texte4"]] +warnings_a_afficher = [warnings["texte0"]] +} + + + +