page explication

html/index3D.html

@@ -32,6 +32,7 @@
         <script src="/static/fonctions_contexte.js"></script>
         <script src="/static/fonctions_choix_vues.js"></script>
         <script src="/static/fonctions_inscription.js"></script>
+        <script src="/static/fonctions_explications.js"></script>
         <script src="/static/fonctions_analyse.js"></script>
         <script src="/static/fonctions_fin.js"></script>
         <script src="/static/interface3D.js"></script>

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)){

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)

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)
+}

static/fonctions_inscription.js

@@ -39,10 +39,13 @@ function afficher_bouton_commencer(){
     }
 }
 
-function action_bouton_commencer(s){
+function action_bouton_commencer(){
     page_inscription = false 
-    page_vues = true 
+    //page_vues = true 
-    interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"+s})
+    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("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true}
-    if (document.getElementById("Name").value.length >0){name_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){age_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<V.length; p++){
+        if (V[p] != ' '){return true}
+    }
+    return non_vide
+}
+
 function afficher_champs_inscription() {
     w_text_zone = 30
     h_text_zone = 42

static/interface3D.js

@@ -80,8 +80,9 @@ function init_variable(premier_appel){
     R = 2.5
 
     // Enchainement des pages
-    page_contexte = true
+    page_contexte = false
     page_inscription = false // true
+    page_explication = true
     page_vues = false // false
     page_analyse = false
 
@@ -92,6 +93,7 @@ function init_variable(premier_appel){
     // pour initialiser les claviers à chaque page
     premier_tour_page_contexte = true
     premier_tour_page_inscription = true 
+    premier_tour_page_explications = true
     premier_tour_page_vues = true
     premier_tour_page_analyse = true 
 
@@ -136,10 +138,10 @@ function setUp_light(rayon){
 }
 
 // idx_mesh : position du premier mesh a visuionner --> 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_i_init = Math.floor(Math.random()*8)
-    idx_j_init = Math.floor(Math.random()*5)
+    // 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<liste_poses.length; p++){affichage_texte_recap(p)}
+        // affichage 3D
+        renderer.render( scene, camera );
+        // Les poses choisies sont grisées
+        bloquer_pose(liste_poses)
+        // RAZ
+        clicked = false
+        which_clicked_fleche = -1
+        which_clicked_bouton = -1 
+        }
+////////////////////////////////////////////////////////////////////////////////
     // page de choix
     if (page_vues && num_tache <= nb_mesh){
-        //console.log("boucle choix")
+        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_vues){
-            //gestion des données personnelle de l'utilisateur
-            gestion_donnees_personnelles()
             // init clavier pour les vues
             init_clavier_vues()
-            // affichage ecran 3D
+            // affichage ecran 3D de manière aléatoire
-            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)
             premier_tour_page_vues = false
         }
         // Variable pour les fonctions
@@ -453,6 +505,7 @@ function animate() {
         which_clicked_fleche = -1
         which_clicked_bouton = -1 
     }
+////////////////////////////////////////////////////////////////////////////////
     // page analyse
     if (page_analyse){
         //console.log("boucle analyse")
@@ -466,8 +519,9 @@ function animate() {
         init_variable_analyse()
         traitement_fin()
     }
+////////////////////////////////////////////////////////////////////////////////
     // page fin
-    if (!page_contexte && !page_inscription && !page_vues && !page_analyse){
+    if (!page_contexte && !page_inscription && !page_explication && !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)
@@ -504,7 +558,7 @@ function animate() {
 
         
     }
-
+////////////////////////////////////////////////////////////////////////////////
     // Boucle sur animate
     requestAnimationFrame( animate );
     // RAZ