fin tuto v0
This commit is contained in:
mpelissi
parent
4133841edb
commit
33c3b07da0
|
|
@ -0,0 +1,231 @@
|
||||||
|
{
|
||||||
|
"identite": {
|
||||||
|
"Firstname": "marie",
|
||||||
|
"Name": "pelissier",
|
||||||
|
"Age": "1",
|
||||||
|
"Sexe": "M"
|
||||||
|
},
|
||||||
|
"tache_N1": {
|
||||||
|
"obj_file": "camel_update_user_study_normed.obj",
|
||||||
|
"mesh": "camel",
|
||||||
|
"position_init_idx_i": 3,
|
||||||
|
"position_init_idx_j": 3,
|
||||||
|
"theta_init": -0.7853981633974483,
|
||||||
|
"delta_init": 2.356194490192345,
|
||||||
|
"choix_poses": [
|
||||||
|
[
|
||||||
|
"choix1",
|
||||||
|
-0.7853981633974483,
|
||||||
|
2.356194490192345,
|
||||||
|
3,
|
||||||
|
3
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix2",
|
||||||
|
-0.7853981633974483,
|
||||||
|
1.5707963267948966,
|
||||||
|
2,
|
||||||
|
3
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix3",
|
||||||
|
-0.7853981633974483,
|
||||||
|
0.7853981633974483,
|
||||||
|
1,
|
||||||
|
3
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tache_N2": {
|
||||||
|
"obj_file": "camel_update_user_study_normed.obj",
|
||||||
|
"mesh": "camel",
|
||||||
|
"position_init_idx_i": 0,
|
||||||
|
"position_init_idx_j": 1,
|
||||||
|
"theta_init": 0.7853981633974483,
|
||||||
|
"delta_init": 0,
|
||||||
|
"choix_poses": [
|
||||||
|
[
|
||||||
|
"choix1",
|
||||||
|
0.7853981633974483,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix2",
|
||||||
|
0.7853981633974483,
|
||||||
|
5.497787143782138,
|
||||||
|
7,
|
||||||
|
1
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix3",
|
||||||
|
0.7853981633974483,
|
||||||
|
4.71238898038469,
|
||||||
|
6,
|
||||||
|
1
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Analyse": {
|
||||||
|
"analyse_N1": {
|
||||||
|
"mesh": "camel",
|
||||||
|
"idx": [
|
||||||
|
3
|
||||||
|
],
|
||||||
|
"mots": [
|
||||||
|
"4. Eyes contact"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Interactions": [
|
||||||
|
{
|
||||||
|
"time": 1678464959802,
|
||||||
|
"type": "start"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464960525,
|
||||||
|
"type": "Fin contexte - Début inscription"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464974634,
|
||||||
|
"type": "Fin inscription"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464982266,
|
||||||
|
"type": "Début explications"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464982298,
|
||||||
|
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464982298,
|
||||||
|
"type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 3.141592653589793)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464996281,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464997262,
|
||||||
|
"type": "fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464997394,
|
||||||
|
"type": "fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464997394,
|
||||||
|
"type": "Affichage error à cause de fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464997962,
|
||||||
|
"type": "fleche bas"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464998112,
|
||||||
|
"type": "fleche bas"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464998829,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465000064,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465006241,
|
||||||
|
"type": "Fin explication"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465020930,
|
||||||
|
"type": "Clique bouton commencer - Début étude"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465020967,
|
||||||
|
"type": "Affichage Mesh random : camel en idx_i, idx_j : (3, 3)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465020967,
|
||||||
|
"type": "Affichage Mesh random : camel en theta, delta : (-0.7853981633974483, 2.356194490192345)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055054,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055165,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055261,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055342,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055469,
|
||||||
|
"type": "bouton pose n°3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055933,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055959,
|
||||||
|
"type": "Affichage Mesh random : camel en idx_i, idx_j : (0, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465055959,
|
||||||
|
"type": "Affichage Mesh random : camel en theta, delta : (0.7853981633974483, 0)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465056349,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465056477,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465056589,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465056669,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465056765,
|
||||||
|
"type": "bouton pose n°3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465057277,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465057277,
|
||||||
|
"type": "fin des choix."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465057292,
|
||||||
|
"type": "Début analyse n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465070953,
|
||||||
|
"type": "ajout check sur : analyse n°1, mot 4. Eyes contact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465071421,
|
||||||
|
"type": "Bouton valider analyse."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678465071436,
|
||||||
|
"type": "Fin analyse"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,253 @@
|
||||||
|
{
|
||||||
|
"tache_N1": {
|
||||||
|
"obj_file": "horse_update_user_study_normed.obj",
|
||||||
|
"mesh": "horse",
|
||||||
|
"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_N2": {
|
||||||
|
"obj_file": "dragon_update_user_study_normed.obj",
|
||||||
|
"mesh": "dragon",
|
||||||
|
"position_init_idx_i": 5,
|
||||||
|
"position_init_idx_j": 4,
|
||||||
|
"theta_init": -1.5707963267948966,
|
||||||
|
"delta_init": 3.9269908169872414,
|
||||||
|
"choix_poses": [
|
||||||
|
[
|
||||||
|
"choix1",
|
||||||
|
-1.5707963267948966,
|
||||||
|
3.9269908169872414,
|
||||||
|
5,
|
||||||
|
4
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix2",
|
||||||
|
-1.5707963267948966,
|
||||||
|
3.141592653589793,
|
||||||
|
4,
|
||||||
|
4
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"choix3",
|
||||||
|
-1.5707963267948966,
|
||||||
|
2.356194490192345,
|
||||||
|
3,
|
||||||
|
4
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Analyse": {
|
||||||
|
"analyse_N1": {
|
||||||
|
"mesh": "horse",
|
||||||
|
"idx": [
|
||||||
|
0
|
||||||
|
],
|
||||||
|
"mots": [
|
||||||
|
"1. De face"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Interactions": [
|
||||||
|
{
|
||||||
|
"time": 1678464805575,
|
||||||
|
"type": "start"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464805608,
|
||||||
|
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464805608,
|
||||||
|
"type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 3.141592653589793)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464807311,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464807614,
|
||||||
|
"type": "fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464807741,
|
||||||
|
"type": "fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464807741,
|
||||||
|
"type": "Affichage error à cause de fleche haut"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464807902,
|
||||||
|
"type": "fleche bas"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464808062,
|
||||||
|
"type": "fleche bas"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464808301,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464808814,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464823005,
|
||||||
|
"type": "Fin explication"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464825069,
|
||||||
|
"type": "Clique bouton commencer - Début étude"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464825142,
|
||||||
|
"type": "Affichage Mesh random : horse en idx_i, idx_j : (5, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464825142,
|
||||||
|
"type": "Affichage Mesh random : horse en theta, delta : (0.7853981633974483, 3.9269908169872414)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827021,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827165,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827166,
|
||||||
|
"type": "Affichage error à cause du bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827245,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827245,
|
||||||
|
"type": "Affichage error pose déjà sélectionnée"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827357,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827357,
|
||||||
|
"type": "Affichage error à cause du bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827453,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464827453,
|
||||||
|
"type": "Affichage error pose déjà sélectionnée"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828301,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828301,
|
||||||
|
"type": "Affichage error pose déjà sélectionnée"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828430,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828541,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828653,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464828765,
|
||||||
|
"type": "bouton pose n°3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829422,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829442,
|
||||||
|
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (5, 4)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829443,
|
||||||
|
"type": "Affichage Mesh random : dragon en theta, delta : (-1.5707963267948966, 3.9269908169872414)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829757,
|
||||||
|
"type": "bouton pose n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829869,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464829981,
|
||||||
|
"type": "bouton pose n°2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464830079,
|
||||||
|
"type": "fleche droite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464830189,
|
||||||
|
"type": "bouton pose n°3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464830605,
|
||||||
|
"type": "bouton valider"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464830605,
|
||||||
|
"type": "fin des choix."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464830611,
|
||||||
|
"type": "Début analyse n°1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464832317,
|
||||||
|
"type": "ajout check sur : analyse n°1, mot 1. De face"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464832557,
|
||||||
|
"type": "Bouton valider analyse."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"time": 1678464832562,
|
||||||
|
"type": "Fin analyse"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -77,11 +77,11 @@ function init_variable(premier_appel){
|
||||||
R = 2.5
|
R = 2.5
|
||||||
|
|
||||||
// Enchainement des pages
|
// Enchainement des pages
|
||||||
page_contexte = false
|
page_contexte = true
|
||||||
page_inscription = false // true
|
page_inscription = false // true
|
||||||
page_explication = false
|
page_explication = false
|
||||||
page_explication_bis = false
|
page_explication_bis = false
|
||||||
page_vues = true // false
|
page_vues = false // false
|
||||||
page_analyse = false
|
page_analyse = false
|
||||||
|
|
||||||
// Pour afiicher les recap dans la partie analys,e on les conserve tous
|
// Pour afiicher les recap dans la partie analys,e on les conserve tous
|
||||||
|
|
@ -99,8 +99,6 @@ function init_variable(premier_appel){
|
||||||
message_fin = "> Sending data in progress ..."
|
message_fin = "> Sending data in progress ..."
|
||||||
envoie_termine = false
|
envoie_termine = false
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
////////////////////////////////////////
|
////////////////////////////////////////
|
||||||
|
|
@ -138,7 +136,7 @@ function setUp_light(rayon){
|
||||||
}
|
}
|
||||||
|
|
||||||
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
|
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
|
||||||
function setUp_3D(idx_mesh, idx_i_init, idx_j_init){
|
function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
|
||||||
// Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence
|
// Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence
|
||||||
// idx_i_init = Math.floor(Math.random()*8)
|
// idx_i_init = Math.floor(Math.random()*8)
|
||||||
// idx_j_init = Math.floor(Math.random()*5)
|
// idx_j_init = Math.floor(Math.random()*5)
|
||||||
|
|
@ -208,11 +206,21 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init){
|
||||||
// Data 3D
|
// Data 3D
|
||||||
obj_file = shuffle(['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 = shuffle(['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'])
|
||||||
const objLoader = new THREE.OBJLoader2();
|
const objLoader = new THREE.OBJLoader2();
|
||||||
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file[idx_mesh], (event) => {
|
|
||||||
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file[idx_mesh], (event) => {
|
// Si on load le mesh 3d dans les explicationq, on imporse que ce soit le dragon
|
||||||
const root = event.detail.loaderRootNode;
|
if (explication){
|
||||||
scene.add(root);
|
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.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[idx_mesh], (event) => {
|
||||||
|
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file[idx_mesh], (event) => {
|
||||||
|
const root = event.detail.loaderRootNode;
|
||||||
|
scene.add(root);
|
||||||
|
});
|
||||||
|
}
|
||||||
mesh_courant = obj_file[idx_mesh].split('_')[0]
|
mesh_courant = obj_file[idx_mesh].split('_')[0]
|
||||||
choix_courant['obj_file'] = obj_file[idx_mesh]
|
choix_courant['obj_file'] = obj_file[idx_mesh]
|
||||||
choix_courant['mesh'] = mesh_courant
|
choix_courant['mesh'] = mesh_courant
|
||||||
|
|
@ -246,6 +254,9 @@ function init_data(){
|
||||||
imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.png')
|
imgs["marie"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres/marie.png')
|
||||||
imgs["clavier_vues"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_vues.png')
|
imgs["clavier_vues"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_vues.png')
|
||||||
imgs["clavier_enter"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_enter.png')
|
imgs["clavier_enter"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/clavier_enter.png')
|
||||||
|
imgs["recap1"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap1.png')
|
||||||
|
imgs["recap2"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap2.png')
|
||||||
|
imgs["recap3"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Tutorial/recap3.png')
|
||||||
boutons = {}
|
boutons = {}
|
||||||
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_reinitialiser.png')
|
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_reinitialiser.png')
|
||||||
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png')
|
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png')
|
||||||
|
|
@ -271,7 +282,6 @@ function init_data(){
|
||||||
clicked = true }, false)
|
clicked = true }, false)
|
||||||
canvas.addEventListener("mouseup", function(event) { xyMouseUp = getMousePos(canvas, event)}, false)
|
canvas.addEventListener("mouseup", function(event) { xyMouseUp = getMousePos(canvas, event)}, false)
|
||||||
|
|
||||||
console.log("fin init")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -321,7 +331,7 @@ function animate() {
|
||||||
init_explication()
|
init_explication()
|
||||||
// affichage ecran 3D de manière aléatoire
|
// affichage ecran 3D de manière aléatoire
|
||||||
idx_i_explication = 4 , idx_j_explication = 1
|
idx_i_explication = 4 , idx_j_explication = 1
|
||||||
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication)
|
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication, explication=true)
|
||||||
premier_tour_page_explications = false
|
premier_tour_page_explications = false
|
||||||
}
|
}
|
||||||
// Nettoyage
|
// Nettoyage
|
||||||
|
|
@ -340,18 +350,12 @@ function animate() {
|
||||||
// affichage de sboutons
|
// affichage de sboutons
|
||||||
afficher_bouton(boutons)
|
afficher_bouton(boutons)
|
||||||
if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")}
|
if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")}
|
||||||
// traitement fleche (surval + click)
|
|
||||||
traitement_explications(idx_i_explication, idx_j_explication)
|
|
||||||
// traitement bouton : (survol + click)
|
|
||||||
//traitement_bouton()
|
|
||||||
// afficher + maj du recap de pose choisie : affichage des vue des poses
|
|
||||||
afficher_recap()
|
|
||||||
// Affichage texte recap
|
|
||||||
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}
|
|
||||||
// affichage 3D
|
|
||||||
renderer.render( scene, camera );
|
|
||||||
// Les poses choisies sont grisées
|
// Les poses choisies sont grisées
|
||||||
bloquer_pose(liste_poses)
|
bloquer_pose(liste_poses)
|
||||||
|
// traitement fleche (surval + click)
|
||||||
|
traitement_explications(idx_i_explication, idx_j_explication)
|
||||||
|
// affichage 3D
|
||||||
|
renderer.render( scene, camera );
|
||||||
// RAZ
|
// RAZ
|
||||||
clicked = false
|
clicked = false
|
||||||
which_clicked_fleche = -1
|
which_clicked_fleche = -1
|
||||||
|
|
|
||||||
|
|
@ -86,11 +86,11 @@ function afficher_recap(){
|
||||||
// texte du haut
|
// texte du haut
|
||||||
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||||
// fleche swap haut
|
// fleche swap haut
|
||||||
x_fleche_h = W_3D+ w_recap/2.5 - ecart_recap/2
|
x_fleche_h = W_3D+ w_recap/2.5
|
||||||
w_fleche_h = 20
|
w_fleche_h = 20
|
||||||
h_fleche_h = 20
|
h_fleche_h = 20
|
||||||
// fleche swap bas
|
// fleche swap bas
|
||||||
x_fleche_b = W_3D+ w_recap/2.5 - ecart_recap/2
|
x_fleche_b = W_3D+ w_recap/2.5
|
||||||
w_fleche_b = 20
|
w_fleche_b = 20
|
||||||
h_fleche_b = 20
|
h_fleche_b = 20
|
||||||
// croix
|
// croix
|
||||||
|
|
@ -101,8 +101,7 @@ function afficher_recap(){
|
||||||
for (let i = 0 ; i < canvasMins.length; i++) {
|
for (let i = 0 ; i < canvasMins.length; i++) {
|
||||||
// Draw les images des contextes
|
// Draw les images des contextes
|
||||||
y_image = 100+(20+ H_3D/3.5)*i
|
y_image = 100+(20+ H_3D/3.5)*i
|
||||||
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2.5, y_image, H_3D/3.5, H_3D/3.5)
|
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2, y_image, H_3D/3.5, H_3D/3.5)
|
||||||
//draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, H_3D/3.5, H_3D/3.5, "rgb(255,0,0)")
|
|
||||||
//Fleche pour Switch haut
|
//Fleche pour Switch haut
|
||||||
if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) {
|
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.4 + y_image
|
||||||
|
|
@ -111,9 +110,6 @@ function afficher_recap(){
|
||||||
swapElements(canvasMins, i, i-1)
|
swapElements(canvasMins, i, i-1)
|
||||||
swapElements(ctxMins, i, i-1)
|
swapElements(ctxMins, i, i-1)
|
||||||
swapElements(liste_poses, i, i-1)
|
swapElements(liste_poses, i, i-1)
|
||||||
//swapElements(checkbox_clicked_courant, i, i-1)
|
|
||||||
//checkbox_clicked_courant[i-1].recap = "n°"+i
|
|
||||||
//checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
|
||||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch haut de la pose n°"+(i+1)})
|
interactions.push({"time": new Date().getTime(), "type": "fleche switch haut de la pose n°"+(i+1)})
|
||||||
clicked = false
|
clicked = false
|
||||||
}
|
}
|
||||||
|
|
@ -126,18 +122,12 @@ function afficher_recap(){
|
||||||
swapElements(canvasMins, i, i+1)
|
swapElements(canvasMins, i, i+1)
|
||||||
swapElements(ctxMins, i, i+1)
|
swapElements(ctxMins, i, i+1)
|
||||||
swapElements(liste_poses, i, i+1)
|
swapElements(liste_poses, i, i+1)
|
||||||
// swapElements(checkbox_clicked_courant, i, i+1)
|
|
||||||
// checkbox_clicked_courant[i+1].recap = "n°"+(i+2)
|
|
||||||
// checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
|
||||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch bas de la pose n°"+(i+1)})
|
interactions.push({"time": new Date().getTime(), "type": "fleche switch bas de la pose n°"+(i+1)})
|
||||||
clicked = false
|
clicked = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Croix
|
// Croix
|
||||||
if (i < nb_choix_fait) {
|
if (i < nb_choix_fait) {
|
||||||
// checkbox
|
|
||||||
//draw_empty_checkbox(25 + (5+0.3*canvasRenderer.height)*i, i)
|
|
||||||
//afficher_check(checkbox_clicked_courant, i, 25 + (5+0.3*canvasRenderer.height)*i)
|
|
||||||
// croix pour annuler
|
// croix pour annuler
|
||||||
y_croix = (H_3D/3.5)*0.4 + y_image
|
y_croix = (H_3D/3.5)*0.4 + y_image
|
||||||
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
||||||
|
|
@ -149,13 +139,7 @@ function afficher_recap(){
|
||||||
for (let j = i; j < nb_choix_demande-1; j++) {
|
for (let j = i; j < nb_choix_demande-1; j++) {
|
||||||
swapElements(canvasMins, j, j+1)
|
swapElements(canvasMins, j, j+1)
|
||||||
swapElements(ctxMins, j, j+1)
|
swapElements(ctxMins, j, j+1)
|
||||||
// swapElements(checkbox_clicked_courant, j, j+1)
|
|
||||||
// checkbox_clicked_courant[j+1].recap = "n°"+(j+2)
|
|
||||||
// checkbox_clicked_courant[j].recap = "n°"+(j+1)
|
|
||||||
}
|
}
|
||||||
// vider le dernier recap poru les checkbox
|
|
||||||
// checkbox_clicked_courant[nb_choix_demande-1].idx_checkbox = []
|
|
||||||
// checkbox_clicked_courant[nb_choix_demande-1].mots = []
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
function init_explication(){
|
function init_explication(){
|
||||||
|
|
||||||
alpha_ecran = 0.9
|
alpha_ecran = 1
|
||||||
alpha_clignotement = 0.8
|
alpha_clignotement = 0.8
|
||||||
color_ecran ="rgb(255,255,255)"
|
color_ecran ="rgb(255,255,255)"
|
||||||
color_texte = "rgb(0,0,0)"
|
color_texte = "rgb(0,0,0)"
|
||||||
|
|
@ -16,7 +16,7 @@ function init_explication(){
|
||||||
|
|
||||||
// deplacement pour ajouter un titre à l'ecran
|
// deplacement pour ajouter un titre à l'ecran
|
||||||
dy_ecran = 50
|
dy_ecran = 50
|
||||||
dh_ecran = 70
|
dh_ecran = 55
|
||||||
|
|
||||||
// Position des boutons sur l'écran
|
// Position des boutons sur l'écran
|
||||||
w_bouton_suivant = boutons["suivant"].width*0.3
|
w_bouton_suivant = boutons["suivant"].width*0.3
|
||||||
|
|
@ -53,7 +53,25 @@ function init_explication(){
|
||||||
// 3.3 : clique sur fleche droite
|
// 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":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
|
||||||
// 4: Selection de la vue
|
// 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":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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},
|
||||||
|
//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}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -86,6 +104,25 @@ function init_explication(){
|
||||||
{"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":0.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||||
// 4 :
|
// 4 :
|
||||||
{"t":"You have chosen your first viewpoint. 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.01, "l":l_texte_max, "c":color_texte, "i":50},
|
{"t":"You have chosen your first viewpoint. 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.01, "l":l_texte_max, "c":color_texte, "i":50},
|
||||||
|
//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},
|
||||||
|
// 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},
|
||||||
|
// 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},
|
||||||
|
// 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},
|
||||||
|
// 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},
|
||||||
|
// 6.5
|
||||||
|
{"t":"With the RESET SELECTION button, we can rmove 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},
|
||||||
|
// 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},
|
||||||
|
// 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},
|
||||||
|
// 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},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
positions_bouton = [
|
positions_bouton = [
|
||||||
|
|
@ -116,7 +153,25 @@ function init_explication(){
|
||||||
// 3.3 : clique sur fleche droite
|
// 3.3 : clique sur fleche droite
|
||||||
{"afficher": true, "x": ecrans[11].x + ecrans[11].w - w_bouton_suivant - marge_texte_x, "y": ecrans[11].y + ecrans[11].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
{"afficher": true, "x": ecrans[11].x + ecrans[11].w - w_bouton_suivant - marge_texte_x, "y": ecrans[11].y + ecrans[11].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
// 4
|
// 4
|
||||||
{"afficher": true, "x": ecrans[12].x + ecrans[12].w - w_bouton_suivant - marge_texte_x, "y": ecrans[12].y + ecrans[12].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}
|
{"afficher": true, "x": ecrans[12].x + ecrans[12].w - w_bouton_suivant - marge_texte_x, "y": ecrans[12].y + ecrans[12].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 5
|
||||||
|
{"afficher": true, "x": ecrans[13].x + ecrans[13].w - w_bouton_suivant - marge_texte_x, "y": ecrans[13].y + ecrans[13].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.1
|
||||||
|
{"afficher": true, "x": ecrans[15].x + ecrans[15].w - w_bouton_suivant - marge_texte_x, "y": ecrans[15].y + ecrans[15].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.2
|
||||||
|
{"afficher": true, "x": ecrans[16].x + ecrans[16].w - w_bouton_suivant - marge_texte_x, "y": ecrans[16].y + ecrans[16].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.3
|
||||||
|
{"afficher": true, "x": ecrans[17].x + ecrans[17].w - w_bouton_suivant - marge_texte_x, "y": ecrans[17].y + ecrans[17].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.4
|
||||||
|
{"afficher": true, "x": ecrans[18].x + ecrans[18].w - w_bouton_suivant - marge_texte_x, "y": ecrans[18].y + ecrans[18].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.5
|
||||||
|
{"afficher": true, "x": ecrans[19].x + ecrans[19].w - w_bouton_suivant - marge_texte_x, "y": ecrans[19].y + ecrans[19].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.6
|
||||||
|
{"afficher": true, "x": ecrans[20].x + ecrans[20].w - w_bouton_suivant - marge_texte_x, "y": ecrans[20].y + ecrans[20].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
// 6.7
|
||||||
|
{"afficher": true, "x": ecrans[21].x + ecrans[21].w - w_bouton_suivant - marge_texte_x, "y": ecrans[21].y + ecrans[21].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||||
|
//7
|
||||||
|
{"afficher": true, "x": ecrans[22].x + ecrans[22].w - w_bouton_suivant - marge_texte_x, "y": ecrans[22].y + ecrans[22].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}
|
||||||
]
|
]
|
||||||
|
|
||||||
clignotements = [
|
clignotements = [
|
||||||
|
|
@ -153,7 +208,38 @@ function init_explication(){
|
||||||
// 3.3 : clique sur fleche drioite --> next step bouton pose
|
// 3.3 : clique sur fleche drioite --> next step bouton pose
|
||||||
{"type":"a_cliquer", "x": W_3D*pos_bouton, "y": H_3D+dy*2, "w": w_bouton, "h": h_bouton, "c":color_clignotement,"a":alpha_clignotement, "t": temps_attente},
|
{"type":"a_cliquer", "x": W_3D*pos_bouton, "y": H_3D+dy*2, "w": w_bouton, "h": h_bouton, "c":color_clignotement,"a":alpha_clignotement, "t": temps_attente},
|
||||||
// 4
|
// 4
|
||||||
{"type":"a_cliquer", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
{"type":"a_cliquer", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
// 5
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[13].x, "y":positions_bouton[13].y, "w":positions_bouton[13].w, "h":positions_bouton[13].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
// 6.1
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[15].x, "y":positions_bouton[15].y, "w":positions_bouton[15].w, "h":positions_bouton[15].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
// 6.2
|
||||||
|
[{"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}
|
||||||
|
],
|
||||||
|
//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}
|
||||||
|
],
|
||||||
|
//6.4 remove
|
||||||
|
[{"type":"a_regarder", "x": W_3D*pos_bouton+w_bouton+ecart_bouton, "y": H_3D+dy*2, "w":w_bouton, "h": h_bouton , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||||
|
],
|
||||||
|
//6.5 reset selection
|
||||||
|
[{"type":"a_regarder", "x": W_3D*pos_bouton+w_bouton/2, "y": H_3D+dy*2+h_bouton+ecart_bouton, "w":w_bouton, "h": h_bouton , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[19].x, "y":positions_bouton[19].y, "w":positions_bouton[19].w, "h":positions_bouton[19].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||||
|
],
|
||||||
|
//6.6 raz
|
||||||
|
[{"type":"a_regarder", "x": window.innerWidth-w_bouton-10, "y": window.innerHeight-h_bouton-10, "w":w_bouton, "h": h_bouton , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[20].x, "y":positions_bouton[20].y, "w":positions_bouton[20].w, "h":positions_bouton[20].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||||
|
],
|
||||||
|
//6.6 validate
|
||||||
|
[{"type":"a_regarder", "x": -(1.2*w_bouton)/4+W_3D, "y": H_3D+dy*2+h_bouton, "w":w_bouton*1.2, "h": h_bouton*1.2, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[21].x, "y":positions_bouton[21].y, "w":positions_bouton[21].w, "h":positions_bouton[21].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
|
||||||
|
],
|
||||||
|
// 7. fini
|
||||||
|
{"type":"a_cliquer", "x": positions_bouton[15].x, "y":positions_bouton[15].y, "w":positions_bouton[15].w, "h":positions_bouton[15].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -185,7 +271,27 @@ function init_explication(){
|
||||||
// 3.3 : clique sur bouton pose
|
// 3.3 : clique sur bouton pose
|
||||||
{"type": "bouton_pose", "x": clignotements[12].x, "y": clignotements[12].y, "w": clignotements[12].w, "h": clignotements[12].h},
|
{"type": "bouton_pose", "x": clignotements[12].x, "y": clignotements[12].y, "w": clignotements[12].w, "h": clignotements[12].h},
|
||||||
// 4 : clique sur next
|
// 4 : clique sur next
|
||||||
{"type": "bouton", "x": positions_bouton[13].x, "y":positions_bouton[13].y, "w":positions_bouton[13].w, "h":positions_bouton[13].h}
|
{"type": "bouton", "x": positions_bouton[13].x, "y":positions_bouton[13].y, "w":positions_bouton[13].w, "h":positions_bouton[13].h},
|
||||||
|
// 5 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[13].x, "y":positions_bouton[13].y, "w":positions_bouton[13].w, "h":positions_bouton[13].h},
|
||||||
|
// 6.1 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[15].x, "y":positions_bouton[15].y, "w":positions_bouton[15].w, "h":positions_bouton[15].h},
|
||||||
|
// 6.2 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h},
|
||||||
|
// 6.3 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h},
|
||||||
|
// 6.4 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h},
|
||||||
|
// 6.5 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h},
|
||||||
|
// 6.5 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h},
|
||||||
|
// 6.6 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h},
|
||||||
|
// 6.7 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h},
|
||||||
|
// 7 : clique sur next
|
||||||
|
{"type": "bouton", "x": positions_bouton[18].x, "y":positions_bouton[18].y, "w":positions_bouton[18].w, "h":positions_bouton[18].h}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -196,14 +302,35 @@ function init_explication(){
|
||||||
|
|
||||||
function traitement_explications(idx_i_explication, idx_j_explication){
|
function traitement_explications(idx_i_explication, idx_j_explication){
|
||||||
temps_pop = 8000
|
temps_pop = 8000
|
||||||
|
|
||||||
|
// Pour déplacer le mesh, il faut initialiser ces deux variables
|
||||||
if (num_action==0){
|
if (num_action==0){
|
||||||
idx_i = idx_i_explication
|
idx_i = idx_i_explication
|
||||||
idx_j = idx_j_explication
|
idx_j = idx_j_explication
|
||||||
}
|
}
|
||||||
// rectangle bleu pour cacher l'interface
|
// rectangle bleu pour cacher l'interface
|
||||||
if (num_action == 0){
|
if (num_action == 0){
|
||||||
draw_rectangle(0, 0, window.innerWidth, window.innerHeight, "rgb(3, 26, 33)", 1)
|
draw_rectangle(0, 0, window.innerWidth, window.innerHeight, "rgb(3, 26, 33)", 1)
|
||||||
}
|
}
|
||||||
|
// Rendre le recap inatif à partir de l'étape 14
|
||||||
|
if(num_action<= 14){
|
||||||
|
afficher_recap()
|
||||||
|
// Affichage texte recap
|
||||||
|
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}}
|
||||||
|
|
||||||
|
if(num_action>14){
|
||||||
|
afficher_recap_inactif()
|
||||||
|
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}}
|
||||||
|
|
||||||
|
// remplir les canvasMins pour l'eemple quand on est a un num_action précis
|
||||||
|
if (num_action == 15){
|
||||||
|
nb_choix_fait = 3
|
||||||
|
liste_poses = [['choix1', 1.5707963267948966, 2.356194490192345, 3, 0],['choix2', 0.7853981633974483, 2.356194490192345, 3, 1],['choix3', 0.7853981633974483, 3.141592653589793, 4, 1]]
|
||||||
|
ctxMins[0].drawImage(imgs['recap1'], 0,0, imgs['recap1'].width, imgs['recap1'].height, 0, 0, canvasMins[0].width, canvasMins[0].height )
|
||||||
|
ctxMins[1].drawImage(imgs['recap2'], 0,0, imgs['recap2'].width, imgs['recap2'].height, 0, 0, canvasMins[0].width, canvasMins[0].height )
|
||||||
|
ctxMins[2].drawImage(imgs['recap3'], 0,0, imgs['recap3'].width, imgs['recap3'].height, 0, 0, canvasMins[0].width, canvasMins[0].height )
|
||||||
|
}
|
||||||
|
|
||||||
if (num_action < nb_action){
|
if (num_action < nb_action){
|
||||||
|
|
||||||
// Données
|
// Données
|
||||||
|
|
@ -240,11 +367,11 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||||
|
|
||||||
///////// 1 clignotement courant donc taille = 8 car 8 keys
|
///////// 1 clignotement courant donc taille = 8 car 8 keys
|
||||||
if (Object.keys(clignotement).length == 8){
|
if (Object.keys(clignotement).length == 8){
|
||||||
if (time_animate > time_clicke + clignotement.t && num_action!=13 && clignotement.type=="a_cliquer"){
|
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_cliquer"){
|
||||||
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, epaisseur_clignotement)
|
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, epaisseur_clignotement)
|
||||||
}
|
}
|
||||||
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){
|
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){
|
||||||
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6)
|
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.8)
|
||||||
}
|
}
|
||||||
// on a plusieurs clignotement
|
// on a plusieurs clignotement
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -256,7 +383,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||||
}
|
}
|
||||||
// rectangle
|
// rectangle
|
||||||
if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){
|
if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){
|
||||||
clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(17, 138, 178)", 0.6)
|
clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(17, 138, 178)", 0.8)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -460,6 +587,46 @@ function afficher_bouton_commencer_explication(){
|
||||||
function action_bouton_commencer_explication(){
|
function action_bouton_commencer_explication(){
|
||||||
page_explication_bis = false
|
page_explication_bis = false
|
||||||
page_vues = true
|
page_vues = true
|
||||||
interactions.push({"time": new Date().getTime(), "type": "Clique bouton commencer - Début étude"})
|
interactions.push({"time": new Date().getTime(), "type": "Début étude"})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
w_fleche_h = 20
|
||||||
|
h_fleche_h = 20
|
||||||
|
// fleche swap bas
|
||||||
|
x_fleche_b = W_3D+ w_recap/2.5
|
||||||
|
w_fleche_b = 20
|
||||||
|
h_fleche_b = 20
|
||||||
|
// croix
|
||||||
|
x_croix = W_3D+ w_recap/2.5 + W_3D/3.5 +10
|
||||||
|
w_croix = 20
|
||||||
|
h_croix = 20
|
||||||
|
// 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
|
||||||
|
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
|
||||||
|
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
|
||||||
|
ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)
|
||||||
|
}
|
||||||
|
// Croix
|
||||||
|
if (i < nb_choix_fait) {
|
||||||
|
// croix pour annuler
|
||||||
|
y_croix = (H_3D/3.5)*0.4 + y_image
|
||||||
|
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -48,7 +48,7 @@ function action_bouton_commencer_inscription(){
|
||||||
page_inscription = false
|
page_inscription = false
|
||||||
//page_vues = true
|
//page_vues = true
|
||||||
page_explication = true
|
page_explication = true
|
||||||
interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"})
|
interactions.push({"time": new Date().getTime(), "type": "Début explications"})
|
||||||
//gestion des données personnelle de l'utilisateur
|
//gestion des données personnelle de l'utilisateur
|
||||||
//gestion_donnees_personnelles()
|
//gestion_donnees_personnelles()
|
||||||
|
|
||||||
|
|
@ -74,6 +74,7 @@ function action_bouton_suivant_inscription(){
|
||||||
inscription_finie = true
|
inscription_finie = true
|
||||||
gestion_donnees_personnelles()
|
gestion_donnees_personnelles()
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
interactions.push({"time": new Date().getTime(), "type": "Fin inscription"})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue