plus de clignotement bizarre

This commit is contained in:
mpelissi 2023-03-10 08:57:25 +01:00
parent 0d9cb773a8
commit 59e22fc0ac
8 changed files with 1194 additions and 42 deletions

View File

@ -0,0 +1,193 @@
{
"tache_N1": {
"obj_file": "dragon_update_user_study.obj",
"mesh": "dragon",
"position_init_idx_i": 7,
"position_init_idx_j": 2,
"theta_init": 0,
"delta_init": 5.497787143782138,
"choix_poses": [
[
"choix1",
0,
4.71238898038469,
6,
2
],
[
"choix2",
0,
3.9269908169872414,
5,
2
],
[
"choix3",
0,
3.141592653589793,
4,
2
]
]
},
"tache_N2": {
"obj_file": "camel_update_user_study_normed.obj",
"mesh": "camel",
"position_init_idx_i": 3,
"position_init_idx_j": 2,
"theta_init": 0,
"delta_init": 2.356194490192345,
"choix_poses": [
[
"choix1",
0,
2.356194490192345,
3,
2
],
[
"choix2",
0,
1.5707963267948966,
2,
2
],
[
"choix3",
0,
0.7853981633974483,
1,
2
]
]
},
"Analyse": {
"analyse_N1": {
"mesh": "dragon",
"idx": [
0
],
"mots": [
"1. De face"
]
}
},
"Interactions": [
{
"time": 1678367168380,
"type": "start"
},
{
"time": 1678367168404,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (7, 2)"
},
{
"time": 1678367168404,
"type": "Affichage Mesh random : dragon en theta, delta : (0, 5.497787143782138)"
},
{
"time": 1678367169990,
"type": "fleche droite"
},
{
"time": 1678367170005,
"type": "bouton pose n°1"
},
{
"time": 1678367170229,
"type": "bouton pose n°2"
},
{
"time": 1678367170230,
"type": "Affichage error pose déjà sélectionnée"
},
{
"time": 1678367170261,
"type": "fleche droite"
},
{
"time": 1678367170421,
"type": "bouton pose n°2"
},
{
"time": 1678367170533,
"type": "fleche droite"
},
{
"time": 1678367170596,
"type": "bouton pose n°3"
},
{
"time": 1678367170726,
"type": "fleche droite"
},
{
"time": 1678367170804,
"type": "bouton pose n°4"
},
{
"time": 1678367170804,
"type": "Affichage error 3 déjà fait"
},
{
"time": 1678367171207,
"type": "bouton valider"
},
{
"time": 1678367171241,
"type": "Affichage Mesh random : camel en idx_i, idx_j : (3, 2)"
},
{
"time": 1678367171241,
"type": "Affichage Mesh random : camel en theta, delta : (0, 2.356194490192345)"
},
{
"time": 1678367171626,
"type": "bouton pose n°1"
},
{
"time": 1678367171701,
"type": "fleche droite"
},
{
"time": 1678367171813,
"type": "bouton pose n°2"
},
{
"time": 1678367171909,
"type": "fleche droite"
},
{
"time": 1678367172007,
"type": "bouton pose n°3"
},
{
"time": 1678367172075,
"type": "fleche droite"
},
{
"time": 1678367173172,
"type": "bouton valider"
},
{
"time": 1678367173172,
"type": "fin des choix."
},
{
"time": 1678367173186,
"type": "Début analyse n°1"
},
{
"time": 1678367174645,
"type": "ajout check sur : analyse n°1, mot 1. De face"
},
{
"time": 1678367174964,
"type": "Bouton valider analyse."
},
{
"time": 1678367174970,
"type": "Fin analyse"
}
]
}

View File

