debut page contexte

html/index3D.html

@@ -29,6 +29,7 @@
         <script src="/static/OBJLoader2.js"></script>
         <script src="/static/OrbitControls.js"></script>
         <script src="/static/fonctions_utiles.js"></script>
+        <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_analyse.js"></script>

outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json

@@ -0,0 +1,9 @@
+{
+    "Analyse": {},
+    "Interactions": [
+        {
+            "time": 1677945148136,
+            "type": "start"
+        }
+    ]
+}

outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json

@@ -0,0 +1,9 @@
+{
+    "Analyse": {},
+    "Interactions": [
+        {
+            "time": 1677945150050,
+            "type": "start"
+        }
+    ]
+}

static/fonctions_contexte.js

@@ -0,0 +1,31 @@
+function affichage_texte_contexte(){
+    // Texte
+    draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
+    // 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"
+    // ctx.font = font
+    // largeur = ctx.measureText(texte).width
+    // ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
+
+    print_text(handle_text(texte, (window.innerWidth/4), 100, "36pt Courier", (window.innerWidth/2)))    
+
+    ctx.drawImage(imgs['marie'], (window.innerWidth/3), (window.innerHeight/4), imgs['marie'].width*0.7, imgs['marie'].height*0.7 )
+}
+
+
+function action_bouton_commencer_contexte(){
+    page_contexte = false 
+    page_inscription = true 
+    interactions.push({"time": new Date().getTime(), "type": "bouton commencer de contexte"+s})
+}
+
+function traitement_contexte(){
+    affichage_texte_contexte()
+    afficher_bouton_commencer() // meme bouton que la page inscription 
+    if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
+        // on passe aux choix 
+        action_bouton_commencer_contexte()     
+    }         
+}

static/fonctions_inscription.js

@@ -5,7 +5,7 @@ function affichage_inscription(){
     draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
     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 = "Are you ready ??????"
+    texte = "Give me your personal information"
     font = "58pt Courier"
     ctx.font = font
     largeur = ctx.measureText(texte).width
@@ -15,14 +15,13 @@ function affichage_inscription(){
     ctx.strokeStyle = "rgb(255, 255, 255)" 
     ctx.fillStyle = "rgb(255, 255, 255)" 
     ctx.font = "28pt Courier"
-    ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -10)
+    ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12)
-    ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 10)
+    ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 12)
-    ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 10)
+    ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12)
-    ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 10)
+    ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22)
-    ctx.fillText("Sexe:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 10)
     ctx.font = "24pt Courier"
-    ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+34)
+    ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
-    ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+34)
+    ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
 }
 
 
@@ -43,7 +42,7 @@ function afficher_bouton_commencer(){
 function action_bouton_commencer(s){
     page_inscription = false 
     page_vues = true 
-    interactions.push({"time": new Date().getTime(), "type": "bouton commencer"+s})
+    interactions.push({"time": new Date().getTime(), "type": "bouton commencer d'inscription"+s})
     
 }
 
@@ -142,8 +141,9 @@ function afficher_champs_inscription() {
     // style 
     input4.style.position = 'fixed';   
     input4.style.left = x_texte_zone + 250;
-    input4.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
+    input4.style.top = 10+ 2*ecart_texte_zone + y_texte_zone+'px';
-    input4.style.height = h_text_zone
+    input4.style.height = 20
+    input4.style.width = 20
     document.body.appendChild(input4);
     input4.focus();
 
@@ -155,8 +155,9 @@ function afficher_champs_inscription() {
     // style 
     input5.style.position = 'fixed';   
     input5.style.left = x_texte_zone + 400;
-    input5.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
+    input5.style.top = 10 + 2*ecart_texte_zone + y_texte_zone+'px';
-    input5.style.height = h_text_zone
+    input5.style.height = 20
+    input5.style.width = 20
     document.body.appendChild(input5);
     input5.focus();
 

static/interface3D.js

@@ -80,7 +80,8 @@ function init_variable(premier_appel){
     R = 2.5
 
     // Enchainement des pages
-    page_inscription = true // true
+    page_contexte = true
+    page_inscription = false // true
     page_vues = false // false
     page_analyse = false
 
@@ -89,6 +90,7 @@ function init_variable(premier_appel){
     all_canvasMins = {}
 
     // pour initialiser les claviers à chaque page
+    premier_tour_page_contexte = true
     premier_tour_page_inscription = true 
     premier_tour_page_vues = true
     premier_tour_page_analyse = true 
@@ -223,6 +225,19 @@ function setUp_3D(idx_mesh){
 ////////////////////////////////////////
 //            CLAVIER
 
+function action_clavier_contexte(event){
+    switch (event.key){
+        // selectionner pose
+        case ' ' :
+            action_bouton_commencer_contexte('clavier')
+        break;
+        // valider
+        case  'Enter':
+            action_bouton_commencer_contexte('clavier')          
+        break;
+    }
+}
+
 function action_clavier_inscription(event){
     switch (event.key){
         // selectionner pose
@@ -304,7 +319,9 @@ function action_clavier_analyse(event){
     }
 }
 
-
+function init_clavier_contexte(){
+    document.addEventListener("keydown", action_clavier_contexte)
+}
 
 function init_clavier_inscription(){
     document.addEventListener("keydown", action_clavier_inscription)
@@ -335,7 +352,7 @@ function init_data(){
     imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png')
     imgs["check"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/check.png')
     imgs["checkbox"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/empty_checkbox.png')
-    // /// Boutons
+    imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.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')
@@ -363,8 +380,20 @@ function animate() {
     // Temps à chaque animate
     time_animate = new Date().getTime()
 
+    if (page_contexte){
+        //init touche clavier
+        if (premier_tour_page_contexte){
+            init_clavier_contexte()
+            premier_tour_page_contexte = false
+        }
+        traitement_contexte()
+    }
+
     // page inscription
     if (page_inscription){
+        // on enlève les touches du clavier associé à la page inscription
+        document.removeEventListener("keydown", init_clavier_contexte)
+        //init touche clavier
         if (premier_tour_page_inscription){
             init_clavier_inscription()
             afficher_champs_inscription()
@@ -434,7 +463,7 @@ function animate() {
         traitement_fin()
     }
     // page fin
-    if (!page_inscription && !page_vues && !page_analyse){
+    if (!page_contexte && !page_inscription && !page_vues && !page_analyse){
         // on enlève les touches du clavier associé à la page vues
         document.removeEventListener("keydown", action_clavier_analyse)
         ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)