545 lines
26 KiB
JavaScript
545 lines
26 KiB
JavaScript
// Variable global
|
|
// bouton
|
|
function init_variable_fonction(dict_boutons, dict_imgs ){
|
|
// fleche
|
|
//scale_fleche = 0.065
|
|
dy = 0.03*H_3D
|
|
DY = 2*dy
|
|
a = 0.05*window.innerHeight//scale_fleche*dict_imgs["gauche"].height
|
|
ratio_fleche = a/dict_imgs["gauche"].height
|
|
b = ratio_fleche*dict_imgs["gauche"].width
|
|
|
|
// bouton
|
|
//scale_bouton = 0.3
|
|
h_bouton = 0.08*window.innerHeight//scale_bouton*dict_boutons["choix_pose"].height
|
|
ratio = h_bouton/dict_boutons["choix_pose"].height
|
|
w_bouton = ratio*dict_boutons["choix_pose"].width
|
|
pos_bouton = ((W_3D*0.2+a+b)/W_3D)+0.1
|
|
ecart_bouton = 0.1*w_bouton
|
|
|
|
// Couleur
|
|
alpha_bloque = 0.6
|
|
|
|
// progress bar
|
|
x_progress_bar = 0
|
|
y_progress_bar = 0
|
|
w_progress_bar = window.innerWidth - W_3D*0.1
|
|
h_progress_bar = H_3D*0.04
|
|
|
|
// image recap
|
|
dx = 20
|
|
ecart_recap = 0.055*window.innerHeight
|
|
y0_recap = (2*h_progress_bar + ecart_recap)
|
|
|
|
// Message pop up
|
|
x_pop_up = W_3D*pos_bouton+w_bouton*2+ecart_bouton+30
|
|
y_pop_up = H_3D +dy*4
|
|
ecart = 40
|
|
|
|
// texte
|
|
taille_texte = (0.01*window.innerWidth)
|
|
|
|
}
|
|
|
|
|
|
function bloquer_pose(L_poses){
|
|
for (p=0; p<L_poses.length; p++){
|
|
idx_i_p = L_poses[p][3].idx_i
|
|
idx_j_p = L_poses[p][4].idx_j
|
|
// Si on est en train de voir une pose déjà choisie
|
|
if (idx_i== idx_i_p && idx_j==idx_j_p){
|
|
draw_rectangle(0, h_progress_bar, W_3D, H_3D-h_progress_bar, "rgb(0, 0, 0)", alpha_bloque)
|
|
print_text(handle_text("Viewpoint already selected", 10, H_3D, taille_texte+"pt Courier", H_3D, "#118AB2"))
|
|
}
|
|
}
|
|
}
|
|
|
|
function pose_deja_choisie(L_poses, i_choix, j_choix){
|
|
deja_choisie = false
|
|
for (p=0; p<L_poses.length; p++){
|
|
idx_i_p = L_poses[p][3].idx_i
|
|
idx_j_p = L_poses[p][4].idx_j
|
|
// Si on est en train de voir une pose déjà choisie
|
|
if (i_choix == idx_i_p && j_choix==idx_j_p){
|
|
deja_choisie = true
|
|
}
|
|
}
|
|
}
|
|
|
|
function show_consignes(){
|
|
w_consigne = 0.02*window.innerWidth
|
|
h_consigne = w_consigne
|
|
x_titre_vue = W_3D + ((window.innerWidth-W_3D)/2)- (largeur/2) // Position de "Selected Viewpoints"
|
|
x_consigne = W_3D + (x_titre_vue - W_3D)/2 - w_consigne/2
|
|
y_consigne = h_progress_bar + 10
|
|
ctx.drawImage(boutons["consigne"], x_consigne, y_consigne, w_consigne, h_consigne)
|
|
// survol
|
|
if (is_inside(xyMouseMove, x_consigne, y_consigne, w_consigne, h_consigne)){
|
|
x_ecran = W_3D
|
|
y_ecran = 0.15*window.innerHeight
|
|
w_ecran = window.innerWidth-W_3D
|
|
h_ecran = H_3D/2
|
|
draw_rectangle(x_ecran, y_ecran, w_ecran, h_ecran, "rgb(255, 255, 255)", 1)
|
|
// Texte
|
|
//tt = {"t":"- You will be presented "+nb_mesh+" different objects."}
|
|
//ff = {"t":"- For each of them, you will chose a viewpoint you find most representative of the given object. You will have to do this "+nb_choix_demande+" times."}
|
|
print_text(handle_text(textes_contexte['texte13'].t, x_ecran + 20, y_ecran+ 0.2*h_ecran, (0.01*window.innerWidth)+"pt Courier", w_ecran-20, "rgb(0,0,0)"))
|
|
print_text(handle_text(textes_contexte['texte14'].t, x_ecran + 20, y_ecran+0.4*h_ecran, (0.01*window.innerWidth)+"pt Courier", w_ecran-20, "rgb(0,0,0)"))
|
|
}
|
|
}
|
|
|
|
///////////////////////////////////////////////////////////////
|
|
///////////////////// Recap
|
|
function swapElements(arr, i1, i2) {
|
|
// Step 1
|
|
let temp = arr[i1];
|
|
|
|
// Step 2
|
|
arr[i1] = arr[i2];
|
|
|
|
// Step 3
|
|
arr[i2] = temp;
|
|
}
|
|
|
|
// legende des nb_demande recap
|
|
function affichage_texte_recap(pos){
|
|
y_image = y0_recap+(20+ H_3D/3.5)*pos
|
|
ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.fillStyle = "rgb(255, 255, 255)"
|
|
if (pos==0){print_text(handle_text("Best viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
|
if (pos==1){print_text(handle_text("2nd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
|
if (pos==2){print_text(handle_text("3rd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, 1.1*taille_texte+"pt Courier", longueur_max_recap))}
|
|
}
|
|
|
|
function afficher_recap(){
|
|
w_recap = window.innerWidth-W_3D
|
|
// fleche swap haut
|
|
x_fleche_h = W_3D + w_recap/2 - 30
|
|
w_fleche_h = 20
|
|
h_fleche_h = 20
|
|
// fleche swap bas
|
|
x_fleche_b = W_3D + w_recap/2 - 30
|
|
w_fleche_b = 20
|
|
h_fleche_b = 20
|
|
// croix
|
|
x_croix = W_3D+ w_recap/2.5 + W_3D/3.5 +10
|
|
w_croix = 20
|
|
h_croix = 20
|
|
// pour chaque recap
|
|
for (let i = 0 ; i < canvasMins.length; i++) {
|
|
// Draw les images des contextes
|
|
y_image = y0_recap + (10 + H_3D/3.5)*i
|
|
ctx.drawImage(canvasMins[i], W_3D + w_recap/2, y_image, H_3D/3.5, H_3D/3.5)
|
|
|
|
//Fleche pour Switch haut
|
|
if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) {
|
|
y_fleche_h = (H_3D/3.5)*0.35 + y_image
|
|
ctx.drawImage(imgs["haut"], x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)
|
|
if (clicked && click_inside(xyMouseDown, x_fleche_h, y_fleche_h, w_fleche_h, h_fleche_h)) {
|
|
swapElements(canvasMins, i, i-1)
|
|
swapElements(ctxMins, i, i-1)
|
|
swapElements(liste_poses, i, i-1)
|
|
liste_poses[i-1][0] = 'choix'+(i)
|
|
liste_poses[i][0] = 'choix'+(i+1)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('switch_haut_i', [num_tache, nb_choix_fait, i])})
|
|
clicked = false
|
|
}
|
|
}
|
|
// Fleche pour Switch bas
|
|
if (nb_choix_fait > 1 && i < nb_choix_fait-1) {
|
|
y_fleche_b = (H_3D/3.5)*0.65 + y_image
|
|
ctx.drawImage(imgs["bas"], x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)
|
|
if (clicked && click_inside(xyMouseDown, x_fleche_b, y_fleche_b, w_fleche_b, h_fleche_b)) {
|
|
swapElements(canvasMins, i, i+1)
|
|
swapElements(ctxMins, i, i+1)
|
|
swapElements(liste_poses, i, i+1)
|
|
liste_poses[i][0] = 'choix'+(i+1)
|
|
liste_poses[i+1][0] = 'choix'+(i+2)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('switch_bas_i', [num_tache, nb_choix_fait, i])})
|
|
clicked = false
|
|
}
|
|
}
|
|
// Croix
|
|
if (i < nb_choix_fait) {
|
|
// croix pour annuler
|
|
y_croix = (H_3D/3.5)*0.4 + y_image
|
|
ctx.drawImage(imgs["croix"], x_croix, y_croix, w_croix, h_croix)
|
|
if (clicked && click_inside(xyMouseDown, x_croix, y_croix, w_croix, h_croix)) {
|
|
liste_poses.splice(i, 1)
|
|
nb_choix_fait = nb_choix_fait-1
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('supp_pose_i', [num_tache, nb_choix_fait,i])})
|
|
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
|
|
for (let j = i; j < nb_choix_demande-1; j++) {
|
|
swapElements(canvasMins, j, j+1)
|
|
swapElements(ctxMins, j, j+1)
|
|
}
|
|
for (let j = i; j < liste_poses.length; j++) {
|
|
liste_poses[j][0] = 'choix'+(j+1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////////////////////////////////////
|
|
///////////////////// FLECHE
|
|
function afficher_fleche(dict_imgs){
|
|
// image, posx, posy, W, H
|
|
ctx.drawImage(dict_imgs["bas"], W_3D*0.2, H_3D+DY+b+a, a, b)
|
|
ctx.drawImage(dict_imgs["haut"], W_3D*0.2, H_3D+DY, a, b)
|
|
ctx.drawImage(dict_imgs["gauche"], W_3D*0.2-b, H_3D+DY+b, b, a)
|
|
ctx.drawImage(dict_imgs["droite"], W_3D*0.2+a, H_3D+DY+b, b, a)
|
|
|
|
}
|
|
|
|
// afficher un rectangle autour des fleches quand la souris survol
|
|
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_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_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_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_contour(W_3D*0.2, H_3D+DY+b+a, a, b, "rgb(200, 200, 200)", alpha_survol)
|
|
}
|
|
}
|
|
|
|
// MAJ de which_clicked avec le nom de la fleche clickée
|
|
function get_clicked_fleche(){
|
|
// Fleche GAUCHE
|
|
if (clicked && 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 ){
|
|
which_clicked_fleche = 'gauche'
|
|
}
|
|
// Fleche DROITE
|
|
if (clicked && 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 ){
|
|
which_clicked_fleche = 'droite'
|
|
}
|
|
// Fleche HAUT
|
|
if (clicked && 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
|
|
which_clicked_fleche = 'haut'
|
|
}
|
|
// Fleche BAS
|
|
if (clicked && 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
|
|
which_clicked_fleche = 'bas'
|
|
}
|
|
}
|
|
|
|
function traitement_fleche(){
|
|
// Survol des fleches avec la souris
|
|
survol_fleche()
|
|
// click sur une fleche
|
|
get_clicked_fleche()
|
|
//console.log(which_clicked_fleche)
|
|
switch (which_clicked_fleche){
|
|
case'gauche' :
|
|
//console.log("deplacement G")
|
|
action_fleche_gauche()
|
|
//idx_i = (idx_i+1)%8
|
|
break;
|
|
case 'droite' :
|
|
//console.log("deplacement D")
|
|
//idx_i = (idx_i+7)%8
|
|
action_fleche_droite()
|
|
break;
|
|
case'haut' :
|
|
//console.log("deplacement H")
|
|
action_fleche_haut()
|
|
//idx_j = Math.max(idx_j-1,0)
|
|
//idx_j = Math.max(idx_j-1,1)
|
|
break;
|
|
case 'bas' :
|
|
//console.log("deplacement B")
|
|
action_fleche_bas()
|
|
//idx_j = Math.min(idx_j+1,4)
|
|
//idx_j = Math.min(idx_j+1,3)
|
|
break;
|
|
}
|
|
console.log(idx_i, idx_j)
|
|
theta = 2*Math.PI * ( (2/8)*(idx_j==0) + (1/8)*(idx_j==1) + (-1/8)*(idx_j==3) + (-2/8)*(idx_j==4))
|
|
delta = 2*Math.PI * (idx_i/8)
|
|
//camera.position.set(R*Math.cos(theta)*Math.cos(delta), R*Math.sin(theta)*Math.cos(delta), R*Math.sin(delta)) // repère wiki
|
|
camera.position.set(R*Math.cos(delta)*Math.cos(theta), R*Math.sin(theta), R*Math.sin(delta)*Math.cos(theta)) // repère JS
|
|
camera.lookAt(0, 0, 0)
|
|
}
|
|
|
|
function action_fleche_gauche(){
|
|
idx_i = (idx_i+1)%8
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('FG', [num_tache, nb_choix_fait, idx_i, idx_j])})}
|
|
|
|
function action_fleche_droite(){
|
|
idx_i = (idx_i+7)%8
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('FD', [num_tache, nb_choix_fait, idx_i, idx_j])})}
|
|
|
|
function action_fleche_haut(){
|
|
if (idx_j == 0){
|
|
texte_temporaire = {"text": "You can't go any further, GO BACK DOWN.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_FH", [num_tache, nb_choix_fait]) })}
|
|
|
|
idx_j = Math.max(idx_j-1,0)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('FH', [num_tache, nb_choix_fait, idx_i, idx_j])})
|
|
}
|
|
|
|
function action_fleche_bas(){
|
|
if (idx_j == 4){
|
|
texte_temporaire = {"text": "You can't go any further, GO UP.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_FB", [num_tache, nb_choix_fait]) })
|
|
}
|
|
idx_j = Math.min(idx_j+1,4)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('FB', [num_tache, nb_choix_fait, idx_i, idx_j])})
|
|
}
|
|
|
|
///////////////////////////////////////////////////////////////
|
|
///////////////////// BOUTON
|
|
function afficher_bouton(dict_boutons){
|
|
// Partie selection vue
|
|
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 = 2*taille_texte+"pt Courier"
|
|
texte = "Selected Viewpoints:"
|
|
largeur = ctx.measureText(texte).width
|
|
ctx.fillText(texte, W_3D + ((window.innerWidth-W_3D)/2)- (largeur/2), h_progress_bar + ecart_recap)
|
|
//print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/5, h_progress_bar + ecart_recap, 2*taille_texte+"pt Courier", 500))
|
|
|
|
// BOUTONS
|
|
// image, posx, posy, W, H
|
|
ctx.drawImage(dict_boutons["choix_pose"], W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
|
ctx.drawImage(dict_boutons["retirer"], W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)
|
|
ctx.drawImage(dict_boutons["reinitialiser"], W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)
|
|
ctx.drawImage(dict_boutons["raz"], window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton)
|
|
if (nb_choix_fait == nb_choix_demande){
|
|
ctx.drawImage(dict_boutons["valider"], -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)}
|
|
}
|
|
|
|
function survol_bouton(){
|
|
// Choisir le pt de vue
|
|
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy && xyMouseMove.y < H_3D+dy+h_bouton ){
|
|
if (is_inside(xyMouseMove, W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
|
draw_rectangle(W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
|
}
|
|
// Retirer
|
|
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+h_bouton ){
|
|
else if (is_inside(xyMouseMove, W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
|
draw_rectangle(W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
|
}
|
|
// Reintialiser
|
|
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
|
else if (is_inside(xyMouseMove, W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)){
|
|
draw_rectangle(W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
|
}
|
|
// Valider
|
|
//if (xyMouseMove.x >= W_3D*0.2+a+2*b+ecart && xyMouseMove.x <= W_3D*0.2+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
|
else if (nb_choix_demande==nb_choix_fait && is_inside(xyMouseMove, -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)) {
|
|
draw_rectangle(-(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2, "rgb(200, 200, 200)", 0.6)
|
|
}
|
|
//RAZ
|
|
else if (is_inside(xyMouseMove, window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton )) {
|
|
draw_rectangle(window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton, "rgb(200, 200, 200)", 0.6)
|
|
}
|
|
}
|
|
|
|
function get_clicked_bouton(){
|
|
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+b+h_bouton ){
|
|
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
|
which_clicked_bouton = "bouton_pose"
|
|
}
|
|
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b && xyMouseMove.y < H_3D+dy+b+h_bouton ){
|
|
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton+w_bouton+ecart_bouton, H_3D+dy*2, w_bouton, h_bouton)){
|
|
which_clicked_bouton = "bouton_retirer"
|
|
}
|
|
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart*7 && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart*7+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
|
if (clicked && click_inside(xyMouseMove, W_3D*pos_bouton+w_bouton/2, H_3D+dy*2+h_bouton+ecart_bouton, w_bouton, h_bouton)){
|
|
which_clicked_bouton = "bouton_reinitialiser"
|
|
}
|
|
//if (clicked && xyMouseMove.x >= W_3D*0.35+a+2*b+ecart && xyMouseMove.x <= W_3D*0.35+a+2*b+ecart+w_bouton && xyMouseMove.y > H_3D+dy+b+ecart*2 && xyMouseMove.y < H_3D+dy+b+ecart*2+h_bouton ){
|
|
if (nb_choix_demande==nb_choix_fait &&clicked && click_inside(xyMouseMove, -(1.2*w_bouton)/4+W_3D, H_3D+dy*2+h_bouton, w_bouton*1.2, h_bouton*1.2)) {
|
|
which_clicked_bouton = "bouton_valider"
|
|
}
|
|
if (clicked && click_inside(xyMouseMove, window.innerWidth-w_bouton-10, window.innerHeight-h_bouton-10, w_bouton, h_bouton)) {
|
|
which_clicked_bouton = "bouton_raz"
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_raz", [num_tache, nb_choix_fait])})
|
|
}
|
|
}
|
|
|
|
function action_bouton_pose(){
|
|
// on regarde si la pose sélectionnée n'a pas déjà été choisie avant
|
|
pose_deja_choisie(liste_poses, idx_i, idx_j)
|
|
|
|
if (deja_choisie && !(nb_choix_fait == nb_choix_demande)){
|
|
//console.log("Cette pose a déjà été sélectionnée.")
|
|
texte_temporaire = {"text": "This viewpoint has already been selected.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_pose_selectionnee", [num_tache, nb_choix_fait])})}
|
|
|
|
// plus de choix possible
|
|
if (nb_choix_fait == nb_choix_demande) {
|
|
//console.log("Tu as déjà fait tes "+nb_choix_demande+" choix.")
|
|
texte_temporaire = {"text": "You have already selected your "+nb_choix_demande+" viewpoints.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_choix_fait", [num_tache, nb_choix_fait, nb_choix_fait])})}
|
|
|
|
// si on a pas encore choisie toutes nos poses, on peut en ajouter
|
|
if (nb_choix_fait < nb_choix_demande && !(deja_choisie)){
|
|
liste_poses.push(['choix'+(nb_choix_fait+1), {'theta':theta}, {"delta":delta}, {'idx_i':idx_i}, {'idx_j':idx_j}])
|
|
// affichage de la vue sélectionnée dans le recap
|
|
ctxMins[nb_choix_fait].drawImage(canvasRenderer, 0.5*canvasRenderer.width-0.5*canvasRenderer.height, 0, canvasRenderer.height, canvasRenderer.height, 0, 0, canvasMins[0].width, canvasMins[0].height)//canvasRenderer.height*0.3, canvasRenderer.height*0.25)
|
|
nb_choix_fait = nb_choix_fait+1
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_select", [num_tache, nb_choix_fait, nb_choix_fait, idx_i, idx_j])})
|
|
}
|
|
}
|
|
|
|
function action_bouton_retirer(){
|
|
// il y a des poses à retirer
|
|
if (liste_poses.length > 0){
|
|
liste_poses.pop()
|
|
nb_choix_fait = nb_choix_fait-1
|
|
// RAZ du contexte liée à la dernière vue ajoutée
|
|
ctxMins[nb_choix_fait].clearRect(0, 0, canvasMins[nb_choix_fait].width, canvasMins[nb_choix_fait].height)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('bouton_remove', [num_tache, nb_choix_fait])})
|
|
// On retire toutes les checkbox des checkbox
|
|
//checkbox_clicked_courant[nb_choix_fait].idx_checkbox = []
|
|
//checkbox_clicked_courant[nb_choix_fait].mots = []
|
|
}
|
|
// S'il n'y a pas de pose choisie
|
|
else {
|
|
//console.log("Il n'y a pas de pose à retirer.")
|
|
texte_temporaire = {"text": "There are no selected viewpoints to remove.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_pas_de_pose", [num_tache, nb_choix_fait])})
|
|
}
|
|
}
|
|
|
|
function action_bouton_reinitialiser(){
|
|
if (liste_poses.length>0){
|
|
liste_poses = []
|
|
nb_choix_fait = 0
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_reset", [num_tache, nb_choix_fait])})
|
|
// RAZ de tous les contexte : on ne les surrpime pas, on les nettoie
|
|
for (let i = 0; i < nb_choix_demande; i++) {
|
|
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
|
|
}
|
|
}
|
|
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}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_reset_impossible", [num_tache, nb_choix_fait])})}
|
|
}
|
|
|
|
function action_bouton_valider(){
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_valider", [num_tache, nb_choix_fait])})
|
|
// Si tous les mesh ont été vu
|
|
if (num_tache == nb_mesh && nb_choix_demande==nb_choix_fait){
|
|
choix_courant['choix_poses'] = liste_poses
|
|
choix['tache_N'+num_tache] = choix_courant
|
|
// sauvegarde des images du recap
|
|
all_ctxMins['tache_N'+num_tache] = [mesh_courant,ctxMins]
|
|
all_canvasMins['tache_N'+num_tache] = [mesh_courant,canvasMins]
|
|
//checkbox_clicked['tache_N'+num_tache] = checkbox_clicked_courant
|
|
num_tache = num_tache+1
|
|
//page_analyse = true
|
|
page_explication_analyse = true
|
|
page_vues = false
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('fin_tache_i', [num_tache-1])})
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("fin_choix", [])})
|
|
}
|
|
|
|
// Si le nombre de vue demandé a été fait et que ce n'est pas le dernier mesh à voir
|
|
else if (nb_choix_demande == liste_poses.length && num_tache < nb_mesh){
|
|
choix_courant['choix_poses'] = liste_poses
|
|
choix['tache_N'+num_tache] = choix_courant
|
|
// sauvegarde des images du recap
|
|
all_ctxMins['tache_N'+num_tache] = [mesh_courant,ctxMins]
|
|
all_canvasMins['tache_N'+num_tache] = [mesh_courant,canvasMins]
|
|
//checkbox_clicked['tache_N'+num_tache] = checkbox_clicked_courant
|
|
// RAZ
|
|
choix_courant = {}
|
|
liste_poses = []
|
|
nb_choix_fait = 0
|
|
//checkbox_clicked_courant = []
|
|
//for (let i = 0 ; i < nb_choix_demande; i++){checkbox_clicked_courant.push({recap: "n°"+(i+1),idx_checkbox:[], mots:[]})}
|
|
// Mesh suivant
|
|
indice_mesh = indice_mesh + 1
|
|
num_tache = num_tache+1
|
|
idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('fin_tache_i', [num_tache-1])})
|
|
interactions.push({"time": new Date().getTime(), "type": get_message('debut_tache_i', [num_tache])})
|
|
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
|
|
|
|
}
|
|
|
|
// Error : il reste des vues à sélectionner
|
|
else if (nb_choix_fait < nb_choix_demande){
|
|
//console.log("Tu n'as pas fait tes 3 choix")
|
|
texte_temporaire = {"text": "You did not select your "+nb_choix_demande+" viewpoints.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_valider", [num_tache, nb_choix_fait])})
|
|
}
|
|
// Error : un pbl à identifier
|
|
else{
|
|
console.log("PBL bouton valider")
|
|
}
|
|
}
|
|
|
|
function action_bouton_raz(){
|
|
x_texte_raz = -(1.2*w_bouton)/4+W_3D + w_bouton*1.2 +10
|
|
y_texte_raz = H_3D+dy*2+h_bouton
|
|
l_max_raz = window.innerWidth-w_bouton-10 - x_texte_raz
|
|
//on efface les autres textes pop
|
|
texte_temporaire = {}
|
|
//affichage du message
|
|
print_text(handle_text("Do you really want to restart the study?", x_texte_raz, y_texte_raz, taille_texte+"pt Courier", l_max_raz, color="#FFFFFF", interligne=0.045*window.innerHeight))
|
|
// affichage
|
|
ctx.drawImage(imgs['croix'], x_texte_raz+ l_max_raz*0.2, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)
|
|
ctx.drawImage(imgs['check'], x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)
|
|
// si on veut raz
|
|
if (clicked && is_inside(xyMouseMove, x_texte_raz+ l_max_raz*0.6, window.innerHeight-h_bouton +10, h_bouton/2, h_bouton/2)){
|
|
init_variable(false);
|
|
idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5)
|
|
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_raz_check", [num_tache, nb_choix_fait])})}
|
|
// click sur la croix ou ailleurs : on clear
|
|
if(clicked){
|
|
bouton_raz_clicked = false
|
|
interactions.push({"time": new Date().getTime(), "type": get_message("bouton_raz_croix", [num_tache, nb_choix_fait])})}
|
|
|
|
|
|
}
|
|
|
|
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)
|
|
// si on survol, on a les contours qui apparaissent
|
|
survol_bouton()
|
|
// si on click
|
|
get_clicked_bouton()
|
|
switch (which_clicked_bouton){
|
|
// bouton valider pose : on rajoute le bouton à la liste
|
|
case 'bouton_pose':
|
|
bouton_raz_clicked = false
|
|
action_bouton_pose()
|
|
break;
|
|
case 'bouton_retirer':
|
|
bouton_raz_clicked = false
|
|
action_bouton_retirer()
|
|
break;
|
|
case 'bouton_reinitialiser':
|
|
bouton_raz_clicked = false
|
|
action_bouton_reinitialiser()
|
|
break;
|
|
case 'bouton_valider':
|
|
bouton_raz_clicked = false
|
|
action_bouton_valider()
|
|
break;
|
|
case 'bouton_raz':
|
|
bouton_raz_clicked = true
|
|
//console.log("bouton raz")
|
|
break;
|
|
}
|
|
}
|
|
|