@ -0,0 +1,165 @@
{
"tache_N1": {
"obj_file": "dragon_update_user_study.obj",
"mesh": "dragon",
"position_init_idx_i": 3,
"position_init_idx_j": 2,
"theta_init": 0,
"delta_init": 2.356194490192345,
"choix_poses": [
[
"choix1",
0,
2.356194490192345,
3,
2
],
[
"choix2",
0,
1.5707963267948966,
2,
2
],
[
"choix3",
0,
0.7853981633974483,
1,
2
]
]
},
"tache_N2": {
"obj_file": "camel_update_user_study_normed.obj",
"mesh": "camel",
"position_init_idx_i": 6,
"position_init_idx_j": 2,
"theta_init": 0,
"delta_init": 4.71238898038469,
"choix_poses": [
[
"choix1",
0,
4.71238898038469,
6,
2
],
[
"choix2",
0,
3.9269908169872414,
5,
2
],
[
"choix3",
0,
3.141592653589793,
4,
2
]
]
},
"Analyse": {
"analyse_N1": {
"mesh": "dragon",
"idx": [
0
],
"mots": [
"1. De face"
]
}
},
"Interactions": [
{
"time": 1678365963961,
"type": "start"
},
{
"time": 1678365963986,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (3, 2)"
},
{
"time": 1678365963986,
"type": "Affichage Mesh random : dragon en theta, delta : (0, 2.356194490192345)"
},
{
"time": 1678365964615,
"type": "bouton pose n°1"
},
{
"time": 1678365964695,
"type": "fleche droite"
},
{
"time": 1678365964790,
"type": "bouton pose n°2"
},
{
"time": 1678365964885,
"type": "fleche droite"
},
{
"time": 1678365964966,
"type": "bouton pose n°3"
},
{
"time": 1678365965366,
"type": "bouton valider"
},
{
"time": 1678365965383,
"type": "Affichage Mesh random : camel en idx_i, idx_j : (6, 2)"
},
{
"time": 1678365965383,
"type": "Affichage Mesh random : camel en theta, delta : (0, 4.71238898038469)"
},
{
"time": 1678365965725,
"type": "bouton pose n°1"
},
{
"time": 1678365965797,
"type": "fleche droite"
},
{
"time": 1678365965957,
"type": "bouton pose n°2"
},
{
"time": 1678365965994,
"type": "fleche droite"
},
{
"time": 1678365966117,
"type": "bouton pose n°3"
},
{
"time": 1678365966518,
"type": "bouton valider"
},
{
"time": 1678365966518,
"type": "fin des choix."
},
{
"time": 1678365966522,
"type": "Début analyse n°1"
},
{
"time": 1678365968362,
"type": "ajout check sur : analyse n°1, mot 1. De face"
},
{
"time": 1678365969302,
"type": "Bouton valider analyse."
},
{
"time": 1678365969307,
"type": "Fin analyse"
}
]
}

View File

