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
+
+
+
+
+
+
+
+
+
+
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
-
-
-
-
-
-
-
-
-
@@ -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