page entr etuto et choix ok
This commit is contained in:
mpelissi
parent
f84c87c008
commit
16e469e664
|
|
@ -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."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -77,9 +77,10 @@ function init_variable(premier_appel){
|
|||
R = 2.5
|
||||
|
||||
// Enchainement des pages
|
||||
page_contexte = false
|
||||
page_contexte = true
|
||||
page_inscription = false // true
|
||||
page_explication = true
|
||||
page_explication = false
|
||||
page_explication_bis = false
|
||||
page_vues = false // false
|
||||
page_analyse = false
|
||||
|
||||
|
|
@ -310,20 +311,20 @@ function animate() {
|
|||
//console.log("boucle explication")
|
||||
// on enlève les touches du clavier associé à la page inscription
|
||||
document.removeEventListener("keydown", action_clavier_inscription)
|
||||
// Variable pour les fonctions
|
||||
init_variable_fonction(boutons, imgs)
|
||||
//init touche clavier
|
||||
if(premier_tour_page_explications){
|
||||
// init clavier pour les vues
|
||||
init_clavier_explication()
|
||||
init_variable_fonction(boutons, imgs)
|
||||
//init_variable_fonction(boutons, imgs)
|
||||
init_explication()
|
||||
// affichage ecran 3D de manière aléatoire
|
||||
idx_i_explication = 4 , idx_j_explication = 1
|
||||
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication)
|
||||
premier_tour_page_explications = false
|
||||
}
|
||||
// Variable pour les fonctions
|
||||
init_variable_fonction(boutons, imgs)
|
||||
// Nettoyage fleche
|
||||
// Nettoyage
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
// Affichage bouton RAZ
|
||||
if (bouton_raz_clicked == true){action_bouton_raz()}
|
||||
|
|
@ -355,7 +356,11 @@ function animate() {
|
|||
clicked = false
|
||||
which_clicked_fleche = -1
|
||||
which_clicked_bouton = -1
|
||||
}
|
||||
}
|
||||
// bouton entr ele tutorial et l'étude
|
||||
if (page_explication_bis){
|
||||
commencer_etude()
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// page de choix
|
||||
if (page_vues && num_tache <= nb_mesh){
|
||||
|
|
@ -402,10 +407,10 @@ function animate() {
|
|||
renderer.render( scene, camera );
|
||||
// Les poses choisies sont grisées
|
||||
bloquer_pose(liste_poses)
|
||||
// RAZ
|
||||
// clicked = false
|
||||
// which_clicked_fleche = -1
|
||||
// which_clicked_bouton = -1
|
||||
// raccourcis
|
||||
// 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)
|
||||
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// page analyse
|
||||
|
|
@ -424,7 +429,7 @@ function animate() {
|
|||
}
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// 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")
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_analyse)
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function affichage_analyse(idx_tache){
|
|||
for (let i=0; i<canvasMins.length; i++){
|
||||
affichage_legende(i)
|
||||
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)")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ function pose_deja_choisie(L_poses, i_choix, j_choix){
|
|||
}
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Recap
|
||||
function swapElements(arr, i1, i2) {
|
||||
|
|
@ -394,11 +393,6 @@ function action_bouton_reinitialiser(){
|
|||
for (let i = 0; i < nb_choix_demande; i++) {
|
||||
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.")
|
||||
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(){
|
||||
// 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
|
||||
survol_bouton()
|
||||
// si on click
|
||||
|
|
|
|||
|
|
@ -1,191 +1,197 @@
|
|||
function init_explication(){
|
||||
|
||||
alpha_ecran = 0.9
|
||||
alpha_clignotement = 0.8
|
||||
color_ecran ="rgb(255,255,255)"
|
||||
color_texte = "rgb(0,0,0)"
|
||||
color_clignotement = "rgb(255,0,255)"
|
||||
epaisseur_clignotement = 6
|
||||
font_texte = window.innerWidth
|
||||
ecart_x = 50
|
||||
l_texte_max = window.innerWidth-W_3D-2*ecart_x -50
|
||||
alpha_clignotement = 0.8
|
||||
color_ecran ="rgb(255,255,255)"
|
||||
color_texte = "rgb(0,0,0)"
|
||||
color_clignotement = "rgb(255,0,255)"
|
||||
epaisseur_clignotement = 6
|
||||
font_texte = window.innerWidth
|
||||
ecart_x = 50
|
||||
l_texte_max = window.innerWidth-W_3D-2*ecart_x -50
|
||||
|
||||
// marge du texte
|
||||
marge_texte_x = 20
|
||||
marge_texte_y = 100
|
||||
// marge du texte
|
||||
marge_texte_x = 20
|
||||
marge_texte_y = 100
|
||||
|
||||
// deplacement pour ajouter un titre à l'ecran
|
||||
dy_ecran = 50
|
||||
dh_ecran = 70
|
||||
// deplacement pour ajouter un titre à l'ecran
|
||||
dy_ecran = 50
|
||||
dh_ecran = 70
|
||||
|
||||
// Position des boutons sur l'écran
|
||||
w_bouton_suivant = boutons["suivant"].width*0.3
|
||||
h_bouton_suivant = boutons["suivant"].height*0.3
|
||||
// Position des boutons sur l'écran
|
||||
w_bouton_suivant = boutons["suivant"].width*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
|
||||
{'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
|
||||
{'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.2,
|
||||
{'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.3
|
||||
{'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},
|
||||
// 2.1 : Selection 1er vues
|
||||
{'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},
|
||||
// 2.2 : 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},
|
||||
// 2.3 : clique sur fleche haut
|
||||
{'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},
|
||||
// 2.4 : clique sur fleche haut
|
||||
{'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},
|
||||
// 2.5 : PBL trop haut
|
||||
{'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},
|
||||
// 3.1 : clique sur fleche bas
|
||||
{'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},
|
||||
// 3.2 : clique sur fleche bas
|
||||
{'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},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
|
||||
|
||||
textes = [
|
||||
// 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},
|
||||
// 1.1 : ecran 3D
|
||||
{"t":"You have: A screen to view the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
// 1.2 : fleche
|
||||
{"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
]
|
||||
|
||||
positions_bouton = [
|
||||
// 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},
|
||||
{'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
|
||||
{"afficher": true, "x": ecrans[1].x + ecrans[1].w - w_bouton_suivant - marge_texte_x, "y": ecrans[1].y + ecrans[1].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 1.2
|
||||
{"afficher": true, "x": ecrans[2].x + ecrans[2].w - w_bouton_suivant - marge_texte_x, "y": ecrans[2].y + ecrans[2].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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.2,
|
||||
{'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.3
|
||||
{"afficher": true, "x": ecrans[3].x + ecrans[3].w - w_bouton_suivant - marge_texte_x, "y": ecrans[3].y + ecrans[3].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 2.1 : Selection 1er vues
|
||||
{"afficher": true, "x": ecrans[4].x + ecrans[4].w - w_bouton_suivant - marge_texte_x, "y": ecrans[4].y + ecrans[4].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 2.2 : clique sur fleche droite
|
||||
{"afficher": true, "x": ecrans[5].x + ecrans[5].w - w_bouton_suivant - marge_texte_x, "y": ecrans[5].y + ecrans[5].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 2.3 : clique sur fleche haut
|
||||
{"afficher": true, "x": ecrans[6].x + ecrans[6].w - w_bouton_suivant - marge_texte_x, "y": ecrans[6].y + ecrans[6].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 2.4 : clique sur fleche haut
|
||||
{"afficher": true, "x": ecrans[7].x + ecrans[7].w - w_bouton_suivant - marge_texte_x, "y": ecrans[7].y + ecrans[7].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 2.5 : PBL trop haut
|
||||
{"afficher": true, "x": ecrans[8].x + ecrans[8].w - w_bouton_suivant - marge_texte_x, "y": ecrans[8].y + ecrans[8].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 3.1 : clique sur fleche bas
|
||||
{"afficher": true, "x": ecrans[9].x + ecrans[9].w - w_bouton_suivant - marge_texte_x, "y": ecrans[9].y + ecrans[9].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 3.2 : clique sur fleche bas
|
||||
{"afficher": true, "x": ecrans[10].x + ecrans[10].w - w_bouton_suivant - marge_texte_x, "y": ecrans[10].y + ecrans[10].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
{'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},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
|
||||
clignotements = [
|
||||
// 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},
|
||||
// 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": 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
|
||||
[{"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": temps_attente},
|
||||
{"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
|
||||
[{"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
|
||||
{"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
|
||||
{"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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
{'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
|
||||
{'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}
|
||||
]
|
||||
|
||||
|
||||
conditions_suivant = [
|
||||
// 0
|
||||
{"type": "bouton", "x": positions_bouton[0].x, "y": positions_bouton[0].y, "w": positions_bouton[0].w, "h": positions_bouton[0].h},
|
||||
// 1.1
|
||||
{"type": "bouton", "x": positions_bouton[1].x, "y": positions_bouton[1].y, "w": positions_bouton[1].w, "h": positions_bouton[1].h},
|
||||
// 1.2
|
||||
{"type": "bouton", "x": positions_bouton[2].x, "y": positions_bouton[2].y, "w": positions_bouton[2].w, "h": positions_bouton[2].h},
|
||||
// 1.3
|
||||
{"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
|
||||
{"type": "bouton", "x": positions_bouton[4].x, "y": positions_bouton[4].y, "w": positions_bouton[4].w, "h": positions_bouton[4].h},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
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
|
||||
{"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
|
||||
{"t":"You have: A screen to view the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
// 1.2 : fleche
|
||||
{"t":"You have: Arrows to move the 3D object. (PRESS NEXT BUTTON)", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.010, "l":l_texte_max, "c":color_texte, "i":50},
|
||||
// 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},
|
||||
// 2.1 : Selection 1er vues
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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 :
|
||||
{"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 = [
|
||||
//-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
|
||||
{"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
|
||||
{"afficher": true, "x": ecrans[1].x + ecrans[1].w - w_bouton_suivant - marge_texte_x, "y": ecrans[1].y + ecrans[1].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 1.2
|
||||
{"afficher": true, "x": ecrans[2].x + ecrans[2].w - w_bouton_suivant - marge_texte_x, "y": ecrans[2].y + ecrans[2].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 1.3
|
||||
{"afficher": true, "x": ecrans[3].x + ecrans[3].w - w_bouton_suivant - marge_texte_x, "y": ecrans[3].y + ecrans[3].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 2.1 : Selection 1er vues
|
||||
{"afficher": true, "x": ecrans[4].x + ecrans[4].w - w_bouton_suivant - marge_texte_x, "y": ecrans[4].y + ecrans[4].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 2.2 : clique sur fleche droite
|
||||
{"afficher": true, "x": ecrans[5].x + ecrans[5].w - w_bouton_suivant - marge_texte_x, "y": ecrans[5].y + ecrans[5].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 2.3 : clique sur fleche haut
|
||||
{"afficher": true, "x": ecrans[6].x + ecrans[6].w - w_bouton_suivant - marge_texte_x, "y": ecrans[6].y + ecrans[6].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 2.4 : clique sur fleche haut
|
||||
{"afficher": true, "x": ecrans[7].x + ecrans[7].w - w_bouton_suivant - marge_texte_x, "y": ecrans[7].y + ecrans[7].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 2.5 : PBL trop haut
|
||||
{"afficher": true, "x": ecrans[8].x + ecrans[8].w - w_bouton_suivant - marge_texte_x, "y": ecrans[8].y + ecrans[8].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 3.1 : clique sur fleche bas
|
||||
{"afficher": true, "x": ecrans[9].x + ecrans[9].w - w_bouton_suivant - marge_texte_x, "y": ecrans[9].y + ecrans[9].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 3.2 : clique sur fleche bas
|
||||
{"afficher": true, "x": ecrans[10].x + ecrans[10].w - w_bouton_suivant - marge_texte_x, "y": ecrans[10].y + ecrans[10].h - h_bouton_suivant - marge_texte_x/2, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
|
||||
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
|
||||
{"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
|
||||
[{"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
|
||||
[{"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": temps_attente},
|
||||
{"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
|
||||
[{"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
|
||||
{"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
|
||||
{"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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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": temps_attente},
|
||||
// 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},
|
||||
// 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}
|
||||
]
|
||||
|
||||
|
||||
nb_action = ecrans.length
|
||||
num_action = 0
|
||||
nb_click_explication = 0
|
||||
time_clicke = time_animate
|
||||
console.log('initttt')
|
||||
conditions_suivant = [
|
||||
// -1
|
||||
{"type": "bouton", "x": positions_bouton[0].x, "y": positions_bouton[0].y, "w": positions_bouton[0].w, "h": positions_bouton[0].h},
|
||||
// 0
|
||||
{"type": "bouton", "x": positions_bouton[1].x, "y": positions_bouton[1].y, "w": positions_bouton[1].w, "h": positions_bouton[1].h},
|
||||
// 1.1
|
||||
{"type": "bouton", "x": positions_bouton[2].x, "y": positions_bouton[2].y, "w": positions_bouton[2].w, "h": positions_bouton[2].h},
|
||||
// 1.2
|
||||
{"type": "bouton", "x": positions_bouton[3].x, "y": positions_bouton[3].y, "w": positions_bouton[3].w, "h": positions_bouton[3].h},
|
||||
// 1.3
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"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
|
||||
{"type": "bouton_pose", "x": clignotements[12].x, "y": clignotements[12].y, "w": clignotements[12].w, "h": clignotements[12].h},
|
||||
// 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}
|
||||
]
|
||||
|
||||
|
||||
nb_action = ecrans.length
|
||||
num_action = 0
|
||||
time_clicke = time_animate
|
||||
}
|
||||
|
||||
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_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
|
||||
ecran = ecrans[num_action]
|
||||
texte = textes[num_action]
|
||||
clignotement = clignotements[num_action]
|
||||
position_bouton = positions_bouton[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 )
|
||||
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))
|
||||
|
||||
|
||||
|
||||
// survol de tous les boutons
|
||||
if (num_action>0){
|
||||
survol_bouton()
|
||||
survol_fleche()}
|
||||
|
||||
// s'il faut afficher le bouton next/previous
|
||||
///////// s'il faut afficher le bouton next/previous
|
||||
if (position_bouton.afficher){
|
||||
// bouton suivant
|
||||
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 (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)
|
||||
}
|
||||
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++){
|
||||
clignotement_p = clignotement[p]
|
||||
// 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)
|
||||
}
|
||||
// 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)){
|
||||
console.log("next")
|
||||
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 (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")
|
||||
|
|
@ -284,19 +291,35 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
|||
texte_temporaire = {}
|
||||
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)){
|
||||
console.log("bouton_pose")
|
||||
action_bouton_pose()
|
||||
action_suivante()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// FIN du tuto
|
||||
if (num_action==nb_action){
|
||||
console.log("explications finies")
|
||||
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(){
|
||||
console.log("explications finies")
|
||||
choix_courant = {}
|
||||
liste_poses = []
|
||||
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_vues = true
|
||||
|
||||
interactions.push({"time": new Date().getTime(), "type": "Fin explication. Début des choix."})
|
||||
page_explication_bis = true
|
||||
interactions.push({"time": new Date().getTime(), "type": "Fin 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) ){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 == 12){action_bouton_retirer()}
|
||||
if ((num_action == 7) || (num_action == 12)){action_fleche_gauche(); update_mesh(idx_i, idx_j)}
|
||||
if ((num_action == 8) ){action_fleche_bas(); 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 == 13){action_bouton_retirer()}
|
||||
action_precedente()
|
||||
|
||||
}
|
||||
|
|
@ -341,7 +367,6 @@ function action_bas_explication(){
|
|||
action_suivante()
|
||||
}
|
||||
|
||||
|
||||
function action_suivante(){
|
||||
num_action = num_action+1
|
||||
time_clicke = time_animate
|
||||
|
|
@ -365,44 +390,48 @@ function action_clavier_explication(event){
|
|||
switch (event.key){
|
||||
// selectionner pose
|
||||
case ' ' :
|
||||
if (num_action==11){
|
||||
if (num_action==12){
|
||||
console.log("pose clavier")
|
||||
action_bouton_pose()
|
||||
action_suivante() }
|
||||
break;
|
||||
// valider
|
||||
case 'Enter':
|
||||
console.log("next clavier")
|
||||
if (num_action < nb_action && condition_suivant.type =="bouton"){
|
||||
action_suivante()}
|
||||
if (num_action == nb_action){
|
||||
if (num_action == nb_action && page_explication){
|
||||
action_fin_explication()
|
||||
}
|
||||
if (page_explication_bis){
|
||||
action_bouton_commencer_explication()
|
||||
}
|
||||
if (num_action < nb_action && condition_suivant.type =="bouton"){
|
||||
action_suivante()}
|
||||
|
||||
break;
|
||||
case 'Backspace':
|
||||
if (num_action > 0){
|
||||
if (num_action == 6){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 == 7){action_fleche_gauche(); update_mesh(idx_i, idx_j)}
|
||||
if ((num_action == 8) ){action_fleche_bas(); update_mesh(idx_i, idx_j)}
|
||||
console.log("previous clavier")
|
||||
action_precedente()}
|
||||
break;
|
||||
|
||||
case 'ArrowRight' :
|
||||
if (condition_suivant.type =="fleche_d"){
|
||||
console.log("fleche_d clavier")
|
||||
action_droite_explication()
|
||||
console.log("fleche_d clavier")
|
||||
action_droite_explication()
|
||||
}
|
||||
break
|
||||
case 'ArrowUp' :
|
||||
if (condition_suivant.type =="fleche_h"){
|
||||
console.log("fleche_h clavier")
|
||||
action_haut_explication()
|
||||
console.log("fleche_h clavier")
|
||||
action_haut_explication()
|
||||
}
|
||||
break
|
||||
|
||||
case 'ArrowDown' :
|
||||
if (condition_suivant.type =="fleche_b"){
|
||||
console.log("fleche_b clavier")
|
||||
action_bas_explication()
|
||||
console.log("fleche_b clavier")
|
||||
action_bas_explication()
|
||||
}
|
||||
break
|
||||
}
|
||||
|
|
@ -413,9 +442,24 @@ function survol_bouton_explication(){
|
|||
|
||||
}
|
||||
|
||||
//ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
//texte = "Explications"
|
||||
//font = "42pt Courier"
|
||||
//ctx.font = font
|
||||
//largeur = ctx.measureText(texte).width
|
||||
//ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
|
||||
function afficher_bouton_commencer_explication(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer_choix"].height
|
||||
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
|
||||
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
||||
|
||||
// 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"})
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue