From f89d8b180cf41077173effa52e066944d2df3f20 Mon Sep 17 00:00:00 2001 From: mpelissi Date: Mon, 6 Mar 2023 16:02:20 +0100 Subject: [PATCH] page explication --- html/index3D.html | 1 + static/fonctions_choix_vues.js | 8 ++-- static/fonctions_contexte.js | 2 +- static/fonctions_explications.js | 19 ++++++++ static/fonctions_inscription.js | 32 +++++++++---- static/interface3D.js | 82 ++++++++++++++++++++++++++------ 6 files changed, 118 insertions(+), 26 deletions(-) create mode 100644 static/fonctions_explications.js diff --git a/html/index3D.html b/html/index3D.html index b264c3f..2eae34b 100644 --- a/html/index3D.html +++ b/html/index3D.html @@ -32,6 +32,7 @@ + diff --git a/static/fonctions_choix_vues.js b/static/fonctions_choix_vues.js index a5a3f4d..6e8dbe5 100644 --- a/static/fonctions_choix_vues.js +++ b/static/fonctions_choix_vues.js @@ -101,7 +101,7 @@ function afficher_recap(){ // Draw les images des contextes y_image = 100+(20+ H_3D/3.5)*i ctx.drawImage(canvasMins[i],W_3D+ w_recap/2.5, y_image, H_3D/3.5, H_3D/3.5) - draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, H_3D/3.5, H_3D/3.5, "rgb(255,0,0)") + //draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, H_3D/3.5, H_3D/3.5, "rgb(255,0,0)") //Fleche pour Switch haut if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) { y_fleche_h = (H_3D/3.5)*0.4 + y_image @@ -435,7 +435,8 @@ function action_bouton_valider(){ // Mesh suivant indice_mesh = indice_mesh + 1 num_tache = num_tache+1 - setUp_3D(indice_mesh) + idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5) + setUp_3D(indice_mesh, idx_i_init, idx_j_init) } // Error : il reste des vues à sélectionner @@ -471,7 +472,8 @@ function action_bouton_raz(){ if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){ init_variable(false); - setUp_3D(indice_mesh) + idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5) + setUp_3D(indice_mesh, idx_i_init, idx_j_init) interactions.push({"time": new Date().getTime(), "type": "bouton raz check"})} // click sur la croix ou ailleurs : on clear //if (clicked && is_inside(xyMouseMove,W_3D*0.35+a+2*b+ecart*7 + w_bouton +400*1/2, H_3D+dy+ecart*2 + 100, 50,50)){ diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index 77faab9..a317bb3 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -4,7 +4,7 @@ function affichage_texte_contexte(){ 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 = "58pt Courier" + font = "42pt Courier" ctx.font = font largeur = ctx.measureText(texte).width ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) diff --git a/static/fonctions_explications.js b/static/fonctions_explications.js new file mode 100644 index 0000000..d259139 --- /dev/null +++ b/static/fonctions_explications.js @@ -0,0 +1,19 @@ +function traitement_explications(){ + //ctx.clearRect(0, 0, canvas.width, canvas.height) + 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 = "Explications" + font = "42pt Courier" + ctx.font = font + largeur = ctx.measureText(texte).width + ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + + // clignotement + afficher_ecran(0,0,400,600,"rgb(255,255,255)", 1) + + +} + +function afficher_ecran(originex, originey, largeur, hauteur, couleur, alpha){ + draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha) +} diff --git a/static/fonctions_inscription.js b/static/fonctions_inscription.js index 9c8e53f..41513ce 100644 --- a/static/fonctions_inscription.js +++ b/static/fonctions_inscription.js @@ -39,11 +39,14 @@ function afficher_bouton_commencer(){ } } -function action_bouton_commencer(s){ +function action_bouton_commencer(){ page_inscription = false - page_vues = true - interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"+s}) - + //page_vues = true + page_explication = true + interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"}) + //gestion des données personnelle de l'utilisateur + gestion_donnees_personnelles() + } @@ -51,9 +54,14 @@ function traitement_inscription(){ affichage_inscription() if (champs_remplis_correctment()){ afficher_bouton_commencer() + texte = "Are you ready for the explanations?" + font = "40pt Courier" + ctx.font = font + largeur = ctx.measureText(texte).width + ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), y_bouton_commencer-20) if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){ // on passe aux choix - action_bouton_commencer("titi") + action_bouton_commencer() } } } @@ -66,13 +74,21 @@ function champs_remplis_correctment(){ name_ok = false age_ok = false sexe_ok = false - if (document.getElementById("Firstname").value.length >0){firstname_ok = true} - if (document.getElementById("Name").value.length >0){name_ok = true} - if (document.getElementById("Age").value.length >0){age_ok = true} + if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true} + if (document.getElementById("Name").value.length >0 && (value_non_vide(document.getElementById("Name").value))){name_ok = true} + if (document.getElementById("Age").value.length >0 && (value_non_vide(document.getElementById("Age").value))){age_ok = true} if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked){ sexe_ok= true} return firstname_ok && name_ok && age_ok && sexe_ok } +function value_non_vide(V){ + non_vide = false + for(let p=0;p version aléatoire ??? -function setUp_3D(idx_mesh){ +function setUp_3D(idx_mesh, idx_i_init, idx_j_init){ // Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence - idx_i_init = Math.floor(Math.random()*8) - idx_j_init = Math.floor(Math.random()*5) + // idx_i_init = Math.floor(Math.random()*8) + // idx_j_init = Math.floor(Math.random()*5) theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4)) delta_init = 2*Math.PI * (idx_i_init/8) @@ -152,6 +154,8 @@ function setUp_3D(idx_mesh){ camera.position.x = 2; camera.position.y = 0; camera.position.z = 0; + camera.position.set(R*Math.cos(delta_init)*Math.cos(theta_init), R*Math.sin(theta_init), R*Math.sin(delta_init)*Math.cos(theta_init)) // repère JS + camera.lookAt(0, 0, 0) //camera.lookAt (new THREE.Vector3(0,0,0)) scene = new THREE.Scene(); scene.add(camera) @@ -379,7 +383,7 @@ function init_data(){ function animate() { // Temps à chaque animate time_animate = new Date().getTime() - +//////////////////////////////////////////////////////////////////////////////// if (page_contexte){ //console.log("boucle contexte") //init touche clavier @@ -389,7 +393,7 @@ function animate() { } traitement_contexte() } - +//////////////////////////////////////////////////////////////////////////////// // page inscription if (page_inscription){ //console.log("boucle inscription") @@ -402,20 +406,68 @@ function animate() { premier_tour_page_inscription=false} traitement_inscription() } - +//////////////////////////////////////////////////////////////////////////////// + if (page_explication){ + console.log("boucle choix") + // on enlève les touches du clavier associé à la page inscription + document.removeEventListener("keydown", action_clavier_inscription) + //init touche clavier + if(premier_tour_page_explications){ + // init clavier pour les vues + //init_clavier_vues() + // affichage ecran 3D de manière aléatoire + setUp_3D(indice_mesh, 2, 2) + premier_tour_page_explications = false + } + // Variable pour les fonctions + init_variable_fonction(boutons, imgs) + // Nettoyage fleche + ctx.clearRect(0, 0, canvas.width, canvas.height) + // Affichage bouton RAZ + if (bouton_raz_clicked == true){action_bouton_raz()} + // Affichage message pop + if (Object.keys(texte_temporaire).length >0){ + if (time_animate > texte_temporaire.t_end){texte_temporaire = {}} + else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, " 18pt Courier", longueur_max_error, "#118AB2"))} + } + // progress bar + progress_bar(num_tache, nb_mesh) + // Affichage fleche + afficher_fleche(imgs) + // affichage de sboutons + afficher_bouton(boutons) + if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")} + // traitement fleche (surval + click) + traitement_explications() + // traitement bouton : (survol + click) + //traitement_bouton() + // afficher + maj du recap de pose choisie : affichage des vue des poses + afficher_recap() + // Affichage texte recap + for (p=0; p