From 222b8be8640d9f7645530cf4ea5fcf7a5fd8e3c3 Mon Sep 17 00:00:00 2001 From: mpelissi Date: Sat, 4 Mar 2023 17:17:07 +0100 Subject: [PATCH] debut page contexte --- html/index3D.html | 1 + .../75a6b5b2-53f8-4983-9a87-19396e44412c.json | 9 +++++ .../8eaf6ec8-2a85-485b-879b-a8bf26507adb.json | 9 +++++ static/fonctions_contexte.js | 31 ++++++++++++++++ static/fonctions_inscription.js | 27 +++++++------- static/interface3D.js | 37 +++++++++++++++++-- 6 files changed, 97 insertions(+), 17 deletions(-) create mode 100644 outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json create mode 100644 outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json create mode 100644 static/fonctions_contexte.js diff --git a/html/index3D.html b/html/index3D.html index 021e1ce..b264c3f 100644 --- a/html/index3D.html +++ b/html/index3D.html @@ -29,6 +29,7 @@ + diff --git a/outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json b/outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json new file mode 100644 index 0000000..77d06a1 --- /dev/null +++ b/outputs/75a6b5b2-53f8-4983-9a87-19396e44412c.json @@ -0,0 +1,9 @@ +{ + "Analyse": {}, + "Interactions": [ + { + "time": 1677945148136, + "type": "start" + } + ] +} \ No newline at end of file diff --git a/outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json b/outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json new file mode 100644 index 0000000..8a7205b --- /dev/null +++ b/outputs/8eaf6ec8-2a85-485b-879b-a8bf26507adb.json @@ -0,0 +1,9 @@ +{ + "Analyse": {}, + "Interactions": [ + { + "time": 1677945150050, + "type": "start" + } + ] +} \ No newline at end of file diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js new file mode 100644 index 0000000..2dd6bbd --- /dev/null +++ b/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() + } +} diff --git a/static/fonctions_inscription.js b/static/fonctions_inscription.js index 0d6a5a2..9c8e53f 100644 --- a/static/fonctions_inscription.js +++ b/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("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 10) - ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 10) - 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) - 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) - 12) + 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) - 22) ctx.font = "24pt Courier" - ctx.fillText("Male", parseInt(document.getElementById("SexeM").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)+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)+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.height = h_text_zone + input4.style.top = 10+ 2*ecart_texte_zone + y_texte_zone+'px'; + 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.height = h_text_zone + input5.style.top = 10 + 2*ecart_texte_zone + y_texte_zone+'px'; + input5.style.height = 20 + input5.style.width = 20 document.body.appendChild(input5); input5.focus(); diff --git a/static/interface3D.js b/static/interface3D.js index 24de92f..a242f94 100644 --- a/static/interface3D.js +++ b/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)