@ -0,0 +1,763 @@
{
"identite": {
"Firstname": "pouet",
"Name": "pouet",
"Age": "6",
"Sexe": "M"
},
"tache_N1": {
"obj_file": "dragon_update_user_study.obj",
"mesh": "dragon",
"position_init_idx_i": 6,
"position_init_idx_j": 4,
"theta_init": -1.5707963267948966,
"delta_init": 4.71238898038469,
"choix_poses": [
[
"choix1",
0,
5.497787143782138,
7,
2
],
[
"choix2",
0,
4.71238898038469,
6,
2
],
[
"choix3",
0,
0.7853981633974483,
1,
2
]
]
},
"tache_N2": {
"obj_file": "camel_update_user_study_normed.obj",
"mesh": "camel",
"position_init_idx_i": 1,
"position_init_idx_j": 4,
"theta_init": -1.5707963267948966,
"delta_init": 0.7853981633974483,
"choix_poses": [
[
"choix1",
0,
5.497787143782138,
7,
2
],
[
"choix2",
0,
4.71238898038469,
6,
2
],
[
"choix3",
0,
0.7853981633974483,
1,
2
]
]
},
"Analyse": {
"analyse_N1": {
"mesh": "dragon",
"idx": [
4
],
"mots": [
"5. toto"
]
}
},
"Interactions": [
{
"time": 1678374153796,
"type": "start"
},
{
"time": 1678374264112,
"type": "Fin contexte - Début inscription"
},
{
"time": 1678374303109,
"type": "Fin inscription - Début explications"
},
{
"time": 1678374303349,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 1)"
},
{
"time": 1678374303349,
"type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 3.141592653589793)"
},
{
"time": 1678374393182,
"type": "fleche droite"
},
{
"time": 1678374395416,
"type": "fleche haut"
},
{
"time": 1678374396982,
"type": "fleche haut"
},
{
"time": 1678374396982,
"type": "Affichage error à cause de fleche haut"
},
{
"time": 1678374411665,
"type": "fleche bas"
},
{
"time": 1678374415797,
"type": "fleche bas"
},
{
"time": 1678374418797,
"type": "fleche droite"
},
{
"time": 1678374471542,
"type": "bouton pose n°1"
},
{
"time": 1678374528703,
"type": "Fin explication. Début des choix."
},
{
"time": 1678374528887,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (6, 4)"
},
{
"time": 1678374528887,
"type": "Affichage Mesh random : dragon en theta, delta : (-1.5707963267948966, 4.71238898038469)"
},
{
"time": 1678374533352,
"type": "fleche haut"
},
{
"time": 1678374534251,
"type": "fleche haut"
},
{
"time": 1678374536468,
"type": "fleche droite"
},
{
"time": 1678374538534,
"type": "fleche gauche"
},
{
"time": 1678374539018,
"type": "fleche gauche"
},
{
"time": 1678374541750,
"type": "fleche bas"
},
{
"time": 1678374543284,
"type": "fleche haut"
},
{
"time": 1678374543751,
"type": "fleche haut"
},
{
"time": 1678374545600,
"type": "fleche bas"
},
{
"time": 1678374547516,
"type": "fleche droite"
},
{
"time": 1678374549700,
"type": "fleche gauche"
},
{
"time": 1678374550966,
"type": "fleche gauche"
},
{
"time": 1678374551433,
"type": "fleche gauche"
},
{
"time": 1678374552417,
"type": "fleche gauche"
},
{
"time": 1678374554616,
"type": "fleche droite"
},
{
"time": 1678374555183,
"type": "fleche droite"
},
{
"time": 1678374555783,
"type": "fleche droite"
},
{
"time": 1678374558932,
"type": "bouton pose n°1"
},
{
"time": 1678374561032,
"type": "fleche gauche"
},
{
"time": 1678374562248,
"type": "fleche gauche"
},
{
"time": 1678374563548,
"type": "fleche gauche"
},
{
"time": 1678374565431,
"type": "fleche droite"
},
{
"time": 1678374565899,
"type": "fleche droite"
},
{
"time": 1678374566132,
"type": "fleche droite"
},
{
"time": 1678374566348,
"type": "fleche droite"
},
{
"time": 1678374569065,
"type": "bouton pose n°2"
},
{
"time": 1678374574047,
"type": "fleche bas"
},
{
"time": 1678374576514,
"type": "fleche haut"
},
{
"time": 1678374576864,
"type": "fleche haut"
},
{
"time": 1678374580014,
"type": "fleche haut"
},
{
"time": 1678374580430,
"type": "fleche haut"
},
{
"time": 1678374580430,
"type": "Affichage error à cause de fleche haut"
},
{
"time": 1678374582030,
"type": "fleche droite"
},
{
"time": 1678374582630,
"type": "fleche droite"
},
{
"time": 1678374582864,
"type": "fleche droite"
},
{
"time": 1678374583064,
"type": "fleche droite"
},
{
"time": 1678374586180,
"type": "fleche bas"
},
{
"time": 1678374588246,
"type": "fleche bas"
},
{
"time": 1678374590395,
"type": "fleche gauche"
},
{
"time": 1678374590612,
"type": "fleche gauche"
},
{
"time": 1678374592029,
"type": "fleche droite"
},
{
"time": 1678374592246,
"type": "fleche droite"
},
{
"time": 1678374592462,
"type": "fleche droite"
},
{
"time": 1678374592695,
"type": "fleche droite"
},
{
"time": 1678374592895,
"type": "fleche droite"
},
{
"time": 1678374593112,
"type": "fleche droite"
},
{
"time": 1678374595745,
"type": "fleche bas"
},
{
"time": 1678374597129,
"type": "fleche haut"
},
{
"time": 1678374597728,
"type": "fleche haut"
},
{
"time": 1678374600094,
"type": "fleche droite"
},
{
"time": 1678374601594,
"type": "fleche gauche"
},
{
"time": 1678374601928,
"type": "fleche gauche"
},
{
"time": 1678374602661,
"type": "fleche gauche"
},
{
"time": 1678374602911,
"type": "fleche gauche"
},
{
"time": 1678374603128,
"type": "fleche gauche"
},
{
"time": 1678374605444,
"type": "fleche haut"
},
{
"time": 1678374606994,
"type": "fleche bas"
},
{
"time": 1678374608077,
"type": "fleche bas"
},
{
"time": 1678374610211,
"type": "fleche gauche"
},
{
"time": 1678374611660,
"type": "fleche droite"
},
{
"time": 1678374611977,
"type": "fleche droite"
},
{
"time": 1678374615277,
"type": "bouton pose n°3"
},
{
"time": 1678374629009,
"type": "bouton valider"
},
{
"time": 1678374629050,
"type": "Affichage Mesh random : camel en idx_i, idx_j : (1, 4)"
},
{
"time": 1678374629050,
"type": "Affichage Mesh random : camel en theta, delta : (-1.5707963267948966, 0.7853981633974483)"
},
{
"time": 1678374633342,
"type": "fleche haut"
},
{
"time": 1678374633774,
"type": "fleche haut"
},
{
"time": 1678374636908,
"type": "fleche gauche"
},
{
"time": 1678374637158,
"type": "fleche gauche"
},
{
"time": 1678374637591,
"type": "fleche gauche"
},
{
"time": 1678374637874,
"type": "fleche gauche"
},
{
"time": 1678374638125,
"type": "fleche gauche"
},
{
"time": 1678374638741,
"type": "fleche gauche"
},
{
"time": 1678374640491,
"type": "fleche bas"
},
{
"time": 1678374642008,
"type": "fleche haut"
},
{
"time": 1678374642524,
"type": "fleche haut"
},
{
"time": 1678374644657,
"type": "fleche droite"
},
{
"time": 1678374645757,
"type": "fleche droite"
},
{
"time": 1678374645974,
"type": "fleche droite"
},
{
"time": 1678374646190,
"type": "fleche droite"
},
{
"time": 1678374646407,
"type": "fleche droite"
},
{
"time": 1678374646907,
"type": "fleche droite"
},
{
"time": 1678374647374,
"type": "fleche droite"
},
{
"time": 1678374647590,
"type": "fleche droite"
},
{
"time": 1678374647757,
"type": "fleche droite"
},
{
"time": 1678374649340,
"type": "fleche haut"
},
{
"time": 1678374651073,
"type": "fleche bas"
},
{
"time": 1678374651440,
"type": "fleche bas"
},
{
"time": 1678374653756,
"type": "fleche droite"
},
{
"time": 1678374655706,
"type": "fleche gauche"
},
{
"time": 1678374656022,
"type": "fleche gauche"
},
{
"time": 1678374656506,
"type": "fleche gauche"
},
{
"time": 1678374658039,
"type": "fleche droite"
},
{
"time": 1678374659539,
"type": "fleche bas"
},
{
"time": 1678374660839,
"type": "fleche haut"
},
{
"time": 1678374661322,
"type": "fleche haut"
},
{
"time": 1678374665039,
"type": "fleche droite"
},
{
"time": 1678374667172,
"type": "fleche gauche"
},
{
"time": 1678374667522,
"type": "fleche gauche"
},
{
"time": 1678374668138,
"type": "fleche gauche"
},
{
"time": 1678374668755,
"type": "fleche gauche"
},
{
"time": 1678374671621,
"type": "fleche haut"
},
{
"time": 1678374672871,
"type": "fleche bas"
},
{
"time": 1678374673671,
"type": "fleche bas"
},
{
"time": 1678374681926,
"type": "fleche droite"
},
{
"time": 1678374682192,
"type": "fleche droite"
},
{
"time": 1678374686553,
"type": "fleche gauche"
},
{
"time": 1678374687070,
"type": "fleche gauche"
},
{
"time": 1678374728525,
"type": "fleche droite"
},
{
"time": 1678374733698,
"type": "fleche bas"
},
{
"time": 1678374735165,
"type": "fleche haut"
},
{
"time": 1678374735582,
"type": "fleche haut"
},
{
"time": 1678374737597,
"type": "fleche bas"
},
{
"time": 1678374741148,
"type": "fleche droite"
},
{
"time": 1678374742480,
"type": "fleche gauche"
},
{
"time": 1678374742863,
"type": "fleche gauche"
},
{
"time": 1678374745864,
"type": "fleche gauche"
},
{
"time": 1678374746281,
"type": "fleche gauche"
},
{
"time": 1678374746580,
"type": "fleche gauche"
},
{
"time": 1678374747047,
"type": "fleche gauche"
},
{
"time": 1678374747546,
"type": "fleche gauche"
},
{
"time": 1678374750613,
"type": "fleche haut"
},
{
"time": 1678374752747,
"type": "fleche bas"
},
{
"time": 1678374759563,
"type": "bouton pose n°1"
},
{
"time": 1678374762779,
"type": "fleche droite"
},
{
"time": 1678374765078,
"type": "fleche gauche"
},
{
"time": 1678374766828,
"type": "fleche bas"
},
{
"time": 1678374767995,
"type": "fleche haut"
},
{
"time": 1678374768744,
"type": "fleche haut"
},
{
"time": 1678374770244,
"type": "fleche droite"
},
{
"time": 1678374772094,
"type": "fleche gauche"
},
{
"time": 1678374772461,
"type": "fleche gauche"
},
{
"time": 1678374772744,
"type": "fleche gauche"
},
{
"time": 1678374773344,
"type": "fleche gauche"
},
{
"time": 1678374775844,
"type": "fleche haut"
},
{
"time": 1678374777210,
"type": "fleche bas"
},
{
"time": 1678374777877,
"type": "fleche bas"
},
{
"time": 1678374780060,
"type": "fleche gauche"
},
{
"time": 1678374780460,
"type": "fleche gauche"
},
{
"time": 1678374780860,
"type": "fleche gauche"
},
{
"time": 1678374781310,
"type": "fleche gauche"
},
{
"time": 1678374783843,
"type": "bouton pose n°2"
},
{
"time": 1678374786993,
"type": "fleche droite"
},
{
"time": 1678374788943,
"type": "fleche gauche"
},
{
"time": 1678374789259,
"type": "fleche gauche"
},
{
"time": 1678374789526,
"type": "fleche gauche"
},
{
"time": 1678374790359,
"type": "fleche gauche"
},
{
"time": 1678374794559,
"type": "bouton pose n°3"
},
{
"time": 1678374798942,
"type": "bouton valider"
},
{
"time": 1678374798942,
"type": "fin des choix."
},
{
"time": 1678374798942,
"type": "Début analyse n°1"
},
{
"time": 1678374902132,
"type": "ajout check sur : analyse n°1, mot 5. toto"
},
{
"time": 1678374907832,
"type": "Bouton valider analyse."
},
{
"time": 1678374907847,
"type": "Fin analyse"
}
]
}

