Add files via upload
This commit is contained in:
PelissierCombescure
committed by
GitHub
GitHub
parent
ee4078570e
commit
937eba3a16
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,12 @@
|
||||
// 1. Create the button
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Do Something";
|
||||
|
||||
// 2. Append somewhere
|
||||
var body = document.getElementsByTagName("body")[0];
|
||||
body.appendChild(button);
|
||||
|
||||
// 3. Add event handler
|
||||
button.addEventListener ("click", function() {
|
||||
alert("did something");
|
||||
});
|
||||
@@ -0,0 +1,642 @@
|
||||
// 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 = scale_fleche*dict_imgs["gauche"].height
|
||||
b = scale_fleche*dict_imgs["gauche"].width
|
||||
// bouton
|
||||
scale_bouton = 0.3
|
||||
h_bouton = scale_bouton*dict_boutons["choix_pose"].height
|
||||
w_bouton = scale_bouton*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
|
||||
// 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
|
||||
|
||||
}
|
||||
|
||||
|
||||
function new_image(src) {
|
||||
img = new Image()
|
||||
img.src = src
|
||||
return img
|
||||
}
|
||||
|
||||
function getMousePos(c, event) {
|
||||
var rect = c.getBoundingClientRect()
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
function is_inside(xyMove, x, y, w, h) {
|
||||
return (xyMove.x > x && xyMove.x < x+w && xyMove.y > y && xyMove.y < y +h)
|
||||
}
|
||||
|
||||
function click_inside(xyClick, x, y, w, h) {
|
||||
return (xyClick.x > x && xyClick.x < x+w && xyClick.y > y && xyClick.y < y +h)
|
||||
}
|
||||
|
||||
function draw_rectangle(originex, originey, largeur, hauteur, couleur, alpha){
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(originex, originey)
|
||||
ctx.lineTo(originex+largeur, originey)
|
||||
ctx.lineTo(originex+largeur, originey+hauteur)
|
||||
ctx.lineTo(originex, originey+hauteur)
|
||||
ctx.lineTo(originex, originey)
|
||||
ctx.fillStyle = couleur
|
||||
ctx.globalAlpha = alpha
|
||||
ctx.fill()
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
|
||||
function draw_contour(originex, originey, largeur, hauteur, couleur, alpha=1){
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(originex, originey)
|
||||
ctx.lineTo(originex+largeur, originey)
|
||||
ctx.lineTo(originex+largeur, originey+hauteur)
|
||||
ctx.lineTo(originex, originey+hauteur)
|
||||
ctx.lineTo(originex, originey)
|
||||
ctx.lineWidth = 5
|
||||
ctx.strokeStyle = couleur
|
||||
ctx.globalAlpha = alpha
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 1
|
||||
}
|
||||
|
||||
function bloquer_pose(L_poses){
|
||||
for (p=0; p<L_poses.length; p++){
|
||||
idx_i_p = L_poses[p][3]
|
||||
idx_j_p = L_poses[p][4]
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function progress_bar(N_tache, N_mesh){
|
||||
if (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
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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_j_p = L_poses[p][4]
|
||||
// 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 print_text(dialogue) {
|
||||
|
||||
s = dialogue.texte
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
if (s[i].lettre !== undefined) {
|
||||
ctx.strokeStyle = s[i].stroke
|
||||
ctx.fillStyle = s[i].fill
|
||||
ctx.strokeText(s[i].lettre, s[i].x, s[i].y)
|
||||
ctx.fillText(s[i].lettre, s[i].x, s[i].y)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function handle_text(dialogue, x_start, y_start, font, l_max, color="#FFFFFF") {
|
||||
let s = dialogue
|
||||
|
||||
let x = 0
|
||||
let y = y_start
|
||||
|
||||
let mot = ""
|
||||
let img_to_print = ""
|
||||
let lettres = s.split("")
|
||||
let message = []
|
||||
|
||||
let current_fill = color
|
||||
|
||||
ctx.textAlign = "left"
|
||||
ctx.font = font
|
||||
|
||||
while (lettres.length > 0) {
|
||||
l = lettres.splice(0, 1)[0]
|
||||
if (l === " ") {
|
||||
if (x >= l_max) {
|
||||
|
||||
x = 0
|
||||
y += 40
|
||||
for (let i = 0; i < mot.length; i++) {
|
||||
message[message.length-mot.length+i].x = x_start+x
|
||||
message[message.length-mot.length+i].y = y
|
||||
x += ctx.measureText(message[message.length-mot.length+i].lettre).width
|
||||
}
|
||||
}
|
||||
message.push({"lettre": " ", "x": x_start+x, "y": y, "fill": current_fill, "stroke": current_fill})
|
||||
x += ctx.measureText(" ").width
|
||||
mot = ""
|
||||
} else {
|
||||
mot += l
|
||||
message.push({"lettre": l, "x": x_start+x, "y": y, "fill": current_fill, "stroke": current_fill})
|
||||
x += ctx.measureText(l).width
|
||||
}
|
||||
}
|
||||
|
||||
if (x >= l_max) {
|
||||
x = 0
|
||||
y += 40
|
||||
for (let i = 0; i < mot.length; i++) {
|
||||
message[message.length-mot.length+i].x = x_start+x
|
||||
message[message.length-mot.length+i].y = y
|
||||
x += ctx.measureText(message[message.length-mot.length+i].lettre).width
|
||||
}
|
||||
}
|
||||
|
||||
return {"texte": message}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// 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 = 100+(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, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", W_3D+dx, (H_3D/3.5)*0.4 + y_image, "20pt Courier", longueur_max_recap))}
|
||||
}
|
||||
|
||||
function afficher_recap(){
|
||||
ecart_recap = 50
|
||||
w_recap = window.innerWidth-W_3D
|
||||
// texte du haut
|
||||
print_text(handle_text("Selected Viewpoints:", W_3D +(window.innerWidth-W_3D)/4, h_progress_bar + ecart_recap, "24pt Courier", 500))
|
||||
// fleche swap haut
|
||||
x_fleche_h = W_3D+ w_recap/2.5 - ecart_recap/2
|
||||
w_fleche_h = 20
|
||||
h_fleche_h = 20
|
||||
// fleche swap bas
|
||||
x_fleche_b = W_3D+ w_recap/2.5 - ecart_recap/2
|
||||
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 = 100+(20+ H_3D/3.5)*i
|
||||
ctx.drawImage(canvasMins[i],W_3D+ w_recap/2.5 +10, y_image, W_3D/3.5, H_3D/3.5)
|
||||
//draw_contour(W_3D+ w_recap/2.5, 100+(20+ H_3D/3.5)*i, W_3D/3.5, H_3D/3.5, "rgb(255,0,0)")
|
||||
//Fleche pour Switch haut
|
||||
if (nb_choix_fait > 1 && i > 0 && i < nb_choix_fait) {
|
||||
y_fleche_h = (H_3D/3.5)*0.4 + 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)
|
||||
//swapElements(checkbox_clicked_courant, i, i-1)
|
||||
//checkbox_clicked_courant[i-1].recap = "n°"+i
|
||||
//checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch haut de la pose n°"+(i+1)})
|
||||
clicked = false
|
||||
}
|
||||
}
|
||||
// Fleche pour Switch bas
|
||||
if (nb_choix_fait > 1 && i < nb_choix_fait-1) {
|
||||
y_fleche_b = (H_3D/3.5)*0.6 + 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)
|
||||
// swapElements(checkbox_clicked_courant, i, i+1)
|
||||
// checkbox_clicked_courant[i+1].recap = "n°"+(i+2)
|
||||
// checkbox_clicked_courant[i].recap = "n°"+(i+1)
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche switch bas de la pose n°"+(i+1)})
|
||||
clicked = false
|
||||
}
|
||||
}
|
||||
// Croix
|
||||
if (i < nb_choix_fait) {
|
||||
// checkbox
|
||||
//draw_empty_checkbox(25 + (5+0.3*canvasRenderer.height)*i, i)
|
||||
//afficher_check(checkbox_clicked_courant, i, 25 + (5+0.3*canvasRenderer.height)*i)
|
||||
// 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": "suppression de la pose n°"+(i+1)})
|
||||
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)
|
||||
// swapElements(checkbox_clicked_courant, j, j+1)
|
||||
// checkbox_clicked_courant[j+1].recap = "n°"+(j+2)
|
||||
// checkbox_clicked_courant[j].recap = "n°"+(j+1)
|
||||
}
|
||||
// vider le dernier recap poru les checkbox
|
||||
// checkbox_clicked_courant[nb_choix_demande-1].idx_checkbox = []
|
||||
// checkbox_clicked_courant[nb_choix_demande-1].mots = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// 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(17, 138, 178)", 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(17, 138, 178)", 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(17, 138, 178)", 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(17, 138, 178)", 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": "fleche gauche"})}
|
||||
function action_fleche_droite(){
|
||||
idx_i = (idx_i+7)%8
|
||||
interactions.push({"time": new Date().getTime(), "type": "fleche droite"})}
|
||||
function action_fleche_haut(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "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": "Affichage error à cause de fleche haut"})
|
||||
}
|
||||
idx_j = Math.max(idx_j-1,0)
|
||||
}
|
||||
function action_fleche_bas(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "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": "Affichage error à cause de fleche bas"})
|
||||
}
|
||||
idx_j = Math.min(idx_j+1,4)
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// BOUTON
|
||||
function afficher_bouton(dict_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": "bouton raz"})
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_pose(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton pose n°"+(nb_choix_fait+1)})
|
||||
// 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": "Affichage error pose déjà sélectionnée"})}
|
||||
|
||||
// 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": "Affichage error "+nb_choix_demande+" déjà 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, delta, idx_i, 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, canvasRenderer.height*0.3, canvasRenderer.height*0.25)
|
||||
nb_choix_fait = nb_choix_fait+1
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_retirer(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "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)
|
||||
// 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": "Affichage error pas de pose à retirer"})
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_reinitialiser(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton renitialiser"})
|
||||
if (liste_poses.length>0){
|
||||
liste_poses = []
|
||||
nb_choix_fait = 0
|
||||
// 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)
|
||||
}
|
||||
// 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}
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage error aucun choix fait donc pas de reinitialisation possible"})}
|
||||
}
|
||||
|
||||
function action_bouton_valider(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton valider"})
|
||||
// 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_vues = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "fin des 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
|
||||
setUp_3D(indice_mesh)
|
||||
}
|
||||
|
||||
// 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": "Affichage error à cause du bouton valider"})
|
||||
console.log("ccc")}
|
||||
// Error : un pbl à identifier
|
||||
else{
|
||||
console.log("PBL bouton valider")
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_raz(){
|
||||
//on efface les autres textes pop
|
||||
texte_temporaire = {}
|
||||
//affichage du message
|
||||
print_text(handle_text("Do you really want to restart the study?", window.innerWidth-w_bouton*2.1, window.innerHeight-h_bouton*2, "18pt Courier", 300))
|
||||
// affichage
|
||||
ctx.drawImage(imgs['croix'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.65, window.innerHeight-h_bouton +10, 60,50)
|
||||
ctx.drawImage(imgs['check'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
|
||||
// // survol croix
|
||||
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50)){
|
||||
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
|
||||
// } // survol check
|
||||
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50)){
|
||||
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
|
||||
// }
|
||||
|
||||
// click sur le check : on raz
|
||||
//draw_contour( (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
|
||||
if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){
|
||||
|
||||
init_variable(false);
|
||||
setUp_3D(indice_mesh)
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton raz check"})}
|
||||
// click sur la croix ou ailleurs : on clear
|
||||
//if (clicked && is_inside(xyMouseMove,W_3D*0.35+a+2*b+ecart*7 + w_bouton +400*1/2, H_3D+dy+ecart*2 + 100, 50,50)){
|
||||
if(clicked){
|
||||
bouton_raz_clicked = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton raz croix"})}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function traitement_bouton(){
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
// liste des checkbox clické pour chaque recap
|
||||
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
|
||||
// nuemro init de l'analyse
|
||||
num_analyse = 0
|
||||
idx_tache = 1 // ATTENTION ça commence à 1
|
||||
|
||||
// Variable
|
||||
function init_variable_analyse(){
|
||||
w_checkbox = 30
|
||||
h_checkbox = 30
|
||||
y_checkbox = window.innerHeight*0.75
|
||||
|
||||
// Analayse des choix avec les checkboxs
|
||||
keywords = ["1. De face", "2. De profil", "3. Debout", "4. Eyes contact", "5. toto"]
|
||||
nb_analyse_demande = 3
|
||||
|
||||
w_valider = w_bouton*1.2
|
||||
h_valider = h_bouton*1.2
|
||||
x_valider = (window.innerWidth/2)-w_valider/2
|
||||
y_valider = window.innerHeight-(h_valider*1.5)
|
||||
}
|
||||
|
||||
|
||||
function affichage_legende(pos){
|
||||
x_image = dx + (ecart_analyse+ W_3D/2.5)*pos
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
if (pos==0){print_text(handle_text("Best viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==1){print_text(handle_text("2nd viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
if (pos==2){print_text(handle_text("3rd viewpoint:", x_image, 220, "20pt Courier", longueur_max_recap))}
|
||||
}
|
||||
|
||||
function affichage_texte(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height
|
||||
// Texte
|
||||
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
|
||||
ctx.font = "bold 32pt Courier";
|
||||
ctx.fillText("Analysis about your choices", (window.innerWidth/3), 70)
|
||||
}
|
||||
|
||||
// idx_tache est la num de la tache à aller chercher dans all_ctxMins
|
||||
function affichage_analyse(idx_tache){
|
||||
ecart_analyse = 50
|
||||
dx = (window.innerWidth - canvasMins.length*(W_3D/2.5) - (canvasMins.length-1)*(ecart_analyse))*0.5
|
||||
canvasMins = all_canvasMins['tache_N'+idx_tache][1]
|
||||
for (let i=0; i<canvasMins.length; i++){
|
||||
affichage_legende(i)
|
||||
ctx.drawImage(canvasMins[i], dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5)
|
||||
draw_contour(dx + (ecart_analyse+ W_3D/2.5)*i, 250, W_3D/2.5, H_3D/2.5, "rgb(255,0,0)")
|
||||
}
|
||||
}
|
||||
|
||||
function progress_bar_analyse(N_analyse, N_analyse_total){
|
||||
if (N_analyse<=N_analyse_total){
|
||||
// background
|
||||
draw_rectangle(x_progress_bar, y_progress_bar, w_progress_bar, h_progress_bar, "rgb(255,255,255)", 1)
|
||||
// bar
|
||||
w_bar = ((N_analyse)/N_analyse_total)*w_progress_bar
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Bouton
|
||||
|
||||
function affichage_bouton_valider_analyse(){
|
||||
// si au moins un mot est coché
|
||||
if (checkbox_clicked_courant.idx_checkbox.length>0){
|
||||
// affichage bouton valider
|
||||
ctx.drawImage(boutons["valider"], x_valider, y_valider, w_valider, h_valider)
|
||||
// survol
|
||||
if(is_inside(xyMouseMove, x_valider, y_valider, w_valider, h_valider)){
|
||||
draw_rectangle(x_valider, y_valider, w_valider, h_valider, "rgb(200, 200, 200)", 0.6)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_valider_analyse(){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Bouton valider analyse."})
|
||||
// si au moins un mot est coché et qu'il reste des analyse à faire
|
||||
if (checkbox_clicked_courant.idx_checkbox.length>0){
|
||||
// sauvegarde des checkbox clikée et les mesh
|
||||
checkbox_clicked['analyse_N'+(num_analyse+1)] = {"mesh" : choix["tache_N"+idx_tache].mesh ,"idx" : checkbox_clicked_courant.idx_checkbox, "mots": checkbox_clicked_courant.mots}
|
||||
//RAZ pour la prochaine analyse
|
||||
checkbox_clicked_courant = {idx_checkbox:[], mots:[]}
|
||||
// analyse suivant
|
||||
num_analyse = num_analyse + 1
|
||||
// indice mesh da l'analyse suivante
|
||||
idx_tache = idx_tache + 1
|
||||
if (num_analyse<nb_analyse_demande){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Début analyse n°"+(num_analyse+1)})}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// Checkbox
|
||||
|
||||
function traitement_empty_checkbox(num_analyse){
|
||||
for (let i = 0 ; i < keywords.length; i++){
|
||||
// checkbox vide
|
||||
x_checkbox = 200 + 300*(i)
|
||||
ctx.drawImage(imgs["checkbox"], x_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// Texte
|
||||
print_text(handle_text(keywords[i], x_checkbox + w_checkbox + 30, y_checkbox + 20, "14pt Courier", longueur_max_error))
|
||||
// survol
|
||||
if (is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
|
||||
draw_rectangle(x_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
|
||||
}
|
||||
// clicked
|
||||
if (clicked && is_inside(xyMouseMove, x_checkbox, y_checkbox, w_checkbox, h_checkbox)){
|
||||
// s'il n'y a pas deja un check dessus
|
||||
// if (checkbox_clicked_courant.idx_checkbox.indexOf(i) == -1){
|
||||
// checkbox_clicked_courant.idx_checkbox.push(i)
|
||||
// checkbox_clicked_courant.mots.push(keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i]})
|
||||
// console.log('ajout '+keywords[i])
|
||||
// }
|
||||
|
||||
// else{
|
||||
// position_i = checkbox_clicked_courant.idx_checkbox.indexOf(i)
|
||||
// checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
|
||||
// checkbox_clicked_courant.mots.splice(position_i,1)
|
||||
// console.log('retrait '+keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[i]})
|
||||
// }
|
||||
check_ou_decheck(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function check_ou_decheck(pos){
|
||||
//s'il n'y a pas deja un check dessus
|
||||
if (checkbox_clicked_courant.idx_checkbox.indexOf(pos) == -1){
|
||||
checkbox_clicked_courant.idx_checkbox.push(pos)
|
||||
checkbox_clicked_courant.mots.push(keywords[pos])
|
||||
interactions.push({"time": new Date().getTime(), "type": "ajout check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[pos]})
|
||||
console.log('ajout '+keywords[pos])
|
||||
}
|
||||
|
||||
else{
|
||||
position_i = checkbox_clicked_courant.idx_checkbox.indexOf(pos)
|
||||
checkbox_clicked_courant.idx_checkbox.splice(position_i,1)
|
||||
checkbox_clicked_courant.mots.splice(position_i,1)
|
||||
console.log('retrait '+keywords[pos])
|
||||
interactions.push({"time": new Date().getTime(), "type": "retrait check sur : analyse n°"+(num_analyse+1)+", mot "+keywords[pos]})
|
||||
}
|
||||
}
|
||||
|
||||
function draw_check(){
|
||||
idx_check = checkbox_clicked_courant.idx_checkbox
|
||||
// pour chacune de ces checkbox cliquée on affiche un check
|
||||
for (let i = 0 ; i < idx_check.length; i++){
|
||||
pos = idx_check[i]
|
||||
x_checkbox = 200 + 300*(pos)
|
||||
ctx.drawImage(imgs["check"], x_checkbox-5 , y_checkbox-5, w_checkbox+10, h_checkbox+10)
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
///////////////////// MAIN
|
||||
function traitement_fin(){
|
||||
if (num_analyse < nb_analyse_demande){
|
||||
// affiche les textes de la page sauf les ceheckbox
|
||||
affichage_texte()
|
||||
// afficher les checkbox et gerer les click ou declick
|
||||
traitement_empty_checkbox(num_analyse)
|
||||
// affiche les check vert en fonction de ce qu'il y a dans checkbox_clicked_courant
|
||||
draw_check()
|
||||
// affiche les nb_demande_choix images recap
|
||||
affichage_analyse(idx_tache)
|
||||
// affiche progress bar
|
||||
progress_bar_analyse(num_analyse, nb_analyse_demande)
|
||||
// bouton valider
|
||||
affichage_bouton_valider_analyse()
|
||||
// action si bouton valider
|
||||
if (clicked && is_inside(xyMouseMove, x_valider, y_valider, w_valider, h_valider)){
|
||||
action_bouton_valider_analyse()
|
||||
}
|
||||
}
|
||||
else{
|
||||
page_analyse = false
|
||||
interactions.push({"time": new Date().getTime(), "type": "Fin analyse"})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// function draw_empty_checkbox(y_img_recap, num_recap){
|
||||
// // croix
|
||||
// x_checkbox = W_3D+dx*2+longueur_max_recap+w_fleche_b+canvasMins[0].width+w_croix*2
|
||||
// w_checkbox = 20
|
||||
// h_checkbox = 20
|
||||
// dx_checkbox = 0
|
||||
// for (let i = 0 ; i < keywords.length; i++){
|
||||
// if (i%2 == 0){dx_checkbox = i/2 * 180}
|
||||
// // checkbox vide
|
||||
// y_checkbox = 20 + y_img_recap + 80*(i%2)
|
||||
// ctx.drawImage(imgs["checkbox"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// print_text(handle_text(keywords[i], x_checkbox + dx_checkbox + 30, y_checkbox + 20, "14pt Courier", longueur_max_error))
|
||||
// // survol
|
||||
// if (xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
|
||||
// draw_rectangle(x_checkbox + dx_checkbox, y_checkbox, w_checkbox, h_checkbox, "rgb(0, 255, 0)", alpha_survol)
|
||||
// }
|
||||
// // clicked
|
||||
// if (clicked && xyMouseMove.x >= x_checkbox + dx_checkbox && xyMouseMove.x <= x_checkbox + dx_checkbox + w_checkbox && xyMouseMove.y > y_checkbox && xyMouseMove.y < y_checkbox+h_checkbox ){
|
||||
// // s'il n'y a pas deja un check dessus
|
||||
// if (checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i) == -1){
|
||||
// checkbox_clicked_courant[num_recap].idx_checkbox.push(i)
|
||||
// checkbox_clicked_courant[num_recap].mots.push(keywords[i])
|
||||
// interactions.push({"time": new Date().getTime(), "type": "ajout check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
|
||||
// else{
|
||||
// position_i = checkbox_clicked_courant[num_recap].idx_checkbox.indexOf(i)
|
||||
// checkbox_clicked_courant[num_recap].idx_checkbox.splice(position_i,1)
|
||||
// checkbox_clicked_courant[num_recap].mots.splice(position_i,1)
|
||||
// interactions.push({"time": new Date().getTime(), "type": "retrait check sur : recap n°"+(num_recap+1)+", mot "+keywords[i]})}
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // affichage des check pour le recap n°num_recap qui a un y = y_img_recap
|
||||
// function afficher_check(liste_check, num_recap, y_img_recap){
|
||||
// dx_checkbox = 0
|
||||
// idx_check = liste_check[num_recap].idx_checkbox
|
||||
// // pour chacune de ces checkbox cliquée on affiche un check
|
||||
// for (let i = 0 ; i < idx_check.length; i++){
|
||||
// pos = idx_check[i]
|
||||
// if (pos%2 == 0){dx_checkbox = pos/2 * 180}
|
||||
// else{dx_checkbox = (pos-1)/2 * 180}
|
||||
// y_checkbox = 20 + y_img_recap + 80*(pos%2)
|
||||
// ctx.drawImage(imgs["check"], x_checkbox + dx_checkbox , y_checkbox, w_checkbox, h_checkbox)
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,38 @@
|
||||
scale_bouton_commencer = 0.6
|
||||
|
||||
function affichage_tuto(){
|
||||
w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width
|
||||
h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height
|
||||
// Texte
|
||||
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
|
||||
ctx.font = "bold 58pt Courier";
|
||||
ctx.fillText("Are you ready ??????", (window.innerWidth/2)-450, innerHeight/2 -100)
|
||||
|
||||
// Bouton commencer
|
||||
ctx.drawImage(boutons["commencer"], (window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer)
|
||||
}
|
||||
|
||||
function survol_commencer(){
|
||||
if(xyMouseMove.x >= (window.innerWidth/2)-(w_bouton_commencer/2) && xyMouseMove.x <= (window.innerWidth/2)-(w_bouton_commencer/2) + w_bouton_commencer && xyMouseMove.y > innerHeight/2 && xyMouseMove.y < innerHeight/2 + h_bouton_commencer){
|
||||
draw_rectangle((window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6)
|
||||
}
|
||||
}
|
||||
|
||||
function action_bouton_commencer(s){
|
||||
page_tuto = false
|
||||
page_vues = true
|
||||
interactions.push({"time": new Date().getTime(), "type": "bouton commencer"+s})
|
||||
}
|
||||
|
||||
|
||||
function traitement_tuto(){
|
||||
affichage_tuto()
|
||||
survol_commencer()
|
||||
if (clicked && click_inside(xyMouseDown, (window.innerWidth/2)-(w_bouton_commencer/2), innerHeight/2, w_bouton_commencer, h_bouton_commencer)){
|
||||
// on passe aux choix
|
||||
action_bouton_commencer("titi")
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,458 @@
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// MAIN
|
||||
// initialisation des variables
|
||||
init_variable(true)
|
||||
// initialisation du canvas : load des images
|
||||
setUp_3D(indice_mesh)
|
||||
init_data()
|
||||
//init_clavier()
|
||||
// action
|
||||
animate()
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
function init_variable(premier_appel){
|
||||
///////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////
|
||||
// CE QUE L'ON RECUPERE A LA FIN
|
||||
// dictionnaire avec les choix pour TOUS les mesh
|
||||
choix = {}
|
||||
// dictionnaire avec les checkbox pour TOUS les mesh
|
||||
checkbox_clicked = {}
|
||||
///////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////
|
||||
|
||||
|
||||
// SOURIS
|
||||
// gestion de la souris : pour savoir si on a clické et sur quelle image on a clické
|
||||
clicked = false
|
||||
which_clicked_bouton = -1
|
||||
which_clicked_fleche = -1
|
||||
bouton_raz_clicked = false
|
||||
|
||||
// TEMPS
|
||||
// pour avoir un délai après le click
|
||||
//time_click = new Date().getTime()
|
||||
if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": "start"}]}
|
||||
|
||||
// Couleur
|
||||
alpha_survol = 0.3
|
||||
|
||||
// DATA github
|
||||
indice_mesh = 0 // indice du premier mesh à visionner
|
||||
mesh_courant = "nope" // nom des mesh
|
||||
// nombre de mesh a visionner AU TOTAL
|
||||
nb_mesh = 3
|
||||
|
||||
// Choix des N poses demandé pour les mesh courant
|
||||
choix_courant = {}
|
||||
// Angles des poses init choisies pour le mesh courant
|
||||
liste_poses = []
|
||||
// Nb init courant de pose choisies
|
||||
nb_choix_fait = 0
|
||||
// nombre de pose qu'on demande de choisir pour chaque mesh visualisé
|
||||
nb_choix_demande = 3
|
||||
// Numero init de la tache courant --> il y en a autant que de mesh à voir
|
||||
num_tache = 1
|
||||
|
||||
// Texte
|
||||
texte_temporaire = {}
|
||||
// temps de pop des messages
|
||||
temps_pop = 1000
|
||||
// text qui correspond à des erreurs de bouton
|
||||
longueur_max_error = 700
|
||||
// text
|
||||
longueur_max_recap = 350
|
||||
|
||||
// Fenetre 3D
|
||||
scale_W_3D=0.6
|
||||
scale_H_3D=0.7
|
||||
W_3D = window.innerWidth*scale_W_3D
|
||||
H_3D = window.innerHeight*scale_H_3D
|
||||
|
||||
// Rayon pour les cameras
|
||||
R = 2.5
|
||||
|
||||
// Enchainement des pages
|
||||
page_tuto = true // true
|
||||
page_vues = false // false
|
||||
page_analyse = false
|
||||
|
||||
// Pour afiicher les recap dans la partie analys,e on les conserve tous
|
||||
all_ctxMins = {}
|
||||
all_canvasMins = {}
|
||||
|
||||
// pour initialiser les claviers à chaque page
|
||||
premier_tour_page_tuto = true
|
||||
premier_tour_page_vues = true
|
||||
premier_tour_page_analyse = true
|
||||
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
// 3D
|
||||
|
||||
function setUp_light(rayon){
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 0.22;
|
||||
// Light
|
||||
const light1 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light1 );
|
||||
const dir_light1 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light1.position.set(rayon, 0, 0);
|
||||
scene.add(dir_light1);
|
||||
|
||||
const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light2 );
|
||||
const dir_light2 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light2.position.set(-rayon, 0, -0);
|
||||
scene.add(dir_light2);
|
||||
|
||||
const light3 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light3 );
|
||||
const dir_light3 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light3.position.set(0, -rayon, 0);
|
||||
scene.add(dir_light3);
|
||||
|
||||
const light4 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
||||
scene.add( light4 );
|
||||
const dir_light4 = new THREE.DirectionalLight(color, intensity);
|
||||
dir_light4.position.set(0, rayon, -0);
|
||||
scene.add(dir_light4);
|
||||
|
||||
}
|
||||
|
||||
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
|
||||
function setUp_3D(idx_mesh){
|
||||
// Randommiser la première vue quand oon loed le mesh, pour éviter d'avoir de l'influence
|
||||
idx_i_init = Math.floor(Math.random()*8)
|
||||
idx_j_init = Math.floor(Math.random()*5)
|
||||
theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4))
|
||||
delta_init = 2*Math.PI * (idx_i_init/8)
|
||||
|
||||
// initialisation
|
||||
idx_i = idx_i_init
|
||||
idx_j = idx_j_init
|
||||
|
||||
// Caméra
|
||||
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
|
||||
camera.position.x = 2;
|
||||
camera.position.y = 0;
|
||||
camera.position.z = 0;
|
||||
//camera.lookAt (new THREE.Vector3(0,0,0))
|
||||
scene = new THREE.Scene();
|
||||
scene.add(camera)
|
||||
renderer = new THREE.WebGLRenderer( {
|
||||
antialias: true,
|
||||
preserveDrawingBuffer: true } );
|
||||
|
||||
renderer.setSize(W_3D , H_3D);
|
||||
|
||||
old_renderer = document.getElementById('renderer')
|
||||
if (old_renderer!= null){
|
||||
old_renderer.parentElement.removeChild(old_renderer)
|
||||
}
|
||||
|
||||
renderer.domElement.id = 'renderer'
|
||||
|
||||
renderer.domElement.style.marginTop = (H_3D*0.04)+"px"; // même valeur que h_progress_bar dans fonction_choix_vues
|
||||
document.body.appendChild( renderer.domElement );
|
||||
controls = new THREE.OrbitControls( camera );
|
||||
controls.enableZoom = false;
|
||||
controls.keys = {}
|
||||
controls.mouseButtons = {}
|
||||
controls.update();
|
||||
|
||||
|
||||
canvasRenderer = document.getElementById("renderer")
|
||||
|
||||
canvas = document.getElementById("canvas")
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
ctx = canvas.getContext("2d")
|
||||
|
||||
|
||||
// On crée autant de canvas que de choix demandé,
|
||||
// ces canvas seront vide tant qu'il n'y a pas de vue sélectionnée
|
||||
// puis updates en fonction des actions faites
|
||||
canvasMins = []
|
||||
ctxMins = []
|
||||
for (let i = 0; i < nb_choix_demande; i++) {
|
||||
let c = document.createElement("canvas")
|
||||
c.width = 200
|
||||
c.heigth = 200
|
||||
let ctx_c = c.getContext("2d")
|
||||
canvasMins.push(c)
|
||||
ctxMins.push(ctx_c)
|
||||
}
|
||||
|
||||
setUp_light(R)
|
||||
|
||||
// Data 3D
|
||||
obj_file = ['dragon_update_user_study.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj']
|
||||
const objLoader = new THREE.OBJLoader2();
|
||||
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file[idx_mesh], (event) => {
|
||||
const root = event.detail.loaderRootNode;
|
||||
scene.add(root);
|
||||
});
|
||||
mesh_courant = obj_file[idx_mesh].split('_')[0]
|
||||
choix_courant['obj_file'] = obj_file[idx_mesh]
|
||||
choix_courant['mesh'] = mesh_courant
|
||||
choix_courant['position_init_idx_i'] = idx_i_init
|
||||
choix_courant['position_init_idx_j'] =idx_j_init
|
||||
choix_courant['theta_init'] = theta_init
|
||||
choix_courant['delta_init'] = delta_init
|
||||
|
||||
// pour savoir quel mesh on affiche
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage Mesh random : "+mesh_courant+" en idx_i, idx_j : ("+idx_i_init+", "+idx_j_init+")"})
|
||||
interactions.push({"time": new Date().getTime(), "type": "Affichage Mesh random : "+mesh_courant+" en theta, delta : ("+theta_init+", "+delta_init+")"})
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
// CLAVIER
|
||||
|
||||
function action_clavier_tuto(event){
|
||||
switch (event.key){
|
||||
// selectionner pose
|
||||
case ' ' :
|
||||
action_bouton_commencer('clavier')
|
||||
break;
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_commencer('clavier')
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function action_clavier_vues(event){
|
||||
switch (event.key){
|
||||
case 'ArrowLeft':
|
||||
console.log("deplacement K-G")
|
||||
action_fleche_gauche()
|
||||
//idx_i = (idx_i+1)%8
|
||||
break;
|
||||
case 'ArrowRight' :
|
||||
console.log("deplacement K-D")
|
||||
action_fleche_droite()
|
||||
//idx_i = (idx_i+7)%8
|
||||
break;
|
||||
case 'ArrowDown' :
|
||||
console.log("deplacement K-B")
|
||||
action_fleche_bas()
|
||||
//idx_j = Math.min(idx_j+1,4)
|
||||
break;
|
||||
case 'ArrowUp' :
|
||||
console.log("deplacement K-H")
|
||||
action_fleche_haut()
|
||||
//idx_j = Math.max(idx_j-1,0)
|
||||
break;
|
||||
// selectionner pose
|
||||
case ' ' :
|
||||
action_bouton_pose()
|
||||
break;
|
||||
// retirer
|
||||
case 'Backspace':
|
||||
action_bouton_retirer()
|
||||
break;
|
||||
// reintialiser
|
||||
case 'Delete':
|
||||
action_bouton_reinitialiser()
|
||||
break;
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_valider()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function action_clavier_analyse(event){
|
||||
switch (event.key){
|
||||
// selectionner pose
|
||||
// valider
|
||||
case 'Enter':
|
||||
action_bouton_valider_analyse()
|
||||
break;
|
||||
case '1':
|
||||
check_ou_decheck(0)
|
||||
break;
|
||||
case '2':
|
||||
check_ou_decheck(1)
|
||||
break;
|
||||
case '3':
|
||||
check_ou_decheck(2)
|
||||
break;
|
||||
case '4':
|
||||
check_ou_decheck(3)
|
||||
break;
|
||||
case '5':
|
||||
check_ou_decheck(4)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function init_clavier_tuto(){
|
||||
document.addEventListener("keydown", action_clavier_tuto)
|
||||
}
|
||||
|
||||
function init_clavier_vues(){
|
||||
document.addEventListener("keydown", action_clavier_vues)
|
||||
}
|
||||
|
||||
function init_clavier_analyse(){
|
||||
document.addEventListener("keydown", action_clavier_analyse)
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
function init_data(){
|
||||
|
||||
ctx.font = " 18pt Courier";
|
||||
ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
|
||||
ctx.fillStyle = "rgb(255, 255, 255)"
|
||||
// Data 2D
|
||||
imgs = {}
|
||||
imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_droite.png')//new_image("graphics/fleche_droite.png")
|
||||
imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_gauche.png') //new_image("graphics/fleche_gauche.png")
|
||||
imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_bas.png') //new_image("graphics/fleche_bas.png")
|
||||
imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Fleches_jolie/fleche_haut.png') //new_image("graphics/fleche_haut.png")
|
||||
imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/croix.png')
|
||||
//imgs["tmp"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/tmp.jpg')
|
||||
imgs["check"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/check.png')
|
||||
imgs["checkbox"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Autres_jolie/empty_checkbox.png')
|
||||
// /// Boutons
|
||||
boutons = {}
|
||||
boutons["reinitialiser"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_reinitialiser.png')
|
||||
boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_valider.png')
|
||||
boutons["choix_pose"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_pose.png')
|
||||
boutons["retirer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_retirer.png')
|
||||
boutons["commencer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_commencer.png')
|
||||
boutons["raz"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/Boutons_jolie/bouton_raz.png')
|
||||
|
||||
// Mouse
|
||||
xyMouseMove = {"x": -1, "y": -1}
|
||||
xyMouseDown = {"x": -1, "y": -1}
|
||||
xyMouseUp = {"x": -1, "y": -1}
|
||||
|
||||
canvas.addEventListener("mousemove", function(event) { xyMouseMove = getMousePos(canvas, event)}, false)
|
||||
canvas.addEventListener("mousedown", function(event) {
|
||||
xyMouseDown = getMousePos(canvas, event)
|
||||
clicked = true }, false)
|
||||
canvas.addEventListener("mouseup", function(event) { xyMouseUp = getMousePos(canvas, event)}, false)
|
||||
|
||||
console.log("fin init")
|
||||
}
|
||||
|
||||
|
||||
function animate() {
|
||||
// Temps à chaque animate
|
||||
time_animate = new Date().getTime()
|
||||
|
||||
// page tuto
|
||||
if (page_tuto){
|
||||
if (premier_tour_page_tuto){
|
||||
init_clavier_tuto()
|
||||
premier_tour_page_tuto=false}
|
||||
traitement_tuto()
|
||||
}
|
||||
|
||||
// page de choix
|
||||
if (page_vues && num_tache <= nb_mesh){
|
||||
// on enlève les touches du clavier associé à la page tuto
|
||||
document.removeEventListener("keydown", action_clavier_tuto)
|
||||
//init touche clavier
|
||||
if(premier_tour_page_vues){
|
||||
init_clavier_vues()
|
||||
premier_tour_page_vues = false
|
||||
}
|
||||
// Variable pour les fonctions
|
||||
init_variable_fonction(boutons, imgs)
|
||||
// Nettoyage fleche
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
// Affichage bouton RAZ
|
||||
if (bouton_raz_clicked == true){action_bouton_raz()}
|
||||
// Affichage message pop
|
||||
if (Object.keys(texte_temporaire).length >0){
|
||||
if (time_animate > texte_temporaire.t_end){texte_temporaire = {}}
|
||||
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)
|
||||
// Affichage fleche
|
||||
afficher_fleche(imgs)
|
||||
// affichage de sboutons
|
||||
afficher_bouton(boutons)
|
||||
if (canvasRenderer === null) {canvasRenderer = document.getElementById("renderer")}
|
||||
// traitement fleche (surval + click)
|
||||
traitement_fleche()
|
||||
// traitement bouton : (survol + click)
|
||||
traitement_bouton()
|
||||
// afficher + maj du recap de pose choisie : affichage des vue des poses
|
||||
afficher_recap()
|
||||
// Affichage texte recap
|
||||
for (p=0; p<liste_poses.length; p++){affichage_texte_recap(p)}
|
||||
// affichage 3D
|
||||
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
|
||||
}
|
||||
|
||||
if (page_analyse){
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_vues)
|
||||
// inti clavier
|
||||
if(premier_tour_page_analyse){
|
||||
interactions.push({"time": new Date().getTime(), "type": "Début analyse n°1"})
|
||||
init_clavier_analyse()
|
||||
premier_tour_page_analyse = false}
|
||||
init_variable_analyse()
|
||||
traitement_fin()
|
||||
}
|
||||
// page finale
|
||||
if (!page_tuto && !page_vues && !page_analyse){
|
||||
// on enlève les touches du clavier associé à la page vues
|
||||
document.removeEventListener("keydown", action_clavier_analyse)
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
|
||||
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 = "bold 58pt Courier";
|
||||
ctx.fillText("Done, thx you :)", (window.innerWidth/2)-450, innerHeight/2 -100)
|
||||
console.log('Fin interface3DD')
|
||||
|
||||
// ecriture
|
||||
// Création de la requête HTTP à envoyer au serveur.
|
||||
let xhr = new XMLHttpRequest();
|
||||
// Préparation de la requête pour l'envoi en POST vers l'url.
|
||||
xhr.open('POST', '/data');
|
||||
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
|
||||
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
||||
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
|
||||
xhr.onreadystatechange = function() {
|
||||
// Si la requête est terminée, et que la réponse n'est pas une erreur.
|
||||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
}
|
||||
// Envoi de la requête vers le serveur, avec les données.
|
||||
xhr.send(JSON.stringify(choix));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Boucle sur animate
|
||||
requestAnimationFrame( animate );
|
||||
// RAZ
|
||||
clicked = false
|
||||
which_clicked_fleche = -1
|
||||
which_clicked_bouton = -1
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
// On récupère l'élément HTML dont l'id est username (champ que l'utilisateur va remplir).
|
||||
let usernameInput = document.getElementById('username');
|
||||
|
||||
// On récupère l'élément HTML dont l'id est button (bouton à cliquer pour valider la requête).
|
||||
let button = document.getElementById('button');
|
||||
|
||||
// Ajout du listener pour déclencher le traitement lorsque le bouton est cliqué.
|
||||
button.addEventListener('click', function() {
|
||||
|
||||
// Création de la requête HTTP à envoyer au serveur.
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
// Préparation de la requête pour l'envoi en POST vers l'url.
|
||||
xhr.open('POST', '/data');
|
||||
|
||||
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
|
||||
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
|
||||
xhr.onreadystatechange = function() {
|
||||
|
||||
// Si la requête est terminée, et que la réponse n'est pas une erreur.
|
||||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||||
|
||||
console.log(xhr.responseText);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Envoi de la requête vers le serveur, avec les données.
|
||||
xhr.send('username=' + usernameInput.value);
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
body {
|
||||
background-color: rgb(3, 26, 33);
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(3, 26, 33, 0);
|
||||
}
|
||||
|
||||
.container{
|
||||
height:20px;
|
||||
background-color: #CCC;
|
||||
position: relative
|
||||
}
|
||||
+48359
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user