From a1de2bda995f24ebd014bab96aecb0ac150b2042 Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Thu, 27 Apr 2023 16:30:56 +0200 Subject: [PATCH] Save halfway --- html/index3D-beginning.html | 26 +++++ html/{index3D.html => index3D-end.html} | 31 +----- server.js | 14 +-- static/MAIN.js | 135 +++++++++++++----------- 4 files changed, 109 insertions(+), 97 deletions(-) create mode 100644 html/index3D-beginning.html rename html/{index3D.html => index3D-end.html} (66%) diff --git a/html/index3D-beginning.html b/html/index3D-beginning.html new file mode 100644 index 0000000..c5db391 --- /dev/null +++ b/html/index3D-beginning.html @@ -0,0 +1,26 @@ + + + + + + + + User study version 3D + + + + + +
+ + Votre navigateur ne supporte pas les canvas, essayez-en un autre. + +
+ + diff --git a/html/index3D.html b/html/index3D-end.html similarity index 66% rename from html/index3D.html rename to html/index3D-end.html index 68b1933..a3dd85b 100644 --- a/html/index3D.html +++ b/html/index3D-end.html @@ -1,28 +1,3 @@ - - - - - - - - User study version 3D - - - - - -
- - Votre navigateur ne supporte pas les canvas, essayez-en un autre. - -
- @@ -42,9 +17,9 @@ - - - + + + diff --git a/server.js b/server.js index bc01fb7..c890555 100644 --- a/server.js +++ b/server.js @@ -9,6 +9,9 @@ async function main() { const app = express(); + const HTML_BEGINNING = await fs.readFile(__dirname + '/html/index3D-beginning.html'); + const HTML_END = await fs.readFile(__dirname + '/html/index3D-end.html'); + //let id = 1; // Permet de récupérer les données venant du client. @@ -16,17 +19,16 @@ async function main() { app.use(bodyParser.json()); // Page d'accueil. - app.get('/', function(req, res) { - // On envoie le contenu du fichier index.html. - return res.sendFile(__dirname + '/html/index3D.html'); + app.get('/', async function(req, res) { + // On envoie le contenu du fichier index.html avec le uuid généré par le server. + let uuidScript = ''; + return res.send(HTML_BEGINNING + uuidScript + HTML_END); }); // Route de récupération des données. app.post('/outputs', async function(req, res) { - let id = uuid(); - // Ouverture du fichier en mode append. - let file = await fs.open(__dirname + '/outputs/' + id + '.json', 'a'); + let file = await fs.open(__dirname + '/outputs/' + req.body.uuid + '.json', 'w'); // Ajout d'une ligne. file.write(JSON.stringify(req.body, undefined, 4)); diff --git a/static/MAIN.js b/static/MAIN.js index 5023f80..ce185c8 100644 --- a/static/MAIN.js +++ b/static/MAIN.js @@ -19,7 +19,7 @@ function init_variable(premier_appel){ /////////////////////////////////////////////////////// // CE QUE L'ON RECUPERE A LA FIN // dictionnaire avec les choix pour TOUS les mesh - if (premier_appel){choix = {}} + if (premier_appel){choix = { uuid: window.uuid }} // dictionnaire avec les checkbox pour TOUS les mesh checkbox_clicked = {} /////////////////////////////////////////////////////// @@ -35,22 +35,23 @@ function init_variable(premier_appel){ // Au premier appel on init : les interactions if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": get_message("debut_etude", [])}]} + choix.interactions = interactions; // Couleur alpha_survol = 0.3 // DATA github indice_mesh = 0 // indice du premier mesh à visionner - mesh_courant = "nope" // nom des mesh - // random nom mesh + mesh_courant = "nope" // nom des mesh + // random nom mesh //obj_file_random = shuffle(['backpack_regulier_tri_centered_user_study_normed.obj', 'dragon_update_user_study_normed.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj', 'horse_update_user_study_normed.obj']) obj_file_random = shuffle(obj_names) // ---> nombre de mesh a visionner AU TOTAL - nb_mesh = 10//obj_file_random.length + nb_mesh = 2//obj_file_random.length // ---> nb analyse demandé - nb_analyse_demande = 5 + nb_analyse_demande = 2 list_idx_tache =[] for (let p=0; p version aléatoire ??? @@ -171,7 +172,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){ theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4)) delta_init = 2*Math.PI * (idx_i_init/8) - // initialisation + // initialisation idx_i = idx_i_init idx_j = idx_j_init @@ -190,7 +191,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){ preserveDrawingBuffer: true } ); renderer.setSize(W_3D , H_3D); - + old_renderer = document.getElementById('renderer') if (old_renderer!= null){ old_renderer.parentElement.removeChild(old_renderer) @@ -214,10 +215,10 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){ canvas.height = window.innerHeight; ctx = canvas.getContext("2d") - + // On crée autant de canvas que de choix demandé, // ces canvas seront vide tant qu'il n'y a pas de vue sélectionnée - // puis updates en fonction des actions faites + // puis updates en fonction des actions faites canvasMins = [] ctxMins = [] for (let i = 0; i < nb_choix_demande; i++) { @@ -237,15 +238,15 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){ // Si on load le mesh 3d dans les explication, on importe que ce soit le dragon if (explication){ - //objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => { - objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => { + //objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => { + objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => { const root = event.detail.loaderRootNode; scene.add(root); }); // sinon on est dans l'étide dans on fait du random entre tous les mesh dispo sur le git } else { //objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file_random[idx_mesh], (event) => { - objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => { + objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => { const root = event.detail.loaderRootNode; scene.add(root); }); @@ -275,7 +276,7 @@ function init_data(){ // Data 2D imgs = {} imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_droite.png') - imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png') + imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png') imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_bas.png') imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_haut.png') imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png') @@ -322,6 +323,26 @@ function init_data(){ } +function enregistrement(callback) { + // Création de la requête HTTP à envoyer au serveur. + let xhr = new XMLHttpRequest(); + // Préparation de la requête pour l'envoi en POST vers l'url. + xhr.open('POST', '/outputs'); + // Si on envoie les données de manière classique, il faut configurer le header de cette façon. + xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); + // Ajout du listener pour déclencer la suite lorsque la requête sera terminée. + xhr.onreadystatechange = function() { + //interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])}) + // Si la requête est terminée, et que la réponse n'est pas une erreur. + if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { + if (typeof callback === 'function') { + callback(xhr); + } + } + } + // Envoi de la requête vers le serveur, avec les données. + xhr.send(JSON.stringify(choix)); +} function animate() { // Temps à chaque animate @@ -352,7 +373,7 @@ function animate() { premier_tour_page_contexte = false } init_clavier_contexte() - traitement_contexte() + traitement_contexte() } //////////////////////////////////////////////////////////////////////////////// // page inscription @@ -365,7 +386,7 @@ function animate() { init_clavier_inscription() afficher_champs_inscription() premier_tour_page_inscription=false} - traitement_inscription() + traitement_inscription() } //////////////////////////////////////////////////////////////////////////////// if (page_explication){ @@ -385,7 +406,7 @@ function animate() { setUp_3D(indice_mesh, idx_i_explication, idx_j_explication, explication=true) premier_tour_page_explications = false } - // Nettoyage + // Nettoyage ctx.clearRect(0, 0, canvas.width, canvas.height) // Affichage bouton RAZ if (bouton_raz_clicked == true){action_bouton_raz()} @@ -414,7 +435,7 @@ function animate() { // RAZ clicked = false which_clicked_fleche = -1 - which_clicked_bouton = -1 + which_clicked_bouton = -1 } // page warning if(page_warning){ @@ -428,7 +449,7 @@ function animate() { if (page_explication_bis){ ctx.clearRect(0, 0, canvas.width, canvas.height) //console.log("boucle explication2") - commencer_etude() + commencer_etude() } //////////////////////////////////////////////////////////////////////////////// // page de choix @@ -471,7 +492,7 @@ function animate() { // traitement fleche (surval + click) traitement_fleche() // traitement bouton : (survol + click) - traitement_bouton() + traitement_bouton() // afficher + maj du recap de pose choisie : affichage des vue des poses afficher_recap() // Affichage texte recap @@ -493,6 +514,7 @@ function animate() { document.removeEventListener("keydown", action_clavier_vues) // inti clavier if(premier_tour_page_explication_analyse){ + enregistrement(); //interactions.push({"time": new Date().getTime(), "type": "Début explication analyse"}) init_clavier_explication_analyse() init_textes_explication_analyses() @@ -519,14 +541,14 @@ function animate() { } premier_tour_page_analyse = false} ctx.clearRect(0, 0, canvas.width, canvas.height) - + traitement_analyse() try { if (!input2.matches(":focus")) { input2.focus() } - } catch (e) {} - + } catch (e) {} + } //////////////////////////////////////////////////////////////////////////////// // page fin @@ -534,39 +556,26 @@ function animate() { //console.log("boucle fin") // on enlève les touches du clavier associé à la page vues document.removeEventListener("keydown", action_clavier_analyse) - // clear la fenetre + // clear la fenetre ctx.clearRect(0, 0, window.innerWidth, window.innerHeight) draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) - // Texte + // Texte affichage_texte_fin(message_fin) // ECRITURE DES RESULTATS choix['Analyse'] = checkbox_clicked - choix['Interactions'] = interactions - // Création de la requête HTTP à envoyer au serveur. - let xhr = new XMLHttpRequest(); - // Préparation de la requête pour l'envoi en POST vers l'url. - xhr.open('POST', '/outputs'); - // Si on envoie les données de manière classique, il faut configurer le header de cette façon. - xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); - // Ajout du listener pour déclencer la suite lorsque la requête sera terminée. - xhr.onreadystatechange = function() { - //interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])}) - // Si la requête est terminée, et que la réponse n'est pas une erreur. - if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { - console.log(xhr.responseText); - message_fin = "> It's done. Your submission has been recorded." - envoie_termine = true - update_texte_fin(message_fin) - interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])}) - return; - } - } - // Envoi de la requête vers le serveur, avec les données. - xhr.send(JSON.stringify(choix)); + + enregistrement(function(xhr) { + console.log(xhr.responseText); + message_fin = "> It's done. Your submission has been recorded." + envoie_termine = true + update_texte_fin(message_fin) + interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])}) + return; + }); return - + } //////////////////////////////////////////////////////////////////////////////// // Boucle sur animate