From 36f4bf5ba312413a4d7845a00afd6ed5a1020216 Mon Sep 17 00:00:00 2001 From: mpelissi Date: Tue, 14 Mar 2023 15:59:38 +0100 Subject: [PATCH] =?UTF-8?q?adaptation=20=C3=A0=20tous=20les=20ecrans?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 - ...n => pour_avoir_le_dosisier_non_vide.json} | 370 ++++++++---------- static/MAIN.js | 21 +- static/fonctions_choix_vues.js | 71 ++-- static/fonctions_contexte.js | 47 +-- static/fonctions_explications.js | 172 ++++---- static/fonctions_fin.js | 68 ++-- static/fonctions_inscription.js | 74 ++-- static/fonctions_utiles.js | 13 +- static/fonctions_warnings.js | 34 +- 10 files changed, 434 insertions(+), 437 deletions(-) rename outputs/{57606205-30be-4358-9680-0bc9f51042f4.json => pour_avoir_le_dosisier_non_vide.json} (55%) diff --git a/.gitignore b/.gitignore index aa5584b..92cb98f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ node_modules grahics/Tutorial/wolf* graphics/Tutorial/wolf*.png -outputs/* \ No newline at end of file diff --git a/outputs/57606205-30be-4358-9680-0bc9f51042f4.json b/outputs/pour_avoir_le_dosisier_non_vide.json similarity index 55% rename from outputs/57606205-30be-4358-9680-0bc9f51042f4.json rename to outputs/pour_avoir_le_dosisier_non_vide.json index 95ff6dd..ebe5bb2 100644 --- a/outputs/57606205-30be-4358-9680-0bc9f51042f4.json +++ b/outputs/pour_avoir_le_dosisier_non_vide.json @@ -1,145 +1,136 @@ { "identite": { - "Firstname": "ll", - "Name": "ll", + "Firstname": "k", + "Name": "k", "Age": "1", "Sexe": "M" }, "tache_N1": { - "obj_file": "camel_update_user_study_normed.obj", - "mesh": "camel", - "position_init_idx_i": 4, - "position_init_idx_j": 0, - "theta_init": 1.5707963267948966, - "delta_init": 3.141592653589793, + "obj_file": "gorgoile_update_user_study_centered_normed.obj", + "mesh": "gorgoile", + "position_init_idx_i": 5, + "position_init_idx_j": 1, + "theta_init": 0.7853981633974483, + "delta_init": 3.9269908169872414, "choix_poses": [ [ "choix1", - 1.5707963267948966, - 3.141592653589793, - 4, - 0 + 0.7853981633974483, + 3.9269908169872414, + 5, + 1 ], [ "choix2", - 1.5707963267948966, - 2.356194490192345, - 3, - 0 + 0.7853981633974483, + 3.141592653589793, + 4, + 1 ], [ "choix3", - 1.5707963267948966, - 1.5707963267948966, - 2, - 0 + 0.7853981633974483, + 2.356194490192345, + 3, + 1 ] ] }, "tache_N2": { - "obj_file": "dragon_update_user_study_normed.obj", - "mesh": "dragon", - "position_init_idx_i": 3, - "position_init_idx_j": 3, - "theta_init": -0.7853981633974483, - "delta_init": 2.356194490192345, + "obj_file": "camel_update_user_study_normed.obj", + "mesh": "camel", + "position_init_idx_i": 5, + "position_init_idx_j": 1, + "theta_init": 0.7853981633974483, + "delta_init": 3.9269908169872414, "choix_poses": [ [ "choix1", + 0.7853981633974483, + 3.9269908169872414, + 5, + 1 + ], + [ + "choix2", + 0.7853981633974483, + 3.141592653589793, + 4, + 1 + ], + [ + "choix3", + 0.7853981633974483, + 2.356194490192345, + 3, + 1 + ] + ] + }, + "tache_N3": { + "obj_file": "dragon_update_user_study_normed.obj", + "mesh": "dragon", + "position_init_idx_i": 4, + "position_init_idx_j": 3, + "theta_init": -0.7853981633974483, + "delta_init": 3.141592653589793, + "choix_poses": [ + [ + "choix1", + -0.7853981633974483, + 3.141592653589793, + 4, + 3 + ], + [ + "choix2", -0.7853981633974483, 2.356194490192345, 3, 3 ], [ - "choix2", + "choix3", -0.7853981633974483, 1.5707963267948966, 2, 3 - ], - [ - "choix3", - -0.7853981633974483, - 0.7853981633974483, - 1, - 3 - ] - ] - }, - "tache_N3": { - "obj_file": "horse_update_user_study_normed.obj", - "mesh": "horse", - "position_init_idx_i": 6, - "position_init_idx_j": 4, - "theta_init": -1.5707963267948966, - "delta_init": 4.71238898038469, - "choix_poses": [ - [ - "choix1", - -1.5707963267948966, - 4.71238898038469, - 6, - 4 - ], - [ - "choix2", - -1.5707963267948966, - 3.9269908169872414, - 5, - 4 - ], - [ - "choix3", - -1.5707963267948966, - 3.141592653589793, - 4, - 4 ] ] }, "tache_N4": { - "obj_file": "gorgoile_update_user_study_centered_normed.obj", - "mesh": "gorgoile", - "position_init_idx_i": 2, + "obj_file": "horse_update_user_study_normed.obj", + "mesh": "horse", + "position_init_idx_i": 4, "position_init_idx_j": 2, "theta_init": 0, - "delta_init": 1.5707963267948966, + "delta_init": 3.141592653589793, "choix_poses": [ [ "choix1", 0, - 1.5707963267948966, - 2, + 3.141592653589793, + 4, 2 ], [ "choix2", 0, - 0.7853981633974483, - 1, + 2.356194490192345, + 3, 2 ], [ "choix3", 0, - 0, - 0, + 1.5707963267948966, + 2, 2 ] ] }, "Analyse": { "analyse_N1": { - "mesh": "camel", - "idx": [ - 0 - ], - "mots": [ - "1. De face" - ] - }, - "analyse_N2": { "mesh": "dragon", "idx": [ 0 @@ -148,303 +139,260 @@ "1. De face" ] }, - "analyse_N3": { - "mesh": "gorgoile", + "analyse_N2": { + "mesh": "camel", "idx": [ - 0 + 1 ], "mots": [ - "1. De face" + "2. De profil" + ] + }, + "analyse_N3": { + "mesh": "horse", + "idx": [ + 2 + ], + "mots": [ + "3. Debout" ] } }, "Interactions": [ { - "time": 1678694204414, + "time": 1678466013163, "type": "start" }, { - "time": 1678694210146, + "time": 1678466019494, "type": "Fin contexte - Début inscription" }, { - "time": 1678694215154, + "time": 1678466025099, "type": "Fin inscription" }, { - "time": 1678694216018, + "time": 1678466026584, "type": "Début explications" }, { - "time": 1678694216246, - "type": "Affichage Mesh random : camel en idx_i, idx_j : (4, 1)" + "time": 1678466026616, + "type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (4, 1)" }, { - "time": 1678694216246, - "type": "Affichage Mesh random : camel en theta, delta : (0.7853981633974483, 3.141592653589793)" + "time": 1678466026616, + "type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 3.141592653589793)" }, { - "time": 1678694220978, + "time": 1678466035133, "type": "fleche droite" }, { - "time": 1678694221554, + "time": 1678466035421, "type": "fleche haut" }, { - "time": 1678694221874, + "time": 1678466035549, "type": "fleche haut" }, { - "time": 1678694221874, + "time": 1678466035549, "type": "Affichage error à cause de fleche haut" }, { - "time": 1678694222290, + "time": 1678466035757, "type": "fleche bas" }, { - "time": 1678694222546, + "time": 1678466035885, "type": "fleche bas" }, { - "time": 1678694222834, + "time": 1678466036029, "type": "fleche droite" }, { - "time": 1678694224258, + "time": 1678466036253, "type": "bouton pose n°1" }, { - "time": 1678694229800, + "time": 1678466042764, "type": "Fin explication" }, { - "time": 1678694231778, + "time": 1678466044477, "type": "Début étude" }, { - "time": 1678694231964, - "type": "Affichage Mesh random : camel en idx_i, idx_j : (4, 0)" + "time": 1678466044557, + "type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (5, 1)" }, { - "time": 1678694231964, - "type": "Affichage Mesh random : camel en theta, delta : (1.5707963267948966, 3.141592653589793)" + "time": 1678466044557, + "type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 3.9269908169872414)" }, { - "time": 1678694234627, + "time": 1678466046461, "type": "bouton pose n°1" }, { - "time": 1678694234756, - "type": "bouton valider" - }, - { - "time": 1678694234756, - "type": "Affichage error à cause du bouton valider" - }, - { - "time": 1678694234899, - "type": "bouton pose n°2" - }, - { - "time": 1678694234899, - "type": "Affichage error pose déjà sélectionnée" - }, - { - "time": 1678694235042, - "type": "bouton valider" - }, - { - "time": 1678694235042, - "type": "Affichage error à cause du bouton valider" - }, - { - "time": 1678694235126, - "type": "bouton pose n°2" - }, - { - "time": 1678694235126, - "type": "Affichage error pose déjà sélectionnée" - }, - { - "time": 1678694235267, - "type": "bouton valider" - }, - { - "time": 1678694235267, - "type": "Affichage error à cause du bouton valider" - }, - { - "time": 1678694235378, - "type": "bouton pose n°2" - }, - { - "time": 1678694235379, - "type": "Affichage error pose déjà sélectionnée" - }, - { - "time": 1678694236626, + "time": 1678466046605, "type": "fleche droite" }, { - "time": 1678694236743, + "time": 1678466046685, "type": "bouton pose n°2" }, { - "time": 1678694236883, + "time": 1678466046813, "type": "fleche droite" }, { - "time": 1678694236962, + "time": 1678466046877, "type": "bouton pose n°3" }, { - "time": 1678694237513, + "time": 1678466047741, "type": "bouton valider" }, { - "time": 1678694237546, - "type": "Affichage Mesh random : dragon en idx_i, idx_j : (3, 3)" + "time": 1678466047764, + "type": "Affichage Mesh random : camel en idx_i, idx_j : (5, 1)" }, { - "time": 1678694237546, - "type": "Affichage Mesh random : dragon en theta, delta : (-0.7853981633974483, 2.356194490192345)" + "time": 1678466047764, + "type": "Affichage Mesh random : camel en theta, delta : (0.7853981633974483, 3.9269908169872414)" }, { - "time": 1678694238210, + "time": 1678466048813, "type": "bouton pose n°1" }, { - "time": 1678694238323, + "time": 1678466048925, "type": "fleche droite" }, { - "time": 1678694238434, + "time": 1678466049021, "type": "bouton pose n°2" }, { - "time": 1678694238530, + "time": 1678466049133, "type": "fleche droite" }, { - "time": 1678694238642, + "time": 1678466049197, "type": "bouton pose n°3" }, { - "time": 1678694238770, - "type": "fleche droite" - }, - { - "time": 1678694239330, + "time": 1678466050477, "type": "bouton valider" }, { - "time": 1678694239407, - "type": "Affichage Mesh random : horse en idx_i, idx_j : (6, 4)" + "time": 1678466050500, + "type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 3)" }, { - "time": 1678694239407, - "type": "Affichage Mesh random : horse en theta, delta : (-1.5707963267948966, 4.71238898038469)" + "time": 1678466050500, + "type": "Affichage Mesh random : dragon en theta, delta : (-0.7853981633974483, 3.141592653589793)" }, { - "time": 1678694240354, + "time": 1678466051293, "type": "bouton pose n°1" }, { - "time": 1678694240483, + "time": 1678466051373, "type": "fleche droite" }, { - "time": 1678694240612, + "time": 1678466051501, "type": "bouton pose n°2" }, { - "time": 1678694240722, + "time": 1678466051597, "type": "fleche droite" }, { - "time": 1678694240818, + "time": 1678466051677, "type": "bouton pose n°3" }, { - "time": 1678694241314, + "time": 1678466052381, "type": "bouton valider" }, { - "time": 1678694241339, - "type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (2, 2)" + "time": 1678466052403, + "type": "Affichage Mesh random : horse en idx_i, idx_j : (4, 2)" }, { - "time": 1678694241339, - "type": "Affichage Mesh random : gorgoile en theta, delta : (0, 1.5707963267948966)" + "time": 1678466052403, + "type": "Affichage Mesh random : horse en theta, delta : (0, 3.141592653589793)" }, { - "time": 1678694242466, + "time": 1678466053229, "type": "bouton pose n°1" }, { - "time": 1678694242580, + "time": 1678466053341, "type": "fleche droite" }, { - "time": 1678694242722, + "time": 1678466053437, "type": "bouton pose n°2" }, { - "time": 1678694242802, + "time": 1678466053549, "type": "fleche droite" }, { - "time": 1678694242882, + "time": 1678466053629, "type": "bouton pose n°3" }, { - "time": 1678694243555, + "time": 1678466054701, "type": "bouton valider" }, { - "time": 1678694243555, + "time": 1678466054701, "type": "fin des choix." }, { - "time": 1678694243560, + "time": 1678466054706, "type": "Début analyse n°1" }, { - "time": 1678694245122, + "time": 1678466055501, "type": "ajout check sur : analyse n°1, mot 1. De face" }, { - "time": 1678694245491, + "time": 1678466055885, "type": "Bouton valider analyse." }, { - "time": 1678694245491, + "time": 1678466055885, "type": "Début analyse n°2" }, { - "time": 1678694246514, - "type": "ajout check sur : analyse n°2, mot 1. De face" + "time": 1678466056349, + "type": "ajout check sur : analyse n°2, mot 2. De profil" }, { - "time": 1678694246885, + "time": 1678466057117, "type": "Bouton valider analyse." }, { - "time": 1678694246885, + "time": 1678466057117, "type": "Début analyse n°3" }, { - "time": 1678694249010, - "type": "ajout check sur : analyse n°3, mot 1. De face" + "time": 1678466057597, + "type": "ajout check sur : analyse n°3, mot 3. Debout" }, { - "time": 1678694249363, + "time": 1678466058125, "type": "Bouton valider analyse." }, { - "time": 1678694249365, + "time": 1678466058125, "type": "Fin analyse" } ] diff --git a/static/MAIN.js b/static/MAIN.js index 1f029d5..e5987e7 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -84,7 +84,7 @@ function init_variable(premier_appel){ // Enchainement des pages if (premier_appel){ - page_contexte = true + page_contexte = false page_inscription = false page_explication = false page_warning = false @@ -312,8 +312,8 @@ function animate() { // Temps à chaque animate time_animate = new Date().getTime() // shorcut - w_Bshortcut = 122 - h_Bshortcut = 40 + h_Bshortcut = 0.05*window.innerHeight ; ratio_shorcut = h_Bshortcut/imgs["clavier_vues"].height + w_Bshortcut = ratio_shorcut*imgs["clavier_vues"].width x_Bshortcut = 10 y_Bshortcut = window.innerHeight-h_Bshortcut-10 //////////////////////////////////////////////////////////////////////////////// @@ -365,10 +365,10 @@ function animate() { // 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"))} + else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, taille_texte+"pt Courier", longueur_max_error, "#118AB2"))} } // progress bar - progress_bar(0, 1) + progress_bar(0, 1, taille_texte) // Affichage fleche afficher_fleche(imgs) // affichage de sboutons @@ -427,10 +427,10 @@ function animate() { // 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"))} + else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, taille_texte+"pt Courier", longueur_max_error, "#118AB2"))} } // progress bar - progress_bar(num_tache-1, nb_mesh) + progress_bar(num_tache-1, nb_mesh, taille_texte) // Affichage fleche afficher_fleche(imgs) // affichage de sboutons @@ -450,7 +450,7 @@ function animate() { bloquer_pose(liste_poses) // raccourcis // raccourcis bouton et fleche - shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut) + shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(0.7*window.innerWidth/2), window.innerHeight/2 -(0.35*innerHeight/2), 0.7*window.innerWidth, 0.35*innerHeight, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut) } //////////////////////////////////////////////////////////////////////////////// @@ -478,7 +478,7 @@ function animate() { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight) draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // Texte - affichage_texte_fin(message_fin, envoie_termine) + affichage_texte_fin(message_fin) // ECRITURE DES RESULTATS choix['Analyse'] = checkbox_clicked choix['Interactions'] = interactions @@ -494,9 +494,8 @@ function animate() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); message_fin = "> It's done. You can close the web page." - //print_text(handle_text(message_fin, (window.innerWidth/2)-450, innerHeight/2+150 , "26pt Courier", 1000)) envoie_termine = true - affichage_texte_fin(message_fin, envoie_termine) + update_texte_fin(message_fin) return; } } diff --git a/static/fonctions_choix_vues.js b/static/fonctions_choix_vues.js index 8a662ad..161b11e 100644 --- a/static/fonctions_choix_vues.js +++ b/static/fonctions_choix_vues.js @@ -2,17 +2,21 @@ // bouton function init_variable_fonction(dict_boutons, dict_imgs ){ // fleche - scale_fleche = 0.065 + //scale_fleche = 0.065 dy = 0.03*H_3D DY = 2*dy - a = scale_fleche*dict_imgs["gauche"].height - b = scale_fleche*dict_imgs["gauche"].width + a = 0.05*window.innerHeight//scale_fleche*dict_imgs["gauche"].height + ratio_fleche = a/dict_imgs["gauche"].height + b = ratio_fleche*dict_imgs["gauche"].width + // bouton - scale_bouton = 0.3 - h_bouton = scale_bouton*dict_boutons["choix_pose"].height - w_bouton = scale_bouton*dict_boutons["choix_pose"].width + //scale_bouton = 0.3 + h_bouton = 0.08*window.innerHeight//scale_bouton*dict_boutons["choix_pose"].height + ratio = h_bouton/dict_boutons["choix_pose"].height + w_bouton = ratio*dict_boutons["choix_pose"].width pos_bouton = ((W_3D*0.2+a+b)/W_3D)+0.1 ecart_bouton = 0.1*w_bouton + // Couleur alpha_bloque = 0.6 @@ -21,14 +25,19 @@ function init_variable_fonction(dict_boutons, dict_imgs ){ y_progress_bar = 0 w_progress_bar = window.innerWidth - W_3D*0.1 h_progress_bar = H_3D*0.04 + // image recap dx = 20 - ecart_recap = 50 + ecart_recap = 0.055*window.innerHeight + y0_recap = (2*h_progress_bar + ecart_recap) // Message pop up x_pop_up = W_3D*pos_bouton+w_bouton*2+ecart_bouton+30 y_pop_up = H_3D +dy*4 ecart = 40 + + // texte + taille_texte = (0.01*window.innerWidth) } @@ -40,12 +49,11 @@ function bloquer_pose(L_poses){ // Si on est en train de voir une pose déjà choisie if (idx_i== idx_i_p && idx_j==idx_j_p){ draw_rectangle(0, h_progress_bar, W_3D, H_3D-h_progress_bar, "rgb(0, 0, 0)", alpha_bloque) - print_text(handle_text("Viewpoint already selected", 10, H_3D, "16pt Courier", H_3D, "#118AB2")) + print_text(handle_text("Viewpoint already selected", 10, H_3D, taille_texte+"pt Courier", H_3D, "#118AB2")) } } } - function pose_deja_choisie(L_poses, i_choix, j_choix){ deja_choisie = false for (p=0; p 1 && i > 0 && i < nb_choix_fait) { - y_fleche_h = (H_3D/3.5)*0.4 + y_image + y_fleche_h = (H_3D/3.5)*0.35 + y_image ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h) if (clicked && click_inside(xyMouseDown, x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)) { swapElements(canvasMins, i, i-1) @@ -116,7 +123,7 @@ function afficher_recap(){ } // Fleche pour Switch bas if (nb_choix_fait > 1 && i < nb_choix_fait-1) { - y_fleche_b = (H_3D/3.5)*0.6 + y_image + y_fleche_b = (H_3D/3.5)*0.65 + y_image ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b) if (clicked && click_inside(xyMouseDown, x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)) { swapElements(canvasMins, i, i+1) @@ -264,7 +271,16 @@ function action_fleche_bas(){ /////////////////////////////////////////////////////////////// ///////////////////// BOUTON function afficher_bouton(dict_boutons){ - print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500)) + // Partie selection vue + 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 + ctx.font = 2*taille_texte+"pt Courier" + texte = "Selected Viewpoints:" + largeur = ctx.measureText(texte).width + ctx.fillText(texte, W_3D + ((window.innerWidth-W_3D)/2)- (largeur/2), h_progress_bar + ecart_recap) + //print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/5, h_progress_bar + ecart_recap, 2*taille_texte+"pt Courier", 500)) + + // BOUTONS // image, posx, posy, W, H ctx.drawImage(dict_boutons["choix_pose"], W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton) ctx.drawImage(dict_boutons["retirer"], W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton) @@ -433,15 +449,18 @@ function action_bouton_valider(){ } function action_bouton_raz(){ + x_texte_raz = -(1.2*w_bouton)/4+W_3D + w_bouton*1.2 +10 + y_texte_raz = H_3D+dy*2+h_bouton + l_max_raz = window.innerWidth-w_bouton-10 - x_texte_raz //on efface les autres textes pop texte_temporaire = {} //affichage du message - print_text(handle_text("Do you really want to restart the study?", window.innerWidth-w_bouton*2.1, window.innerHeight-h_bouton*2, "18pt Courier", 300)) + print_text(handle_text("Do you really want to restart the study?", x_texte_raz, y_texte_raz, taille_texte+"pt Courier", l_max_raz, color="#FFFFFF", interligne=0.045*window.innerHeight)) // affichage - ctx.drawImage(imgs['croix'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.65, window.innerHeight-h_bouton +10, 60,50) - ctx.drawImage(imgs['check'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50) + ctx.drawImage(imgs['croix'], x_texte_raz+ l_max_raz*0.2, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2) + ctx.drawImage(imgs['check'], x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2) // si on veut raz - if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){ + if (clicked && is_inside(xyMouseMove, x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)){ init_variable(false); 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) diff --git a/static/fonctions_contexte.js b/static/fonctions_contexte.js index 002a9d9..53326cc 100644 --- a/static/fonctions_contexte.js +++ b/static/fonctions_contexte.js @@ -1,4 +1,5 @@ -scale_bouton_commencer_contexte = 0.6 +//scale_bouton_commencer_contexte = 0.6 +h_bouton_contexte = 0.1*window.innerHeight num_texte = 0 @@ -7,18 +8,10 @@ function affichage_texte_contexte(texte, font, color, xt, yt, l_max_texte){ ctx.strokeStyle = color // Pour que le contour soit rouge ctx.fillStyle = color // Pour que l'intérieur soit bleu ctx.font = font - print_text(handle_text(texte, xt, yt, font, l_max_texte), false) + print_text(handle_text(texte, xt, yt, font, l_max_texte, color="#FFFFFF", interligne=0.045*window.innerHeight), false) } -function affichage_titre_contexte(titre, font, color, yt){ - ctx.strokeStyle =color - ctx.fillStyle =color - ctx.font = font - largeur = ctx.measureText(titre).width - // au milieu - ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt) -} //////////////////////////////////////////////////////////////////// ///// BOUTON COMMENCER @@ -74,8 +67,11 @@ function action_bouton_avant_contexte(){ } function afficher_bouton_suivant_contexte(){ - w_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].width - h_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].height + //w_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].width + //h_bouton_suivant = scale_bouton_commencer_contexte*boutons["suivant"].height + ratio_bouton_contexte = h_bouton_contexte/boutons["suivant"].height + w_bouton_suivant = ratio_bouton_contexte*boutons["suivant"].width + h_bouton_suivant = h_bouton_contexte x_bouton_suivant = (window.innerWidth/2)+ 5 y_bouton_suivant = window.innerHeight - h_bouton_suivant - 20 // Bouton commencer @@ -105,21 +101,21 @@ function afficher_bouton_avant_contexte(){ ///// MAIN function traitement_contexte(){ - console.log(num_texte) + //console.log(num_texte) ctx.clearRect(0, 0, canvas.width, canvas.height) // variable position - x_texte = window.innerWidth*(1/8) - w_texte = window.innerWidth*(6/8) + x_texte = window.innerWidth*(1/10) + w_texte = window.innerWidth*(8/10) font_texte = (0.012*window.innerWidth)+"pt Courier" // titre commun à chaque page - affichage_titre_contexte(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre) + affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F") // affichage texte for(let p=0; p The viewpoint of an object is the position from which we observe the object.", "y": window.innerHeight*0.2, "c": color_blanc}, -"texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.3, "c": color_blanc}, +"texte5":{"t":"A viewpoint will always highlight some parts and obscure other parts of an object.", "y": window.innerHeight*0.25, "c": color_blanc}, "texte6":{"t":"For example, this is wolf. This perspective highlights the tail and the hind legs, but obscures the head and face.", "y": window.innerHeight*0.45, "c": color_blanc}, "texte7":{"t":"This viewpoint reveal the head, face, and front legs but hides the tail and barely shows the hind legs.", "y": window.innerHeight*0.6, "c": color_blanc}, "texte8":{"t":"What is a good viewpoint?", "y": window.innerHeight*0.15, "c": color_rouge}, diff --git a/static/fonctions_explications.js b/static/fonctions_explications.js index 2e0dd59..d6ca1ac 100644 --- a/static/fonctions_explications.js +++ b/static/fonctions_explications.js @@ -6,122 +6,129 @@ function init_explication(){ color_texte = "rgb(0,0,0)" color_clignotement = "rgb(255,0,255)" epaisseur_clignotement = 6 - font_texte = window.innerWidth - ecart_x = 50 - l_texte_max = window.innerWidth-W_3D-2*ecart_x -50 + + // ecart de chaque cote de l'ecran + dy_ecran = H_3D*0.12 + ecart_x = 0.015*window.innerWidth + w_ecran = window.innerWidth-W_3D-2*ecart_x + h_ecran = H_3D*0.5 + + // texte + taille_texte_explication = 0.01*window.innerWidth + l_texte_max = w_ecran -50 + interligne = 0.045*window.innerHeight // marge du texte marge_texte_x = 20 - marge_texte_y = 100 + marge_texte_y = 0.25*h_ecran - // deplacement pour ajouter un titre à l'ecran - dy_ecran = 50 - dh_ecran = 55 // Position des boutons sur l'écran - w_bouton_suivant = boutons["suivant"].width*0.3 - h_bouton_suivant = boutons["suivant"].height*0.3 + h_bouton_suivant = 0.15*h_ecran + ratio_explication = h_bouton_suivant/boutons["suivant"].height + w_bouton_suivant = ratio_explication * boutons["suivant"].width + temps_attente = 0 ecrans = [ // -1 avant de lancer l'interface - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 0 - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 1.1 - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 1.2, - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 1.3 - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 2.1 : Selection 1er vues - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 2.2 : clique sur fleche droite - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 2.3 : clique sur fleche haut - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 2.4 : clique sur fleche haut - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 2.5 : PBL trop haut - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 3.1 : clique sur fleche bas - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 3.2 : clique sur fleche bas - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 3.3 : clique sur fleche droite - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, // 4: Selection de la vue - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //5 : plus d'interaction - {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran, "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.1 : plus d'interaction - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.2 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.3 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.4 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.5 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.6 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //6.7 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran}, //7 : - {'x': W_3D/2 - (window.innerWidth-W_3D-2*ecart_x)/2 , "y": H_3D/2 - (H_3D*0.45 + dh_ecran)/2 , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran} + {'x': W_3D/2 - (w_ecran)/2 , "y": H_3D/2 - (h_ecran)/2 , "w":w_ecran, "h":h_ecran, "c":color_ecran,"a": alpha_ecran} ] textes = [ //-1 - {"t":"This is where the instructions will appear to take control of the interface to select your "+nb_choix_demande+" best viewpoints. Now let's display the interface. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"This is where the instructions will appear to take control of the interface to select your "+nb_choix_demande+" best viewpoints. Now let's display the interface. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 0 - {"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 1.1 : ecran 3D - {"t":"You have: A screen to view the 3D object. Do not be surprised by the initial position of the object, it appears from a random viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"You have: A screen to view the 3D object. Do not be surprised by the initial position of the object, it appears from a random viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 1.2 : fleche - {"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 1.3 : bouton - {"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 2.1 : Selection 1er vues - {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 2.2 : clique sur fleche droite - {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 2.3 : clique sur fleche haut - {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 2.4 : clique sur fleche haut - {"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 2.5 : PBL trop haut - {"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first viewpoint : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first viewpoint : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 3.1 : clique sur fleche bas - {"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 3.2 : clique sur fleche bas - {"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 3.3 : clique sur fleche bas - {"t":"Let's imagine that you choose this viewpoint. You have to select it with the button. (PRESS SELECT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Let's imagine that you choose this viewpoint. You have to select it with the button. (PRESS SELECT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 4 : - {"t":"You have chosen your first viewpoint among the "+nb_choix_demande+" asked. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.009, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"You have chosen your first viewpoint among the "+nb_choix_demande+" asked. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, //5 - {"t":"To go faster, the interaction part with the tutorial interface is finished. Now, you can just look and press the next button when it says here. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"To go faster, the interaction part with the tutorial interface is finished. Now, you can just look and press the next button when it says here. (PRESS NEXT BUTTON)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.1 - {"t":"Let's imagine that you have chosen these "+nb_choix_demande+" viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"Let's imagine that you have chosen these "+nb_choix_demande+" viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.2 - {"t":"With the little arrows, we can switch your selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"With the little arrows, we can switch your selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.3 - {"t":"With the little red cross, we can remove your the selected viewpoint of your choice. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"With the little red cross, we can remove your the selected viewpoint of your choice. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.4 - {"t":"With the REMOVE button, we can remove the last selected viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"With the REMOVE button, we can remove the last selected viewpoint. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.5 - {"t":"With the RESET SELECTION button, we can remove all selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"With the RESET SELECTION button, we can remove all selected viewpoints. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.6 - {"t":"With the RESET STUDY button, we can start from the beginning. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"With the RESET STUDY button, we can start from the beginning. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 6.7 - {"t":"When you have chosen your "+nb_choix_demande+" viewpoints, the VALIDATE button appears. You can validate your selection and go to the next mesh. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"When you have chosen your "+nb_choix_demande+" viewpoints, the VALIDATE button appears. You can validate your selection and go to the next mesh. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, // 7 - {"t":"The tutorial is finished, you now know the basic interactions of this interface. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, + {"t":"The tutorial is finished, you now know the basic interactions of this interface. (PRESS NEXT BUTTON)", "x": ecrans[15].x + marge_texte_x, "y": ecrans[15].y + marge_texte_y, "f":taille_texte_explication, "l":l_texte_max, "c":color_texte, "i":interligne}, ] @@ -217,19 +224,19 @@ function init_explication(){ // [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, // {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} // ], - [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, - {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, - {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, - {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.35 + y0_recap + (10 + H_3D/3.5)*1, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.35 + y0_recap + (10 + H_3D/3.5)*2, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.65 + y0_recap + (10 + H_3D/3.5)*0, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2 - 30 , "y": (H_3D/3.5)*0.65 + y0_recap + (10 + H_3D/3.5)*1, "w":20 , "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} ], //6.3 // [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, // {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} // ], - [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, - {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, - {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*0, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*1, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, + {"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + y0_recap + (10 + H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}, {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente} ], //6.4 remove @@ -354,8 +361,8 @@ function traitement_explications(idx_i_explication, idx_j_explication){ condition_suivant = conditions_suivant[num_action] // ecran blanc afficher_ecran(ecran.x, ecran.y, ecran.w, ecran.h, ecran.c, ecran.a ) - print_text(handle_text(texte.t, texte.x, texte.y, texte.f*font_texte +"pt Courier", texte.l, texte.c, texte.i)) - print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y+52, 0.016*font_texte +"pt Courier", texte.l, "#EF476F", texte.i)) + print_text(handle_text(texte.t, texte.x, texte.y, texte.f+"pt Courier", texte.l, texte.c, texte.i)) + print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y + marge_texte_y/2, 1.5*taille_texte_explication+"pt Courier", texte.l, "#EF476F", texte.i)) // survol de tous les boutons if (num_action>0){ @@ -447,13 +454,14 @@ function traitement_explications(idx_i_explication, idx_j_explication){ // bouton commencer etude après les warnings function commencer_etude(){ 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 to start the study?" - font = "40pt Courier" - ctx.font = font - largeur = ctx.measureText(texte).width - ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + // 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 + titre = "Are you ready to start the study?" + // font = "40pt Courier" + // ctx.font = font + // largeur = ctx.measureText(texte).width + // ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F") // affichager le bouton commencer afficher_bouton_commencer_explication() // si on appuie @@ -596,11 +604,14 @@ function survol_bouton_explication(){ } function afficher_bouton_commencer_explication(){ - w_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].width - h_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].height + h_bouton_explication2 = 0.1*window.innerHeight + ratio_explication2 = h_bouton_explication2/boutons["commencer_choix"].height + w_bouton_commencer = 2*ratio_explication2*boutons["commencer_choix"].width + h_bouton_commencer = 2*h_bouton_explication2 //scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) + // Bouton commencer ctx.drawImage(boutons["commencer_choix"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer) @@ -619,14 +630,12 @@ function action_bouton_commencer_explication(){ function afficher_recap_inactif(){ w_recap = window.innerWidth-W_3D - // texte du haut - //print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500)) // fleche swap haut - x_fleche_h = W_3D+ w_recap/2.5 + x_fleche_h = W_3D + w_recap/2 - 30 w_fleche_h = 20 h_fleche_h = 20 // fleche swap bas - x_fleche_b = W_3D+ w_recap/2.5 + x_fleche_b = W_3D + w_recap/2 - 30 w_fleche_b = 20 h_fleche_b = 20 // croix @@ -636,16 +645,16 @@ function afficher_recap_inactif(){ // pour chaque recap for (let i = 0 ; i < canvasMins.length; i++) { // Draw les images des contextes - y_image = 100+(20+ H_3D/3.5)*i + y_image = y0_recap + (10 + H_3D/3.5)*i ctx.drawImage(canvasMins[i],W_3D+ w_recap/2, y_image, H_3D/3.5, H_3D/3.5) //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 + y_fleche_h = (H_3D/3.5)*0.35 + y_image ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h) } // Fleche pour Switch bas if (nb_choix_fait > 1 && i < nb_choix_fait-1) { - y_fleche_b = (H_3D/3.5)*0.6 + y_image + y_fleche_b = (H_3D/3.5)*0.65 + y_image ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b) } // Croix @@ -655,4 +664,5 @@ function afficher_recap_inactif(){ ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix) } } -} \ No newline at end of file +} + diff --git a/static/fonctions_fin.js b/static/fonctions_fin.js index d43820d..3d7a211 100644 --- a/static/fonctions_fin.js +++ b/static/fonctions_fin.js @@ -1,35 +1,45 @@ -function affichage_texte_fin(M_fin, E_termine){ - ctx.strokeStyle = "rgb(255, 255, 255)" - ctx.fillStyle = "rgb(255, 255, 255)" - //Message de remerciement - texte = "Done, thx you :)" - font = "100pt Courier" - ctx.font = font - largeur = ctx.measureText(texte).width - print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 150, font, window.innerWidth, 1000, color="#FFFFFF")) +function affichage_texte_fin(M_fin){ + // ctx.strokeStyle = "rgb(255, 255, 255)" + // ctx.fillStyle = "rgb(255, 255, 255)" + // //Message de remerciement + // texte = "Done, thx you :)" + // font = 0.05*window.innerWidth*"pt Courier" + // ctx.font = font + // largeur = ctx.measureText(texte).width + // print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.2*window.innerHeight, font, window.innerWidth, 1000, color="#FFFFFF")) - // Texte WAIT - texte = "Please a moment" - font = "70pt Courier" - ctx.font = font - largeur = ctx.measureText(texte).width - print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 350, font, window.innerWidth, 1000, color="#FFFFFF")) + // // Texte WAIT + // texte = "Please a moment" + // font = 0.02*window.innerWidth*"pt Courier" + // ctx.font = font + // largeur = ctx.measureText(texte).width + // print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.35*window.innerHeight, font, window.innerWidth, 1000, color="#FFFFFF")) - ctx.strokeStyle = "rgb(239, 71, 111)" - ctx.fillStyle = "rgb(239, 71, 111)" - texte = " WAIT " - largeur = ctx.measureText(texte).width - print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 350, font, window.innerWidth, 1000)) + // ctx.strokeStyle = "rgb(239, 71, 111)" + // ctx.fillStyle = "rgb(239, 71, 111)" + // texte = " WAIT " + // largeur = ctx.measureText(texte).width + // print_text(handle_text(texte, (window.innerWidth/2)-(largeur/2), 0.5*window.innerHeight, font, window.innerWidth, 1000)) - // Texte d'envoie - ctx.strokeStyle = "rgb(255, 255, 255)" - ctx.fillStyle = "rgb(255, 255, 255)" - if (!E_termine){ - print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +100, "26pt Courier", 1000)) - } - else { - print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +200, "26pt Courier", 1000)) - } + // // Texte d'envoie + // ctx.strokeStyle = "rgb(255, 255, 255)" + // ctx.fillStyle = "rgb(255, 255, 255)" + // print_text(handle_text(M_fin, (window.innerWidth/2)-450, innerHeight/2 +100, "26pt Courier", 1000)) + titre = "Done, thx you :)" + affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.15*window.innerHeight) + + titre = "Please a moment" + affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.35*window.innerHeight) + + titre = " WAIT " + affichage_titre(titre, (0.05*window.innerWidth)+"pt Courier", "#EF476F", yt=0.35*window.innerHeight) + + affichage_titre(M_fin, (0.02*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.6*window.innerHeight) + +} + +function update_texte_fin(M_fin){ + affichage_titre(M_fin, (0.02*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.7*window.innerHeight) } \ No newline at end of file diff --git a/static/fonctions_inscription.js b/static/fonctions_inscription.js index d2fc358..40f6c2a 100644 --- a/static/fonctions_inscription.js +++ b/static/fonctions_inscription.js @@ -1,26 +1,31 @@ scale_bouton_commencer = 1 scale_bouton_suivant = 0.6 +h_bouton_inscription = 0.1*window.innerHeight +taille_titre_insription = (0.018*window.innerWidth) +taille_texte_inscription = (0.015*window.innerWidth) + function affichage_inscription(){ // 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 = "Give me your personal information" - font = "58pt Courier" - ctx.font = font - largeur = ctx.measureText(texte).width - ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + // 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 = "Give me your personal information" + // font = "58pt Courier" + // ctx.font = font + // largeur = ctx.measureText(texte).width + // ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) + titre = "Personal Information" + affichage_titre(titre, taille_titre_insription+"pt Courier", "#EF476F") // Pour les zones de textes ctx.strokeStyle = "rgb(255, 255, 255)" ctx.fillStyle = "rgb(255, 255, 255)" - ctx.font = "28pt Courier" + ctx.font = taille_texte_inscription+"pt Courier" 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("Gender:", 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)+24) ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24) @@ -30,10 +35,10 @@ function affichage_inscription(){ /// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO) 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 + w_bouton_commencer = 2*ratio_inscription*boutons["commencer_tuto"].width + h_bouton_commencer = 2*h_bouton_inscription //scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) - y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) + y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) // Bouton commencer ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer) @@ -58,8 +63,8 @@ function action_bouton_commencer_inscription(){ /// BOUTON COMMENCER SKIP (POUUR ALLER VERS LE TUTO) function afficher_bouton_skip_inscription(){ - w_bouton_skip = scale_bouton_commencer*boutons["skip"].width - h_bouton_skip = scale_bouton_commencer*boutons["skip"].height + w_bouton_skip = w_bouton_commencer + h_bouton_skip = h_bouton_commencer x_bouton_skip = (window.innerWidth/2)-(w_bouton_skip/2) y_bouton_skip = (window.innerHeight/2) + (h_bouton_skip/2) + 20 @@ -85,8 +90,9 @@ function action_bouton_skip_inscription(){ ////////////////////////////////////////////////////////////// /// BOUTON SUIVANT INSCRIPTION 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 + ratio_inscription = h_bouton_inscription/boutons["suivant_grand"].height + w_bouton_suivant = ratio_inscription*boutons["suivant_grand"].width + h_bouton_suivant = h_bouton_inscription x_bouton_suivant = (window.innerWidth/2)-(w_bouton_suivant/2) y_bouton_suivant = innerHeight*0.75 // Bouton commencer @@ -132,13 +138,14 @@ function value_non_vide(V){ function afficher_champs_inscription() { inscription_finie = false - w_text_zone = 30 - h_text_zone = 42 + w_text_zone = 0.025*window.innerWidth + h_text_zone = 0.05*window.innerHeight nb_caract_min = 1 nb_caract_max = 30 - x_texte_zone = (window.innerWidth/3) - y_texte_zone = 200 - ecart_texte_zone = 120 + x_texte_zone = (window.innerWidth/4) + y_texte_zone = 0.20*window.innerHeight + ecart_texte_zone = 0.15*window.innerHeight + // Zone de texte : Firstname var input = document.createElement('input'); @@ -152,7 +159,7 @@ function afficher_champs_inscription() { input.style.top = y_texte_zone+'px'; input.style.textAlign = 'left' input.style.height = h_text_zone - input.style.font = "24pt Courier" + input.style.font = taille_texte_inscription+"pt Courier" document.body.appendChild(input); input.focus(); @@ -169,7 +176,7 @@ function afficher_champs_inscription() { input2.style.top = ecart_texte_zone+y_texte_zone+'px'; input2.style.textAlign = 'left' input2.style.height = h_text_zone - input2.style.font = "24pt Courier" + input2.style.font = taille_texte_inscription+"pt Courier" document.body.appendChild(input2); input2.focus(); @@ -186,7 +193,7 @@ function afficher_champs_inscription() { input3.style.top = 2*ecart_texte_zone + y_texte_zone+'px'; input3.style.textAlign = 'left' input3.style.height = h_text_zone - input3.style.font = "24pt Courier" + input3.style.font = taille_texte_inscription+"pt Courier" document.body.appendChild(input3); input3.focus(); @@ -212,7 +219,7 @@ function afficher_champs_inscription() { //input4.size = w_text_zone // style input5.style.position = 'fixed'; - input5.style.left = 200 + x_texte_zone+'px'; + input5.style.left = window.innerWidth*0.1 + x_texte_zone+'px'; input5.style.top = 3*ecart_texte_zone + y_texte_zone+'px'; input5.style.height = 20 input5.style.width = 20 @@ -226,7 +233,7 @@ function afficher_champs_inscription() { //input4.size = w_text_zone // style input6.style.position = 'fixed'; - input6.style.left = 400 + x_texte_zone+'px'; + input6.style.left = window.innerWidth*0.22 + x_texte_zone+'px'; input6.style.top = 3*ecart_texte_zone + y_texte_zone+'px'; input6.style.height = 20 input6.style.width = 20 @@ -272,19 +279,18 @@ function traitement_inscription(){ } // les champs sont remplie et on a appuyé sur le bouton next } else { + draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) texte = "Are you ready to start the tutorial to learn" texte2 = "how to use the interface of the study?" - font = "40pt Courier" - ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge - ctx.fillStyle = "rgb(255, 255, 255)" - ctx.font = font + ctx.strokeStyle = "#EF476F" + ctx.fillStyle = "#EF476F" + ctx.font = taille_titre_insription+"pt Courier" 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)) + ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 0.10*window.innerHeight) + ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 0.16*window.innerHeight) + // affichager le bouton commencer tutorial - draw_rectangle(0,canvas.height/2,canvas.width, canvas.height/2, "rgb(3, 26, 33)", 1) afficher_bouton_commencer_inscription() // affichager le bouton skipi afficher_bouton_skip_inscription() diff --git a/static/fonctions_utiles.js b/static/fonctions_utiles.js index a327e90..e500455 100644 --- a/static/fonctions_utiles.js +++ b/static/fonctions_utiles.js @@ -80,6 +80,15 @@ function print_text(dialogue, c= true) { } +function affichage_titre(titre, font, color, yt = 0.08*window.innerHeight){ + ctx.strokeStyle =color + ctx.fillStyle =color + ctx.font = font + largeur = ctx.measureText(titre).width + // au milieu + ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt) +} + function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", interligne=40) { let s = dialogue @@ -133,7 +142,7 @@ function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF", i } -function progress_bar(N_tache, N_mesh){ +function progress_bar(N_tache, N_mesh, font = (0.01*window.innerWidth)){ if (N_tache<=N_mesh){ // background draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1) @@ -143,7 +152,7 @@ function progress_bar(N_tache, N_mesh){ // // numero de tache 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 - ctx.font = "18pt Courier"; + ctx.font = font+"pt Courier"; ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar) } } diff --git a/static/fonctions_warnings.js b/static/fonctions_warnings.js index 1d09ec5..1ba08a1 100644 --- a/static/fonctions_warnings.js +++ b/static/fonctions_warnings.js @@ -1,4 +1,5 @@ -scale_bouton_commencer_warning = 0.6 +//scale_bouton_commencer_warning = 0.6 +h_bouton_warning = 0.1*window.innerHeight num_warning = 0 @@ -7,18 +8,18 @@ function affichage_texte_warning(texte, font, color, xt, yt, l_max_texte){ ctx.strokeStyle = color // Pour que le contour soit rouge ctx.fillStyle = color // Pour que l'intérieur soit bleu ctx.font = font - print_text(handle_text(texte, xt, yt, font, l_max_texte), false) + print_text(handle_text(texte, xt, yt, font, l_max_texte, color="#FFFFFF", interligne=0.045*window.innerHeight), false) } -function affichage_titre_warning(titre, font, color, yt){ - ctx.strokeStyle =color - ctx.fillStyle =color - ctx.font = font - largeur = ctx.measureText(titre).width - // au milieu - ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt) -} +// function affichage_titre_warning(titre, font, color, yt){ +// ctx.strokeStyle =color +// ctx.fillStyle =color +// ctx.font = font +// largeur = ctx.measureText(titre).width +// // au milieu +// ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt) +// } //////////////////////////////////////////////////////////////////// ///// BOUTON COMMENCER @@ -60,8 +61,9 @@ function action_bouton_avant_warning(){ } function afficher_bouton_suivant_warning(){ - w_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].width - h_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].height + ratio_bouton_warning = h_bouton_warning/boutons["suivant"].height + w_bouton_suivant = ratio_bouton_warning*boutons["suivant"].width + h_bouton_suivant = h_bouton_contexte x_bouton_suivant = (window.innerWidth/2)+ 5 y_bouton_suivant = window.innerHeight - h_bouton_suivant - 20 // Bouton commencer @@ -94,12 +96,12 @@ function traitement_warnings(){ ctx.clearRect(0, 0, canvas.width, canvas.height) draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 // variable position - x_texte = window.innerWidth*(1/8) - w_texte = window.innerWidth*(6/8) + x_texte = window.innerWidth*(1/10) + w_texte = window.innerWidth*(8/10) font_texte = (0.012*window.innerWidth)+"pt Courier" - + // titre commun à chaque page - affichage_titre_warning(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre) + affichage_titre(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F") // affichage texte for(let p=0; p