View File

@ -316,7 +316,7 @@ function animate() {
init_variable_fonction(boutons, imgs) init_variable_fonction(boutons, imgs)
init_explication() init_explication()
// affichage ecran 3D de manière aléatoire // affichage ecran 3D de manière aléatoire
idx_i_explication = 2 , 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)
premier_tour_page_explications = false premier_tour_page_explications = false
} }
@ -332,7 +332,7 @@ function animate() {
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, " 18pt Courier", longueur_max_error, "#118AB2"))}
} }
// progress bar // progress bar
progress_bar(num_tache, nb_mesh) progress_bar(0, 1)
// Affichage fleche // Affichage fleche
afficher_fleche(imgs) afficher_fleche(imgs)
// affichage de sboutons // affichage de sboutons
@ -383,7 +383,7 @@ function animate() {
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, " 18pt Courier", longueur_max_error, "#118AB2"))}
} }
// progress bar // progress bar
progress_bar(num_tache, nb_mesh) progress_bar(num_tache-1, nb_mesh)
// Affichage fleche // Affichage fleche
afficher_fleche(imgs) afficher_fleche(imgs)
// affichage de sboutons // affichage de sboutons
@ -402,9 +402,9 @@ function animate() {
// Les poses choisies sont grisées // Les poses choisies sont grisées
bloquer_pose(liste_poses) bloquer_pose(liste_poses)
// RAZ // RAZ
clicked = false // clicked = false
which_clicked_fleche = -1 // which_clicked_fleche = -1
which_clicked_bouton = -1 // which_clicked_bouton = -1
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page analyse // page analyse
@ -419,6 +419,7 @@ function animate() {
premier_tour_page_analyse = false} premier_tour_page_analyse = false}
init_variable_analyse() init_variable_analyse()
traitement_fin() traitement_fin()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page fin // page fin

