From f9f86dfd149c88eedf876108c199398069d6c84e Mon Sep 17 00:00:00 2001 From: mpelissi Date: Fri, 10 Mar 2023 11:48:37 +0100 Subject: [PATCH] page annonce tuto --- static/MAIN.js | 10 ++-- static/fonctions_clavier.js | 8 ++- static/fonctions_contexte.js | 19 ++++++- static/fonctions_inscription.js | 89 ++++++++++++++++++++++++--------- 4 files changed, 94 insertions(+), 32 deletions(-) diff --git a/static/MAIN.js b/static/MAIN.js index b66bdc6..27fae19 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -250,7 +250,8 @@ function init_data(){ boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png') boutons["choix_pose"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_pose.png') boutons["retirer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_retirer.png') - boutons["commencer_choix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer.png') + boutons["commencer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer.png') + boutons["commencer_choix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer_choix.png') boutons["commencer_tuto"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer_tuto.png') boutons["raz"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_raz.png') boutons["suivant"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_suivant.png') @@ -289,9 +290,7 @@ function animate() { init_clavier_contexte() premier_tour_page_contexte = false } - traitement_contexte() - - + traitement_contexte() } //////////////////////////////////////////////////////////////////////////////// // page inscription @@ -304,8 +303,7 @@ function animate() { init_clavier_inscription() afficher_champs_inscription() premier_tour_page_inscription=false} - traitement_inscription() - + traitement_inscription() } //////////////////////////////////////////////////////////////////////////////// if (page_explication){ diff --git a/static/fonctions_clavier.js b/static/fonctions_clavier.js index ec3f724..6ff250c 100644 --- a/static/fonctions_clavier.js +++ b/static/fonctions_clavier.js @@ -24,8 +24,12 @@ function action_clavier_inscription(event){ // break;idx_i, idx_j // valider case 'Enter': - if (champs_remplis_correctment()){ - action_bouton_commencer('clavier')} + if (!inscription_finie){ + if (champs_remplis_correctment()){ + action_bouton_suivant_inscription()} + }else{ + action_bouton_commencer_inscription() + } break; } } diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index c462815..6d4d30d 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -1,3 +1,5 @@ +scale_bouton_commencer_contexte = 0.6 + function affichage_texte_contexte(){ // Texte draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 @@ -26,10 +28,25 @@ function traitement_contexte(){ //shortcuts(xyMouseMove, imgs['clavier_enter'], window.innerWidth/2 -(imgs['clavier_enter'].width/2), window.innerHeight/2 -(imgs['clavier_enter'].height/2), imgs['clavier_enter'].width, imgs['clavier_enter'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut) affichage_texte_contexte() //clignotement_rectangle(1000, 10,10,100,100, "rgb(255,0,0)") - afficher_bouton_commencer() // meme bouton que la page inscription + afficher_bouton_commencer_contexte() // 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() } } + +function afficher_bouton_commencer_contexte(){ + w_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].width + h_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].height + x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) + y_bouton_commencer = innerHeight*0.75 + // Bouton commencer + ctx.drawImage(boutons["commencer"], 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) + } +} + diff --git a/static/fonctions_inscription.js b/static/fonctions_inscription.js index 6636020..5edb291 100644 --- a/static/fonctions_inscription.js +++ b/static/fonctions_inscription.js @@ -1,4 +1,5 @@ -scale_bouton_commencer = 0.6 +scale_bouton_commencer = 1 +scale_bouton_suivant = 0.6 function affichage_inscription(){ // Texte @@ -26,13 +27,13 @@ function affichage_inscription(){ } -function afficher_bouton_commencer(){ - w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width - h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height +function afficher_bouton_commencer_inscription(){ + w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width + h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) - y_bouton_commencer = innerHeight*0.75 + y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) // Bouton commencer - ctx.drawImage(boutons["commencer"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer) + ctx.drawImage(boutons["commencer_tuto"], 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){ @@ -40,33 +41,39 @@ function afficher_bouton_commencer(){ } } -function action_bouton_commencer(){ + +function action_bouton_commencer_inscription(){ page_inscription = false //page_vues = true page_explication = true interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"}) //gestion des données personnelle de l'utilisateur - gestion_donnees_personnelles() + //gestion_donnees_personnelles() } +function afficher_bouton_suivant_inscription(){ + w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width + h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height + x_bouton_suivant = (window.innerWidth/2)-(w_bouton_suivant/2) + y_bouton_suivant = innerHeight*0.75 + // Bouton commencer + ctx.drawImage(boutons["suivant_grand"], x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant) -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() - } + // 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 action_bouton_suivant_inscription(){ + inscription_finie = true + gestion_donnees_personnelles() + ctx.clearRect(0, 0, canvas.width, canvas.height) +} + + + ////////////////////////////////////////////////////////////// /// CHAMPS INSCRIPTION @@ -91,6 +98,7 @@ function value_non_vide(V){ } function afficher_champs_inscription() { + inscription_finie = false w_text_zone = 30 h_text_zone = 42 nb_caract_min = 1 @@ -211,7 +219,42 @@ function gestion_donnees_personnelles(){ document.getElementById("SexeM").style.display = 'none' document.getElementById("SexeF").style.display = 'none' document.getElementById("SexeA").style.display = 'none' - - } + + +////////////////////////////////////////////////////////////// +/// MAIN INSCRIPTION + +function traitement_inscription(){ + if (!inscription_finie){ + affichage_inscription() + if (champs_remplis_correctment()){ + // affichage du bouton next + afficher_bouton_suivant_inscription() + // Si on clique sur le bouton Next + if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){ + action_bouton_suivant_inscription() + } + } + // les champs sont remplie et on a appuyé sur le bouton next + } else { + texte = "Are you ready to start the tutorial to learn" + texte2 = "how to use the interface of the study?" + font = "40pt Courier" + ctx.font = font + largeur = ctx.measureText(texte).width + largeur2 = ctx.measureText(texte2).width + ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 160) + //print_text(handle_text(texte, (window.innerWidth/2) - (window.innerWidth/2)/2, (window.innerHeight/4), font, (window.innerWidth/2), color="#FFFFFF", interligne=50)) + // affichager le bouton commencer + afficher_bouton_commencer_inscription() + // si on appuie + if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){ + action_bouton_commencer_inscription() + } + + + } +}