titre ecran tuto clignotement ok
This commit is contained in:
parent
a5aaeca61a
commit
f84c87c008
|
@ -77,9 +77,9 @@ function init_variable(premier_appel){
|
||||||
R = 2.5
|
R = 2.5
|
||||||
|
|
||||||
// Enchainement des pages
|
// Enchainement des pages
|
||||||
page_contexte = true
|
page_contexte = false
|
||||||
page_inscription = false // true
|
page_inscription = false // true
|
||||||
page_explication = false
|
page_explication = true
|
||||||
page_vues = false // false
|
page_vues = false // false
|
||||||
page_analyse = false
|
page_analyse = false
|
||||||
|
|
||||||
|
|
|
@ -4,83 +4,84 @@ function init_explication(){
|
||||||
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(0,255,255)"
|
color_clignotement = "rgb(255,0,255)"
|
||||||
|
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_texte_x = 20
|
|
||||||
marge_texte_y = 50
|
|
||||||
|
|
||||||
|
// marge du texte
|
||||||
|
marge_texte_x = 20
|
||||||
|
marge_texte_y = 100
|
||||||
|
|
||||||
|
// 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
|
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 = 3000
|
temps_attente = 0
|
||||||
|
|
||||||
// actions = [
|
|
||||||
// {'ecran': {'x': W_3D + ecart_x, "y": H_3D*0.7, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran},
|
|
||||||
// 'texte': ,
|
|
||||||
// 'clignotement': {"x":0, "y":0, "w":100, "h":100, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente},
|
|
||||||
// 'bouton' :{"afficher": true, "x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant},
|
|
||||||
// 'condition_suivant':{"x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant}}
|
|
||||||
// ]
|
|
||||||
|
|
||||||
ecrans = [
|
ecrans = [
|
||||||
// 0
|
// 0
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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.2,
|
// 1.2,
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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.3
|
// 1.3
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 2.1 : Selection 1er vues
|
// 2.1 : Selection 1er vues
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 2.2 : clique sur fleche droite
|
// 2.2 : clique sur fleche droite
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 2.3 : clique sur fleche haut
|
// 2.3 : clique sur fleche haut
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 2.4 : clique sur fleche haut
|
// 2.4 : clique sur fleche haut
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 2.5 : PBL trop haut
|
// 2.5 : PBL trop haut
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 3.1 : clique sur fleche bas
|
// 3.1 : clique sur fleche bas
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 3.2 : clique sur fleche bas
|
// 3.2 : clique sur fleche bas
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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},
|
||||||
// 3.3 : clique sur fleche droite
|
// 3.3 : clique sur fleche droite
|
||||||
{'x': W_3D + ecart_x, "y": H_3D*0.6, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "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 = [
|
||||||
// 0
|
// 0
|
||||||
{"t":"Here is how the interface looks like.", "x": ecrans[0].x + marge_texte_x, "y": ecrans[0].y + marge_texte_y, "f":0.012, "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
|
||||||
{"t":"You have: A screen to view the 3D object,", "x": ecrans[1].x + marge_texte_x, "y": ecrans[1].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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
|
// 1.2 : fleche
|
||||||
{"t":"You have: Arrows to move the 3D object,", "x": ecrans[2].x + marge_texte_x, "y": ecrans[2].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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
|
// 1.3 : bouton
|
||||||
{"t":"You have: Buttons to make your selection.", "x": ecrans[3].x + marge_texte_x, "y": ecrans[3].y + marge_texte_y, "f":0.012, "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. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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
|
// 2.2 : clique sur fleche droite
|
||||||
{"t":"Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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
|
// 2.3 : clique sur fleche haut
|
||||||
{"t":"Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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
|
// 2.4 : clique sur fleche haut
|
||||||
{"t":"ArrowUp once again. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "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. (Follow the guide)", "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 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
|
// 3.1 : clique sur fleche bas
|
||||||
{"t":"It's better. Once again. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "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. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.012, "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. (Follow the guide)", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.011, "l":l_texte_max, "c":color_texte, "i":50},
|
{"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 :
|
// 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.", "x": ecrans[4].x + marge_texte_x, "y": ecrans[4].y + marge_texte_y, "f":0.011, "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 = [
|
||||||
|
@ -120,7 +121,7 @@ clignotements = [
|
||||||
{"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},
|
{"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": 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},
|
{"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
|
||||||
|
@ -130,21 +131,21 @@ clignotements = [
|
||||||
// 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": 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": 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": temps_attente},
|
||||||
// 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": 500},
|
{"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
|
// 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": 500},
|
{"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
|
// 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": 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": temps_attente},
|
||||||
// 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": 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": temps_attente},
|
||||||
// 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": 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": temps_attente},
|
||||||
// 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": 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": 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": new Date().getTime()}
|
{"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}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
@ -193,7 +194,7 @@ 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)
|
//console.log("debut", idx_i, idx_j, num_action)
|
||||||
|
|
||||||
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
|
||||||
|
@ -205,9 +206,14 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||||
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
|
||||||
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))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// survol de tous les boutons
|
||||||
survol_bouton()
|
survol_bouton()
|
||||||
|
|
||||||
// s'il faut afficher le bouton next/previous
|
// s'il faut afficher le bouton next/previous
|
||||||
|
@ -229,7 +235,7 @@ 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!=12 && clignotement.type=="a_cliquer"){
|
||||||
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 10)
|
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, epaisseur_clignotement)
|
||||||
}
|
}
|
||||||
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){
|
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){
|
||||||
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6)
|
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6)
|
||||||
|
@ -240,7 +246,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){
|
||||||
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!=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)
|
clignotement_contour(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, clignotement_p.c, epaisseur_clignotement)
|
||||||
}
|
}
|
||||||
// rectangle
|
// rectangle
|
||||||
if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){
|
if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){
|
||||||
|
|
|
@ -26,12 +26,15 @@ function affichage_inscription(){
|
||||||
ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24)
|
ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////
|
||||||
|
/// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO)
|
||||||
|
|
||||||
function afficher_bouton_commencer_inscription(){
|
function afficher_bouton_commencer_inscription(){
|
||||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width
|
w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width
|
||||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height
|
h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height
|
||||||
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
|
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
|
||||||
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
|
||||||
|
|
||||||
// Bouton commencer
|
// Bouton commencer
|
||||||
ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
|
ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
|
||||||
|
|
||||||
|
@ -41,7 +44,6 @@ function afficher_bouton_commencer_inscription(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function action_bouton_commencer_inscription(){
|
function action_bouton_commencer_inscription(){
|
||||||
page_inscription = false
|
page_inscription = false
|
||||||
//page_vues = true
|
//page_vues = true
|
||||||
|
@ -52,6 +54,8 @@ function action_bouton_commencer_inscription(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////
|
||||||
|
/// BOUTON SUIVANT INSCRIPTION
|
||||||
function afficher_bouton_suivant_inscription(){
|
function afficher_bouton_suivant_inscription(){
|
||||||
w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width
|
w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width
|
||||||
h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height
|
h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height
|
||||||
|
@ -254,6 +258,7 @@ function traitement_inscription(){
|
||||||
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
|
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
|
||||||
action_bouton_commencer_inscription()
|
action_bouton_commencer_inscription()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue