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

plus de clignotement bizarre

Browse Source
This commit is contained in:
mpelissi
2023-03-10 08:57:25 +01:00
parent 0d9cb773a8
commit 59e22fc0ac
8 changed files with 1194 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/MAIN.js
+7 -6
View File
@@ -316,7 +316,7 @@ function animate() {
init_variable_fonction(boutons, imgs)
init_explication()
// affichage ecran 3D de manière aléatoire
idx_i_explication = 2 , idx_j_explication = 1
idx_i_explication = 4 , idx_j_explication = 1
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication)
premier_tour_page_explications = false
}
@@ -332,7 +332,7 @@ function animate() {
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, " 18pt Courier", longueur_max_error, "#118AB2"))}
}
// progress bar
progress_bar(num_tache, nb_mesh)
progress_bar(0, 1)
// Affichage fleche
afficher_fleche(imgs)
// affichage de sboutons
@@ -383,7 +383,7 @@ function animate() {
else{print_text(handle_text(texte_temporaire.text, texte_temporaire.x, texte_temporaire.y, " 18pt Courier", longueur_max_error, "#118AB2"))}
}
// progress bar
progress_bar(num_tache, nb_mesh)
progress_bar(num_tache-1, nb_mesh)
// Affichage fleche
afficher_fleche(imgs)
// affichage de sboutons
@@ -402,9 +402,9 @@ function animate() {
// Les poses choisies sont grisées
bloquer_pose(liste_poses)
// RAZ
clicked = false
which_clicked_fleche = -1
which_clicked_bouton = -1
// clicked = false
// which_clicked_fleche = -1
// which_clicked_bouton = -1
}
////////////////////////////////////////////////////////////////////////////////
// page analyse
@@ -419,6 +419,7 @@ function animate() {
premier_tour_page_analyse = false}
init_variable_analyse()
traitement_fin()
}
////////////////////////////////////////////////////////////////////////////////
// page fin
static/fonctions_analyse.js
+4 -4
View File
@@ -61,10 +61,10 @@ function progress_bar_analyse(N_analyse, N_analyse_total){
console.log(w_bar)
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
// numero de tache
// 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.font = "18pt Courier";
// ctx.fillText((N_analyse+1)+"/"+(N_analyse_total), x_progress_bar+w_progress_bar+10, h_progress_bar)
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.font = "18pt Courier";
ctx.fillText((N_analyse)+"/"+(N_analyse_total), x_progress_bar+w_progress_bar+10, h_progress_bar)
}
}
static/fonctions_choix_vues.js
+5 -5
View File
@@ -19,7 +19,7 @@ function init_variable_fonction(dict_boutons, dict_imgs ){
// progress bar
x_progress_bar = 0
y_progress_bar = 0
w_progress_bar = window.innerWidth //- W_3D*0.1
w_progress_bar = window.innerWidth - W_3D*0.1
h_progress_bar = H_3D*0.04
// image recap
dx = 20
@@ -177,21 +177,21 @@ function afficher_fleche(dict_imgs){
function survol_fleche(){
// Fleche GAUCHE
if (xyMouseMove.x >= W_3D*0.2-b && xyMouseMove.x <= W_3D*0.2 && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
draw_rectangle(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
draw_contour(W_3D*0.2-b, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
}
// Fleche DROITE
if (xyMouseMove.x >= W_3D*0.2+a && xyMouseMove.x <= W_3D*0.2+a+b && xyMouseMove.y > H_3D+DY+b && xyMouseMove.y < H_3D+DY+b+a ){
draw_rectangle(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
draw_contour(W_3D*0.2+a, H_3D+DY+b, b, a, "rgb(200, 200, 200)", alpha_survol)
}
// Fleche HAUT
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY && xyMouseMove.y < H_3D+DY+b ){
// l'image devient verte
draw_rectangle(W_3D*0.2, H_3D+DY, a, b, "rgb(200, 200, 200)", alpha_survol)
draw_contour(W_3D*0.2, H_3D+DY, a, b, "rgb(200, 200, 200)", alpha_survol)
}
// Fleche BAS
if (xyMouseMove.x >= W_3D*0.2 && xyMouseMove.x <= W_3D*0.2+a && xyMouseMove.y > H_3D+DY+b+a && xyMouseMove.y < H_3D+DY+b+a+b ){
// l'image devient verte
draw_rectangle(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol)
draw_contour(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol)
}
}
static/fonctions_explications.js
+51 -22
View File
@@ -4,7 +4,7 @@ alpha_ecran = 0.9
alpha_clignotement = 0.8
color_ecran ="rgb(255,255,255)"
color_texte = "rgb(0,0,0)"
color_clignotement = "rgb(200,0,0)"
color_clignotement = "rgb(0,255,255)"
font_texte = window.innerWidth
ecart_x = 50
l_texte_max = window.innerWidth-W_3D-2*ecart_x -50
@@ -114,31 +114,37 @@ positions_bouton = [
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": new Date().getTime()+temps_attente},
{"type":"a_cliquer", "x":positions_bouton[0].x, "y":positions_bouton[0].y, "w":positions_bouton[0].w, "h":positions_bouton[0].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// 1.1 : ecran 3D
{"type":"a_regarder", "x":0, "y":h_progress_bar, "w":W_3D, "h":H_3D, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500},
[{"type":"a_regarder", "x":0, "y":h_progress_bar, "w":W_3D, "h":H_3D, "c":color_clignotement,"a": alpha_clignotement, "t": 500},
{"type":"a_cliquer", "x":positions_bouton[1].x, "y":positions_bouton[1].y, "w":positions_bouton[1].w, "h":positions_bouton[1].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 1.2 : fleche
{"type":"a_regarder", "x": W_3D*0.2-b, "y":H_3D+DY, "w":b+a+b, "h":b+a+b, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500},
[{"type":"a_regarder", "x": W_3D*0.2-b, "y":H_3D+DY, "w":b+a+b, "h":b+a+b, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x":positions_bouton[2].x, "y":positions_bouton[2].y, "w":positions_bouton[2].w, "h":positions_bouton[2].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 1.3
{"type":"a_regarder", "x":W_3D*pos_bouton, "y":H_3D+dy*2, "w":w_bouton*2 + ecart_bouton, "h":h_bouton*2+ecart_bouton, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+500},
[{"type":"a_regarder", "x":W_3D*pos_bouton, "y":H_3D+dy*2, "w":w_bouton*2 + ecart_bouton, "h":h_bouton*2+ecart_bouton, "c":color_clignotement,"a": alpha_clignotement, "t": 500},
{"type":"a_cliquer", "x": positions_bouton[3].x, "y":positions_bouton[3].y, "w":positions_bouton[3].w, "h":positions_bouton[3].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
],
// 2.1 : Selection 1er vues
{"type":"a_cliquer", "x": positions_bouton[4].x, "y":positions_bouton[4].y, "w":positions_bouton[4].w, "h":positions_bouton[4].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente},
{"type":"a_cliquer", "x": positions_bouton[4].x, "y":positions_bouton[4].y, "w":positions_bouton[4].w, "h":positions_bouton[4].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// 2.2 : clique sur fleche droite
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.3 : clique sur fleche haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.4 : clique sur fleche haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 2.5 : PBL trop haut
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 3.1 : clique sur fleche bas
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2, "y":H_3D+DY+b+a, "w":a, "h":b, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 3.2 : clique sur fleche bas --> next step fleche droite
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*0.2+a, "y":H_3D+DY+b, "w":b, "h":a, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 3.3 : clique sur fleche drioite --> next step bouton pose
{"type":"a_cliquer", "x": W_3D*pos_bouton, "y": H_3D+dy*2, "w": w_bouton, "h": h_bouton, "c":color_clignotement,"a":alpha_clignotement, "t": new Date().getTime()+500},
{"type":"a_cliquer", "x": W_3D*pos_bouton, "y": H_3D+dy*2, "w": w_bouton, "h": h_bouton, "c":color_clignotement,"a":alpha_clignotement, "t": 500},
// 4
{"type":"a_cliquer", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente}
{"type":"a_cliquer", "x": positions_bouton[12].x, "y":positions_bouton[12].y, "w":positions_bouton[12].w, "h":positions_bouton[12].h, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()}
]
@@ -175,6 +181,9 @@ conditions_suivant = [
nb_action = ecrans.length
num_action = 0
nb_click_explication = 0
time_clicke = time_animate
console.log('initttt')
}
@@ -206,28 +215,46 @@ function traitement_explications(idx_i_explication, idx_j_explication){
// bouton suivant
ctx.drawImage(boutons['suivant'], position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)
if (is_inside(xyMouseMove, position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h)){
console.log('ttt')
//console.log('ttt')
draw_rectangle(position_bouton.x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)}
// Bouton previous
if (num_action>0){
ctx.drawImage(boutons['avant'], position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)
if (is_inside(xyMouseMove, position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h)){
console.log("dedans")
//console.log("dedans")
draw_rectangle(position_bouton.x - w_bouton_suivant - marge_texte_x, position_bouton.y, position_bouton.w, position_bouton.h, "rgb(200, 200, 200)", 0.6)}
}
}
// clignotement courant
if (time_animate > clignotement.t && num_action!=12 && clignotement.type=="a_cliquer"){
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 5) }
if (time_animate > clignotement.t && clignotement.type=="a_regarder"){
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6) }
// 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"){
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, 10)
}
if (time_animate > time_clicke + clignotement.t && clignotement.type=="a_regarder"){
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(17, 138, 178)", 0.6)
}
// on a plusieurs clignotement
} else {
for(let p=0; p<clignotement.length; p++){
clignotement_p = clignotement[p]
// contour
if (time_animate > time_clicke + clignotement_p.t && num_action!=12 && clignotement_p.type=="a_cliquer"){
clignotement_contour(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, clignotement_p.c, 10)
}
// rectangle
if (time_animate > time_clicke + clignotement_p.t && clignotement_p.type=="a_regarder"){
clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(17, 138, 178)", 0.6)
}
}
}
// si on clique sur NEXT
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
//if (condition_suivant.type =="bouton" && num_action >0 && clicked && click_inside(xyMouseDown, condition_suivant.x- w_bouton_suivant - marge_texte_x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){
@@ -311,10 +338,12 @@ function action_bas_explication(){
function action_suivante(){
num_action = num_action+1
time_clicke = time_animate
}
function action_precedente(){
num_action = num_action-1
time_clicke = time_animate
}
function update_mesh(I,J){
static/fonctions_utiles.js
+6 -5
View File
@@ -45,6 +45,7 @@ function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1, ep
ctx.globalAlpha = alpha
ctx.stroke()
ctx.lineWidth = 1
ctx.globalAlpha = 1
}
function clignotement_rectangle(periode, originex, originey, largeur, hauteur, couleur, alhpa_max=1){
@@ -136,13 +137,13 @@ function progress_bar(N_tache, N_mesh){
// background
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
// bar
w_bar = ((N_tache-1)/N_mesh)*w_progress_bar
w_bar = ((N_tache)/N_mesh)*w_progress_bar
draw_rectangle(x_progress_bar, y_progress_bar, w_bar, h_progress_bar, "rgb(17, 138, 178)", 1)
// // numero de tache
// 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.font = "18pt Courier";
// ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar)
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.font = "18pt Courier";
ctx.fillText((N_tache)+"/"+(N_mesh), x_progress_bar+w_progress_bar+10, h_progress_bar)
}
}