View File

@ -61,10 +61,10 @@ function progress_bar_analyse(N_analyse, N_analyse_total){
console.log(w_bar) console.log(w_bar)
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1) draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
// numero de tache // numero de tache
// ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge 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.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
// ctx.font = "18pt Courier"; ctx.font = "18pt Courier";
// ctx.fillText((N_analyse+1)+"/"+(N_analyse_total), x_progress_bar+w_progress_bar+10, h_progress_bar) ctx.fillText((N_analyse)+"/"+(N_analyse_total), x_progress_bar+w_progress_bar+10, h_progress_bar)
} }
} }

View File

@ -19,7 +19,7 @@ function init_variable_fonction(dict_boutons, dict_imgs ){
// progress bar // progress bar
x_progress_bar = 0 x_progress_bar = 0
y_progress_bar = 0 y_progress_bar = 0
w_progress_bar = window.innerWidth //- W_3D*0.1 w_progress_bar = window.innerWidth - W_3D*0.1
h_progress_bar = H_3D*0.04 h_progress_bar = H_3D*0.04
// image recap // image recap
dx = 20 dx = 20
@ -177,21 +177,21 @@ function afficher_fleche(dict_imgs){
function survol_fleche(){ function survol_fleche(){
// Fleche GAUCHE // Fleche GAUCHE
if (xyMouseMove.x >= W_3D*0.2-b && xyMouseMove.x <= W_3D*0.2 && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){ if (xyMouseMove.x >= W_3D*0.2-b && xyMouseMove.x <= W_3D*0.2 && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
draw_rectangle(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol) draw_contour(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
} }
// Fleche DROITE // Fleche DROITE
if (xyMouseMove.x >= W_3D*0.2+a && xyMouseMove.x <= W_3D*0.2+a+b && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){ if (xyMouseMove.x >= W_3D*0.2+a && xyMouseMove.x <= W_3D*0.2+a+b && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
draw_rectangle(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol) draw_contour(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
} }
// Fleche HAUT // Fleche HAUT
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY && xyMouseMove.y < H_3D+DY+b ){ if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY && xyMouseMove.y < H_3D+DY+b ){
// l'image devient verte // l'image devient verte
draw_rectangle(W_3D*0.2, H_3D+DY, a, b, "rgb(200, 200, 200)", alpha_survol) draw_contour(W_3D*0.2, H_3D+DY, a, b, "rgb(200, 200, 200)", alpha_survol)
} }
// Fleche BAS // Fleche BAS
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY+b+a && xyMouseMove.y < H_3D+DY+b+a+b ){ if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY+b+a && xyMouseMove.y < H_3D+DY+b+a+b ){
// l'image devient verte // l'image devient verte
draw_rectangle(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol) draw_contour(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol)
} }
} }

