tforgione/bvs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page entr etuto et choix ok

Browse Source
This commit is contained in:
mpelissi
2023-03-10 15:00:08 +01:00
parent f84c87c008
commit 16e469e664
5 changed files with 326 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outputs/6768c8f3-9f53-4445-a5fe-35dfb58cd8a1.json
+53
View File
@@ -0,0 +1,53 @@
{
"Analyse": {},
"Interactions": [
{
"time": 1678455546522,
"type": "start"
},
{
"time": 1678455546567,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 1)"
},
{
"time": 1678455546567,
"type": "Affichage Mesh random : dragon en theta, delta : (0.7853981633974483, 3.141592653589793)"
},
{
"time": 1678455550434,
"type": "fleche droite"
},
{
"time": 1678455551202,
"type": "fleche haut"
},
{
"time": 1678455551618,
"type": "fleche haut"
},
{
"time": 1678455551618,
"type": "Affichage error à cause de fleche haut"
},
{
"time": 1678455552130,
"type": "fleche bas"
},
{
"time": 1678455552754,
"type": "fleche bas"
},
{
"time": 1678455553394,
"type": "fleche droite"
},
{
"time": 1678455556178,
"type": "bouton pose n°1"
},
{
"time": 1678455558171,
"type": "Fin explication. Début des choix."
}
]
}
static/MAIN.js
+16 -11
View File
@@ -77,9 +77,10 @@ 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 = true page_explication = false
page_explication_bis = false
page_vues = false // false page_vues = false // false
page_analyse = false page_analyse = false
@@ -310,20 +311,20 @@ function animate() {
//console.log("boucle explication") //console.log("boucle explication")
// on enlève les touches du clavier associé à la page inscription // on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_inscription) document.removeEventListener("keydown", action_clavier_inscription)
// Variable pour les fonctions
init_variable_fonction(boutons, imgs)
//init touche clavier //init touche clavier
if(premier_tour_page_explications){ if(premier_tour_page_explications){
// init clavier pour les vues // init clavier pour les vues
init_clavier_explication() init_clavier_explication()
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 = 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)
premier_tour_page_explications = false premier_tour_page_explications = false
} }
// Variable pour les fonctions // Nettoyage
init_variable_fonction(boutons, imgs)
// Nettoyage fleche
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
// Affichage bouton RAZ // Affichage bouton RAZ
if (bouton_raz_clicked == true){action_bouton_raz()} if (bouton_raz_clicked == true){action_bouton_raz()}
@@ -356,6 +357,10 @@ function animate() {
which_clicked_fleche = -1 which_clicked_fleche = -1
which_clicked_bouton = -1 which_clicked_bouton = -1
} }
// bouton entr ele tutorial et l'étude
if (page_explication_bis){
commencer_etude()
}
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page de choix // page de choix
if (page_vues && num_tache <= nb_mesh){ if (page_vues && num_tache <= nb_mesh){
@@ -402,10 +407,10 @@ function animate() {
renderer.render( scene, camera ); renderer.render( scene, camera );
// Les poses choisies sont grisées // Les poses choisies sont grisées
bloquer_pose(liste_poses) bloquer_pose(liste_poses)
// RAZ // raccourcis
// clicked = false // raccourcis bouton et fleche
// which_clicked_fleche = -1 shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
// which_clicked_bouton = -1
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page analyse // page analyse
@@ -424,7 +429,7 @@ function animate() {
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page fin // page fin
if (!page_contexte && !page_inscription && !page_explication && !page_vues && !page_analyse){ if (!page_contexte && !page_inscription && !page_explication && !page_explication_bis && !page_vues && !page_analyse){
//console.log("boucle fin") //console.log("boucle fin")
// on enlève les touches du clavier associé à la page vues // on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse) document.removeEventListener("keydown", action_clavier_analyse)
static/fonctions_analyse.js
+1 -1
View File
@@ -48,7 +48,7 @@ function affichage_analyse(idx_tache){
for (let i=0; i<canvasMins.length; i++){ for (let i=0; i<canvasMins.length; i++){
affichage_legende(i) affichage_legende(i)
ctx.drawImage(canvasMins[i], dx + (ecart_analyse+ W_3D/2.5)*i, 250, H_3D/2, H_3D/2) ctx.drawImage(canvasMins[i], dx + (ecart_analyse+ W_3D/2.5)*i, 250, H_3D/2, H_3D/2)
draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5, "rgb(255,0,0)") //draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5, "rgb(255,0,0)")
} }
} }
static/fonctions_choix_vues.js
+1 -7
View File
@@ -59,7 +59,6 @@ function pose_deja_choisie(L_poses, i_choix, j_choix){
} }
/////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
///////////////////// Recap ///////////////////// Recap
function swapElements(arr, i1, i2) { function swapElements(arr, i1, i2) {
@@ -394,11 +393,6 @@ function action_bouton_reinitialiser(){
for (let i = 0; i < nb_choix_demande; i++) { for (let i = 0; i < nb_choix_demande; i++) {
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height) ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
} }
// on reinitilaise les checbok box
//for (let i = 0 ; i < nb_choix_demande; i++){
//checkbox_clicked_courant[i].idx_checkbox = []
//checkbox_clicked_courant[i].mots = []
//}
} }
else {console.log("Il n'y a pas de pose à reintialiser.") else {console.log("Il n'y a pas de pose à reintialiser.")
texte_temporaire = {"text": "There are no selected viewpoints to resart.", "x":x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop} texte_temporaire = {"text": "There are no selected viewpoints to resart.", "x":x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
@@ -489,7 +483,7 @@ function action_bouton_raz(){
function traitement_bouton(){ function traitement_bouton(){
// raccourcis bouton et fleche // raccourcis bouton et fleche
shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut) //shortcuts(xyMouseMove, imgs['clavier_vues'], window.innerWidth/2 -(imgs['clavier_vues'].width/2), window.innerHeight/2 -(imgs['clavier_vues'].height/2), imgs['clavier_vues'].width, imgs['clavier_vues'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
// si on survol, on a les contours qui apparaissent // si on survol, on a les contours qui apparaissent
survol_bouton() survol_bouton()
// si on click // si on click
static/fonctions_explications.js
+134 -90
View File
@@ -1,31 +1,33 @@
function init_explication(){ function init_explication(){
alpha_ecran = 0.9 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(255,0,255)" color_clignotement = "rgb(255,0,255)"
epaisseur_clignotement = 6 epaisseur_clignotement = 6
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
// marge du texte // marge du texte
marge_texte_x = 20 marge_texte_x = 20
marge_texte_y = 100 marge_texte_y = 100
// 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 = 70
// 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
h_bouton_suivant = boutons["suivant"].height*0.3 h_bouton_suivant = boutons["suivant"].height*0.3
temps_attente = 0 temps_attente = 0
ecrans = [ ecrans = [
// -1 avant de lancer l'interface
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
// 0 // 0
{'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran}, {'x': W_3D + ecart_x, "y": H_3D*0.6 - dy_ecran , "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45 + dh_ecran, "c":color_ecran,"a": alpha_ecran},
// 1.1 // 1.1
@@ -52,10 +54,12 @@ ecrans = [
{'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}
] ]
textes = [ textes = [
//-1
{"t":"This is where the instructions will appear to take control of the interface to select your "+nb_choix_demande+" best viewpoints. Now let's display the interface. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 0 // 0
{"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"Here is how the interface looks like. (PRESS NEXT BUTTON)", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 1.1 : ecran 3D // 1.1 : ecran 3D
@@ -65,26 +69,28 @@ textes = [
// 1.3 : bouton // 1.3 : bouton
{"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"You have: Buttons to make your selection. (PRESS NEXT BUTTON)", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 2.1 : Selection 1er vues // 2.1 : Selection 1er vues
{"t":"Let's try to select your first view. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS NEXT BUTTON) ", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 2.2 : clique sur fleche droite // 2.2 : clique sur fleche droite
{"t":"Let's try to select your first view. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 2.3 : clique sur fleche haut // 2.3 : clique sur fleche haut
{"t":"Let's try to select your first view. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"Let's try to select your first viewpoint. To do this, let's move the 3D model. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 2.4 : clique sur fleche haut // 2.4 : clique sur fleche haut
{"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"ArrowUp once again. (PRESS UP ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 2.5 : PBL trop haut // 2.5 : PBL trop haut
{"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first view : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first viewpoint : GO DOWN. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.01, "l":l_texte_max, "c":color_texte, "i":50},
// 3.1 : clique sur fleche bas // 3.1 : clique sur fleche bas
{"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"It's better. Once again. (PRESS DOWN ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 3.2 : clique sur fleche bas // 3.2 : clique sur fleche bas
{"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50}, {"t":"It's better. Go to the right. (PRESS RIGHT ARROW)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
// 3.3 : clique sur fleche bas // 3.3 : clique sur fleche bas
{"t":"Let's imagine that you choose this point of view. 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},
] ]
positions_bouton = [ positions_bouton = [
//-1
{"afficher": true, "x": ecrans[0].x + ecrans[0].w - w_bouton_suivant - marge_texte_x, "y": ecrans[0].y + ecrans[0].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
// 0 // 0
{"afficher": true, "x": ecrans[0].x + ecrans[0].w - w_bouton_suivant - marge_texte_x, "y": ecrans[0].y + ecrans[0].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant}, {"afficher": true, "x": ecrans[0].x + ecrans[0].w - w_bouton_suivant - marge_texte_x, "y": ecrans[0].y + ecrans[0].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
// 1.1 // 1.1
@@ -111,9 +117,11 @@ positions_bouton = [
{"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}
] ]
clignotements = [ clignotements = [
//-1
{"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},
// 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": 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
@@ -146,46 +154,44 @@ clignotements = [
{"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}
] ]
conditions_suivant = [ conditions_suivant = [
// 0 // -1
{"type": "bouton", "x": positions_bouton[0].x, "y": positions_bouton[0].y, "w": positions_bouton[0].w, "h": positions_bouton[0].h}, {"type": "bouton", "x": positions_bouton[0].x, "y": positions_bouton[0].y, "w": positions_bouton[0].w, "h": positions_bouton[0].h},
// 1.1 // 0
{"type": "bouton", "x": positions_bouton[1].x, "y": positions_bouton[1].y, "w": positions_bouton[1].w, "h": positions_bouton[1].h}, {"type": "bouton", "x": positions_bouton[1].x, "y": positions_bouton[1].y, "w": positions_bouton[1].w, "h": positions_bouton[1].h},
// 1.2 // 1.1
{"type": "bouton", "x": positions_bouton[2].x, "y": positions_bouton[2].y, "w": positions_bouton[2].w, "h": positions_bouton[2].h}, {"type": "bouton", "x": positions_bouton[2].x, "y": positions_bouton[2].y, "w": positions_bouton[2].w, "h": positions_bouton[2].h},
// 1.3 // 1.2
{"type": "bouton", "x": positions_bouton[3].x, "y": positions_bouton[3].y, "w": positions_bouton[3].w, "h": positions_bouton[3].h}, {"type": "bouton", "x": positions_bouton[3].x, "y": positions_bouton[3].y, "w": positions_bouton[3].w, "h": positions_bouton[3].h},
// 2.1 : Selection 1er vues // 1.3
{"type": "bouton", "x": positions_bouton[4].x, "y": positions_bouton[4].y, "w": positions_bouton[4].w, "h": positions_bouton[4].h}, {"type": "bouton", "x": positions_bouton[4].x, "y": positions_bouton[4].y, "w": positions_bouton[4].w, "h": positions_bouton[4].h},
// 2.1 : Selection 1er vues
{"type": "bouton", "x": positions_bouton[5].x, "y": positions_bouton[5].y, "w": positions_bouton[5].w, "h": positions_bouton[5].h},
// 2.2 : clique sur fleche droite // 2.2 : clique sur fleche droite
{"type": "fleche_d", "x": clignotements[5].x, "y": clignotements[5].y, "w": clignotements[5].w, "h": clignotements[5].h}, {"type": "fleche_d", "x": clignotements[6].x, "y": clignotements[6].y, "w": clignotements[6].w, "h": clignotements[6].h},
// 2.3 : clique sur fleche haut // 2.3 : clique sur fleche haut
{"type": "fleche_h", "x": clignotements[6].x, "y": clignotements[6].y, "w": clignotements[6].w, "h": clignotements[6].h},
// 2.4 : clique sur fleche haut
{"type": "fleche_h", "x": clignotements[7].x, "y": clignotements[7].y, "w": clignotements[7].w, "h": clignotements[7].h}, {"type": "fleche_h", "x": clignotements[7].x, "y": clignotements[7].y, "w": clignotements[7].w, "h": clignotements[7].h},
// 2.4 : clique sur fleche haut
{"type": "fleche_h", "x": clignotements[8].x, "y": clignotements[8].y, "w": clignotements[8].w, "h": clignotements[8].h},
// 2.5 : PBL trop haut // 2.5 : PBL trop haut
{"type": "fleche_b", "x": clignotements[8].x, "y": clignotements[8].y, "w": clignotements[8].w, "h": clignotements[8].h},
// 3.1 : clique sur fleche bas
{"type": "fleche_b", "x": clignotements[9].x, "y": clignotements[9].y, "w": clignotements[9].w, "h": clignotements[9].h}, {"type": "fleche_b", "x": clignotements[9].x, "y": clignotements[9].y, "w": clignotements[9].w, "h": clignotements[9].h},
// 3.1 : clique sur fleche bas
{"type": "fleche_b", "x": clignotements[10].x, "y": clignotements[10].y, "w": clignotements[10].w, "h": clignotements[10].h},
// 3.2 : clique sur fleche bas // 3.2 : clique sur fleche bas
{"type": "fleche_d", "x": clignotements[10].x, "y": clignotements[10].y, "w": clignotements[10].w, "h": clignotements[10].h}, {"type": "fleche_d", "x": clignotements[11].x, "y": clignotements[11].y, "w": clignotements[11].w, "h": clignotements[11].h},
// 3.3 : clique sur bouton pose // 3.3 : clique sur bouton pose
{"type": "bouton_pose", "x": clignotements[11].x, "y": clignotements[11].y, "w": clignotements[11].w, "h": clignotements[11].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[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h} {"type": "bouton", "x": positions_bouton[13].x, "y":positions_bouton[13].y, "w":positions_bouton[13].w, "h":positions_bouton[13].h}
] ]
nb_action = ecrans.length
num_action = 0
nb_click_explication = 0
time_clicke = time_animate
console.log('initttt')
nb_action = ecrans.length
num_action = 0
time_clicke = time_animate
} }
function traitement_explications(idx_i_explication, idx_j_explication){ function traitement_explications(idx_i_explication, idx_j_explication){
@@ -194,29 +200,29 @@ function traitement_explications(idx_i_explication, idx_j_explication){
idx_i = idx_i_explication idx_i = idx_i_explication
idx_j = idx_j_explication idx_j = idx_j_explication
} }
//console.log("debut", idx_i, idx_j, num_action) // rectangle bleu pour cacher l'interface
if (num_action == 0){
draw_rectangle(0, 0, window.innerWidth, window.innerHeight, "rgb(3, 26, 33)", 1)
}
if (num_action < nb_action){
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
if (num_action < nb_action ){
// Données // Données
ecran = ecrans[num_action] ecran = ecrans[num_action]
texte = textes[num_action] texte = textes[num_action]
clignotement = clignotements[num_action] clignotement = clignotements[num_action]
position_bouton = positions_bouton[num_action] position_bouton = positions_bouton[num_action]
condition_suivant = conditions_suivant[num_action] condition_suivant = conditions_suivant[num_action]
// ecran blanc // ecran blanc
afficher_ecran(ecran.x, ecran.y, ecran.w, ecran.h, ecran.c, ecran.a ) afficher_ecran(ecran.x, ecran.y, ecran.w, ecran.h, ecran.c, ecran.a )
print_text(handle_text(texte.t, texte.x, texte.y, texte.f*font_texte +"pt Courier", texte.l, texte.c, texte.i)) print_text(handle_text(texte.t, texte.x, texte.y, texte.f*font_texte +"pt Courier", texte.l, texte.c, texte.i))
print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y+52, 0.016*font_texte +"pt Courier", texte.l, "#EF476F", texte.i)) print_text(handle_text("Guidelines to follow:", ecran.x +marge_texte_x, ecran.y+52, 0.016*font_texte +"pt Courier", texte.l, "#EF476F", texte.i))
// survol de tous les boutons // survol de tous les boutons
if (num_action>0){
survol_bouton() survol_bouton()
survol_fleche()}
// s'il faut afficher le bouton next/previous ///////// s'il faut afficher le bouton next/previous
if (position_bouton.afficher){ if (position_bouton.afficher){
// 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)
@@ -232,9 +238,9 @@ 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!=12 && clignotement.type=="a_cliquer"){ if (time_animate > time_clicke + clignotement.t && num_action!=13 && 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"){
@@ -245,7 +251,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){
for(let p=0; p<clignotement.length; p++){ for(let p=0; p<clignotement.length; p++){
clignotement_p = clignotement[p] clignotement_p = clignotement[p]
// contour // contour
if (time_animate > time_clicke + clignotement_p.t && num_action!=12 && clignotement_p.type=="a_cliquer"){ if (time_animate > time_clicke + clignotement_p.t && num_action!=13 && clignotement_p.type=="a_cliquer"){
clignotement_contour(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, clignotement_p.c, epaisseur_clignotement) clignotement_contour(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, clignotement_p.c, epaisseur_clignotement)
} }
// rectangle // rectangle
@@ -256,13 +262,14 @@ function traitement_explications(idx_i_explication, idx_j_explication){
} }
// 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)){
if (num_action >0 && clicked && click_inside(xyMouseDown, position_bouton.x- w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){ if (num_action >0 && clicked && click_inside(xyMouseDown, position_bouton.x- w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){
console.log("previous") console.log("previous")
@@ -284,19 +291,35 @@ function traitement_explications(idx_i_explication, idx_j_explication){
texte_temporaire = {} texte_temporaire = {}
action_bas_explication() action_bas_explication()
} }
// Si on clique sur Fleche bas // Si on clique sur select
if (condition_suivant.type =="bouton_pose" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){ if (condition_suivant.type =="bouton_pose" && num_action > 0 && clicked && click_inside(xyMouseDown, condition_suivant.x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){
console.log("bouton_pose") console.log("bouton_pose")
action_bouton_pose() action_bouton_pose()
action_suivante() action_suivante()
} }
}
// FIN du tuto // FIN du tuto
if (num_action==nb_action){ if (num_action==nb_action){
console.log("explications finies")
action_fin_explication() action_fin_explication()
} }
}
function commencer_etude(){
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
texte = "Are you ready to start the study?"
font = "40pt Courier"
ctx.font = font
largeur = ctx.measureText(texte).width
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
// affichager le bouton commencer
afficher_bouton_commencer_explication()
// si on appuie
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
action_bouton_commencer_explication()
} }
} }
@@ -305,20 +328,23 @@ function traitement_explications(idx_i_explication, idx_j_explication){
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
function action_fin_explication(){ function action_fin_explication(){
console.log("explications finies")
choix_courant = {} choix_courant = {}
liste_poses = [] liste_poses = []
nb_choix_fait = 0 nb_choix_fait = 0
for (let i = 0; i < nb_choix_demande; i++) {
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
}
page_explication = false page_explication = false
page_vues = true page_explication_bis = true
interactions.push({"time": new Date().getTime(), "type": "Fin explication"})
interactions.push({"time": new Date().getTime(), "type": "Fin explication. Début des choix."})
} }
function action_previous_explication(){ function action_previous_explication(){
if ((num_action == 6) || (num_action == 11)){action_fleche_gauche(); update_mesh(idx_i, idx_j)} if ((num_action == 7) || (num_action == 12)){action_fleche_gauche(); update_mesh(idx_i, idx_j)}
if ((num_action == 7) ){action_fleche_bas(); update_mesh(idx_i, idx_j)} if ((num_action == 8) ){action_fleche_bas(); update_mesh(idx_i, idx_j)}
if ((num_action == 9) || (num_action == 10) ){action_fleche_haut(); update_mesh(idx_i, idx_j)} if ((num_action == 10) || (num_action == 11) ){action_fleche_haut(); update_mesh(idx_i, idx_j)}
if (num_action == 12){action_bouton_retirer()} if (num_action == 13){action_bouton_retirer()}
action_precedente() action_precedente()
} }
@@ -341,7 +367,6 @@ function action_bas_explication(){
action_suivante() action_suivante()
} }
function action_suivante(){ function action_suivante(){
num_action = num_action+1 num_action = num_action+1
time_clicke = time_animate time_clicke = time_animate
@@ -365,27 +390,31 @@ function action_clavier_explication(event){
switch (event.key){ switch (event.key){
// selectionner pose // selectionner pose
case ' ' : case ' ' :
if (num_action==11){ if (num_action==12){
console.log("pose clavier") console.log("pose clavier")
action_bouton_pose() action_bouton_pose()
action_suivante() } action_suivante() }
break; break;
// valider // valider
case 'Enter': case 'Enter':
console.log("next clavier") if (num_action == nb_action && page_explication){
if (num_action < nb_action && condition_suivant.type =="bouton"){
action_suivante()}
if (num_action == nb_action){
action_fin_explication() action_fin_explication()
} }
if (page_explication_bis){
action_bouton_commencer_explication()
}
if (num_action < nb_action && condition_suivant.type =="bouton"){
action_suivante()}
break; break;
case 'Backspace': case 'Backspace':
if (num_action > 0){ if (num_action > 0){
if (num_action == 6){action_fleche_gauche(); update_mesh(idx_i, idx_j)} if (num_action == 7){action_fleche_gauche(); update_mesh(idx_i, idx_j)}
if ((num_action == 7) ){action_fleche_bas(); update_mesh(idx_i, idx_j)} if ((num_action == 8) ){action_fleche_bas(); update_mesh(idx_i, idx_j)}
console.log("previous clavier") console.log("previous clavier")
action_precedente()} action_precedente()}
break; break;
case 'ArrowRight' : case 'ArrowRight' :
if (condition_suivant.type =="fleche_d"){ if (condition_suivant.type =="fleche_d"){
console.log("fleche_d clavier") console.log("fleche_d clavier")
@@ -413,9 +442,24 @@ function survol_bouton_explication(){
} }
//ctx.clearRect(0, 0, canvas.width, canvas.height) function afficher_bouton_commencer_explication(){
//texte = "Explications" w_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].width
//font = "42pt Courier" h_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].height
//ctx.font = font x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
//largeur = ctx.measureText(texte).width y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
//ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
// Bouton commencer
ctx.drawImage(boutons["commencer_choix"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
// Survol
if(xyMouseMove.x >= x_bouton_commencer && xyMouseMove.x <= x_bouton_commencer + w_bouton_commencer && xyMouseMove.y > y_bouton_commencer && xyMouseMove.y < y_bouton_commencer + h_bouton_commencer){
draw_rectangle(x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6)
}
}
function action_bouton_commencer_explication(){
page_explication_bis = false
page_vues = true
interactions.push({"time": new Date().getTime(), "type": "Clique bouton commencer - Début étude"})
}