View File

@ -4,7 +4,7 @@ alpha_ecran = 0.9
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)"
color_clignotement = "rgb(200,0,0)" color_clignotement = "rgb(0,255,255)"
font_texte = window.innerWidth font_texte = window.innerWidth
ecart_x = 50 ecart_x = 50
l_texte_max = window.innerWidth-W_3D-2*ecart_x -50 l_texte_max = window.innerWidth-W_3D-2*ecart_x -50
@ -114,31 +114,37 @@ positions_bouton = [
clignotements = [ clignotements = [
// 0 // 0
{"type":"a_cliquer", "x":positions_bouton[0].x, "y":positions_bouton[0].y, "w":positions_bouton[0].w, "h":positions_bouton[0].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}, {"type":"a_cliquer", "x":positions_bouton[0].x, "y":positions_bouton[0].y, "w":positions_bouton[0].w, "h":positions_bouton[0].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// 1.1 : ecran 3D // 1.1 : ecran 3D
{"type":"a_regarder", "x":0, "y":h_progress_bar, "w":W_3D, "h":H_3D, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, [{"type":"a_regarder", "x":0, "y":h_progress_bar, "w":W_3D, "h":H_3D, "c":color_clignotement,"a": alpha_clignotement, "t": 500},
{"type":"a_cliquer", "x":positions_bouton[1].x, "y":positions_bouton[1].y, "w":positions_bouton[1].w, "h":positions_bouton[1].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 1.2 : fleche // 1.2 : fleche
{"type":"a_regarder", "x": W_3D*0.2-b, "y":H_3D+DY, "w":b+a+b, "h":b+a+b, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, [{"type":"a_regarder", "x": W_3D*0.2-b, "y":H_3D+DY, "w":b+a+b, "h":b+a+b, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x":positions_bouton[2].x, "y":positions_bouton[2].y, "w":positions_bouton[2].w, "h":positions_bouton[2].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 1.3 // 1.3
{"type":"a_regarder", "x":W_3D*pos_bouton, "y":H_3D+dy*2, "w":w_bouton*2 + ecart_bouton, "h":h_bouton*2+ecart_bouton, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500}, [{"type":"a_regarder", "x":W_3D*pos_bouton, "y":H_3D+dy*2, "w":w_bouton*2 + ecart_bouton, "h":h_bouton*2+ecart_bouton, "c":color_clignotement,"a": alpha_clignotement, "t": 500},
{"type":"a_cliquer", "x": positions_bouton[3].x, "y":positions_bouton[3].y, "w":positions_bouton[3].w, "h":positions_bouton[3].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 2.1 : Selection 1er vues // 2.1 : Selection 1er vues
{"type":"a_cliquer", "x": positions_bouton[4].x, "y":positions_bouton[4].y, "w":positions_bouton[4].w, "h":positions_bouton[4].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}, {"type":"a_cliquer", "x": positions_bouton[4].x, "y":positions_bouton[4].y, "w":positions_bouton[4].w, "h":positions_bouton[4].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// 2.2 : clique sur fleche droite // 2.2 : clique sur fleche droite
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.3 : clique sur fleche haut // 2.3 : clique sur fleche haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.4 : clique sur fleche haut // 2.4 : clique sur fleche haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.5 : PBL trop haut // 2.5 : PBL trop haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 3.1 : clique sur fleche bas // 3.1 : clique sur fleche bas
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 3.2 : clique sur fleche bas --> next step fleche droite // 3.2 : clique sur fleche bas --> next step fleche droite
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500}, {"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 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": new Date().getTime()+500}, {"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": 500},
// 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": new Date().getTime()+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": new Date().getTime()}
] ]
@ -175,6 +181,9 @@ conditions_suivant = [
nb_action = ecrans.length nb_action = ecrans.length
num_action = 0 num_action = 0
nb_click_explication = 0 nb_click_explication = 0
time_clicke = time_animate
console.log('initttt')
} }
@ -206,28 +215,46 @@ function traitement_explications(idx_i_explication, idx_j_explication){
// bouton suivant // bouton suivant
ctx.drawImage(boutons['suivant'], position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h) ctx.drawImage(boutons['suivant'], position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)
if (is_inside(xyMouseMove, position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)){ if (is_inside(xyMouseMove, position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)){
console.log('ttt') //console.log('ttt')
draw_rectangle(position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)} draw_rectangle(position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)}
// Bouton previous // Bouton previous
if (num_action>0){ if (num_action>0){
ctx.drawImage(boutons['avant'], position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h) ctx.drawImage(boutons['avant'], position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)
if (is_inside(xyMouseMove, position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){ if (is_inside(xyMouseMove, position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){
console.log("dedans") //console.log("dedans")
draw_rectangle(position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)} draw_rectangle(position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)}
} }
} }
// clignotement courant // 1 clignotement courant donc taille = 8 car 8 keys
if (time_animate > clignotement.t && num_action!=12 && clignotement.type=="a_cliquer"){ if (Object.keys(clignotement).length == 8){
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 5) } if (time_animate > time_clicke + clignotement.t && num_action!=12 && clignotement.type=="a_cliquer"){
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 10)
if (time_animate > clignotement.t && clignotement.type=="a_regarder"){ }
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6) } 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)
}
// on a plusieurs clignotement
} else {
for(let p=0; p<clignotement.length; p++){
clignotement_p = clignotement[p]
// contour
if (time_animate > time_clicke + clignotement_p.t && num_action!=12 && clignotement_p.type=="a_cliquer"){
clignotement_contour(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, clignotement_p.c, 10)
}
// rectangle
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)
}
}
}
// si on clique sur NEXT // si on clique sur NEXT
if (condition_suivant.type =="bouton" && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ if (condition_suivant.type =="bouton" && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){
console.log("next") console.log("next")
action_suivante() action_suivante()
} }
// Si on clique sur PREVIOUS // Si on clique sur PREVIOUS
//if (condition_suivant.type =="bouton" && num_action >0 && clicked && click_inside(xyMouseDown, condition_suivant.x- w_bouton_suivant - marge_texte_x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ //if (condition_suivant.type =="bouton" && num_action >0 && clicked && click_inside(xyMouseDown, condition_suivant.x- w_bouton_suivant - marge_texte_x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){
@ -311,10 +338,12 @@ function action_bas_explication(){
function action_suivante(){ function action_suivante(){
num_action = num_action+1 num_action = num_action+1
time_clicke = time_animate
} }
function action_precedente(){ function action_precedente(){
num_action = num_action-1 num_action = num_action-1
time_clicke = time_animate
} }
function update_mesh(I,J){ function update_mesh(I,J){

View File

@ -45,6 +45,7 @@ function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1, ep
ctx.globalAlpha = alpha ctx.globalAlpha = alpha
ctx.stroke() ctx.stroke()
ctx.lineWidth = 1 ctx.lineWidth = 1
ctx.globalAlpha = 1
} }
function clignotement_rectangle(periode, originex, originey, largeur, hauteur, couleur, alhpa_max=1){ function clignotement_rectangle(periode, originex, originey, largeur, hauteur, couleur, alhpa_max=1){
@ -136,13 +137,13 @@ function progress_bar(N_tache, N_mesh){
// background // background
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1) draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
// bar // bar
w_bar = ((N_tache-1)/N_mesh)*w_progress_bar w_bar = ((N_tache)/N_mesh)*w_progress_bar
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1) draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
// // numero de tache // // numero de tache
// ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge 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.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
// ctx.font = "18pt Courier"; ctx.font = "18pt Courier";
// ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar) ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar)
} }
} }